@getpara/core-components 2.0.0-alpha.69 → 2.0.0-alpha.70

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["cpsl-hero.cjs",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2.cjs",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-nav-button.cjs",[[1,"cpsl-nav-button",{"disabled":[516],"exactMainRouteMatch":[4,"exact-main-route-match"],"exactSubRouteMatch":[4,"exact-sub-route-match"],"route":[1],"subRoutes":[16],"path":[1]}]]],["cpsl-col.cjs",[[1,"cpsl-col",{"align":[1],"justify":[1],"gap":[8],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-identicon.cjs",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1],"arcWidth":[1,"arc-width"]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row",{"col":[4],"align":[1],"justify":[1],"gap":[8]}]]],["cpsl-alert_34.cjs",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-select",{"anchorElId":[1,"anchor-el-id"],"autoWidth":[4,"auto-width"],"alignCenter":[4,"align-center"],"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"icon":[1],"label":[1],"multiple":[4],"noIconAnimation":[4,"no-icon-animation"],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"selectedItemColor":[1,"selected-item-color"],"selectedItemVariant":[1,"selected-item-variant"],"selectedItemWeight":[1,"selected-item-weight"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-file-upload",{"disabled":[516],"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-auth-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32],"isMobile":[32]},null,{"open":["toggleModal"]}],[1,"cpsl-alert",{"icon":[1],"noIcon":[4,"no-icon"],"variant":[1],"filled":[4]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-icon-group",{"expandFrom":[1,"expand-from"],"disabled":[4],"icons":[16],"isHovered":[32]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"disabled":[516],"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"size":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-nav-button-group"],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2],"icon":[1]}],[1,"cpsl-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},[[8,"cpslTabButtonSizeChange","onTabSizeChange"]],{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-input",{"as":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"autoselect":[4],"disabled":[4],"contrastText":[4,"contrast-text"],"enterkeyhint":[1],"errorText":[1,"error-text"],"fitContent":[4,"fit-content"],"mask":[1],"isPhone":[4,"is-phone"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"],"mask":["handleSetupMask"],"value":["handleValueChange"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"alignCenter":[4,"align-center"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"hasSetInitialPosition":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"alignCenter":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"variant":[1],"size":[2],"barWidth":[2,"bar-width"],"speed":[2]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"type":[1],"variant":[513]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1],"align":[1]}],[1,"cpsl-icon",{"src":[1],"size":[1],"invert":[4],"inset":[1],"icon":[1],"radius":[1],"background":[1],"color":[1],"border":[1]}]]]], options);
+  return index.bootstrapLazy([["cpsl-hero.cjs",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2.cjs",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-nav-button.cjs",[[1,"cpsl-nav-button",{"disabled":[516],"exactMainRouteMatch":[4,"exact-main-route-match"],"exactSubRouteMatch":[4,"exact-sub-route-match"],"route":[1],"subRoutes":[16],"path":[1]}]]],["cpsl-col.cjs",[[1,"cpsl-col",{"align":[1],"justify":[1],"gap":[8],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-identicon.cjs",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1],"arcWidth":[1,"arc-width"]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row",{"col":[4],"align":[1],"justify":[1],"gap":[8]}]]],["cpsl-alert_34.cjs",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-select",{"anchorElId":[1,"anchor-el-id"],"autoWidth":[4,"auto-width"],"alignCenter":[4,"align-center"],"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"icon":[1],"label":[1],"multiple":[4],"noIconAnimation":[4,"no-icon-animation"],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"selectedItemColor":[1,"selected-item-color"],"selectedItemVariant":[1,"selected-item-variant"],"selectedItemWeight":[1,"selected-item-weight"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-file-upload",{"disabled":[516],"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-auth-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32],"isMobile":[32]},null,{"open":["toggleModal"]}],[1,"cpsl-alert",{"icon":[1],"noIcon":[4,"no-icon"],"variant":[1],"filled":[4]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]},null,{"code":["watchCodeProp"]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-icon-group",{"expandFrom":[1,"expand-from"],"disabled":[4],"icons":[16],"isHovered":[32]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"disabled":[516],"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"size":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-nav-button-group"],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2],"icon":[1]}],[1,"cpsl-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},[[8,"cpslTabButtonSizeChange","onTabSizeChange"]],{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-input",{"as":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"autoselect":[4],"disabled":[4],"contrastText":[4,"contrast-text"],"enterkeyhint":[1],"errorText":[1,"error-text"],"fitContent":[4,"fit-content"],"mask":[1],"isPhone":[4,"is-phone"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"],"mask":["handleSetupMask"],"value":["handleValueChange"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"alignCenter":[4,"align-center"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"hasSetInitialPosition":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"alignCenter":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"variant":[1],"size":[2],"barWidth":[2,"bar-width"],"speed":[2]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"type":[1],"variant":[513]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1],"align":[1]}],[1,"cpsl-icon",{"src":[1],"size":[1],"invert":[4],"inset":[1],"icon":[1],"radius":[1],"background":[1],"color":[1],"border":[1]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js

@@ -2,7 +2,6 @@ import { Host, h } from "@stencil/core";
 export class CpslCodeInput {
     constructor() {
         this.handleInput = (ind, ev) => {
-            var _a;
             const inputElements = this.inputs;
             // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event
             if (ev.inputType === 'insertFromPaste') {
@@ -11,53 +10,89 @@ export class CpslCodeInput {
             }
             if (ev.inputType === 'insertText') {
                 if (this.type === 'number' && isNaN(parseInt(ev.data))) {
+                    ev.preventDefault();
                     inputElements[ind].value = '';
                     return;
                 }
+                // Prevent the default behavior FIRST
+                ev.preventDefault();
+                // Build the new code from the current component state, not the DOM
+                const currentCode = this.code || '';
+                // Insert the new character at the focused position, not at the end
+                const beforeFocused = currentCode.substring(0, ind);
+                const afterFocused = currentCode.substring(ind + 1);
+                const newCode = beforeFocused + ev.data + afterFocused;
                 // Prevent input beyond the maximum length
-                if (this.code && this.code.length >= this.length) {
-                    inputElements[ind].value = this.code[ind] || '';
-                    return;
-                }
-                const newCode = `${(_a = this.code) !== null && _a !== void 0 ? _a : ''}${ev.data}`;
-                // Ensure we don't exceed the maximum length
                 if (newCode.length > this.length) {
-                    const truncatedCode = newCode.substring(0, this.length);
-                    this.cpslInput.emit({ value: truncatedCode });
-                    this.code = truncatedCode;
-                    // Set each input to its corresponding character
-                    inputElements.forEach((input, index) => {
-                        input.value = truncatedCode[index] || '';
-                    });
+                    return;
                 }
-                else {
-                    inputElements[Math.min(this.length - 1, newCode.length)].focus();
-                    this.cpslInput.emit({ value: newCode });
-                    this.code = newCode;
+                // Update the component state and emit event
+                this.cpslInput.emit({ value: newCode });
+                this.code = newCode;
+                // Update the specific input that was typed in
+                inputElements[ind].value = ev.data;
+                // Focus next input if not at the end
+                if (ind < this.length - 1) {
+                    // Set flag to prevent handleFocus from interfering
+                    this.isArrowNavigation = true;
+                    setTimeout(() => {
+                        inputElements[ind + 1].focus();
+                        this.isArrowNavigation = false;
+                    }, 0);
                 }
             }
         };
+        this.isArrowNavigation = false;
         this.handleKeyDown = (ind, ev) => {
             const inputElements = this.inputs;
             switch (ev.key) {
                 case 'Backspace': {
                     let newCode;
                     if (!inputElements[ind].value) {
-                        inputElements[Math.max(0, ind - 1)].value = '';
-                        inputElements[Math.max(0, ind - 1)].focus();
-                        newCode = this.code.substring(0, ind - 1);
+                        // If current input is empty, move to previous and clear it
+                        if (ind > 0) {
+                            inputElements[ind - 1].value = '';
+                            setTimeout(() => {
+                                inputElements[ind - 1].focus();
+                            }, 0);
+                            // Remove character at previous position
+                            const currentCode = this.code || '';
+                            newCode = currentCode.substring(0, ind - 1) + currentCode.substring(ind);
+                        }
+                        else {
+                            newCode = this.code;
+                        }
                     }
                     else {
-                        newCode = this.code.substring(0, ind);
+                        // Clear current input and remove character at current position
+                        inputElements[ind].value = '';
+                        const currentCode = this.code || '';
+                        newCode = currentCode.substring(0, ind) + currentCode.substring(ind + 1);
                     }
                     this.cpslInput.emit({ value: newCode });
                     this.code = newCode;
                     break;
                 }
                 case 'ArrowLeft': {
-                    setTimeout(() => {
-                        this.inputs[ind].setSelectionRange(1, 1);
-                    }, 0);
+                    ev.preventDefault();
+                    if (ind > 0) {
+                        this.isArrowNavigation = true;
+                        setTimeout(() => {
+                            inputElements[ind - 1].focus();
+                            this.isArrowNavigation = false;
+                        }, 0);
+                    }
+                    break;
+                }
+                case 'ArrowRight': {
+                    ev.preventDefault();
+                    if (ind < this.length - 1) {
+                        this.isArrowNavigation = true;
+                        setTimeout(() => {
+                            inputElements[ind + 1].focus();
+                            this.isArrowNavigation = false;
+                        }, 0);
+                    }
                     break;
                 }
                 default: {
@@ -67,6 +102,21 @@ export class CpslCodeInput {
         };
         this.handleFocus = (ind) => {
             const inputElements = this.inputs;
+            // Don't interfere with arrow key navigation
+            if (this.isArrowNavigation) {
+                setTimeout(() => {
+                    inputElements[ind].setSelectionRange(1, 1);
+                }, 0);
+                return;
+            }
+            // If the focused input already has a value, allow it to stay focused (user clicked on it)
+            if (inputElements[ind].value) {
+                setTimeout(() => {
+                    inputElements[ind].setSelectionRange(1, 1);
+                }, 0);
+                return;
+            }
+            // Otherwise, use the default focus logic (find first empty or go to last)
             for (const input of inputElements) {
                 if (!input.value) {
                     input.focus();
@@ -112,15 +162,24 @@ export class CpslCodeInput {
         this.length = undefined;
         this.type = 'number';
     }
+    watchCodeProp(newCode) {
+        // Update the input values when the code prop changes externally
+        const inputElements = this.inputs;
+        if (inputElements.length > 0) {
+            inputElements.forEach((input, index) => {
+                input.value = (newCode === null || newCode === void 0 ? void 0 : newCode[index]) || '';
+            });
+        }
+    }
     get inputs() {
         return Array.from(this.el.shadowRoot.querySelectorAll('input'));
     }
     render() {
         var _a;
-        return (h(Host, { key: '090ef84f543cea35b4e128c5ec2bbcd188bb2a86' }, h("div", { key: '93d16d0a74e81cd367f8ee23bfbfea8118b39b0c', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+        return (h(Host, { key: '82961090c1a837f782588d3acea703550b1b0a44' }, h("div", { key: '0dac1cc8d80b7fb67e334b995172b82c03443394', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
             var _a, _b;
             return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText), 'has-value': ((_a = this.code) === null || _a === void 0 ? void 0 : _a[i]) !== undefined }, id: `code-input-${i}`, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_b = this.code) === null || _b === void 0 ? void 0 : _b[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
-        })), (this.errorText || this.helperText) && (h("div", { key: 'ae9ccf7cb7736ab4ad186f6d317afbb0f58a518c', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: '1fb36b201fe1aa1640b39900881e8b1eaeff614d', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: '30cc9abb139ef14dca8fae44dfcbb61002e1ca6d' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        })), (this.errorText || this.helperText) && (h("div", { key: 'c3c2d5a629d0d2bbcc886386a5942477c735831d', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: 'd75171ab8641592d939b0883ae5f686520dacff6', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: 'dc9808b19dadc26db49bb79b16b89020822b177b' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     static get is() { return "cpsl-code-input"; }
     static get encapsulation() { return "shadow"; }
@@ -249,5 +308,11 @@ export class CpslCodeInput {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "code",
+                "methodName": "watchCodeProp"
+            }];
+    }
 }
 //# sourceMappingURL=cpsl-code-input.js.map

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface.js';\n\n@Component({\n  tag: 'cpsl-code-input',\n  styleUrl: 'cpsl-code-input.scss',\n  shadow: true,\n})\nexport class CpslCodeInput {\n  @Element() el!: HTMLCpslCodeInputElement;\n\n  /**\n   * Value of the code.\n   */\n\n  @Prop({ mutable: true }) code: string;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Length of the code.\n   */\n  @Prop() length: number;\n\n  /**\n   * Type of characters to accept in the code.\n   * Defaults to number.\n   */\n  @Prop() type?: 'number' | 'string' = 'number';\n\n  /**\n   * The `cpslInput` event is fired each time the user modifies the input's value.\n   */\n  @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n  private handleInput = (ind: number, ev: InputEvent) => {\n    const inputElements = this.inputs;\n\n    // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event\n    if (ev.inputType === 'insertFromPaste') {\n      inputElements[Math.min(this.length - 1, ind)].value = '';\n      return;\n    }\n\n    if (ev.inputType === 'insertText') {\n      if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n        inputElements[ind].value = '';\n        return;\n      }\n\n      // Prevent input beyond the maximum length\n      if (this.code && this.code.length >= this.length) {\n        inputElements[ind].value = this.code[ind] || '';\n        return;\n      }\n\n      const newCode = `${this.code ?? ''}${ev.data}`;\n\n      // Ensure we don't exceed the maximum length\n      if (newCode.length > this.length) {\n        const truncatedCode = newCode.substring(0, this.length);\n        this.cpslInput.emit({ value: truncatedCode });\n        this.code = truncatedCode;\n        // Set each input to its corresponding character\n        inputElements.forEach((input, index) => {\n          input.value = truncatedCode[index] || '';\n        });\n      } else {\n        inputElements[Math.min(this.length - 1, newCode.length)].focus();\n        this.cpslInput.emit({ value: newCode });\n        this.code = newCode;\n      }\n    }\n  };\n\n  private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n    const inputElements = this.inputs;\n\n    switch (ev.key) {\n      case 'Backspace': {\n        let newCode;\n        if (!inputElements[ind].value) {\n          inputElements[Math.max(0, ind - 1)].value = '';\n          inputElements[Math.max(0, ind - 1)].focus();\n          newCode = this.code.substring(0, ind - 1);\n        } else {\n          newCode = this.code.substring(0, ind);\n        }\n        this.cpslInput.emit({ value: newCode });\n        this.code = newCode;\n        break;\n      }\n      case 'ArrowLeft': {\n        setTimeout(() => {\n          this.inputs[ind].setSelectionRange(1, 1);\n        }, 0);\n        break;\n      }\n      default: {\n        break;\n      }\n    }\n  };\n\n  private handleFocus = (ind: number) => {\n    const inputElements = this.inputs;\n\n    for (const input of inputElements) {\n      if (!input.value) {\n        input.focus();\n        break;\n      } else if (input.id === `code-input-${this.length - 1}`) {\n        input.focus();\n        break;\n      }\n    }\n\n    setTimeout(() => {\n      inputElements[ind].setSelectionRange(1, 1);\n    }, 0);\n  };\n\n  private handlePaste = (e: ClipboardEvent) => {\n    const inputElements = this.inputs;\n    let pastedCode = e.clipboardData.getData('text');\n\n    // Filter based on type\n    if (this.type === 'number') {\n      // Remove all non-numeric characters\n      pastedCode = pastedCode.replace(/\\D/g, '');\n\n      // If no valid numbers remain, clear and return\n      if (!pastedCode) {\n        setTimeout(() => {\n          inputElements[0].value = '';\n        }, 0);\n        return;\n      }\n    }\n\n    // Truncate pasted code to match the expected length\n    const truncatedCode = pastedCode.substring(0, this.length);\n\n    this.cpslInput.emit({\n      value: truncatedCode,\n    });\n\n    inputElements.forEach((input, index) => {\n      input.value = truncatedCode.charAt(index) || '';\n    });\n\n    inputElements[Math.min(this.length - 1, truncatedCode.length)].focus();\n  };\n\n  private get inputs() {\n    return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"code-container\">\n          {new Array(this.length).fill(0).map((_, i) => (\n            <input\n              class={{ 'code-input': true, 'error': Boolean(this.errorText), 'has-value': this.code?.[i] !== undefined }}\n              id={`code-input-${i}`}\n              onKeyDown={ev => this.handleKeyDown(i, ev)}\n              onInput={ev => this.handleInput(i, ev)}\n              onFocus={() => this.handleFocus(i)}\n              onPaste={this.handlePaste}\n              min={0}\n              max={9}\n              value={this.code?.[i]}\n              inputMode={this.type === 'number' ? 'numeric' : 'text'}\n            />\n          ))}\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <cpsl-icon icon={this.errorText ? 'alertCircle' : 'infoCircle'} />\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-code-input.js","sourceRoot":"","sources":["../../../../src/components/cpsl-code-input/cpsl-code-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ9F,MAAM,OAAO,aAAa;;QA8ChB,gBAAW,GAAG,CAAC,GAAW,EAAE,EAAc,EAAE,EAAE;YACpD,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAElC,oHAAoH;YACpH,IAAI,EAAE,CAAC,SAAS,KAAK,iBAAiB,EAAE,CAAC;gBACvC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;gBACzD,OAAO;YACT,CAAC;YAED,IAAI,EAAE,CAAC,SAAS,KAAK,YAAY,EAAE,CAAC;gBAClC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;oBACvD,EAAE,CAAC,cAAc,EAAE,CAAC;oBACpB,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;oBAC9B,OAAO;gBACT,CAAC;gBAED,qCAAqC;gBACrC,EAAE,CAAC,cAAc,EAAE,CAAC;gBAEpB,mEAAmE;gBACnE,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;gBAEpC,mEAAmE;gBACnE,MAAM,aAAa,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;gBACpD,MAAM,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;gBACpD,MAAM,OAAO,GAAG,aAAa,GAAG,EAAE,CAAC,IAAI,GAAG,YAAY,CAAC;gBAEvD,0CAA0C;gBAC1C,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;oBACjC,OAAO;gBACT,CAAC;gBAED,4CAA4C;gBAC5C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;gBACxC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;gBAEpB,8CAA8C;gBAC9C,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,IAAI,CAAC;gBAEnC,qCAAqC;gBACrC,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAC1B,mDAAmD;oBACnD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;oBAC9B,UAAU,CAAC,GAAG,EAAE;wBACd,aAAa,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;wBAC/B,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;oBACjC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACR,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,sBAAiB,GAAG,KAAK,CAAC;QAE1B,kBAAa,GAAG,CAAC,GAAW,EAAE,EAAiB,EAAE,EAAE;YACzD,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAElC,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC;gBACf,KAAK,WAAW,CAAC,CAAC,CAAC;oBACjB,IAAI,OAAO,CAAC;oBACZ,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;wBAC9B,2DAA2D;wBAC3D,IAAI,GAAG,GAAG,CAAC,EAAE,CAAC;4BACZ,aAAa,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;4BAClC,UAAU,CAAC,GAAG,EAAE;gCACd,aAAa,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;4BACjC,CAAC,EAAE,CAAC,CAAC,CAAC;4BACN,wCAAwC;4BACxC,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;4BACpC,OAAO,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;wBAC3E,CAAC;6BAAM,CAAC;4BACN,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;wBACtB,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,+DAA+D;wBAC/D,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;wBAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;wBACpC,OAAO,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,WAAW,CAAC,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;oBAC3E,CAAC;oBACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;oBACxC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;oBACpB,MAAM;gBACR,CAAC;gBACD,KAAK,WAAW,CAAC,CAAC,CAAC;oBACjB,EAAE,CAAC,cAAc,EAAE,CAAC;oBACpB,IAAI,GAAG,GAAG,CAAC,EAAE,CAAC;wBACZ,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;wBAC9B,UAAU,CAAC,GAAG,EAAE;4BACd,aAAa,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;4BAC/B,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;wBACjC,CAAC,EAAE,CAAC,CAAC,CAAC;oBACR,CAAC;oBACD,MAAM;gBACR,CAAC;gBACD,KAAK,YAAY,CAAC,CAAC,CAAC;oBAClB,EAAE,CAAC,cAAc,EAAE,CAAC;oBACpB,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;wBAC1B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;wBAC9B,UAAU,CAAC,GAAG,EAAE;4BACd,aAAa,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;4BAC/B,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;wBACjC,CAAC,EAAE,CAAC,CAAC,CAAC;oBACR,CAAC;oBACD,MAAM;gBACR,CAAC;gBACD,OAAO,CAAC,CAAC,CAAC;oBACR,MAAM;gBACR,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,GAAW,EAAE,EAAE;YACpC,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAElC,4CAA4C;YAC5C,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3B,UAAU,CAAC,GAAG,EAAE;oBACd,aAAa,CAAC,GAAG,CAAC,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC7C,CAAC,EAAE,CAAC,CAAC,CAAC;gBACN,OAAO;YACT,CAAC;YAED,0FAA0F;YAC1F,IAAI,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;gBAC7B,UAAU,CAAC,GAAG,EAAE;oBACd,aAAa,CAAC,GAAG,CAAC,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC7C,CAAC,EAAE,CAAC,CAAC,CAAC;gBACN,OAAO;YACT,CAAC;YAED,0EAA0E;YAC1E,KAAK,MAAM,KAAK,IAAI,aAAa,EAAE,CAAC;gBAClC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;oBACjB,KAAK,CAAC,KAAK,EAAE,CAAC;oBACd,MAAM;gBACR,CAAC;qBAAM,IAAI,KAAK,CAAC,EAAE,KAAK,cAAc,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,EAAE,CAAC;oBACxD,KAAK,CAAC,KAAK,EAAE,CAAC;oBACd,MAAM;gBACR,CAAC;YACH,CAAC;YAED,UAAU,CAAC,GAAG,EAAE;gBACd,aAAa,CAAC,GAAG,CAAC,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAC7C,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,CAAiB,EAAE,EAAE;YAC1C,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAClC,IAAI,UAAU,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAEjD,uBAAuB;YACvB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC3B,oCAAoC;gBACpC,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;gBAE3C,+CAA+C;gBAC/C,IAAI,CAAC,UAAU,EAAE,CAAC;oBAChB,UAAU,CAAC,GAAG,EAAE;wBACd,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;oBAC9B,CAAC,EAAE,CAAC,CAAC,CAAC;oBACN,OAAO;gBACT,CAAC;YACH,CAAC;YAED,oDAAoD;YACpD,MAAM,aAAa,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YAE3D,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,aAAa;aACrB,CAAC,CAAC;YAEH,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACrC,KAAK,CAAC,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAClD,CAAC,CAAC,CAAC;YAEH,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QACzE,CAAC,CAAC;;;;;oBAjMmC,QAAQ;;IAQ7C,aAAa,CAAC,OAAe;QAC3B,gEAAgE;QAChE,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;QAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7B,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACrC,KAAK,CAAC,KAAK,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,KAAI,EAAE,CAAC;YACvC,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAmLD,IAAY,MAAM;QAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;IAClE,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;gBAAC,OAAA,CAC5C,aACE,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAG,CAAC,CAAC,MAAK,SAAS,EAAE,EAC1G,EAAE,EAAE,cAAc,CAAC,EAAE,EACrB,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,EAAE,CAAC,EAC1C,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,EAAE,CAAC,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAClC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAG,CAAC,CAAC,EACrB,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GACtD,CACH,CAAA;aAAA,CAAC,CACE;YACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CACtC,4DAAK,KAAK,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;gBAClF,kEAAW,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,GAAI;gBAClE,+DAAO,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,UAAU,CAAQ,CAC5C,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport { CodeChangeEventDetail } from './code-change-interface.js';\n\n@Component({\n  tag: 'cpsl-code-input',\n  styleUrl: 'cpsl-code-input.scss',\n  shadow: true,\n})\nexport class CpslCodeInput {\n  @Element() el!: HTMLCpslCodeInputElement;\n\n  /**\n   * Value of the code.\n   */\n\n  @Prop({ mutable: true }) code: string;\n\n  /**\n   * Error text to show below the input. If this is provided the input will enter an error state.\n   */\n  @Prop() errorText?: string;\n\n  /**\n   * Helper text to show below the input. If `\"errorText\"` is provided that will take precedence.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Length of the code.\n   */\n  @Prop() length: number;\n\n  /**\n   * Type of characters to accept in the code.\n   * Defaults to number.\n   */\n  @Prop() type?: 'number' | 'string' = 'number';\n\n  /**\n   * The `cpslInput` event is fired each time the user modifies the input's value.\n   */\n  @Event() cpslInput!: EventEmitter<CodeChangeEventDetail>;\n\n  @Watch('code')\n  watchCodeProp(newCode: string) {\n    // Update the input values when the code prop changes externally\n    const inputElements = this.inputs;\n    if (inputElements.length > 0) {\n      inputElements.forEach((input, index) => {\n        input.value = newCode?.[index] || '';\n      });\n    }\n  }\n\n  private handleInput = (ind: number, ev: InputEvent) => {\n    const inputElements = this.inputs;\n\n    // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event\n    if (ev.inputType === 'insertFromPaste') {\n      inputElements[Math.min(this.length - 1, ind)].value = '';\n      return;\n    }\n\n    if (ev.inputType === 'insertText') {\n      if (this.type === 'number' && isNaN(parseInt(ev.data))) {\n        ev.preventDefault();\n        inputElements[ind].value = '';\n        return;\n      }\n\n      // Prevent the default behavior FIRST\n      ev.preventDefault();\n\n      // Build the new code from the current component state, not the DOM\n      const currentCode = this.code || '';\n\n      // Insert the new character at the focused position, not at the end\n      const beforeFocused = currentCode.substring(0, ind);\n      const afterFocused = currentCode.substring(ind + 1);\n      const newCode = beforeFocused + ev.data + afterFocused;\n\n      // Prevent input beyond the maximum length\n      if (newCode.length > this.length) {\n        return;\n      }\n\n      // Update the component state and emit event\n      this.cpslInput.emit({ value: newCode });\n      this.code = newCode;\n\n      // Update the specific input that was typed in\n      inputElements[ind].value = ev.data;\n\n      // Focus next input if not at the end\n      if (ind < this.length - 1) {\n        // Set flag to prevent handleFocus from interfering\n        this.isArrowNavigation = true;\n        setTimeout(() => {\n          inputElements[ind + 1].focus();\n          this.isArrowNavigation = false;\n        }, 0);\n      }\n    }\n  };\n\n  private isArrowNavigation = false;\n\n  private handleKeyDown = (ind: number, ev: KeyboardEvent) => {\n    const inputElements = this.inputs;\n\n    switch (ev.key) {\n      case 'Backspace': {\n        let newCode;\n        if (!inputElements[ind].value) {\n          // If current input is empty, move to previous and clear it\n          if (ind > 0) {\n            inputElements[ind - 1].value = '';\n            setTimeout(() => {\n              inputElements[ind - 1].focus();\n            }, 0);\n            // Remove character at previous position\n            const currentCode = this.code || '';\n            newCode = currentCode.substring(0, ind - 1) + currentCode.substring(ind);\n          } else {\n            newCode = this.code;\n          }\n        } else {\n          // Clear current input and remove character at current position\n          inputElements[ind].value = '';\n          const currentCode = this.code || '';\n          newCode = currentCode.substring(0, ind) + currentCode.substring(ind + 1);\n        }\n        this.cpslInput.emit({ value: newCode });\n        this.code = newCode;\n        break;\n      }\n      case 'ArrowLeft': {\n        ev.preventDefault();\n        if (ind > 0) {\n          this.isArrowNavigation = true;\n          setTimeout(() => {\n            inputElements[ind - 1].focus();\n            this.isArrowNavigation = false;\n          }, 0);\n        }\n        break;\n      }\n      case 'ArrowRight': {\n        ev.preventDefault();\n        if (ind < this.length - 1) {\n          this.isArrowNavigation = true;\n          setTimeout(() => {\n            inputElements[ind + 1].focus();\n            this.isArrowNavigation = false;\n          }, 0);\n        }\n        break;\n      }\n      default: {\n        break;\n      }\n    }\n  };\n\n  private handleFocus = (ind: number) => {\n    const inputElements = this.inputs;\n\n    // Don't interfere with arrow key navigation\n    if (this.isArrowNavigation) {\n      setTimeout(() => {\n        inputElements[ind].setSelectionRange(1, 1);\n      }, 0);\n      return;\n    }\n\n    // If the focused input already has a value, allow it to stay focused (user clicked on it)\n    if (inputElements[ind].value) {\n      setTimeout(() => {\n        inputElements[ind].setSelectionRange(1, 1);\n      }, 0);\n      return;\n    }\n\n    // Otherwise, use the default focus logic (find first empty or go to last)\n    for (const input of inputElements) {\n      if (!input.value) {\n        input.focus();\n        break;\n      } else if (input.id === `code-input-${this.length - 1}`) {\n        input.focus();\n        break;\n      }\n    }\n\n    setTimeout(() => {\n      inputElements[ind].setSelectionRange(1, 1);\n    }, 0);\n  };\n\n  private handlePaste = (e: ClipboardEvent) => {\n    const inputElements = this.inputs;\n    let pastedCode = e.clipboardData.getData('text');\n\n    // Filter based on type\n    if (this.type === 'number') {\n      // Remove all non-numeric characters\n      pastedCode = pastedCode.replace(/\\D/g, '');\n\n      // If no valid numbers remain, clear and return\n      if (!pastedCode) {\n        setTimeout(() => {\n          inputElements[0].value = '';\n        }, 0);\n        return;\n      }\n    }\n\n    // Truncate pasted code to match the expected length\n    const truncatedCode = pastedCode.substring(0, this.length);\n\n    this.cpslInput.emit({\n      value: truncatedCode,\n    });\n\n    inputElements.forEach((input, index) => {\n      input.value = truncatedCode.charAt(index) || '';\n    });\n\n    inputElements[Math.min(this.length - 1, truncatedCode.length)].focus();\n  };\n\n  private get inputs() {\n    return Array.from(this.el.shadowRoot.querySelectorAll('input'));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"code-container\">\n          {new Array(this.length).fill(0).map((_, i) => (\n            <input\n              class={{ 'code-input': true, 'error': Boolean(this.errorText), 'has-value': this.code?.[i] !== undefined }}\n              id={`code-input-${i}`}\n              onKeyDown={ev => this.handleKeyDown(i, ev)}\n              onInput={ev => this.handleInput(i, ev)}\n              onFocus={() => this.handleFocus(i)}\n              onPaste={this.handlePaste}\n              min={0}\n              max={9}\n              value={this.code?.[i]}\n              inputMode={this.type === 'number' ? 'numeric' : 'text'}\n            />\n          ))}\n        </div>\n        {(this.errorText || this.helperText) && (\n          <div class={{ 'helper-text-container': true, 'error-text': Boolean(this.errorText) }}>\n            <cpsl-icon icon={this.errorText ? 'alertCircle' : 'infoCircle'} />\n            <span>{this.errorText ?? this.helperText}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/esm/capsule.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["cpsl-hero",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-nav-button",[[1,"cpsl-nav-button",{"disabled":[516],"exactMainRouteMatch":[4,"exact-main-route-match"],"exactSubRouteMatch":[4,"exact-sub-route-match"],"route":[1],"subRoutes":[16],"path":[1]}]]],["cpsl-col",[[1,"cpsl-col",{"align":[1],"justify":[1],"gap":[8],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-identicon",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1],"arcWidth":[1,"arc-width"]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row",{"col":[4],"align":[1],"justify":[1],"gap":[8]}]]],["cpsl-alert_34",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-select",{"anchorElId":[1,"anchor-el-id"],"autoWidth":[4,"auto-width"],"alignCenter":[4,"align-center"],"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"icon":[1],"label":[1],"multiple":[4],"noIconAnimation":[4,"no-icon-animation"],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"selectedItemColor":[1,"selected-item-color"],"selectedItemVariant":[1,"selected-item-variant"],"selectedItemWeight":[1,"selected-item-weight"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-file-upload",{"disabled":[516],"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-auth-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32],"isMobile":[32]},null,{"open":["toggleModal"]}],[1,"cpsl-alert",{"icon":[1],"noIcon":[4,"no-icon"],"variant":[1],"filled":[4]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-icon-group",{"expandFrom":[1,"expand-from"],"disabled":[4],"icons":[16],"isHovered":[32]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"disabled":[516],"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"size":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-nav-button-group"],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2],"icon":[1]}],[1,"cpsl-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},[[8,"cpslTabButtonSizeChange","onTabSizeChange"]],{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-input",{"as":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"autoselect":[4],"disabled":[4],"contrastText":[4,"contrast-text"],"enterkeyhint":[1],"errorText":[1,"error-text"],"fitContent":[4,"fit-content"],"mask":[1],"isPhone":[4,"is-phone"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"],"mask":["handleSetupMask"],"value":["handleValueChange"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"alignCenter":[4,"align-center"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"hasSetInitialPosition":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"alignCenter":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"variant":[1],"size":[2],"barWidth":[2,"bar-width"],"speed":[2]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"type":[1],"variant":[513]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1],"align":[1]}],[1,"cpsl-icon",{"src":[1],"size":[1],"invert":[4],"inset":[1],"icon":[1],"radius":[1],"background":[1],"color":[1],"border":[1]}]]]], options);
+  return bootstrapLazy([["cpsl-hero",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-nav-button",[[1,"cpsl-nav-button",{"disabled":[516],"exactMainRouteMatch":[4,"exact-main-route-match"],"exactSubRouteMatch":[4,"exact-sub-route-match"],"route":[1],"subRoutes":[16],"path":[1]}]]],["cpsl-col",[[1,"cpsl-col",{"align":[1],"justify":[1],"gap":[8],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-identicon",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1],"arcWidth":[1,"arc-width"]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row",{"col":[4],"align":[1],"justify":[1],"gap":[8]}]]],["cpsl-alert_34",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-select",{"anchorElId":[1,"anchor-el-id"],"autoWidth":[4,"auto-width"],"alignCenter":[4,"align-center"],"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"icon":[1],"label":[1],"multiple":[4],"noIconAnimation":[4,"no-icon-animation"],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"selectedItemColor":[1,"selected-item-color"],"selectedItemVariant":[1,"selected-item-variant"],"selectedItemWeight":[1,"selected-item-weight"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-file-upload",{"disabled":[516],"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-auth-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32],"isMobile":[32]},null,{"open":["toggleModal"]}],[1,"cpsl-alert",{"icon":[1],"noIcon":[4,"no-icon"],"variant":[1],"filled":[4]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]},null,{"code":["watchCodeProp"]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-icon-group",{"expandFrom":[1,"expand-from"],"disabled":[4],"icons":[16],"isHovered":[32]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"disabled":[516],"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"size":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-nav-button-group"],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2],"icon":[1]}],[1,"cpsl-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},[[8,"cpslTabButtonSizeChange","onTabSizeChange"]],{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-input",{"as":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"autoselect":[4],"disabled":[4],"contrastText":[4,"contrast-text"],"enterkeyhint":[1],"errorText":[1,"error-text"],"fitContent":[4,"fit-content"],"mask":[1],"isPhone":[4,"is-phone"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"],"mask":["handleSetupMask"],"value":["handleValueChange"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"alignCenter":[4,"align-center"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"hasSetInitialPosition":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"alignCenter":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"variant":[1],"size":[2],"barWidth":[2,"bar-width"],"speed":[2]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"type":[1],"variant":[513]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1],"align":[1]}],[1,"cpsl-icon",{"src":[1],"size":[1],"invert":[4],"inset":[1],"icon":[1],"radius":[1],"background":[1],"color":[1],"border":[1]}]]]], options);
 });
 
 //# sourceMappingURL=capsule.js.map

package/dist/esm/cpsl-alert_34.entry.js

@@ -6396,7 +6396,6 @@ const CpslCodeInput = class {
         registerInstance(this, hostRef);
         this.cpslInput = createEvent(this, "cpslInput", 7);
         this.handleInput = (ind, ev) => {
-            var _a;
             const inputElements = this.inputs;
             // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event
             if (ev.inputType === 'insertFromPaste') {
@@ -6405,59 +6404,110 @@ const CpslCodeInput = class {
             }
             if (ev.inputType === 'insertText') {
                 if (this.type === 'number' && isNaN(parseInt(ev.data))) {
+                    ev.preventDefault();
                     inputElements[ind].value = '';
                     return;
                 }
+                // Prevent the default behavior FIRST
+                ev.preventDefault();
+                // Build the new code from the current component state, not the DOM
+                const currentCode = this.code || '';
+                // Insert the new character at the focused position, not at the end
+                const beforeFocused = currentCode.substring(0, ind);
+                const afterFocused = currentCode.substring(ind + 1);
+                const newCode = beforeFocused + ev.data + afterFocused;
                 // Prevent input beyond the maximum length
-                if (this.code && this.code.length >= this.length) {
-                    inputElements[ind].value = this.code[ind] || '';
-                    return;
-                }
-                const newCode = `${(_a = this.code) !== null && _a !== void 0 ? _a : ''}${ev.data}`;
-                // Ensure we don't exceed the maximum length
                 if (newCode.length > this.length) {
-                    const truncatedCode = newCode.substring(0, this.length);
-                    this.cpslInput.emit({ value: truncatedCode });
-                    this.code = truncatedCode;
-                    // Set each input to its corresponding character
-                    inputElements.forEach((input, index) => {
-                        input.value = truncatedCode[index] || '';
-                    });
+                    return;
                 }
-                else {
-                    inputElements[Math.min(this.length - 1, newCode.length)].focus();
-                    this.cpslInput.emit({ value: newCode });
-                    this.code = newCode;
+                // Update the component state and emit event
+                this.cpslInput.emit({ value: newCode });
+                this.code = newCode;
+                // Update the specific input that was typed in
+                inputElements[ind].value = ev.data;
+                // Focus next input if not at the end
+                if (ind < this.length - 1) {
+                    // Set flag to prevent handleFocus from interfering
+                    this.isArrowNavigation = true;
+                    setTimeout(() => {
+                        inputElements[ind + 1].focus();
+                        this.isArrowNavigation = false;
+                    }, 0);
                 }
             }
         };
+        this.isArrowNavigation = false;
         this.handleKeyDown = (ind, ev) => {
             const inputElements = this.inputs;
             switch (ev.key) {
                 case 'Backspace': {
                     let newCode;
                     if (!inputElements[ind].value) {
-                        inputElements[Math.max(0, ind - 1)].value = '';
-                        inputElements[Math.max(0, ind - 1)].focus();
-                        newCode = this.code.substring(0, ind - 1);
+                        // If current input is empty, move to previous and clear it
+                        if (ind > 0) {
+                            inputElements[ind - 1].value = '';
+                            setTimeout(() => {
+                                inputElements[ind - 1].focus();
+                            }, 0);
+                            // Remove character at previous position
+                            const currentCode = this.code || '';
+                            newCode = currentCode.substring(0, ind - 1) + currentCode.substring(ind);
+                        }
+                        else {
+                            newCode = this.code;
+                        }
                     }
                     else {
-                        newCode = this.code.substring(0, ind);
+                        // Clear current input and remove character at current position
+                        inputElements[ind].value = '';
+                        const currentCode = this.code || '';
+                        newCode = currentCode.substring(0, ind) + currentCode.substring(ind + 1);
                     }
                     this.cpslInput.emit({ value: newCode });
                     this.code = newCode;
                     break;
                 }
                 case 'ArrowLeft': {
-                    setTimeout(() => {
-                        this.inputs[ind].setSelectionRange(1, 1);
-                    }, 0);
+                    ev.preventDefault();
+                    if (ind > 0) {
+                        this.isArrowNavigation = true;
+                        setTimeout(() => {
+                            inputElements[ind - 1].focus();
+                            this.isArrowNavigation = false;
+                        }, 0);
+                    }
+                    break;
+                }
+                case 'ArrowRight': {
+                    ev.preventDefault();
+                    if (ind < this.length - 1) {
+                        this.isArrowNavigation = true;
+                        setTimeout(() => {
+                            inputElements[ind + 1].focus();
+                            this.isArrowNavigation = false;
+                        }, 0);
+                    }
                     break;
                 }
             }
         };
         this.handleFocus = (ind) => {
             const inputElements = this.inputs;
+            // Don't interfere with arrow key navigation
+            if (this.isArrowNavigation) {
+                setTimeout(() => {
+                    inputElements[ind].setSelectionRange(1, 1);
+                }, 0);
+                return;
+            }
+            // If the focused input already has a value, allow it to stay focused (user clicked on it)
+            if (inputElements[ind].value) {
+                setTimeout(() => {
+                    inputElements[ind].setSelectionRange(1, 1);
+                }, 0);
+                return;
+            }
+            // Otherwise, use the default focus logic (find first empty or go to last)
             for (const input of inputElements) {
                 if (!input.value) {
                     input.focus();
@@ -6503,17 +6553,29 @@ const CpslCodeInput = class {
         this.length = undefined;
         this.type = 'number';
     }
+    watchCodeProp(newCode) {
+        // Update the input values when the code prop changes externally
+        const inputElements = this.inputs;
+        if (inputElements.length > 0) {
+            inputElements.forEach((input, index) => {
+                input.value = (newCode === null || newCode === void 0 ? void 0 : newCode[index]) || '';
+            });
+        }
+    }
     get inputs() {
         return Array.from(this.el.shadowRoot.querySelectorAll('input'));
     }
     render() {
         var _a;
-        return (h(Host, { key: '090ef84f543cea35b4e128c5ec2bbcd188bb2a86' }, h("div", { key: '93d16d0a74e81cd367f8ee23bfbfea8118b39b0c', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+        return (h(Host, { key: '82961090c1a837f782588d3acea703550b1b0a44' }, h("div", { key: '0dac1cc8d80b7fb67e334b995172b82c03443394', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
             var _a, _b;
             return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText), 'has-value': ((_a = this.code) === null || _a === void 0 ? void 0 : _a[i]) !== undefined }, id: `code-input-${i}`, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_b = this.code) === null || _b === void 0 ? void 0 : _b[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
-        })), (this.errorText || this.helperText) && (h("div", { key: 'ae9ccf7cb7736ab4ad186f6d317afbb0f58a518c', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: '1fb36b201fe1aa1640b39900881e8b1eaeff614d', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: '30cc9abb139ef14dca8fae44dfcbb61002e1ca6d' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        })), (this.errorText || this.helperText) && (h("div", { key: 'c3c2d5a629d0d2bbcc886386a5942477c735831d', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: 'd75171ab8641592d939b0883ae5f686520dacff6', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: 'dc9808b19dadc26db49bb79b16b89020822b177b' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "code": ["watchCodeProp"]
+    }; }
 };
 CpslCodeInput.style = CpslCodeInputStyle0;