@ionic/core 8.5.7-dev.11746042265.1dbc2f10 → 8.5.7-dev.11747094257.1dd7476b

package/dist/esm/ion-input-otp.entry.js

@@ -0,0 +1,572 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { r as registerInstance, c as createEvent, h, F as Fragment, d as Host, g as getElement } from './index-3GtB1kQI.js';
+import { p as printIonWarning } from './index-CEo1SqXS.js';
+import { i as isRTL } from './dir-C53feagD.js';
+import { c as createColorClasses } from './theme-DiVJyqlX.js';
+import { b as getIonMode } from './ionic-global-Dw-MNnQB.js';
+
+const inputOtpIosCss = ".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-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))))}";
+
+const inputOtpMdCss = ".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-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))}";
+
+const InputOTP = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ionInput = createEvent(this, "ionInput", 7);
+        this.ionChange = createEvent(this, "ionChange", 7);
+        this.ionComplete = createEvent(this, "ionComplete", 7);
+        this.ionBlur = createEvent(this, "ionBlur", 7);
+        this.ionFocus = createEvent(this, "ionFocus", 7);
+        this.inputRefs = [];
+        this.inputId = `ion-input-otp-${inputIds++}`;
+        this.parsedSeparators = [];
+        /**
+         * Tracks whether the user is navigating through input boxes using keyboard navigation
+         * (arrow keys, tab) versus mouse clicks. This is used to determine the appropriate
+         * focus behavior when an input box is focused.
+         */
+        this.isKeyboardNavigation = false;
+        this.inputValues = [];
+        this.hasFocus = false;
+        /**
+         * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+         * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        this.autocapitalize = 'off';
+        /**
+         * If `true`, the user cannot interact with the input.
+         */
+        this.disabled = false;
+        /**
+         * The fill for the input boxes. If `"solid"` the input boxes will have a background. If
+         * `"outline"` the input boxes will be transparent with a border.
+         */
+        this.fill = 'outline';
+        /**
+         * The number of input boxes to display.
+         */
+        this.length = 4;
+        /**
+         * 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.
+         * If "rectangular" they will have no border radius.
+         * If "soft" they will have a soft border radius.
+         */
+        this.shape = 'round';
+        /**
+         * The type of input allowed in the input boxes.
+         */
+        this.type = 'number';
+        /**
+         * The value of the input group.
+         */
+        this.value = '';
+        this.onInput = (index) => (event) => {
+            const { validKeys } = 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 && !validKeys.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 keyboard navigation and input for the OTP component.
+         *
+         * Navigation:
+         * - Backspace: Clears current input and moves to previous box if empty
+         * - Arrow Left/Right: Moves focus between input boxes
+         * - Tab: Allows normal tab navigation between components
+         *
+         * Input Behavior:
+         * - Validates input against the allowed pattern
+         * - When entering a key in a filled box:
+         *   - Shifts existing values right if there is room
+         *   - Updates the value of the input group
+         *   - Prevents default behavior to avoid automatic focus shift
+         */
+        this.onKeyDown = (index) => (event) => {
+            const { length } = this;
+            const rtl = isRTL(this.el);
+            const input = event.target;
+            const isPasteShortcut = (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'v';
+            const isTextSelection = input.selectionStart !== input.selectionEnd;
+            // Return if the key is the paste shortcut or the input value
+            // text is selected and let the onPaste / onInput handler manage it
+            if (isPasteShortcut || isTextSelection) {
+                return;
+            }
+            if (event.key === 'Backspace') {
+                if (this.inputValues[index]) {
+                    // Remove the value at the current index
+                    this.inputValues[index] = '';
+                    // Shift all values to the right of the current index left by one
+                    for (let i = index; i < length - 1; i++) {
+                        this.inputValues[i] = this.inputValues[i + 1];
+                    }
+                    // Clear the last box
+                    this.inputValues[length - 1] = '';
+                    // Update all inputRefs to match inputValues
+                    for (let i = 0; i < length; i++) {
+                        this.inputRefs[i].value = this.inputValues[i] || '';
+                    }
+                    this.updateValue(event);
+                    event.preventDefault();
+                }
+                else if (!this.inputValues[index] && index > 0) {
+                    // If current input is empty, move to previous input
+                    this.focusPrevious(index);
+                }
+            }
+            else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+                this.isKeyboardNavigation = true;
+                event.preventDefault();
+                const isLeft = event.key === 'ArrowLeft';
+                const shouldMoveNext = (isLeft && rtl) || (!isLeft && !rtl);
+                // Only allow moving to the next input if the current has a value
+                if (shouldMoveNext) {
+                    if (this.inputValues[index] && index < length - 1) {
+                        this.focusNext(index);
+                    }
+                }
+                else {
+                    this.focusPrevious(index);
+                }
+            }
+            else if (event.key === 'Tab') {
+                this.isKeyboardNavigation = true;
+                // Let all tab events proceed normally
+                return;
+            }
+            // If the input box contains a value and the key being
+            // entered is a valid key for the input box update the value
+            // and shift the values to the right if there is room.
+            if (this.inputValues[index] && this.validKeys.test(event.key)) {
+                if (!this.inputValues[length - 1]) {
+                    for (let i = length - 1; i > index; i--) {
+                        this.inputValues[i] = this.inputValues[i - 1];
+                        this.inputRefs[i].value = this.inputValues[i] || '';
+                    }
+                }
+                this.inputValues[index] = event.key;
+                this.inputRefs[index].value = event.key;
+                this.updateValue(event);
+                // Prevent default to avoid the browser from
+                // automatically moving the focus to the next input
+                event.preventDefault();
+            }
+        };
+        /**
+         * Handles pasting text into the input OTP component.
+         * This function prevents the default paste behavior and
+         * validates the pasted text against the allowed pattern.
+         * It then updates the value of the input group and focuses
+         * the next empty input after pasting.
+         */
+        this.onPaste = (event) => {
+            var _a, _b, _c;
+            const { inputRefs, length, validKeys } = this;
+            event.preventDefault();
+            const pastedText = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
+            // If there is no pasted text, still emit the input change event
+            // because this is how the native input element behaves
+            // but return early because there is nothing to paste.
+            if (!pastedText) {
+                this.emitIonInput(event);
+                return;
+            }
+            const validChars = pastedText
+                .split('')
+                .filter((char) => validKeys.test(char))
+                .slice(0, length);
+            // Find the first empty input
+            const startIndex = this.getFirstEmptyIndex();
+            // If all boxes are filled, start at 0
+            const pasteStart = startIndex === -1 ? 0 : startIndex;
+            validChars.forEach((char, index) => {
+                const targetIndex = pasteStart + index;
+                if (targetIndex < length) {
+                    this.inputRefs[targetIndex].value = char;
+                    this.inputValues[targetIndex] = char;
+                }
+            });
+            this.updateValue(event);
+            // Focus the next empty input after pasting
+            // If all boxes are filled, focus the last input
+            const nextEmptyIndex = pasteStart + validChars.length;
+            if (nextEmptyIndex < length) {
+                (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            else {
+                (_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);
+                }
+            }
+        };
+    }
+    valueChanged() {
+        this.initializeValues();
+    }
+    /**
+     * Processes the separators prop into an array of numbers.
+     *
+     * If the separators prop is not provided, returns an empty array.
+     * If the separators prop is 'all', returns an array of all valid positions (1 to length-1).
+     * If the separators prop is an array, returns it as is.
+     * If the separators prop is a string, splits it by commas and parses each part as a number.
+     *
+     * If the separators are greater than the input length, it will warn and ignore the separators.
+     */
+    processSeparators() {
+        const { separators, length } = this;
+        if (separators === undefined) {
+            this.parsedSeparators = [];
+            return;
+        }
+        if (typeof separators === 'string' && separators !== 'all') {
+            const isValidFormat = /^(\d+)(,\d+)*$/.test(separators);
+            if (!isValidFormat) {
+                printIonWarning(`[ion-input-otp] - Invalid separators format. Expected a comma-separated list of numbers, an array of numbers, or "all". Received: ${separators}`, this.el);
+                this.parsedSeparators = [];
+                return;
+            }
+        }
+        let separatorValues;
+        if (separators === 'all') {
+            separatorValues = Array.from({ length: length - 1 }, (_, i) => i + 1);
+        }
+        else if (Array.isArray(separators)) {
+            separatorValues = separators;
+        }
+        else {
+            separatorValues = separators
+                .split(',')
+                .map((pos) => parseInt(pos, 10))
+                .filter((pos) => !isNaN(pos));
+        }
+        // Check for duplicate separator positions
+        const duplicates = separatorValues.filter((pos, index) => separatorValues.indexOf(pos) !== index);
+        if (duplicates.length > 0) {
+            printIonWarning(`[ion-input-otp] - Duplicate separator positions are not allowed. Received: ${separators}`, this.el);
+        }
+        const invalidSeparators = separatorValues.filter((pos) => pos > length);
+        if (invalidSeparators.length > 0) {
+            printIonWarning(`[ion-input-otp] - The following separator positions are greater than the input length (${length}): ${invalidSeparators.join(', ')}. These separators will be ignored.`, this.el);
+        }
+        this.parsedSeparators = separatorValues.filter((pos) => pos <= length);
+    }
+    componentWillLoad() {
+        this.processSeparators();
+        this.initializeValues();
+    }
+    /**
+     * 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() {
+        if (this.value != null && String(this.value).length > 0) {
+            const chars = String(this.value).split('').slice(0, this.length);
+            chars.forEach((char, index) => {
+                if (this.validKeys.test(char)) {
+                    this.inputValues[index] = char;
+                }
+            });
+            // Update the value without emitting events
+            this.value = this.inputValues.join('');
+        }
+    }
+    /**
+     * Resets the input values and focus state.
+     */
+    async reset() {
+        this.inputValues = Array(this.length).fill('');
+        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
+     * Otherwise, use the default regex pattern based on type
+     */
+    get validKeys() {
+        return new RegExp(`^${this.getPattern()}$`);
+    }
+    /**
+     * Gets the string pattern to pass to the input element
+     * and use in the regex for allowed characters.
+     */
+    getPattern() {
+        const { pattern, type } = this;
+        if (pattern) {
+            return pattern;
+        }
+        return type === 'number' ? '[0-9]' : '[a-zA-Z0-9]';
+    }
+    /**
+     * Get the default value for inputmode.
+     * If inputmode is provided, use it.
+     * Otherwise, use the default inputmode based on type
+     */
+    getInputmode() {
+        const { inputmode } = this;
+        if (inputmode) {
+            return inputmode;
+        }
+        if (this.type == 'number') {
+            return 'numeric';
+        }
+        else {
+            return 'text';
+        }
+    }
+    /**
+     * Updates the value of the input group.
+     * This updates the value of the input group and emits an `ionChange` event.
+     * If all of the input boxes are filled, it emits an `ionComplete` event.
+     */
+    updateValue(event) {
+        const { inputValues, length } = this;
+        const newValue = inputValues.join('');
+        this.value = newValue;
+        this.emitIonInput(event);
+        if (newValue.length === length) {
+            this.ionComplete.emit({ value: newValue });
+        }
+    }
+    /**
+     * Emits an `ionChange` event.
+     * This API should be called for user committed changes.
+     * This API should not be used for external value changes.
+     */
+    emitIonChange(event) {
+        const { value } = this;
+        // Checks for both null and undefined values
+        const newValue = value == null ? value : value.toString();
+        this.ionChange.emit({ value: newValue, event });
+    }
+    /**
+     * Emits an `ionInput` event.
+     * This is used to emit the input value when the user types,
+     * backspaces, or pastes.
+     */
+    emitIonInput(event) {
+        const { value } = this;
+        // Checks for both null and undefined values
+        const newValue = value == null ? value : value.toString();
+        this.ionInput.emit({ value: newValue, event });
+    }
+    /**
+     * Focuses the next input box.
+     */
+    focusNext(currentIndex) {
+        var _a;
+        const { inputRefs, length } = this;
+        if (currentIndex < length - 1) {
+            (_a = inputRefs[currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    /**
+     * Focuses the previous input box.
+     */
+    focusPrevious(currentIndex) {
+        var _a;
+        const { inputRefs } = this;
+        if (currentIndex > 0) {
+            (_a = inputRefs[currentIndex - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    /**
+     * Determines if a separator should be shown for a given index by
+     * checking if the index is included in the parsed separators array.
+     */
+    showSeparator(index) {
+        const { length } = this;
+        return this.parsedSeparators.includes(index + 1) && index < length - 1;
+    }
+    /**
+     * Updates the tabIndexes for the input boxes.
+     * This is used to ensure that the correct input is
+     * focused when the user navigates using the tab key.
+     */
+    updateTabIndexes() {
+        const { inputRefs, inputValues, length } = this;
+        // Find first empty index after any filled boxes
+        let firstEmptyIndex = -1;
+        for (let i = 0; i < length; i++) {
+            if (!inputValues[i] || inputValues[i] === '') {
+                firstEmptyIndex = i;
+                break;
+            }
+        }
+        // Update tabIndex for all inputs
+        inputRefs.forEach((input, index) => {
+            // If all boxes are filled, make the last box tabbable
+            // Otherwise, make the first empty box tabbable
+            const shouldBeTabbable = firstEmptyIndex === -1 ? index === length - 1 : firstEmptyIndex === index;
+            input.tabIndex = shouldBeTabbable ? 0 : -1;
+        });
+    }
+    /**
+     * Loops through the input values and returns the index
+     * of the first empty input.
+     * Returns -1 if all inputs are filled.
+     */
+    getFirstEmptyIndex() {
+        const { inputValues, length } = this;
+        for (let i = 0; i < length; i++) {
+            if (!inputValues[i] || inputValues[i] === '') {
+                return i;
+            }
+        }
+        return -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;
+        const firstEmptyIndex = this.getFirstEmptyIndex();
+        return firstEmptyIndex === -1 ? length - 1 : firstEmptyIndex;
+    }
+    render() {
+        const { autocapitalize, color, disabled, fill, hasFocus, inputId, inputRefs, inputValues, length, readonly, shape, size, } = this;
+        const mode = getIonMode(this);
+        const inputmode = this.getInputmode();
+        const tabbableIndex = this.getTabbableIndex();
+        const pattern = this.getPattern();
+        return (h(Host, { key: '78321b1d7a3dd16d92c7ec28017959f384265127', class: createColorClasses(color, {
+                [mode]: true,
+                'has-focus': hasFocus,
+                [`input-otp-size-${size}`]: true,
+                [`input-otp-shape-${shape}`]: true,
+                [`input-otp-fill-${fill}`]: true,
+                'input-otp-disabled': disabled,
+                'input-otp-readonly': readonly,
+            }) }, h("div", { key: '060e5d437d7afc82bb8a37b4946c462ca27ee71d', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("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) && h("div", { class: "input-otp-separator" }))))), h("div", { key: '652931fce128209385ae5f37dde94ec8558ac420', class: "input-otp-description" }, h("slot", { key: '1609323daceadad25ddecaf51e89999d7e070391' }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "separators": ["processSeparators"],
+        "length": ["processSeparators"]
+    }; }
+};
+let inputIds = 0;
+InputOTP.style = {
+    ios: inputOtpIosCss,
+    md: inputOtpMdCss
+};
+
+export { InputOTP as ion_input_otp };

package/dist/esm/ion-input-password-toggle.entry.js

@@ -1,21 +1,23 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, h, e as Host, f as getElement } from './index-527b9e34.js';
-import { p as printIonWarning } from './index-cfd9c1f2.js';
-import { c as createColorClasses } from './theme-01f3f29c.js';
-import { x as eye, y as eyeOff } from './index-e2cf2ceb.js';
-import { b as getIonMode } from './ionic-global-b26f573e.js';
+import { r as registerInstance, h, d as Host, g as getElement } from './index-3GtB1kQI.js';
+import { p as printIonWarning } from './index-CEo1SqXS.js';
+import { c as createColorClasses } from './theme-DiVJyqlX.js';
+import { x as eyeOff, y as eye } from './index-BLV6ykCk.js';
+import { b as getIonMode } from './ionic-global-Dw-MNnQB.js';
 
 const iosInputPasswordToggleCss = "";
-const IonInputPasswordToggleIosStyle0 = iosInputPasswordToggleCss;
 
 const mdInputPasswordToggleCss = "";
-const IonInputPasswordToggleMdStyle0 = mdInputPasswordToggleCss;
 
 const InputPasswordToggle = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * @internal
+         */
+        this.type = 'password';
         this.togglePasswordVisibility = () => {
             const { inputElRef } = this;
             if (!inputElRef) {
@@ -23,10 +25,6 @@ const InputPasswordToggle = class {
             }
             inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text';
         };
-        this.color = undefined;
-        this.showIcon = undefined;
-        this.hideIcon = undefined;
-        this.type = 'password';
     }
     /**
      * Whenever the input type changes we need to re-run validation to ensure the password
@@ -65,16 +63,16 @@ const InputPasswordToggle = class {
         const showPasswordIcon = (_a = this.showIcon) !== null && _a !== void 0 ? _a : eye;
         const hidePasswordIcon = (_b = this.hideIcon) !== null && _b !== void 0 ? _b : eyeOff;
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: '1a28e078c83e74c72d8bb8189ece93ec2e3fa3d0', class: createColorClasses(color, {
+        return (h(Host, { key: '91bc55664d496fe457518bd112865dd7811d0c17', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: '039d1bab764093bb6fe4a34299b0872abda087fd', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: '99f86e2ee97ffa6dbc74a433df4e22a867889dd7', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '26477ee97b808c3d79944bf5e33d4e05f1ae0b3f', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'e7656040b08c6a394d56f1fc41d6ca34225287d2', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -82,8 +80,8 @@ const InputPasswordToggle = class {
     }; }
 };
 InputPasswordToggle.style = {
-    ios: IonInputPasswordToggleIosStyle0,
-    md: IonInputPasswordToggleMdStyle0
+    ios: iosInputPasswordToggleCss,
+    md: mdInputPasswordToggleCss
 };
 
 export { InputPasswordToggle as ion_input_password_toggle };