@ionic/core 8.5.7-dev.11748379940.12698faf → 8.5.7-dev.11748466845.12de1519

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

@@ -43,10 +43,6 @@ export class InputOTP {
          * If `true`, the user cannot modify the value.
          */
         this.readonly = false;
-        /**
-         * The size of the input boxes.
-         */
-        this.size = 'medium';
         /**
          * The shape of the input boxes.
          * If "round" they will have an increased border radius.
@@ -54,6 +50,10 @@ export class InputOTP {
          * If "soft" they will have a soft border radius.
          */
         this.shape = 'round';
+        /**
+         * The size of the input boxes.
+         */
+        this.size = 'medium';
         /**
          * The type of input allowed in the input boxes.
          */
@@ -62,34 +62,63 @@ export class InputOTP {
          * The value of the input group.
          */
         this.value = '';
-        this.onInput = (index) => (event) => {
-            const { validKeyPattern } = this;
-            const value = event.target.value;
-            // Only allow input if it's a single character and matches the pattern
-            if (value.length > 1 || (value.length > 0 && !validKeyPattern.test(value))) {
-                // Reset the input value if not valid
-                this.inputRefs[index].value = '';
-                this.inputValues[index] = '';
-                return;
-            }
-            // Find the first empty box before or at the current index
-            let targetIndex = index;
-            for (let i = 0; i < index; i++) {
-                if (!this.inputValues[i] || this.inputValues[i] === '') {
-                    targetIndex = i;
-                    break;
-                }
+        /**
+         * Handles the focus behavior for the input OTP component.
+         *
+         * Focus behavior:
+         * 1. Keyboard navigation: Allow normal focus movement
+         * 2. Mouse click:
+         *    - If clicked box has value: Focus that box
+         *    - If clicked box is empty: Focus first empty box
+         *
+         * Emits the `ionFocus` event when the input group gains focus.
+         */
+        this.onFocus = (index) => (event) => {
+            var _a;
+            const { inputRefs } = this;
+            // Only emit ionFocus and set the focusedValue when the
+            // component first gains focus
+            if (!this.hasFocus) {
+                this.ionFocus.emit(event);
+                this.focusedValue = this.value;
             }
-            // Set the value at the target index
-            this.inputValues[targetIndex] = value;
-            // If the value was entered in a later box, clear the current box
-            if (targetIndex !== index) {
-                this.inputRefs[index].value = '';
+            this.hasFocus = true;
+            let finalIndex = index;
+            if (!this.isKeyboardNavigation) {
+                // If the clicked box has a value, focus it
+                // Otherwise focus the first empty box
+                const targetIndex = this.inputValues[index] ? index : this.getFirstEmptyIndex();
+                finalIndex = targetIndex === -1 ? this.length - 1 : targetIndex;
+                // Focus the target box
+                (_a = this.inputRefs[finalIndex]) === null || _a === void 0 ? void 0 : _a.focus();
             }
-            if (value.length > 0) {
-                this.focusNext(targetIndex);
+            // Update tabIndexes to match the focused box
+            inputRefs.forEach((input, i) => {
+                input.tabIndex = i === finalIndex ? 0 : -1;
+            });
+            // Reset the keyboard navigation flag
+            this.isKeyboardNavigation = false;
+        };
+        /**
+         * Handles the blur behavior for the input OTP component.
+         * Emits the `ionBlur` event when the input group loses focus.
+         */
+        this.onBlur = (event) => {
+            const { inputRefs } = this;
+            const relatedTarget = event.relatedTarget;
+            // Do not emit blur if we're moving to another input box in the same component
+            const isInternalFocus = relatedTarget != null && inputRefs.includes(relatedTarget);
+            if (!isInternalFocus) {
+                this.hasFocus = false;
+                // Reset tabIndexes when focus leaves the component
+                this.updateTabIndexes();
+                // Always emit ionBlur when focus leaves the component
+                this.ionBlur.emit(event);
+                // Only emit ionChange if the value has actually changed
+                if (this.focusedValue !== this.value) {
+                    this.emitIonChange(event);
+                }
             }
-            this.updateValue(event);
         };
         /**
          * Handles keyboard navigation and input for the OTP component.
@@ -175,6 +204,35 @@ export class InputOTP {
                 event.preventDefault();
             }
         };
+        this.onInput = (index) => (event) => {
+            const { validKeyPattern } = this;
+            const value = event.target.value;
+            // Only allow input if it's a single character and matches the pattern
+            if (value.length > 1 || (value.length > 0 && !validKeyPattern.test(value))) {
+                // Reset the input value if not valid
+                this.inputRefs[index].value = '';
+                this.inputValues[index] = '';
+                return;
+            }
+            // Find the first empty box before or at the current index
+            let targetIndex = index;
+            for (let i = 0; i < index; i++) {
+                if (!this.inputValues[i] || this.inputValues[i] === '') {
+                    targetIndex = i;
+                    break;
+                }
+            }
+            // Set the value at the target index
+            this.inputValues[targetIndex] = value;
+            // If the value was entered in a later box, clear the current box
+            if (targetIndex !== index) {
+                this.inputRefs[index].value = '';
+            }
+            if (value.length > 0) {
+                this.focusNext(targetIndex);
+            }
+            this.updateValue(event);
+        };
         /**
          * Handles pasting text into the input OTP component.
          * This function prevents the default paste behavior and
@@ -218,64 +276,35 @@ export class InputOTP {
                 (_c = inputRefs[length - 1]) === null || _c === void 0 ? void 0 : _c.focus();
             }
         };
-        /**
-         * Handles the focus behavior for the input OTP component.
-         *
-         * Focus behavior:
-         * 1. Keyboard navigation: Allow normal focus movement
-         * 2. Mouse click:
-         *    - If clicked box has value: Focus that box
-         *    - If clicked box is empty: Focus first empty box
-         *
-         * Emits the `ionFocus` event when the input group gains focus.
-         */
-        this.onFocus = (index) => (event) => {
-            var _a;
-            const { inputRefs } = this;
-            // Only emit ionFocus and set the focusedValue when the
-            // component first gains focus
-            if (!this.hasFocus) {
-                this.ionFocus.emit(event);
-                this.focusedValue = this.value;
-            }
-            this.hasFocus = true;
-            let finalIndex = index;
-            if (!this.isKeyboardNavigation) {
-                // If the clicked box has a value, focus it
-                // Otherwise focus the first empty box
-                const targetIndex = this.inputValues[index] ? index : this.getFirstEmptyIndex();
-                finalIndex = targetIndex === -1 ? this.length - 1 : targetIndex;
-                // Focus the target box
-                (_a = this.inputRefs[finalIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            // Update tabIndexes to match the focused box
-            inputRefs.forEach((input, i) => {
-                input.tabIndex = i === finalIndex ? 0 : -1;
-            });
-            // Reset the keyboard navigation flag
-            this.isKeyboardNavigation = false;
-        };
-        /**
-         * Handles the blur behavior for the input OTP component.
-         * Emits the `ionBlur` event when the input group loses focus.
-         */
-        this.onBlur = (event) => {
-            const { inputRefs } = this;
-            const relatedTarget = event.relatedTarget;
-            // Do not emit blur if we're moving to another input box in the same component
-            const isInternalFocus = relatedTarget != null && inputRefs.includes(relatedTarget);
-            if (!isInternalFocus) {
-                this.hasFocus = false;
-                // Reset tabIndexes when focus leaves the component
-                this.updateTabIndexes();
-                // Always emit ionBlur when focus leaves the component
-                this.ionBlur.emit(event);
-                // Only emit ionChange if the value has actually changed
-                if (this.focusedValue !== this.value) {
-                    this.emitIonChange(event);
-                }
-            }
-        };
+    }
+    /**
+     * Resets the value and focus state.
+     */
+    async reset() {
+        this.value = '';
+        this.focusedValue = null;
+        this.hasFocus = false;
+        this.inputRefs.forEach((input) => {
+            input.blur();
+        });
+        this.updateTabIndexes();
+    }
+    /**
+     * Sets focus to an input box.
+     * @param index - The index of the input box to focus (0-based).
+     * If provided and the input box has a value, the input box at that index will be focused.
+     * Otherwise, the first empty input box or the last input if all are filled will be focused.
+     */
+    async setFocus(index) {
+        var _a, _b;
+        if (typeof index === 'number') {
+            const validIndex = Math.max(0, Math.min(index, this.length - 1));
+            (_a = this.inputRefs[validIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            const tabbableIndex = this.getTabbableIndex();
+            (_b = this.inputRefs[tabbableIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
     }
     valueChanged() {
         this.initializeValues();
@@ -336,59 +365,6 @@ export class InputOTP {
     componentDidLoad() {
         this.updateTabIndexes();
     }
-    /**
-     * Initializes the input values array based on the current value prop.
-     * This splits the value into individual characters and validates them against
-     * the allowed pattern. The values are then used as the values in the native
-     * input boxes and the value of the input group is updated.
-     */
-    initializeValues() {
-        // Clear all input values
-        this.inputValues = Array(this.length).fill('');
-        // If the value is null, undefined, or an empty string, return
-        if (this.value == null || String(this.value).length === 0) {
-            return;
-        }
-        // Split the value into individual characters and validate
-        // them against the allowed pattern
-        const chars = String(this.value).split('').slice(0, this.length);
-        chars.forEach((char, index) => {
-            if (this.validKeyPattern.test(char)) {
-                this.inputValues[index] = char;
-            }
-        });
-        // Update the value without emitting events
-        this.value = this.inputValues.join('');
-    }
-    /**
-     * Resets the value and focus state.
-     */
-    async reset() {
-        this.value = '';
-        this.focusedValue = null;
-        this.hasFocus = false;
-        this.inputRefs.forEach((input) => {
-            input.blur();
-        });
-        this.updateTabIndexes();
-    }
-    /**
-     * Sets focus to an input box.
-     * @param index - The index of the input box to focus (0-based).
-     * If provided and the input box has a value, the input box at that index will be focused.
-     * Otherwise, the first empty input box or the last input if all are filled will be focused.
-     */
-    async setFocus(index) {
-        var _a, _b;
-        if (typeof index === 'number') {
-            const validIndex = Math.max(0, Math.min(index, this.length - 1));
-            (_a = this.inputRefs[validIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        else {
-            const tabbableIndex = this.getTabbableIndex();
-            (_b = this.inputRefs[tabbableIndex]) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-    }
     /**
      * Get the regex pattern for allowed characters.
      * If a pattern is provided, use it to create a regex pattern
@@ -425,6 +401,30 @@ export class InputOTP {
             return 'text';
         }
     }
+    /**
+     * Initializes the input values array based on the current value prop.
+     * This splits the value into individual characters and validates them against
+     * the allowed pattern. The values are then used as the values in the native
+     * input boxes and the value of the input group is updated.
+     */
+    initializeValues() {
+        // Clear all input values
+        this.inputValues = Array(this.length).fill('');
+        // If the value is null, undefined, or an empty string, return
+        if (this.value == null || String(this.value).length === 0) {
+            return;
+        }
+        // Split the value into individual characters and validate
+        // them against the allowed pattern
+        const chars = String(this.value).split('').slice(0, this.length);
+        chars.forEach((char, index) => {
+            if (this.validKeyPattern.test(char)) {
+                this.inputValues[index] = char;
+            }
+        });
+        // Update the value without emitting events
+        this.value = this.inputValues.join('');
+    }
     /**
      * Updates the value of the input group.
      * This updates the value of the input group and emits an `ionChange` event.
@@ -483,12 +483,27 @@ export class InputOTP {
         }
     }
     /**
-     * Determines if a separator should be shown for a given index by
-     * checking if the index is included in the parsed separators array.
+     * Searches through the input values and returns the index
+     * of the first empty input.
+     * Returns -1 if all inputs are filled.
      */
-    showSeparator(index) {
+    getFirstEmptyIndex() {
+        var _a;
+        const { inputValues, length } = this;
+        // Create an array of the same length as the input OTP
+        // and fill it with the input values
+        const values = Array.from({ length }, (_, i) => inputValues[i] || '');
+        return (_a = values.findIndex((value) => !value || value === '')) !== null && _a !== void 0 ? _a : -1;
+    }
+    /**
+     * Returns the index of the input that should be tabbed to.
+     * If all inputs are filled, returns the last input's index.
+     * Otherwise, returns the index of the first empty input.
+     */
+    getTabbableIndex() {
         const { length } = this;
-        return this.parsedSeparators.includes(index + 1) && index < length - 1;
+        const firstEmptyIndex = this.getFirstEmptyIndex();
+        return firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex;
     }
     /**
      * Updates the tabIndexes for the input boxes.
@@ -516,27 +531,12 @@ export class InputOTP {
         });
     }
     /**
-     * Searches through the input values and returns the index
-     * of the first empty input.
-     * Returns -1 if all inputs are filled.
-     */
-    getFirstEmptyIndex() {
-        var _a;
-        const { inputValues, length } = this;
-        // Create an array of the same length as the input OTP
-        // and fill it with the input values
-        const values = Array.from({ length }, (_, i) => inputValues[i] || '');
-        return (_a = values.findIndex((value) => !value || value === '')) !== null && _a !== void 0 ? _a : -1;
-    }
-    /**
-     * Returns the index of the input that should be tabbed to.
-     * If all inputs are filled, returns the last input's index.
-     * Otherwise, returns the index of the first empty input.
+     * Determines if a separator should be shown for a given index by
+     * checking if the index is included in the parsed separators array.
      */
-    getTabbableIndex() {
+    showSeparator(index) {
         const { length } = this;
-        const firstEmptyIndex = this.getFirstEmptyIndex();
-        return firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex;
+        return this.parsedSeparators.includes(index + 1) && index < length - 1;
     }
     render() {
         var _a, _b;
@@ -738,26 +738,6 @@ export class InputOTP {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "size": {
-                "type": "string",
-                "attribute": "size",
-                "mutable": false,
-                "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The size of the input boxes."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'medium'"
-            },
             "separators": {
                 "type": "string",
                 "attribute": "separators",
@@ -797,6 +777,26 @@ export class InputOTP {
                 "reflect": false,
                 "defaultValue": "'round'"
             },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the input boxes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
             "type": {
                 "type": "string",
                 "attribute": "type",

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-05-27T21:07:25",
+  "timestamp": "2025-05-28T21:15:43",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.29.3",