atomicuilibrary 0.0.1

package/dist/collection/components/pattern-input/pattern-input.js

@@ -0,0 +1,788 @@
+import { h, Host } from "@stencil/core";
+export class UIPatternInput {
+    inputElement;
+    debounceTimer;
+    /** Current input value */
+    value = '';
+    /** Input pattern for display (e.g., "(###) ###-####" for phone) */
+    pattern;
+    /** Validation regex pattern */
+    validationRegex;
+    /** Placeholder text */
+    placeholder;
+    /** Label text */
+    label;
+    /** Input name for forms */
+    name;
+    /** Disabled state */
+    disabled = false;
+    /** Required field */
+    required = false;
+    /** Size variant */
+    size = 'md';
+    /** Show validation status */
+    showValidation = true;
+    /** Allowed characters regex (default: all) */
+    allowedChars;
+    /** Auto-format as user types */
+    autoFormat = true;
+    /** Mask character for pattern (default: #) */
+    maskChar = '#';
+    /** Show character counter */
+    showCounter = false;
+    /** Max length */
+    maxLength;
+    /** Input type restriction */
+    inputType = 'text';
+    /** Helper text */
+    helperText;
+    /** Error message */
+    errorMessage;
+    /** Success message */
+    successMessage;
+    /** RTL support */
+    rtl = false;
+    /** Whether the input is clearable */
+    clearable = false;
+    /** Validation state */
+    isValid = true;
+    isTouched = false;
+    isFocused = false;
+    /** Value change event */
+    patternInputChange;
+    /** Input event */
+    patternInput;
+    /** Focus event */
+    patternInputFocus;
+    /** Blur event */
+    patternInputBlur;
+    /** Validation event */
+    patternInputValidate;
+    valueChanged(newValue) {
+        this.validateInput(newValue);
+    }
+    componentDidLoad() {
+        if (this.value) {
+            this.validateInput(this.value);
+        }
+    }
+    getInputTypeRegex() {
+        switch (this.inputType) {
+            case 'numeric':
+                return /^[0-9]*$/;
+            case 'alpha':
+                return /^[a-zA-Z]*$/;
+            case 'alphanumeric':
+                return /^[a-zA-Z0-9]*$/;
+            case 'custom':
+                return this.allowedChars ? new RegExp(this.allowedChars) : null;
+            default:
+                return null;
+        }
+    }
+    isCharAllowed(char, currentValue) {
+        const typeRegex = this.getInputTypeRegex();
+        if (typeRegex) {
+            const testValue = currentValue + char;
+            return typeRegex.test(testValue);
+        }
+        return true;
+    }
+    extractRawValue(formatted) {
+        if (!this.pattern || !this.autoFormat)
+            return formatted;
+        // Remove all non-alphanumeric characters except spaces
+        return formatted.replace(/[^\w\s]/g, '').replace(/\s+/g, '');
+    }
+    formatValue(raw) {
+        if (!this.pattern || !this.autoFormat)
+            return raw;
+        let formatted = '';
+        let rawIndex = 0;
+        for (let i = 0; i < this.pattern.length && rawIndex < raw.length; i++) {
+            const patternChar = this.pattern[i];
+            if (patternChar === this.maskChar) {
+                formatted += raw[rawIndex];
+                rawIndex++;
+            }
+            else {
+                formatted += patternChar;
+            }
+        }
+        return formatted;
+    }
+    validateInput(value) {
+        if (!value && !this.required) {
+            this.isValid = true;
+            return true;
+        }
+        if (!value && this.required) {
+            this.isValid = false;
+            return false;
+        }
+        if (this.validationRegex) {
+            try {
+                const regex = new RegExp(this.validationRegex);
+                const rawValue = this.extractRawValue(value);
+                this.isValid = regex.test(rawValue);
+            }
+            catch (e) {
+                console.error('Invalid validation regex:', e);
+                this.isValid = false;
+            }
+        }
+        else {
+            this.isValid = true;
+        }
+        return this.isValid;
+    }
+    handleInput = (event) => {
+        let newValue = event.detail;
+        // Extract raw characters
+        const raw = this.extractRawValue(newValue);
+        // Apply formatting if enabled
+        const formatted = this.autoFormat ? this.formatValue(raw) : raw;
+        // Update value
+        this.value = formatted;
+        // Validate
+        const isValid = this.validateInput(formatted);
+        // Emit events
+        this.patternInput.emit({ value: raw, formatted });
+        // Debounced change event
+        clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(() => {
+            this.patternInputChange.emit({ value: raw, formatted, isValid });
+            this.patternInputValidate.emit({ isValid, value: raw });
+        }, 300);
+    };
+    handleKeyPress = (event) => {
+        if (this.disabled)
+            return;
+        const char = event.key;
+        // Allow control keys
+        if (char.length > 1 || event.ctrlKey || event.metaKey)
+            return;
+        const currentValue = this.extractRawValue(this.value);
+        // Check if character is allowed
+        if (!this.isCharAllowed(char, currentValue)) {
+            event.preventDefault();
+            return;
+        }
+        // Check max length
+        if (this.maxLength && currentValue.length >= this.maxLength) {
+            event.preventDefault();
+        }
+    };
+    handlePaste = (event) => {
+        if (this.disabled)
+            return;
+        event.preventDefault();
+        const pastedText = event.clipboardData?.getData('text') || '';
+        // Filter pasted text based on allowed characters
+        let filtered = '';
+        for (const char of pastedText) {
+            if (this.isCharAllowed(char, filtered)) {
+                filtered += char;
+            }
+        }
+        // Apply max length
+        if (this.maxLength) {
+            const currentRaw = this.extractRawValue(this.value);
+            const remaining = this.maxLength - currentRaw.length;
+            filtered = filtered.substring(0, remaining);
+        }
+        // Insert filtered text
+        const formatted = this.autoFormat ? this.formatValue(filtered) : filtered;
+        this.value = formatted;
+        if (this.inputElement) {
+            this.inputElement.value = formatted;
+        }
+        // Validate and emit
+        const isValid = this.validateInput(formatted);
+        this.patternInputChange.emit({ value: filtered, formatted, isValid });
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+        this.patternInputFocus.emit();
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        this.isTouched = true;
+        this.patternInputBlur.emit();
+    };
+    getValidationMessage() {
+        if (!this.isTouched || !this.showValidation)
+            return null;
+        if (!this.isValid && this.errorMessage) {
+            return this.errorMessage;
+        }
+        if (this.isValid && this.value && this.successMessage) {
+            return this.successMessage;
+        }
+        return null;
+    }
+    getCharCount() {
+        const raw = this.extractRawValue(this.value);
+        return {
+            current: raw.length,
+            max: this.maxLength,
+        };
+    }
+    render() {
+        const validationMsg = this.getValidationMessage();
+        const charCount = this.getCharCount();
+        const showError = this.isTouched && !this.isValid && this.showValidation;
+        const showSuccess = this.isTouched && this.isValid && this.value && this.showValidation;
+        return (h(Host, { key: 'e6cafe1df0d19d9aa631bb08d2396af558b95673', class: {
+                'pattern-input-host': true,
+                'pattern-input-disabled': this.disabled,
+                'pattern-input-focused': this.isFocused,
+                'pattern-input-error': showError,
+                'pattern-input-success': showSuccess,
+            } }, h("div", { key: '9c5996bb1d80efc3ddedc692f3a2161acddd93f7', class: "pattern-input-wrapper", dir: this.rtl ? 'rtl' : 'ltr' }, this.label && (h("label", { key: 'ea22f82e44ce4631d82fbe3d6a9bbce3a68b848b', class: "pattern-input-label" }, this.label, this.required && h("span", { key: '71ee8e5c5d50ad9e1fe81df81385813cf157b911', class: "pattern-input-required" }, "*"))), h("div", { key: 'a4e05ef18befa44931881b5baa3f91b983017456', class: {
+                'pattern-input-container': true,
+                [`pattern-input-${this.size}`]: true,
+                'pattern-input-container-focused': this.isFocused,
+                'pattern-input-container-error': showError,
+                'pattern-input-container-success': showSuccess,
+            } }, h("slot", { key: 'a498a913a37bf11470bad5c9043caa196f2b860f', name: "prefix" }), h("ui-input", { key: 'e8b7202121a6a5a1c27f2e2f26783d11c6fa1013', ref: el => (this.inputElement = el), type: "text", class: "pattern-input-field", value: this.value, placeholder: this.placeholder || this.pattern, disabled: this.disabled, required: this.required, name: this.name, maxLength: this.pattern?.length || this.maxLength, onInputChange: this.handleInput, onInputKeydown: (e) => this.handleKeyPress(e.detail), onPasteInternal: (e) => this.handlePaste(e.detail), onFocusInternal: this.handleFocus, onInputBlur: this.handleBlur, ariaInvalid: showError, ariaRequired: this.required, fullWidth: true, size: this.size }), this.showValidation && (h("span", { key: 'fce03bbf3acc80f7cc48e011725d07a4381a9c1b', class: "pattern-input-status" }, showError && h("ui-icon", { key: 'e2fb5bb51afc46e381ee29c071564d4226826bd6', name: "x-circle", library: "lucide", size: "1.2em", class: "status-icon status-error" }), showSuccess && h("ui-icon", { key: 'ec772884ed89b461b0659acd66bf7d5816200e20', name: "check-circle", library: "lucide", size: "1.2em", class: "status-icon status-success" }))), this.clearable && this.value && !this.disabled && (h("ui-button", { key: 'f461b44289a9f0bd6a6f215288746ef4697efb6d', variant: "ghost", class: "pattern-input-clear", onClick: () => {
+                this.value = '';
+                this.patternInputChange.emit({ value: '', formatted: '', isValid: this.required ? false : true });
+            }, ariaLabel: "Clear input", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })), h("slot", { key: '453ce5f34c6384272b66d88a03e0ad897da4eada', name: "suffix" })), h("div", { key: 'dc815745573df1a2edbaae6971543642e20e74ed', class: "pattern-input-footer" }, h("div", { key: '58e39b130ffb2b694e462dca3909a1b0d8e2ebee', class: "pattern-input-messages" }, this.helperText && !validationMsg && (h("span", { key: 'a0fb4ffbcc587ff0a5bab578e299df3653a2a19d', class: "helper-text" }, this.helperText)), validationMsg && (h("span", { key: '286eff6417e271b6a92423eb2c08a2247b96d6fb', class: {
+                'validation-message': true,
+                'validation-error': showError,
+                'validation-success': showSuccess,
+            } }, validationMsg))), this.showCounter && (h("span", { key: '99d1593a2012cb8c20d86c7de3cc4be8319c3aca', class: "char-counter" }, charCount.current, charCount.max && ` / ${charCount.max}`))))));
+    }
+    static get is() { return "ui-pattern-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pattern-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pattern-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current input value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input pattern for display (e.g., \"(###) ###-####\" for phone)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern"
+            },
+            "validationRegex": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation regex pattern"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validation-regex"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name for forms"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Required field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BasicSize",
+                    "resolved": "\"default\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+                    "references": {
+                        "BasicSize": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::BasicSize",
+                            "referenceLocation": "BasicSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "showValidation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show validation status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-validation",
+                "defaultValue": "true"
+            },
+            "allowedChars": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Allowed characters regex (default: all)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allowed-chars"
+            },
+            "autoFormat": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-format as user types"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-format",
+                "defaultValue": "true"
+            },
+            "maskChar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mask character for pattern (default: #)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mask-char",
+                "defaultValue": "'#'"
+            },
+            "showCounter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show character counter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-counter",
+                "defaultValue": "false"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Max length"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length"
+            },
+            "inputType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextType",
+                    "resolved": "\"alpha\" | \"alphanumeric\" | \"custom\" | \"numeric\" | \"text\"",
+                    "references": {
+                        "TextType": {
+                            "location": "import",
+                            "path": "../../types/text.type",
+                            "id": "src/types/text.type.d.ts::TextType",
+                            "referenceLocation": "TextType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input type restriction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-type",
+                "defaultValue": "'text'"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "successMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Success message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "success-message"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "RTL support"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rtl",
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is clearable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isValid": {},
+            "isTouched": {},
+            "isFocused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "patternInputChange",
+                "name": "patternInputChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value change event"
+                },
+                "complexType": {
+                    "original": "{ value: string; formatted: string; isValid: boolean }",
+                    "resolved": "{ value: string; formatted: string; isValid: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "patternInput",
+                "name": "patternInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input event"
+                },
+                "complexType": {
+                    "original": "{ value: string; formatted: string }",
+                    "resolved": "{ value: string; formatted: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "patternInputFocus",
+                "name": "patternInputFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Focus event"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "patternInputBlur",
+                "name": "patternInputBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Blur event"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "patternInputValidate",
+                "name": "patternInputValidate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation event"
+                },
+                "complexType": {
+                    "original": "{ isValid: boolean; value: string }",
+                    "resolved": "{ isValid: boolean; value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}