@getpara/core-components 2.0.0-alpha.69 → 2.0.0-alpha.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/capsule.esm.js.map +1 -1
- package/dist/capsule/p-cc804d27.entry.js +28 -0
- package/dist/capsule/p-cc804d27.entry.js.map +1 -0
- package/dist/cjs/capsule.cjs.js +1 -1
- package/dist/cjs/cpsl-alert_34.cjs.entry.js +89 -27
- package/dist/cjs/cpsl-alert_34.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +92 -27
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map +1 -1
- package/dist/esm/capsule.js +1 -1
- package/dist/esm/cpsl-alert_34.entry.js +89 -27
- package/dist/esm/cpsl-alert_34.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cpsl-code-input/cpsl-code-input.d.ts +2 -0
- package/package.json +2 -2
- package/dist/capsule/p-4ae502a7.entry.js +0 -28
- package/dist/capsule/p-4ae502a7.entry.js.map +0 -1
- /package/dist/types/Users/{taylorbosch/Documents/GitHub/Capsule → norwood/capsule-repos}/web-sdk/packages/core-components/.stencil/scripts/appendLoaderExports.d.ts +0 -0
- /package/dist/types/Users/{taylorbosch/Documents/GitHub/Capsule → norwood/capsule-repos}/web-sdk/packages/core-components/.stencil/scripts/buildAssets.d.ts +0 -0
package/dist/cjs/capsule.cjs.js
CHANGED
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
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);
|
|
22
|
+
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);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -6400,7 +6400,6 @@ const CpslCodeInput = class {
|
|
|
6400
6400
|
index.registerInstance(this, hostRef);
|
|
6401
6401
|
this.cpslInput = index.createEvent(this, "cpslInput", 7);
|
|
6402
6402
|
this.handleInput = (ind, ev) => {
|
|
6403
|
-
var _a;
|
|
6404
6403
|
const inputElements = this.inputs;
|
|
6405
6404
|
// If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event
|
|
6406
6405
|
if (ev.inputType === 'insertFromPaste') {
|
|
@@ -6409,59 +6408,110 @@ const CpslCodeInput = class {
|
|
|
6409
6408
|
}
|
|
6410
6409
|
if (ev.inputType === 'insertText') {
|
|
6411
6410
|
if (this.type === 'number' && isNaN(parseInt(ev.data))) {
|
|
6411
|
+
ev.preventDefault();
|
|
6412
6412
|
inputElements[ind].value = '';
|
|
6413
6413
|
return;
|
|
6414
6414
|
}
|
|
6415
|
+
// Prevent the default behavior FIRST
|
|
6416
|
+
ev.preventDefault();
|
|
6417
|
+
// Build the new code from the current component state, not the DOM
|
|
6418
|
+
const currentCode = this.code || '';
|
|
6419
|
+
// Insert the new character at the focused position, not at the end
|
|
6420
|
+
const beforeFocused = currentCode.substring(0, ind);
|
|
6421
|
+
const afterFocused = currentCode.substring(ind + 1);
|
|
6422
|
+
const newCode = beforeFocused + ev.data + afterFocused;
|
|
6415
6423
|
// Prevent input beyond the maximum length
|
|
6416
|
-
if (this.code && this.code.length >= this.length) {
|
|
6417
|
-
inputElements[ind].value = this.code[ind] || '';
|
|
6418
|
-
return;
|
|
6419
|
-
}
|
|
6420
|
-
const newCode = `${(_a = this.code) !== null && _a !== void 0 ? _a : ''}${ev.data}`;
|
|
6421
|
-
// Ensure we don't exceed the maximum length
|
|
6422
6424
|
if (newCode.length > this.length) {
|
|
6423
|
-
|
|
6424
|
-
this.cpslInput.emit({ value: truncatedCode });
|
|
6425
|
-
this.code = truncatedCode;
|
|
6426
|
-
// Set each input to its corresponding character
|
|
6427
|
-
inputElements.forEach((input, index) => {
|
|
6428
|
-
input.value = truncatedCode[index] || '';
|
|
6429
|
-
});
|
|
6425
|
+
return;
|
|
6430
6426
|
}
|
|
6431
|
-
|
|
6432
|
-
|
|
6433
|
-
|
|
6434
|
-
|
|
6427
|
+
// Update the component state and emit event
|
|
6428
|
+
this.cpslInput.emit({ value: newCode });
|
|
6429
|
+
this.code = newCode;
|
|
6430
|
+
// Update the specific input that was typed in
|
|
6431
|
+
inputElements[ind].value = ev.data;
|
|
6432
|
+
// Focus next input if not at the end
|
|
6433
|
+
if (ind < this.length - 1) {
|
|
6434
|
+
// Set flag to prevent handleFocus from interfering
|
|
6435
|
+
this.isArrowNavigation = true;
|
|
6436
|
+
setTimeout(() => {
|
|
6437
|
+
inputElements[ind + 1].focus();
|
|
6438
|
+
this.isArrowNavigation = false;
|
|
6439
|
+
}, 0);
|
|
6435
6440
|
}
|
|
6436
6441
|
}
|
|
6437
6442
|
};
|
|
6443
|
+
this.isArrowNavigation = false;
|
|
6438
6444
|
this.handleKeyDown = (ind, ev) => {
|
|
6439
6445
|
const inputElements = this.inputs;
|
|
6440
6446
|
switch (ev.key) {
|
|
6441
6447
|
case 'Backspace': {
|
|
6442
6448
|
let newCode;
|
|
6443
6449
|
if (!inputElements[ind].value) {
|
|
6444
|
-
|
|
6445
|
-
|
|
6446
|
-
|
|
6450
|
+
// If current input is empty, move to previous and clear it
|
|
6451
|
+
if (ind > 0) {
|
|
6452
|
+
inputElements[ind - 1].value = '';
|
|
6453
|
+
setTimeout(() => {
|
|
6454
|
+
inputElements[ind - 1].focus();
|
|
6455
|
+
}, 0);
|
|
6456
|
+
// Remove character at previous position
|
|
6457
|
+
const currentCode = this.code || '';
|
|
6458
|
+
newCode = currentCode.substring(0, ind - 1) + currentCode.substring(ind);
|
|
6459
|
+
}
|
|
6460
|
+
else {
|
|
6461
|
+
newCode = this.code;
|
|
6462
|
+
}
|
|
6447
6463
|
}
|
|
6448
6464
|
else {
|
|
6449
|
-
|
|
6465
|
+
// Clear current input and remove character at current position
|
|
6466
|
+
inputElements[ind].value = '';
|
|
6467
|
+
const currentCode = this.code || '';
|
|
6468
|
+
newCode = currentCode.substring(0, ind) + currentCode.substring(ind + 1);
|
|
6450
6469
|
}
|
|
6451
6470
|
this.cpslInput.emit({ value: newCode });
|
|
6452
6471
|
this.code = newCode;
|
|
6453
6472
|
break;
|
|
6454
6473
|
}
|
|
6455
6474
|
case 'ArrowLeft': {
|
|
6456
|
-
|
|
6457
|
-
|
|
6458
|
-
|
|
6475
|
+
ev.preventDefault();
|
|
6476
|
+
if (ind > 0) {
|
|
6477
|
+
this.isArrowNavigation = true;
|
|
6478
|
+
setTimeout(() => {
|
|
6479
|
+
inputElements[ind - 1].focus();
|
|
6480
|
+
this.isArrowNavigation = false;
|
|
6481
|
+
}, 0);
|
|
6482
|
+
}
|
|
6483
|
+
break;
|
|
6484
|
+
}
|
|
6485
|
+
case 'ArrowRight': {
|
|
6486
|
+
ev.preventDefault();
|
|
6487
|
+
if (ind < this.length - 1) {
|
|
6488
|
+
this.isArrowNavigation = true;
|
|
6489
|
+
setTimeout(() => {
|
|
6490
|
+
inputElements[ind + 1].focus();
|
|
6491
|
+
this.isArrowNavigation = false;
|
|
6492
|
+
}, 0);
|
|
6493
|
+
}
|
|
6459
6494
|
break;
|
|
6460
6495
|
}
|
|
6461
6496
|
}
|
|
6462
6497
|
};
|
|
6463
6498
|
this.handleFocus = (ind) => {
|
|
6464
6499
|
const inputElements = this.inputs;
|
|
6500
|
+
// Don't interfere with arrow key navigation
|
|
6501
|
+
if (this.isArrowNavigation) {
|
|
6502
|
+
setTimeout(() => {
|
|
6503
|
+
inputElements[ind].setSelectionRange(1, 1);
|
|
6504
|
+
}, 0);
|
|
6505
|
+
return;
|
|
6506
|
+
}
|
|
6507
|
+
// If the focused input already has a value, allow it to stay focused (user clicked on it)
|
|
6508
|
+
if (inputElements[ind].value) {
|
|
6509
|
+
setTimeout(() => {
|
|
6510
|
+
inputElements[ind].setSelectionRange(1, 1);
|
|
6511
|
+
}, 0);
|
|
6512
|
+
return;
|
|
6513
|
+
}
|
|
6514
|
+
// Otherwise, use the default focus logic (find first empty or go to last)
|
|
6465
6515
|
for (const input of inputElements) {
|
|
6466
6516
|
if (!input.value) {
|
|
6467
6517
|
input.focus();
|
|
@@ -6507,17 +6557,29 @@ const CpslCodeInput = class {
|
|
|
6507
6557
|
this.length = undefined;
|
|
6508
6558
|
this.type = 'number';
|
|
6509
6559
|
}
|
|
6560
|
+
watchCodeProp(newCode) {
|
|
6561
|
+
// Update the input values when the code prop changes externally
|
|
6562
|
+
const inputElements = this.inputs;
|
|
6563
|
+
if (inputElements.length > 0) {
|
|
6564
|
+
inputElements.forEach((input, index) => {
|
|
6565
|
+
input.value = (newCode === null || newCode === void 0 ? void 0 : newCode[index]) || '';
|
|
6566
|
+
});
|
|
6567
|
+
}
|
|
6568
|
+
}
|
|
6510
6569
|
get inputs() {
|
|
6511
6570
|
return Array.from(this.el.shadowRoot.querySelectorAll('input'));
|
|
6512
6571
|
}
|
|
6513
6572
|
render() {
|
|
6514
6573
|
var _a;
|
|
6515
|
-
return (index.h(index.Host, { key: '
|
|
6574
|
+
return (index.h(index.Host, { key: '82961090c1a837f782588d3acea703550b1b0a44' }, index.h("div", { key: '0dac1cc8d80b7fb67e334b995172b82c03443394', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
|
|
6516
6575
|
var _a, _b;
|
|
6517
6576
|
return (index.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' }));
|
|
6518
|
-
})), (this.errorText || this.helperText) && (index.h("div", { key: '
|
|
6577
|
+
})), (this.errorText || this.helperText) && (index.h("div", { key: 'c3c2d5a629d0d2bbcc886386a5942477c735831d', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { key: 'd75171ab8641592d939b0883ae5f686520dacff6', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), index.h("span", { key: 'dc9808b19dadc26db49bb79b16b89020822b177b' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
|
|
6519
6578
|
}
|
|
6520
6579
|
get el() { return index.getElement(this); }
|
|
6580
|
+
static get watchers() { return {
|
|
6581
|
+
"code": ["watchCodeProp"]
|
|
6582
|
+
}; }
|
|
6521
6583
|
};
|
|
6522
6584
|
CpslCodeInput.style = CpslCodeInputStyle0;
|
|
6523
6585
|
|