@ionic/core 8.5.7-dev.11748379940.12698faf → 8.5.7-dev.11748545890.14d6a067

package/hydrate/index.mjs

@@ -16983,10 +16983,6 @@ 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.
@@ -16994,6 +16990,10 @@ 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.
          */
@@ -17002,34 +17002,63 @@ 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.
@@ -17115,6 +17144,35 @@ 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
@@ -17158,67 +17216,27 @@ 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);
-                }
-            }
-        };
+    }
+    /**
+     * 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();
+        this.updateTabIndexes();
     }
     /**
      * Processes the separators prop into an array of numbers.
@@ -17276,59 +17294,6 @@ 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
@@ -17365,6 +17330,30 @@ 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.
@@ -17378,7 +17367,6 @@ class InputOTP {
         if (newValue.length === length) {
             this.ionComplete.emit({ value: newValue });
         }
-        this.updateTabIndexes();
     }
     /**
      * Emits an `ionChange` event.
@@ -17423,12 +17411,27 @@ 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.
@@ -17456,27 +17459,12 @@ 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;
@@ -17486,7 +17474,7 @@ class InputOTP {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
-        return (hAsync(Host, { key: '973743fa99d77dbdaaf9b630b64180a189b5d778', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'e87987e639fcff31612db32baa45ef928f1214fe', class: createColorClasses$1(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -17494,10 +17482,10 @@ class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, hAsync("div", Object.assign({ key: '3891cbdc07d4fa017ea04590bbb6225ab68deff2', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, maxLength: 1, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: index === 0 ? 'one-time-code' : 'off', ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && hAsync("div", { class: "input-otp-separator" }))))), hAsync("div", { key: '0d3cfa8c081552d0c52a544a1c52c0e3d5d4f532', class: {
+            }) }, hAsync("div", Object.assign({ key: '10d82d5c21171e3673b337da472139e8c9e077d7', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, maxLength: 1, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: index === 0 ? 'one-time-code' : 'off', ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && hAsync("div", { class: "input-otp-separator" }))))), hAsync("div", { key: '3cbb5dd138c5640c71c51a5088ad1047a74d3ad6', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, hAsync("slot", { key: '13c3f795956749ccdf396bfb0ff882a9c9e9ce81' }))));
+            } }, hAsync("slot", { key: '9fdeca4d1eebd60334a48b103229d43849bbb0ac' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -17521,14 +17509,13 @@ class InputOTP {
             "length": [2],
             "pattern": [1],
             "readonly": [516],
-            "size": [1],
             "separators": [1],
             "shape": [1],
+            "size": [1],
             "type": [1],
             "value": [1032],
             "inputValues": [32],
             "hasFocus": [32],
-            "reset": [64],
             "setFocus": [64]
         },
         "$listeners$": undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.5.7-dev.11748379940.12698faf",
+  "version": "8.5.7-dev.11748545890.14d6a067",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

package/dist/ionic/p-702c7264.entry.js

@@ -1,4 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import{r as i,c as o,h as t,F as n,d as p,g as r}from"./p-3GtB1kQI.js";import{i as s}from"./p-CG4wBMWx.js";import{p as e}from"./p-CEo1SqXS.js";import{i as a}from"./p-C53feagD.js";import{c as l}from"./p-DiVJyqlX.js";import{b as d}from"./p-B7Khsp7D.js";const c=class{constructor(t){i(this,t),this.ionInput=o(this,"ionInput",7),this.ionChange=o(this,"ionChange",7),this.ionComplete=o(this,"ionComplete",7),this.ionBlur=o(this,"ionBlur",7),this.ionFocus=o(this,"ionFocus",7),this.inheritedAttributes={},this.inputRefs=[],this.inputId="ion-input-otp-"+u++,this.parsedSeparators=[],this.isKeyboardNavigation=!1,this.inputValues=[],this.hasFocus=!1,this.autocapitalize="off",this.disabled=!1,this.fill="outline",this.length=4,this.readonly=!1,this.size="medium",this.shape="round",this.type="number",this.value="",this.onInput=i=>o=>{const{validKeyPattern:t}=this,n=o.target.value;if(n.length>1||n.length>0&&!t.test(n))return this.inputRefs[i].value="",void(this.inputValues[i]="");let p=i;for(let o=0;o<i;o++)if(!this.inputValues[o]||""===this.inputValues[o]){p=o;break}this.inputValues[p]=n,p!==i&&(this.inputRefs[i].value=""),n.length>0&&this.focusNext(p),this.updateValue(o)},this.onKeyDown=i=>o=>{const{length:t}=this,n=a(this.el),p=o.target;if((!o.metaKey&&!o.ctrlKey||"v"!==o.key.toLowerCase())&&p.selectionStart===p.selectionEnd){if("Backspace"===o.key)if(this.inputValues[i]){for(let o=i;o<t-1;o++)this.inputValues[o]=this.inputValues[o+1];this.inputValues[t-1]="";for(let i=0;i<t;i++)this.inputRefs[i].value=this.inputValues[i]||"";this.updateValue(o),o.preventDefault()}else!this.inputValues[i]&&i>0&&this.focusPrevious(i);else if("ArrowLeft"===o.key||"ArrowRight"===o.key){this.isKeyboardNavigation=!0,o.preventDefault();const p="ArrowLeft"===o.key;p&&n||!p&&!n?this.inputValues[i]&&i<t-1&&this.focusNext(i):this.focusPrevious(i)}else if("Tab"===o.key)return void(this.isKeyboardNavigation=!0);if(this.inputValues[i]&&this.validKeyPattern.test(o.key)){if(!this.inputValues[t-1])for(let o=t-1;o>i;o--)this.inputValues[o]=this.inputValues[o-1],this.inputRefs[o].value=this.inputValues[o]||"";this.inputValues[i]=o.key,this.inputRefs[i].value=o.key,this.updateValue(o),o.preventDefault()}}},this.onPaste=i=>{var o,t,n;const{inputRefs:p,length:r,validKeyPattern:s}=this;i.preventDefault();const e=null===(o=i.clipboardData)||void 0===o?void 0:o.getData("text");if(!e)return void this.emitIonInput(i);const a=e.split("").filter((i=>s.test(i))).slice(0,r);a.forEach(((i,o)=>{o<r&&(this.inputRefs[o].value=i,this.inputValues[o]=i)})),this.value=a.join(""),this.updateValue(i);const l=a.length;l<r?null===(t=p[l])||void 0===t||t.focus():null===(n=p[r-1])||void 0===n||n.focus()},this.onFocus=i=>o=>{var t;const{inputRefs:n}=this;this.hasFocus||(this.ionFocus.emit(o),this.focusedValue=this.value),this.hasFocus=!0;let p=i;if(!this.isKeyboardNavigation){const o=this.inputValues[i]?i:this.getFirstEmptyIndex();p=-1===o?this.length-1:o,null===(t=this.inputRefs[p])||void 0===t||t.focus()}n.forEach(((i,o)=>{i.tabIndex=o===p?0:-1})),this.isKeyboardNavigation=!1},this.onBlur=i=>{const{inputRefs:o}=this,t=i.relatedTarget;null!=t&&o.includes(t)||(this.hasFocus=!1,this.updateTabIndexes(),this.ionBlur.emit(i),this.focusedValue!==this.value&&this.emitIonChange(i))}}valueChanged(){this.initializeValues()}processSeparators(){const{separators:i,length:o}=this;if(void 0===i)return void(this.parsedSeparators=[]);if("string"==typeof i&&"all"!==i&&!/^(\d+)(,\d+)*$/.test(i))return e(`[ion-input-otp] - Invalid separators format. Expected a comma-separated list of numbers, an array of numbers, or "all". Received: ${i}`,this.el),void(this.parsedSeparators=[]);let t;t="all"===i?Array.from({length:o-1},((i,o)=>o+1)):Array.isArray(i)?i:i.split(",").map((i=>parseInt(i,10))).filter((i=>!isNaN(i))),t.filter(((i,o)=>t.indexOf(i)!==o)).length>0&&e(`[ion-input-otp] - Duplicate separator positions are not allowed. Received: ${i}`,this.el);const n=t.filter((i=>i>o));n.length>0&&e(`[ion-input-otp] - The following separator positions are greater than the input length (${o}): ${n.join(", ")}. These separators will be ignored.`,this.el),this.parsedSeparators=t.filter((i=>i<=o))}componentWillLoad(){this.inheritedAttributes=s(this.el),this.processSeparators(),this.initializeValues()}componentDidLoad(){this.updateTabIndexes()}initializeValues(){this.inputValues=Array(this.length).fill(""),null!=this.value&&0!==String(this.value).length&&(String(this.value).split("").slice(0,this.length).forEach(((i,o)=>{this.validKeyPattern.test(i)&&(this.inputValues[o]=i)})),this.value=this.inputValues.join(""))}async reset(){this.value="",this.focusedValue=null,this.hasFocus=!1,this.inputRefs.forEach((i=>{i.blur()})),this.updateTabIndexes()}async setFocus(i){var o,t;if("number"==typeof i){const t=Math.max(0,Math.min(i,this.length-1));null===(o=this.inputRefs[t])||void 0===o||o.focus()}else{const i=this.getTabbableIndex();null===(t=this.inputRefs[i])||void 0===t||t.focus()}}get validKeyPattern(){return new RegExp(`^${this.getPattern()}$`,"u")}getPattern(){const{pattern:i,type:o}=this;return i||("number"===o?"[\\p{N}]":"[\\p{L}\\p{N}]")}getInputmode(){const{inputmode:i}=this;return i||("number"==this.type?"numeric":"text")}updateValue(i){const{inputValues:o,length:t}=this,n=o.join("");this.value=n,this.emitIonInput(i),n.length===t&&this.ionComplete.emit({value:n}),this.updateTabIndexes()}emitIonChange(i){const{value:o}=this,t=null==o?o:o.toString();this.ionChange.emit({value:t,event:i})}emitIonInput(i){const{value:o}=this,t=null==o?o:o.toString();this.ionInput.emit({value:t,event:i})}focusNext(i){var o;const{inputRefs:t,length:n}=this;i<n-1&&(null===(o=t[i+1])||void 0===o||o.focus())}focusPrevious(i){var o;const{inputRefs:t}=this;i>0&&(null===(o=t[i-1])||void 0===o||o.focus())}showSeparator(i){const{length:o}=this;return this.parsedSeparators.includes(i+1)&&i<o-1}updateTabIndexes(){const{inputRefs:i,inputValues:o,length:t}=this;let n=-1;for(let i=0;i<t;i++)if(!o[i]||""===o[i]){n=i;break}i.forEach(((i,p)=>{const r=-1===n?p===t-1:n===p;i.tabIndex=r?0:-1,i.setAttribute("aria-hidden",o[p]&&""!==o[p]||r?"false":"true")}))}getFirstEmptyIndex(){var i;const{inputValues:o,length:t}=this;return null!==(i=Array.from({length:t},((i,t)=>o[t]||"")).findIndex((i=>!i||""===i)))&&void 0!==i?i:-1}getTabbableIndex(){const{length:i}=this,o=this.getFirstEmptyIndex();return-1===o?i-1:o}render(){var i,o;const{autocapitalize:r,color:s,disabled:e,el:a,fill:c,hasFocus:u,inheritedAttributes:h,inputId:g,inputRefs:v,inputValues:m,length:f,readonly:b,shape:x,size:w}=this,k=d(this),y=this.getInputmode(),z=this.getTabbableIndex(),I=this.getPattern(),$=""!==(null===(o=null===(i=a.querySelector(".input-otp-description"))||void 0===i?void 0:i.textContent)||void 0===o?void 0:o.trim());return t(p,{key:"973743fa99d77dbdaaf9b630b64180a189b5d778",class:l(s,{[k]:!0,"has-focus":u,[`input-otp-size-${w}`]:!0,[`input-otp-shape-${x}`]:!0,[`input-otp-fill-${c}`]:!0,"input-otp-disabled":e,"input-otp-readonly":b})},t("div",Object.assign({key:"3891cbdc07d4fa017ea04590bbb6225ab68deff2",role:"group","aria-label":"One-time password input",class:"input-otp-group"},h),Array.from({length:f}).map(((i,o)=>t(n,null,t("div",{class:"native-wrapper"},t("input",{class:"native-input",id:`${g}-${o}`,"aria-label":`Input ${o+1} of ${f}`,type:"text",autoCapitalize:r,inputmode:y,maxLength:1,pattern:I,disabled:e,readOnly:b,tabIndex:o===z?0:-1,value:m[o]||"",autocomplete:0===o?"one-time-code":"off",ref:i=>v[o]=i,onInput:this.onInput(o),onBlur:this.onBlur,onFocus:this.onFocus(o),onKeyDown:this.onKeyDown(o),onPaste:this.onPaste})),this.showSeparator(o)&&t("div",{class:"input-otp-separator"}))))),t("div",{key:"0d3cfa8c081552d0c52a544a1c52c0e3d5d4f532",class:{"input-otp-description":!0,"input-otp-description-hidden":!$}},t("slot",{key:"13c3f795956749ccdf396bfb0ff882a9c9e9ce81"})))}get el(){return r(this)}static get watchers(){return{value:["valueChanged"],separators:["processSeparators"],length:["processSeparators"]}}};let u=0;c.style={ios:".sc-ion-input-otp-ios-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--separator-width:8px;--separator-height:var(--separator-width);--separator-border-radius:999px;--separator-color:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;font-size:0.875rem}.input-otp-group.sc-ion-input-otp-ios{-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.native-wrapper.sc-ion-input-otp-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--min-width)}.native-input.sc-ion-input-otp-ios{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{caret-color:var(--highlight-color)}.input-otp-description.sc-ion-input-otp-ios{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem;text-align:center}.input-otp-description-hidden.sc-ion-input-otp-ios{display:none}.input-otp-separator.sc-ion-input-otp-ios{border-radius:var(--separator-border-radius);-ms-flex-negative:0;flex-shrink:0;width:var(--separator-width);height:var(--separator-height);background:var(--separator-color)}.input-otp-size-small.sc-ion-input-otp-ios-h{--width:40px;--height:40px}.input-otp-size-small.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:8px}.input-otp-size-medium.sc-ion-input-otp-ios-h{--width:48px;--height:48px}.input-otp-size-large.sc-ion-input-otp-ios-h{--width:56px;--height:56px}.input-otp-size-medium.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios,.input-otp-size-large.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:12px}.input-otp-shape-round.sc-ion-input-otp-ios-h{--border-radius:16px}.input-otp-shape-soft.sc-ion-input-otp-ios-h{--border-radius:8px}.input-otp-shape-rectangular.sc-ion-input-otp-ios-h{--border-radius:0}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--background:none}.input-otp-fill-solid.sc-ion-input-otp-ios-h{--border-color:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-disabled.sc-ion-input-otp-ios-h{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}.input-otp-fill-outline.input-otp-disabled.sc-ion-input-otp-ios-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-disabled.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:disabled{cursor:not-allowed}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-color:var(--highlight-color);outline:none}.input-otp-fill-outline.input-otp-readonly.sc-ion-input-otp-ios-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-fill-solid.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-fill-solid.input-otp-readonly.sc-ion-input-otp-ios-h{--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-otp-ios-h,.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--border-color:var(--highlight-color)}.ion-color.sc-ion-input-otp-ios-h{--highlight-color-focused:var(--ion-color-base)}.input-otp-fill-outline.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-otp-fill-outline.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-danger, #c5000f)}.input-otp-fill-outline.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-success, #2dd55b)}.input-otp-fill-outline.input-otp-disabled.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:rgba(var(--ion-color-base-rgb), 0.3)}.sc-ion-input-otp-ios-h{--border-width:0.55px}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-width:1px}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))))}",md:".sc-ion-input-otp-md-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--separator-width:8px;--separator-height:var(--separator-width);--separator-border-radius:999px;--separator-color:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;font-size:0.875rem}.input-otp-group.sc-ion-input-otp-md{-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.native-wrapper.sc-ion-input-otp-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--min-width)}.native-input.sc-ion-input-otp-md{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{caret-color:var(--highlight-color)}.input-otp-description.sc-ion-input-otp-md{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem;text-align:center}.input-otp-description-hidden.sc-ion-input-otp-md{display:none}.input-otp-separator.sc-ion-input-otp-md{border-radius:var(--separator-border-radius);-ms-flex-negative:0;flex-shrink:0;width:var(--separator-width);height:var(--separator-height);background:var(--separator-color)}.input-otp-size-small.sc-ion-input-otp-md-h{--width:40px;--height:40px}.input-otp-size-small.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md{gap:8px}.input-otp-size-medium.sc-ion-input-otp-md-h{--width:48px;--height:48px}.input-otp-size-large.sc-ion-input-otp-md-h{--width:56px;--height:56px}.input-otp-size-medium.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md,.input-otp-size-large.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md{gap:12px}.input-otp-shape-round.sc-ion-input-otp-md-h{--border-radius:16px}.input-otp-shape-soft.sc-ion-input-otp-md-h{--border-radius:8px}.input-otp-shape-rectangular.sc-ion-input-otp-md-h{--border-radius:0}.input-otp-fill-outline.sc-ion-input-otp-md-h{--background:none}.input-otp-fill-solid.sc-ion-input-otp-md-h{--border-color:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-disabled.sc-ion-input-otp-md-h{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}.input-otp-fill-outline.input-otp-disabled.sc-ion-input-otp-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.input-otp-disabled.sc-ion-input-otp-md-h,.input-otp-disabled.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:disabled{cursor:not-allowed}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{--border-color:var(--highlight-color);outline:none}.input-otp-fill-outline.input-otp-readonly.sc-ion-input-otp-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-fill-solid.input-otp-disabled.sc-ion-input-otp-md-h,.input-otp-fill-solid.input-otp-readonly.sc-ion-input-otp-md-h{--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.ion-touched.ion-invalid.sc-ion-input-otp-md-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-otp-md-h{--highlight-color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-otp-md-h,.ion-touched.ion-invalid.sc-ion-input-otp-md-h{--border-color:var(--highlight-color)}.ion-color.sc-ion-input-otp-md-h{--highlight-color-focused:var(--ion-color-base)}.input-otp-fill-outline.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-otp-fill-outline.ion-color.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-outline.ion-color.has-focus.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.has-focus.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:var(--ion-color-danger, #c5000f)}.input-otp-fill-outline.ion-color.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-outline.ion-color.has-focus.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.has-focus.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:var(--ion-color-success, #2dd55b)}.input-otp-fill-outline.input-otp-disabled.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:rgba(var(--ion-color-base-rgb), 0.3)}.sc-ion-input-otp-md-h{--border-width:1px}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{--border-width:2px}.input-otp-fill-outline.sc-ion-input-otp-md-h{--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3))}"};export{c as ion_input_otp}