@sekiui/elements 0.0.65 → 0.0.70

package/dist/collection/components/input-otp/seki-input-otp.js

@@ -0,0 +1,544 @@
+import { h } from "@stencil/core";
+export class SekiInputOtp {
+    constructor() {
+        /**
+         * Total number of characters allowed
+         */
+        this.maxlength = 6;
+        /**
+         * Input pattern: 'digits' for numbers only, 'alphanumeric' for letters and numbers
+         */
+        this.pattern = 'digits';
+        /**
+         * Current OTP value
+         */
+        this.value = '';
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether to mask the input (show bullets)
+         */
+        this.masked = false;
+        /**
+         * Whether the input is in an invalid/error state
+         */
+        this.invalid = false;
+        /**
+         * Whether the input is required
+         */
+        this.required = false;
+        /**
+         * Autocomplete hint for mobile keyboards
+         */
+        this.autocomplete = 'one-time-code';
+        /**
+         * Current active slot index (internal)
+         */
+        this._activeIndex = 0;
+        /**
+         * Whether the input has focus (internal)
+         */
+        this._hasFocus = false;
+        this.handleInput = (event) => {
+            const target = event.target;
+            const newValue = this.filterValue(target.value);
+            if (newValue !== this.value) {
+                this.value = newValue;
+                this._activeIndex = Math.min(newValue.length, this.maxlength - 1);
+                this.sekiInput.emit({ value: newValue });
+                this.sekiChange.emit({ value: newValue });
+            }
+            // Sync hidden input value
+            target.value = this.value;
+        };
+        this.handleKeyDown = (event) => {
+            const key = event.key;
+            switch (key) {
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    this._activeIndex = Math.max(0, this._activeIndex - 1);
+                    break;
+                case 'ArrowRight':
+                    event.preventDefault();
+                    this._activeIndex = Math.min(this.value.length, this._activeIndex + 1);
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this._activeIndex = 0;
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this._activeIndex = Math.min(this.value.length, this.maxlength - 1);
+                    break;
+                case 'Backspace':
+                    if (this._activeIndex > 0 || this.value.length > 0) {
+                        event.preventDefault();
+                        const deleteIndex = this.value.length > this._activeIndex ? this._activeIndex : this._activeIndex - 1;
+                        if (deleteIndex >= 0) {
+                            const newValue = this.value.slice(0, deleteIndex) + this.value.slice(deleteIndex + 1);
+                            this.value = newValue;
+                            this._activeIndex = Math.max(0, deleteIndex);
+                            this.sekiInput.emit({ value: newValue });
+                            this.sekiChange.emit({ value: newValue });
+                        }
+                    }
+                    break;
+                case 'Delete':
+                    if (this._activeIndex < this.value.length) {
+                        event.preventDefault();
+                        const newValue = this.value.slice(0, this._activeIndex) + this.value.slice(this._activeIndex + 1);
+                        this.value = newValue;
+                        this.sekiInput.emit({ value: newValue });
+                        this.sekiChange.emit({ value: newValue });
+                    }
+                    break;
+                default:
+                    // Handle character input
+                    if (key.length === 1 && this.isValidChar(key)) {
+                        event.preventDefault();
+                        if (this.value.length < this.maxlength) {
+                            // Insert at current position
+                            const newValue = this.value.slice(0, this._activeIndex) + key + this.value.slice(this._activeIndex);
+                            this.value = newValue.slice(0, this.maxlength);
+                            this._activeIndex = Math.min(this._activeIndex + 1, this.maxlength - 1);
+                            this.sekiInput.emit({ value: this.value });
+                            this.sekiChange.emit({ value: this.value });
+                        }
+                    }
+                    break;
+            }
+        };
+        this.handlePaste = (event) => {
+            var _a;
+            event.preventDefault();
+            const pastedText = ((_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) || '';
+            const filteredText = this.filterValue(pastedText);
+            if (filteredText) {
+                // Insert at current position
+                const beforeCursor = this.value.slice(0, this._activeIndex);
+                const afterCursor = this.value.slice(this._activeIndex);
+                const newValue = (beforeCursor + filteredText + afterCursor).slice(0, this.maxlength);
+                this.value = newValue;
+                this._activeIndex = Math.min(beforeCursor.length + filteredText.length, this.maxlength - 1);
+                this.sekiInput.emit({ value: newValue });
+                this.sekiChange.emit({ value: newValue });
+            }
+        };
+        this.handleFocus = () => {
+            this._hasFocus = true;
+        };
+        this.handleBlur = () => {
+            this._hasFocus = false;
+        };
+        this.handleContainerClick = (event) => {
+            var _a;
+            // Focus the hidden input when clicking the container
+            if (this.disabled)
+                return;
+            // Only focus if not clicking on a slot (slots handle their own clicks)
+            if (event.target.closest('seki-input-otp-slot'))
+                return;
+            (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    handleValueChange(newValue) {
+        // Update form value
+        if (this.internals && typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(newValue);
+        }
+        // Notify slots
+        this.sekiOtpStateChange.emit();
+        // Check if complete
+        if (newValue.length === this.maxlength) {
+            this.sekiComplete.emit({ value: newValue });
+        }
+    }
+    handleStateChange() {
+        this.sekiOtpStateChange.emit();
+    }
+    componentWillLoad() {
+        // Set initial form value
+        if (this.internals && typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(this.value || '');
+        }
+        // Set active index to end of current value
+        this._activeIndex = Math.min(this.value.length, this.maxlength - 1);
+    }
+    // Form-associated lifecycle callbacks
+    formResetCallback() {
+        this.value = '';
+        this._activeIndex = 0;
+        if (this.internals && typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue('');
+        }
+    }
+    formStateRestoreCallback(state) {
+        this.value = state;
+        this._activeIndex = Math.min(state.length, this.maxlength - 1);
+        if (this.internals && typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(state);
+        }
+    }
+    /**
+     * Focus the input at a specific index (called by slots)
+     */
+    focusAtIndex(index) {
+        var _a;
+        if (this.disabled)
+            return;
+        this._activeIndex = Math.max(0, Math.min(index, this.maxlength - 1));
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        // Position cursor in hidden input
+        if (this.inputRef) {
+            this.inputRef.setSelectionRange(this._activeIndex, this._activeIndex);
+        }
+    }
+    getPatternRegex() {
+        return this.pattern === 'digits' ? /^[0-9]$/ : /^[a-zA-Z0-9]$/;
+    }
+    isValidChar(char) {
+        return this.getPatternRegex().test(char);
+    }
+    filterValue(val) {
+        const regex = this.pattern === 'digits' ? /[0-9]/g : /[a-zA-Z0-9]/g;
+        return (val.match(regex) || []).join('').slice(0, this.maxlength);
+    }
+    render() {
+        const inputMode = this.pattern === 'digits' ? 'numeric' : 'text';
+        const inputPattern = this.pattern === 'digits' ? '[0-9]*' : '[a-zA-Z0-9]*';
+        const ariaLabelText = this.ariaLabel || `Enter ${this.maxlength}-digit code`;
+        return (h("div", { key: 'f293b2a456e1baf4c9d8b08ac2464bc873c5fc8f', class: {
+                'input-otp-container': true,
+                'input-otp-container--disabled': this.disabled,
+                'input-otp-container--invalid': this.invalid,
+            }, onClick: this.handleContainerClick }, h("input", { key: 'fb6c1e78e18026466d27ffaf03905a4a9e3b09af', ref: (el) => (this.inputRef = el), type: "text", inputMode: inputMode, autocomplete: this.autocomplete, pattern: inputPattern, maxLength: this.maxlength, value: this.value, disabled: this.disabled, required: this.required, name: this.name, class: "input-otp-hidden", "aria-label": ariaLabelText, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("slot", { key: 'c61374b47414538cc6b7b18d50c199807c7fd0e5' })));
+    }
+    static get is() { return "seki-input-otp"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-input-otp.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-input-otp.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of characters allowed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength",
+                "defaultValue": "6"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'digits' | 'alphanumeric'",
+                    "resolved": "\"alphanumeric\" | \"digits\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input pattern: 'digits' for numbers only, 'alphanumeric' for letters and numbers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern",
+                "defaultValue": "'digits'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current OTP value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "masked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to mask the input (show bullets)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "masked",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is in an invalid/error state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form field name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Autocomplete hint for mobile keyboards"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "'one-time-code'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom aria-label for the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            },
+            "ariaDescribedby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of element describing this input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-describedby"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_activeIndex": {},
+            "_hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sekiInput",
+                "name": "sekiInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on each character change"
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "sekiChange",
+                "name": "sekiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when value changes"
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "sekiComplete",
+                "name": "sekiComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when all slots are filled"
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "sekiOtpStateChange",
+                "name": "sekiOtpStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal event to notify slots of state changes"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "masked",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "invalid",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "_activeIndex",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "_hasFocus",
+                "methodName": "handleStateChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/kbd/seki-kbd.js

@@ -7,7 +7,7 @@ export class SekiKbd {
         this.size = 'md';
     }
     render() {
-        return (h("kbd", { key: 'e684911053d61fe941c0d129f3443a1c37a6811b', class: `kbd kbd--${this.size}` }, h("slot", { key: 'cd7df0ed545914d47e8ba2b1af50259d40190ba1' })));
+        return (h("kbd", { key: '4e7d58af5cb59b9a274e48a646bfb1576bad8dde', class: `kbd kbd--${this.size}` }, h("slot", { key: '724b4d0bf5127624e7efb794cb521efce65fe50e' })));
     }
     static get is() { return "seki-kbd"; }
     static get encapsulation() { return "shadow"; }