refactor: prepare for next headless date input

Author: javadbat

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog  
 
+## [5.9.0] - 2025-06-05
+
+### new features:
+- add jsdoc to some public attribute and properties for more clarity.
+### refactor:
+- extract the validations and typing logic from component to stateless functions for next release plan of headless date input.
+- refactor `beforeinput` events and move logic to the `utils`.
+- remove `this` dependency from utils functions and make them stateless.
+
 ## [5.8.1] - 2025-05-21
 ### fixed:
 - fix name assignment on react 19

deno.json

@@ -5,7 +5,7 @@
     },
     "nodeModulesDir":"manual",
 
-    "version": "0.0.4",
+    "version": "0.0.5",
     "exports": "./mod.ts",
     "imports": {
       "jb-calendar": "npm:jb-calendar@4.1.5",

lib/constants.ts

@@ -0,0 +1,14 @@
+export const emptyInputValueString = '    /  /  ';
+/**
+ * format of your input date strings. it effects value, min & max or other value that provides in string type to the component.
+ */
+export const inputFormat = 'YYYY/MM/DD';
+export const inputRegex = /^(?<year>[\u06F0-\u06F90-9,\s]{4})\/(?<month>[\u06F0-\u06F90-9,\s]{2})\/(?<day>[\u06F0-\u06F90-9,\s]{2})$/g
+
+export const dictionary = {
+  errors: {
+    minRangeViolation: 'تاریخ انتخابی کمتر از بازه مجاز است',
+    maxRangeViolation: 'تاریخ انتخابی بیشتر از بازه مجاز است',
+    required:'لطفا مقدار تاریخ را کامل وارد کنید',
+  }
+}

lib/date-factory.ts

@@ -1,6 +1,6 @@
 
 import { InputTypes, JBDateInputValueObject, ValueTypes, ValueType, InputType, InputtedValueInObject, DateValidResult } from './types';
-import { getEmptyValueObject } from './helpers';
+import { getEmptyValueObject } from './utils';
 import { getYear, getMonth, getTime as getTimeStamp, isLeapYear, getDate } from 'date-fns';
 import { newDate, isLeapYear as isJalaliLeapYear, getYear as getJalaliYear, getMonth as getJalaliMonth, getDate as getJalaliDate, getHours, getMinutes, getSeconds, getMilliseconds } from 'date-fns-jalali';
 

lib/helpers.ts

@@ -7,16 +7,16 @@
 
 .jb-date-input-web-component {
     width: 100%;
-    margin: var(--jb-date-input-margin, 0 0);
+    margin: var(--margin);
     position: relative;
 
     &:focus-visible {
         outline: none;
     }
     .calendar-trigger {
-        display: var(--jb-date-input-calendar-trigger-display, block);
-        width: var(--jb-date-input-calendar-trigger-width, 1.5rem);
-        height: var(--jb-date-input-calendar-trigger-height, 1.5rem);
+        display: var(--calendar-trigger-display, block);
+        width: var(--calendar-trigger-width, 1.5rem);
+        height: var(--calendar-trigger-height, 1.5rem);
         cursor: pointer;
         object-fit: contain;
         &.--active {