@nuralyui/input 0.0.5 → 0.0.7

package/utils/input-validation.utils.js

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Validation utilities for input components
+ */
+export class InputValidationUtils {
+    /**
+     * Validates numeric properties (min, max, step) to ensure they are valid numbers
+     */
+    static validateNumericProperties(type, min, max, step) {
+        if (type === "number" /* INPUT_TYPE.NUMBER */) {
+            if (min && isNaN(Number(min))) {
+                console.warn(`Invalid min value: "${min}" is not a valid number`);
+            }
+            if (max && isNaN(Number(max))) {
+                console.warn(`Invalid max value: "${max}" is not a valid number`);
+            }
+            if (step && isNaN(Number(step))) {
+                console.warn(`Invalid step value: "${step}" is not a valid number`);
+            }
+            if (min && max && Number(min) >= Number(max)) {
+                console.warn(`Invalid range: min value (${min}) should be less than max value (${max})`);
+            }
+        }
+    }
+    /**
+     * Prevents non-numeric characters from being typed in number inputs
+     */
+    static preventNonNumericInput(keyDownEvent, min) {
+        const key = keyDownEvent.key;
+        const target = keyDownEvent.target;
+        const currentValue = target.value;
+        const cursorPosition = target.selectionStart || 0;
+        // Allow control keys (backspace, delete, tab, escape, enter, arrow keys, etc.)
+        const allowedControlKeys = [
+            'Backspace', 'Delete', 'Tab', 'Escape', 'Enter',
+            'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+            'Home', 'End', 'PageUp', 'PageDown'
+        ];
+        // Allow Ctrl/Cmd combinations (copy, paste, select all, etc.)
+        if (keyDownEvent.ctrlKey || keyDownEvent.metaKey) {
+            return;
+        }
+        // Allow control keys
+        if (allowedControlKeys.includes(key)) {
+            return;
+        }
+        // Allow digits
+        if (/^\d$/.test(key)) {
+            return;
+        }
+        // Allow decimal point (.) only once and allow it at the beginning for values like ".5"
+        if (key === '.' || key === ',') {
+            const hasDecimal = currentValue.includes('.') || currentValue.includes(',');
+            if (!hasDecimal) {
+                return;
+            }
+        }
+        // Allow minus sign (-) only at the beginning and if min allows negative numbers
+        if (key === '-') {
+            const hasMinusSign = currentValue.includes('-');
+            const minAllowsNegative = !min || Number(min) < 0;
+            if (!hasMinusSign && cursorPosition === 0 && minAllowsNegative) {
+                return;
+            }
+        }
+        // Allow plus sign (+) only at the beginning
+        if (key === '+') {
+            const hasPlusSign = currentValue.includes('+');
+            if (!hasPlusSign && cursorPosition === 0) {
+                return;
+            }
+        }
+        // If we reach here, prevent the key input
+        keyDownEvent.preventDefault();
+    }
+    /**
+     * Validates a numeric value against min/max constraints
+     */
+    static validateNumericValue(value, min, max) {
+        const warnings = [];
+        if (!value) {
+            return { isValid: true, warnings };
+        }
+        const numericValue = Number(value);
+        if (isNaN(numericValue)) {
+            return {
+                isValid: false,
+                warnings: [`Invalid numeric value: "${value}"`]
+            };
+        }
+        // Check min/max constraints
+        if (min && numericValue < Number(min)) {
+            warnings.push(`Value ${numericValue} is below minimum ${min}`);
+        }
+        if (max && numericValue > Number(max)) {
+            warnings.push(`Value ${numericValue} is above maximum ${max}`);
+        }
+        return { isValid: true, warnings };
+    }
+}
+//# sourceMappingURL=input-validation.utils.js.map

package/utils/input-validation.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-validation.utils.js","sourceRoot":"","sources":["../../../../src/components/input/utils/input-validation.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { INPUT_TYPE } from '../input.types.js';\n\n/**\n * Validation utilities for input components\n */\nexport class InputValidationUtils {\n  \n  /**\n   * Validates numeric properties (min, max, step) to ensure they are valid numbers\n   */\n  static validateNumericProperties(\n    type: string,\n    min?: string,\n    max?: string,\n    step?: string\n  ): void {\n    if (type === INPUT_TYPE.NUMBER) {\n      if (min && isNaN(Number(min))) {\n        console.warn(`Invalid min value: \"${min}\" is not a valid number`);\n      }\n      if (max && isNaN(Number(max))) {\n        console.warn(`Invalid max value: \"${max}\" is not a valid number`);\n      }\n      if (step && isNaN(Number(step))) {\n        console.warn(`Invalid step value: \"${step}\" is not a valid number`);\n      }\n      if (min && max && Number(min) >= Number(max)) {\n        console.warn(`Invalid range: min value (${min}) should be less than max value (${max})`);\n      }\n    }\n  }\n\n  /**\n   * Prevents non-numeric characters from being typed in number inputs\n   */\n  static preventNonNumericInput(\n    keyDownEvent: KeyboardEvent,\n    min?: string\n  ): void {\n    const key = keyDownEvent.key;\n    const target = keyDownEvent.target as HTMLInputElement;\n    const currentValue = target.value;\n    const cursorPosition = target.selectionStart || 0;\n\n    // Allow control keys (backspace, delete, tab, escape, enter, arrow keys, etc.)\n    const allowedControlKeys = [\n      'Backspace', 'Delete', 'Tab', 'Escape', 'Enter',\n      'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',\n      'Home', 'End', 'PageUp', 'PageDown'\n    ];\n\n    // Allow Ctrl/Cmd combinations (copy, paste, select all, etc.)\n    if (keyDownEvent.ctrlKey || keyDownEvent.metaKey) {\n      return;\n    }\n\n    // Allow control keys\n    if (allowedControlKeys.includes(key)) {\n      return;\n    }\n\n    // Allow digits\n    if (/^\\d$/.test(key)) {\n      return;\n    }\n\n    // Allow decimal point (.) only once and allow it at the beginning for values like \".5\"\n    if (key === '.' || key === ',') {\n      const hasDecimal = currentValue.includes('.') || currentValue.includes(',');\n      if (!hasDecimal) {\n        return;\n      }\n    }\n\n    // Allow minus sign (-) only at the beginning and if min allows negative numbers\n    if (key === '-') {\n      const hasMinusSign = currentValue.includes('-');\n      const minAllowsNegative = !min || Number(min) < 0;\n      if (!hasMinusSign && cursorPosition === 0 && minAllowsNegative) {\n        return;\n      }\n    }\n\n    // Allow plus sign (+) only at the beginning\n    if (key === '+') {\n      const hasPlusSign = currentValue.includes('+');\n      if (!hasPlusSign && cursorPosition === 0) {\n        return;\n      }\n    }\n\n    // If we reach here, prevent the key input\n    keyDownEvent.preventDefault();\n  }\n\n  /**\n   * Validates a numeric value against min/max constraints\n   */\n  static validateNumericValue(\n    value: string,\n    min?: string,\n    max?: string\n  ): { isValid: boolean; warnings: string[] } {\n    const warnings: string[] = [];\n    \n    if (!value) {\n      return { isValid: true, warnings };\n    }\n\n    const numericValue = Number(value);\n    \n    if (isNaN(numericValue)) {\n      return { \n        isValid: false, \n        warnings: [`Invalid numeric value: \"${value}\"`] \n      };\n    }\n\n    // Check min/max constraints\n    if (min && numericValue < Number(min)) {\n      warnings.push(`Value ${numericValue} is below minimum ${min}`);\n    }\n    if (max && numericValue > Number(max)) {\n      warnings.push(`Value ${numericValue} is above maximum ${max}`);\n    }\n\n    return { isValid: true, warnings };\n  }\n}\n"]}

package/input.constant.d.ts

@@ -1,18 +0,0 @@
-export declare const enum INPUT_STATE {
-    Default = "default",
-    Error = "error",
-    Warning = "warning"
-}
-export declare const enum INPUT_SIZE {
-    Large = "large",
-    Medium = "medium",
-    Small = "small"
-}
-export declare const enum INPUT_TYPE {
-    PASSWORD = "password",
-    TEXT = "text",
-    NUMBER = "number",
-    CALENDAR = "calendar"
-}
-export declare const EMPTY_STRING = "";
-//# sourceMappingURL=input.constant.d.ts.map

package/input.constant.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.constant.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.constant.ts"],"names":[],"mappings":"AAAA,0BAAkB,WAAW;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,0BAAkB,UAAU;IAC1B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,0BAAkB,UAAU;IAC1B,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,eAAO,MAAM,YAAY,KAAK,CAAC"}

package/input.constant.js

@@ -1,2 +0,0 @@
-export const EMPTY_STRING = '';
-//# sourceMappingURL=input.constant.js.map

package/input.constant.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.constant.js","sourceRoot":"","sources":["../../../src/components/input/input.constant.ts"],"names":[],"mappings":"AAmBA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum INPUT_STATE {\n  Default = 'default',\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport const enum INPUT_SIZE {\n  Large = 'large',\n  Medium = 'medium',\n  Small = 'small',\n}\n\nexport const enum INPUT_TYPE {\n  PASSWORD = 'password',\n  TEXT = 'text',\n  NUMBER = 'number',\n  CALENDAR = 'calendar',\n}\n\nexport const EMPTY_STRING = '';\n"]}

package/input.style.variable..d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.style.variable..d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.variable..ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAgG1B,CAAC"}

package/input.style.variable..js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.style.variable..js","sourceRoot":"","sources":["../../../src/components/input/input.style.variable..ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGhC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n  :host {\n    --hybrid-input-local-background-color: #f4f4f4;\n    --hybrid-input-local-text-color: #000000;\n    --hybrid-input-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n    --hybrid-input-local-font-size:13px;\n    --hybrid-input-local-label-color: #525252;\n    --hybrid-input-local-placeholder-color: #a8a8a8;\n    --hybrid-input-local-border-bottom: 2px solid #a8a8a8;\n    --hybrid-input-local-border-top: 2px solid transparent;\n    --hybrid-input-local-border-left: 2px solid transparent;\n    --hybrid-input-local-border-right: 2px solid transparent;\n    --hybrid-input-local-disabled-border-bottom: none;\n    --hybrid-input-local-disabled-border-top: none;\n    --hybrid-input-local-disabled-border-left: none;\n    --hybrid-input-local-disabled-border-right: none;\n    --hybrid-input-local-focus-border: 2px solid #0f62fe;\n    --hybrid-input-local-border-radius: 0px;\n    --hybrid-input-local-label-font-size: 13px;\n    --hybrid-input-local-helper-text-color: #525252;\n    --hybrid-input-local-helper-text-font-size: 13px;\n    --hybrid-input-local-placeholder-font-size: 13px;\n    --hybrid-input-label-padding-bottom: 5px;\n    --hybrid-input-local-helper-text-padding-top: 5px;\n    --hybrid-input-local-disabled-background-color: #f4f4f4;\n    --hybrid-input-local-disabled-placeholder-color: #c6c6c6;\n    --hybrid-input-local-error-helper-text-color: #da1e28;\n    --hybrid-input-local-error-border: 2px solid #da1e28;\n    --hybrid-input-local-warning-helper-text-color: #161616;\n    --hybrid-input-local-disabled-helper-text-color: #c6c6c6;\n    --hybrid-input-local-disabled-label-color: #c6c6c6;\n    --hybrid-input-local-warning-icon-color: #f0c300;\n    --hybrid-input-local-error-icon-color: #da1e28;\n    --hybrid-input-local-password-icon-color: #000000;\n    --hybrid-input-local-calendar-icon-color: #000000;\n    --hybrid-input-local-copy-icon-color: #000000;\n    --hybrid-input-local-disabled-icon-opacity: 0.4;\n    --hybrid-input-local-number-icons-color: #000000;\n    --hybrid-input-local-password-icon-padding-left: 8px;\n    --hybrid-input-local-password-icon-padding-right: 8px;\n    --hybrid-input-local-number-icons-separator-color: #e0e0e0;\n    --hybrid-input-local-number-icons-separator-padding-bottom: 4px;\n    --hybrid-input-local-number-icons-separator-padding-left: 5px;\n    --hybrid-input-local-number-icons-separator-padding-right: 5px;\n    --hybrid-input-local-copy-icon-padding-right:5px;\n\n    --hybrid-input-local-number-icons-container-width: 70px;\n    --hybrid-input-local-number-icons-container-padding-left: 5px;\n    --hybrid-input-local-number-icons-container-padding-right: 5px;\n    --hybrid-input-local-number-icons-width: 12px;\n    --hybrid-input-local-number-icons-height: 12px;\n\n    --hybrid-input-local-number-icons-padding-left: 4px;\n    --hybrid-input-local-number-icons-padding-right: 4px;\n\n    --hybrid-input-local-large-padding-top: 10px;\n    --hybrid-input-local-large-padding-bottom: 10px;\n    --hybrid-input-local-large-padding-left: 9px;\n    --hybrid-input-local-large-padding-right: 4px;\n\n    --hybrid-input-local-medium-padding-top: 7px;\n    --hybrid-input-local-medium-padding-bottom: 7px;\n    --hybrid-input-local-medium-padding-left: 9px;\n    --hybrid-input-local-medium-padding-right: 4px;\n\n    --hybrid-input-local-small-padding-top: 4px;\n    --hybrid-input-local-small-padding-bottom: 4px;\n    --hybrid-input-local-small-padding-left: 9px;\n    --hybrid-input-local-small-padding-right: 4px;\n  }\n\n  /* \n   * Dark theme styles using data-theme attribute on host element\n   * These override the light theme defaults when data-theme=\"dark\" is applied\n   * This provides explicit theme control via JavaScript or HTML attributes\n   */\n  :host([data-theme=\"dark\"]) {\n    --hybrid-input-local-background-color: #393939;\n    --hybrid-input-local-focus-border: 2px solid #ffffff;\n    --hybrid-input-local-text-color: #ffffff;\n    --hybrid-input-local-error-border: 2px solid #fa4d56;\n    --hybrid-input-local-error-helper-text-color: #ffb3b8;\n    --hybrid-input-local-disabled-background-color: #393939;\n    --hybrid-input-local-disabled-placeholder-color: #6f6f6f;\n    --hybrid-input-local-disabled-helper-text-color: #6f6f6f;\n    --hybrid-input-local-disabled-label-color: #6f6f6f;\n    --hybrid-input-local-warning-icon-color: #f0c300;\n    --hybrid-input-local-error-icon-color: #da1e28;\n    --hybrid-input-local-password-icon-color: #ffffff;\n    --hybrid-input-local-number-icons-color: #ffffff;\n    --hybrid-input-local-label-color: #c6c6c6;\n    --hybrid-input-local-helper-text-color: #c6c6c6;\n    --hybrid-input-local-number-icons-separator-color: #525252;\n    --hybrid-input-local-calendar-icon-color: #ffffff;\n    --hybrid-input-local-copy-icon-color: #ffffff;\n  }\n`;\n"]}