@nanoporetech-digital/components 8.10.2 → 8.10.4

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.
Files changed (26) hide show
  1. package/dist/cjs/nano-input-otp.cjs.entry.js +11 -4
  2. package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
  3. package/dist/collection/components/input-otp/input-otp.css +1 -1
  4. package/dist/collection/components/input-otp/input-otp.js +10 -3
  5. package/dist/components/nano-input-otp.js +11 -4
  6. package/dist/esm/nano-input-otp.entry.js +11 -4
  7. package/dist/nano-components/nano-components.css +26 -13
  8. package/dist/nano-components/nano-input-otp.entry.js +1 -1
  9. package/dist/style/components.css +1 -1
  10. package/dist/style/components.css.map +1 -1
  11. package/dist/style/nano.css +1 -1
  12. package/dist/style/nano.css.map +1 -1
  13. package/docs-json.json +2 -2
  14. package/hydrate/index.js +11 -4
  15. package/hydrate/index.mjs +11 -4
  16. package/package.json +2 -2
  17. /package/dist/types/builds/{_6Vabn6i → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
  18. /package/dist/types/builds/{_6Vabn6i → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
  19. /package/dist/types/builds/{_6Vabn6i → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
  20. /package/dist/types/builds/{_6Vabn6i → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
  21. /package/dist/types/builds/{_6Vabn6i → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
  22. /package/dist/types/builds/{_6Vabn6i → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
  23. /package/dist/types/builds/{_6Vabn6i → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
  24. /package/dist/types/builds/{_6Vabn6i → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
  25. /package/dist/types/builds/{_6Vabn6i → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
  26. /package/dist/types/builds/{_6Vabn6i → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
package/dist/cjs/nano-input-otp.cjs.entry.js CHANGED
@@ -7,7 +7,7 @@ var index = require('./index-DGttnXif.js');
7
7
  var slot = require('./slot-BUMYLmup.js');
8
8
  require('./dom-Dxk5vXYq.js');
9
9
 
10
- const inputOtpCss = ".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--icon-size:var(--nano-pictogram-size-small);--inline-padding:calc(var(--icon-size) + var(--gap));--spacing:var(--nano-spacing-xl);--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative;margin-inline:var(--inline-padding)}.input-otp-container.sc-nano-input-otp{position:relative;inline-size:fit-content;block-size:fit-content;margin:0 auto}.input-otp-group.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;margin-inline-start:var(--spacing)}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{position:absolute;inset-block-start:50%;transform:translateY(-43%);inset-inline-end:calc((var(--gap) + var(--icon-size)) * -1);inline-size:var(--icon-size);block-size:var(--icon-size);display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";
10
+ const inputOtpCss = ".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--icon-size:var(--nano-pictogram-size-small);--inline-padding:calc(var(--icon-size) + var(--gap));--spacing:var(--nano-spacing-xl);--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative;margin-inline:var(--inline-padding)}.input-otp-container.sc-nano-input-otp{position:relative;inline-size:fit-content;block-size:fit-content;margin:0 auto}.input-otp-group.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;margin-block-start:var(--spacing)}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{position:absolute;inset-block-start:50%;transform:translateY(-43%);inset-inline-end:calc((var(--gap) + var(--icon-size)) * -1);inline-size:var(--icon-size);block-size:var(--icon-size);display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";
11
11
 
12
12
  const InputOTP = class {
13
13
  constructor(hostRef) {
@@ -147,6 +147,13 @@ const InputOTP = class {
147
147
  componentWillLoad() {
148
148
  this.initializeValues();
149
149
  this.computeValidity();
150
+ // if a code is provided on load, we want to let the consumer know
151
+ if (this.valid) {
152
+ this.nanoComplete.emit({
153
+ valid: this.valid,
154
+ value: this.value?.toString(),
155
+ });
156
+ }
150
157
  }
151
158
  componentDidLoad() {
152
159
  this.updateTabIndexes();
@@ -686,17 +693,17 @@ const InputOTP = class {
686
693
  const inputmode = this.getInputmode();
687
694
  const tabbableIndex = this.getTabbableIndex();
688
695
  const pattern = this.getPattern();
689
- return (index.h(index.Host, { key: 'fb427bd3cb9bda29ec05c851e23a522c6966f4c0', class: {
696
+ return (index.h(index.Host, { key: '9b64211ca6a227c5f905a76a50ca3a44eff0a96b', class: {
690
697
  'has-focus': hasFocus,
691
698
  'input-otp-disabled': disabled,
692
699
  'input-otp-readonly': readonly,
693
700
  'nano-invalid': invalid,
694
701
  'nano-valid': valid,
695
- } }, index.h("div", { key: '7b5067c8e3f91b71d9110c26e7ec6a91c560de8c', class: "input-otp-container" }, index.h("div", { key: 'a2420e14e2392429eca041ed0ce70e2b387d4922', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index$1) => (index.h(index.Fragment, null, index.h("div", { class: "native-wrapper" }, index.h("input", { class: "native-input", id: `${inputId}-${index$1}`, "aria-label": `Input ${index$1 + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index$1 === tabbableIndex ? 0 : -1, value: inputValues[index$1] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index$1] = el), onInput: this.onInput(index$1), onBlur: this.onBlur, onFocus: this.onFocus(index$1), onKeyDown: this.onKeyDown(index$1), onPaste: this.onPaste })), this.showSeparator(index$1) && (index.h("div", { class: "input-otp-separator" })))))), this.showValidity && (index.h("div", { key: '345be96b0c208d367804822eef00fbfdee3ecbfe', class: {
702
+ } }, index.h("div", { key: 'cc7fb4411962398f143d2dd17c40448111956e80', class: "input-otp-container" }, index.h("div", { key: '4408d19628b34a25cb3bc39a0df1dd859700399f', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index$1) => (index.h(index.Fragment, null, index.h("div", { class: "native-wrapper" }, index.h("input", { class: "native-input", id: `${inputId}-${index$1}`, "aria-label": `Input ${index$1 + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index$1 === tabbableIndex ? 0 : -1, value: inputValues[index$1] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index$1] = el), onInput: this.onInput(index$1), onBlur: this.onBlur, onFocus: this.onFocus(index$1), onKeyDown: this.onKeyDown(index$1), onPaste: this.onPaste })), this.showSeparator(index$1) && (index.h("div", { class: "input-otp-separator" })))))), this.showValidity && (index.h("div", { key: 'cc45bac1e7f7675b467bae6153d9ffa586ec6655', class: {
696
703
  'input-otp-icon': true,
697
704
  'input-otp-icon--valid': valid,
698
705
  'input-otp-icon--invalid': invalid,
699
- }, part: "validity-icon" }, index.h("slot", { key: '7d4a86988e4097f3422aaa2f0ee5df4518da1d41', name: "validity-icon" }, index.h("nano-icon", { key: '6b81e7a0430e36c0381b7787558509f525f7eed5', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (index.h("div", { key: '6d97b65cc7fad0f1828608887773081312f3bf92', class: "input-otp-description" }, index.h("slot", { key: '459b7f12a59fec36ff465126c79083f14dce4a8a' })))));
706
+ }, part: "validity-icon" }, index.h("slot", { key: '84bd77959eaa572898cd48525512d93b6406b6b6', name: "validity-icon" }, index.h("nano-icon", { key: 'c903d61964571e006aca28afea7a911f47527d43', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (index.h("div", { key: 'ddbf6145b86b48ad942227ec15ab419612e5ef41', class: "input-otp-description" }, index.h("slot", { key: '56862b93b96aee7ecad1b36472666f94f2021a5f' })))));
700
707
  }
701
708
  static get watchers() { return {
702
709
  "value": ["valueChanged"]
package/dist/collection/components/breadcrumb/breadcrumb.js CHANGED
@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
89
89
  "references": {
90
90
  "Breadcrumb": {
91
91
  "location": "local",
92
- "path": "/builds/_6Vabn6i/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
92
+ "path": "/builds/FKs_t1C_/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
93
93
  "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
94
94
  }
95
95
  }
package/dist/collection/components/input-otp/input-otp.css CHANGED
@@ -130,7 +130,7 @@
130
130
  line-height: var(--nano-line-height-normal);
131
131
  text-align: center;
132
132
  position: relative;
133
- margin-inline-start: var(--spacing);
133
+ margin-block-start: var(--spacing);
134
134
  }
135
135
 
136
136
  .input-otp-description-hidden {
package/dist/collection/components/input-otp/input-otp.js CHANGED
@@ -144,6 +144,13 @@ export class InputOTP {
144
144
  componentWillLoad() {
145
145
  this.initializeValues();
146
146
  this.computeValidity();
147
+ // if a code is provided on load, we want to let the consumer know
148
+ if (this.valid) {
149
+ this.nanoComplete.emit({
150
+ valid: this.valid,
151
+ value: this.value?.toString(),
152
+ });
153
+ }
147
154
  }
148
155
  componentDidLoad() {
149
156
  this.updateTabIndexes();
@@ -683,17 +690,17 @@ export class InputOTP {
683
690
  const inputmode = this.getInputmode();
684
691
  const tabbableIndex = this.getTabbableIndex();
685
692
  const pattern = this.getPattern();
686
- return (h(Host, { key: 'fb427bd3cb9bda29ec05c851e23a522c6966f4c0', class: {
693
+ return (h(Host, { key: '9b64211ca6a227c5f905a76a50ca3a44eff0a96b', class: {
687
694
  'has-focus': hasFocus,
688
695
  'input-otp-disabled': disabled,
689
696
  'input-otp-readonly': readonly,
690
697
  'nano-invalid': invalid,
691
698
  'nano-valid': valid,
692
- } }, h("div", { key: '7b5067c8e3f91b71d9110c26e7ec6a91c560de8c', class: "input-otp-container" }, h("div", { key: 'a2420e14e2392429eca041ed0ce70e2b387d4922', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (h("div", { class: "input-otp-separator" })))))), this.showValidity && (h("div", { key: '345be96b0c208d367804822eef00fbfdee3ecbfe', class: {
699
+ } }, h("div", { key: 'cc7fb4411962398f143d2dd17c40448111956e80', class: "input-otp-container" }, h("div", { key: '4408d19628b34a25cb3bc39a0df1dd859700399f', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (h("div", { class: "input-otp-separator" })))))), this.showValidity && (h("div", { key: 'cc45bac1e7f7675b467bae6153d9ffa586ec6655', class: {
693
700
  'input-otp-icon': true,
694
701
  'input-otp-icon--valid': valid,
695
702
  'input-otp-icon--invalid': invalid,
696
- }, part: "validity-icon" }, h("slot", { key: '7d4a86988e4097f3422aaa2f0ee5df4518da1d41', name: "validity-icon" }, h("nano-icon", { key: '6b81e7a0430e36c0381b7787558509f525f7eed5', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (h("div", { key: '6d97b65cc7fad0f1828608887773081312f3bf92', class: "input-otp-description" }, h("slot", { key: '459b7f12a59fec36ff465126c79083f14dce4a8a' })))));
703
+ }, part: "validity-icon" }, h("slot", { key: '84bd77959eaa572898cd48525512d93b6406b6b6', name: "validity-icon" }, h("nano-icon", { key: 'c903d61964571e006aca28afea7a911f47527d43', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (h("div", { key: 'ddbf6145b86b48ad942227ec15ab419612e5ef41', class: "input-otp-description" }, h("slot", { key: '56862b93b96aee7ecad1b36472666f94f2021a5f' })))));
697
704
  }
698
705
  static get is() { return "nano-input-otp"; }
699
706
  static get encapsulation() { return "scoped"; }
package/dist/components/nano-input-otp.js CHANGED
@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from
5
5
  import { H as HasSlotController } from './slot.js';
6
6
  import { d as defineCustomElement$2 } from './icon.js';
7
7
 
8
- const inputOtpCss = ".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--icon-size:var(--nano-pictogram-size-small);--inline-padding:calc(var(--icon-size) + var(--gap));--spacing:var(--nano-spacing-xl);--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative;margin-inline:var(--inline-padding)}.input-otp-container.sc-nano-input-otp{position:relative;inline-size:fit-content;block-size:fit-content;margin:0 auto}.input-otp-group.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;margin-inline-start:var(--spacing)}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{position:absolute;inset-block-start:50%;transform:translateY(-43%);inset-inline-end:calc((var(--gap) + var(--icon-size)) * -1);inline-size:var(--icon-size);block-size:var(--icon-size);display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";
8
+ const inputOtpCss = ".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--icon-size:var(--nano-pictogram-size-small);--inline-padding:calc(var(--icon-size) + var(--gap));--spacing:var(--nano-spacing-xl);--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative;margin-inline:var(--inline-padding)}.input-otp-container.sc-nano-input-otp{position:relative;inline-size:fit-content;block-size:fit-content;margin:0 auto}.input-otp-group.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;margin-block-start:var(--spacing)}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{position:absolute;inset-block-start:50%;transform:translateY(-43%);inset-inline-end:calc((var(--gap) + var(--icon-size)) * -1);inline-size:var(--icon-size);block-size:var(--icon-size);display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";
9
9
 
10
10
  const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLElement {
11
11
  constructor() {
@@ -146,6 +146,13 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
146
146
  componentWillLoad() {
147
147
  this.initializeValues();
148
148
  this.computeValidity();
149
+ // if a code is provided on load, we want to let the consumer know
150
+ if (this.valid) {
151
+ this.nanoComplete.emit({
152
+ valid: this.valid,
153
+ value: this.value?.toString(),
154
+ });
155
+ }
149
156
  }
150
157
  componentDidLoad() {
151
158
  this.updateTabIndexes();
@@ -685,17 +692,17 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
685
692
  const inputmode = this.getInputmode();
686
693
  const tabbableIndex = this.getTabbableIndex();
687
694
  const pattern = this.getPattern();
688
- return (h(Host, { key: 'fb427bd3cb9bda29ec05c851e23a522c6966f4c0', class: {
695
+ return (h(Host, { key: '9b64211ca6a227c5f905a76a50ca3a44eff0a96b', class: {
689
696
  'has-focus': hasFocus,
690
697
  'input-otp-disabled': disabled,
691
698
  'input-otp-readonly': readonly,
692
699
  'nano-invalid': invalid,
693
700
  'nano-valid': valid,
694
- } }, h("div", { key: '7b5067c8e3f91b71d9110c26e7ec6a91c560de8c', class: "input-otp-container" }, h("div", { key: 'a2420e14e2392429eca041ed0ce70e2b387d4922', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (h("div", { class: "input-otp-separator" })))))), this.showValidity && (h("div", { key: '345be96b0c208d367804822eef00fbfdee3ecbfe', class: {
701
+ } }, h("div", { key: 'cc7fb4411962398f143d2dd17c40448111956e80', class: "input-otp-container" }, h("div", { key: '4408d19628b34a25cb3bc39a0df1dd859700399f', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (h("div", { class: "input-otp-separator" })))))), this.showValidity && (h("div", { key: 'cc45bac1e7f7675b467bae6153d9ffa586ec6655', class: {
695
702
  'input-otp-icon': true,
696
703
  'input-otp-icon--valid': valid,
697
704
  'input-otp-icon--invalid': invalid,
698
- }, part: "validity-icon" }, h("slot", { key: '7d4a86988e4097f3422aaa2f0ee5df4518da1d41', name: "validity-icon" }, h("nano-icon", { key: '6b81e7a0430e36c0381b7787558509f525f7eed5', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (h("div", { key: '6d97b65cc7fad0f1828608887773081312f3bf92', class: "input-otp-description" }, h("slot", { key: '459b7f12a59fec36ff465126c79083f14dce4a8a' })))));
705
+ }, part: "validity-icon" }, h("slot", { key: '84bd77959eaa572898cd48525512d93b6406b6b6', name: "validity-icon" }, h("nano-icon", { key: 'c903d61964571e006aca28afea7a911f47527d43', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (h("div", { key: 'ddbf6145b86b48ad942227ec15ab419612e5ef41', class: "input-otp-description" }, h("slot", { key: '56862b93b96aee7ecad1b36472666f94f2021a5f' })))));
699
706
  }
700
707
  static get watchers() { return {
701
708
  "value": ["valueChanged"]
package/dist/esm/nano-input-otp.entry.js CHANGED
@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragm
5
5
  import { H as HasSlotController } from './slot-D31cEKyt.js';
6
6
  import './dom-dlicJTEJ.js';
7
7
 
8
- const inputOtpCss = ".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--icon-size:var(--nano-pictogram-size-small);--inline-padding:calc(var(--icon-size) + var(--gap));--spacing:var(--nano-spacing-xl);--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative;margin-inline:var(--inline-padding)}.input-otp-container.sc-nano-input-otp{position:relative;inline-size:fit-content;block-size:fit-content;margin:0 auto}.input-otp-group.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;margin-inline-start:var(--spacing)}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{position:absolute;inset-block-start:50%;transform:translateY(-43%);inset-inline-end:calc((var(--gap) + var(--icon-size)) * -1);inline-size:var(--icon-size);block-size:var(--icon-size);display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";
8
+ const inputOtpCss = ".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--icon-size:var(--nano-pictogram-size-small);--inline-padding:calc(var(--icon-size) + var(--gap));--spacing:var(--nano-spacing-xl);--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative;margin-inline:var(--inline-padding)}.input-otp-container.sc-nano-input-otp{position:relative;inline-size:fit-content;block-size:fit-content;margin:0 auto}.input-otp-group.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;margin-block-start:var(--spacing)}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{position:absolute;inset-block-start:50%;transform:translateY(-43%);inset-inline-end:calc((var(--gap) + var(--icon-size)) * -1);inline-size:var(--icon-size);block-size:var(--icon-size);display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";
9
9
 
10
10
  const InputOTP = class {
11
11
  constructor(hostRef) {
@@ -145,6 +145,13 @@ const InputOTP = class {
145
145
  componentWillLoad() {
146
146
  this.initializeValues();
147
147
  this.computeValidity();
148
+ // if a code is provided on load, we want to let the consumer know
149
+ if (this.valid) {
150
+ this.nanoComplete.emit({
151
+ valid: this.valid,
152
+ value: this.value?.toString(),
153
+ });
154
+ }
148
155
  }
149
156
  componentDidLoad() {
150
157
  this.updateTabIndexes();
@@ -684,17 +691,17 @@ const InputOTP = class {
684
691
  const inputmode = this.getInputmode();
685
692
  const tabbableIndex = this.getTabbableIndex();
686
693
  const pattern = this.getPattern();
687
- return (h(Host, { key: 'fb427bd3cb9bda29ec05c851e23a522c6966f4c0', class: {
694
+ return (h(Host, { key: '9b64211ca6a227c5f905a76a50ca3a44eff0a96b', class: {
688
695
  'has-focus': hasFocus,
689
696
  'input-otp-disabled': disabled,
690
697
  'input-otp-readonly': readonly,
691
698
  'nano-invalid': invalid,
692
699
  'nano-valid': valid,
693
- } }, h("div", { key: '7b5067c8e3f91b71d9110c26e7ec6a91c560de8c', class: "input-otp-container" }, h("div", { key: 'a2420e14e2392429eca041ed0ce70e2b387d4922', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (h("div", { class: "input-otp-separator" })))))), this.showValidity && (h("div", { key: '345be96b0c208d367804822eef00fbfdee3ecbfe', class: {
700
+ } }, h("div", { key: 'cc7fb4411962398f143d2dd17c40448111956e80', class: "input-otp-container" }, h("div", { key: '4408d19628b34a25cb3bc39a0df1dd859700399f', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (h("div", { class: "input-otp-separator" })))))), this.showValidity && (h("div", { key: 'cc45bac1e7f7675b467bae6153d9ffa586ec6655', class: {
694
701
  'input-otp-icon': true,
695
702
  'input-otp-icon--valid': valid,
696
703
  'input-otp-icon--invalid': invalid,
697
- }, part: "validity-icon" }, h("slot", { key: '7d4a86988e4097f3422aaa2f0ee5df4518da1d41', name: "validity-icon" }, h("nano-icon", { key: '6b81e7a0430e36c0381b7787558509f525f7eed5', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (h("div", { key: '6d97b65cc7fad0f1828608887773081312f3bf92', class: "input-otp-description" }, h("slot", { key: '459b7f12a59fec36ff465126c79083f14dce4a8a' })))));
704
+ }, part: "validity-icon" }, h("slot", { key: '84bd77959eaa572898cd48525512d93b6406b6b6', name: "validity-icon" }, h("nano-icon", { key: 'c903d61964571e006aca28afea7a911f47527d43', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (h("div", { key: 'ddbf6145b86b48ad942227ec15ab419612e5ef41', class: "input-otp-description" }, h("slot", { key: '56862b93b96aee7ecad1b36472666f94f2021a5f' })))));
698
705
  }
699
706
  static get watchers() { return {
700
707
  "value": ["valueChanged"]
package/dist/nano-components/nano-components.css CHANGED
@@ -534,36 +534,38 @@
534
534
  nano-card address {
535
535
  font-style: normal;
536
536
  }
537
- nano-card a {
537
+ nano-card a[slot=title],
538
+ nano-card [slot=title] a {
538
539
  color: var(--color);
539
540
  text-decoration: none;
540
541
  }
541
- nano-card a:hover {
542
+ nano-card a[slot=title]:hover,
543
+ nano-card [slot=title] a:hover {
542
544
  color: var(--nano-color-primary-1000);
543
545
  text-decoration: underline;
544
546
  }
545
- nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) a, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
547
+ nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]) a, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
546
548
  :has(a, nano-icon-button, input, nano-cta[loading])) a {
547
549
  color: var(--color);
548
550
  text-decoration: none;
549
551
  }
550
- nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)):hover [slot=title], nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
552
+ nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]):hover [slot=title], nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
551
553
  :has(a, nano-icon-button, input, nano-cta[loading])):hover [slot=title] {
552
554
  color: var(--nano-color-primary-1000);
553
555
  text-decoration: underline;
554
556
  }
555
- nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)):hover:has([slot=title] > * ~ *) [slot=title], nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
557
+ nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]):hover:has([slot=title] > * ~ *) [slot=title], nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
556
558
  :has(a, nano-icon-button, input, nano-cta[loading])):hover:has([slot=title] > * ~ *) [slot=title] {
557
559
  color: var(--color);
558
560
  text-decoration: none;
559
561
  }
560
- nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)):hover:has([slot=title] > * ~ *) [slot=title] > :first-child, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
562
+ nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]):hover:has([slot=title] > * ~ *) [slot=title] > :first-child, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
561
563
  :has(a, nano-icon-button, input, nano-cta[loading])):hover:has([slot=title] > * ~ *) [slot=title] > :first-child {
562
564
  color: var(--nano-color-primary-1000);
563
565
  text-decoration: underline;
564
566
  }
565
- nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) button::before,
566
- nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) a::before, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
567
+ nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]) button::before,
568
+ nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]) a::before, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
567
569
  :has(a, nano-icon-button, input, nano-cta[loading])) button::before,
568
570
  nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
569
571
  :has(a, nano-icon-button, input, nano-cta[loading])) a::before {
@@ -579,16 +581,16 @@
579
581
  border-radius: 0;
580
582
  z-index: var(--enable-card-click);
581
583
  }
582
- nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) nano-cta > *, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
584
+ nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]) nano-cta > *, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
583
585
  :has(a, nano-icon-button, input, nano-cta[loading])) nano-cta > * {
584
586
  position: static;
585
587
  }
586
- nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input))[variant^=promo]:hover, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
588
+ nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click])[variant^=promo]:hover, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
587
589
  :has(a, nano-icon-button, input, nano-cta[loading]))[variant^=promo]:hover {
588
590
  box-shadow: var(--nano-shadow-l0);
589
591
  background-color: var(--bg-hover);
590
592
  }
591
- nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) nano-tooltip > *, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
593
+ nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input), [disable-card-click]) nano-tooltip > *, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
592
594
  :has(a, nano-icon-button, input, nano-cta[loading])) nano-tooltip > * {
593
595
  position: relative;
594
596
  z-index: 2;
@@ -617,10 +619,18 @@
617
619
  grid-template-rows: repeat(var(--row-count), auto);
618
620
  }
619
621
  @container (width < 417px) {
620
- nano-card[layout=landscape] [slot] {
622
+ nano-card[layout=landscape]:not([size=small]) [slot] {
621
623
  grid-column: 1/-1 !important;
622
624
  }
623
- nano-card[layout=landscape] [slot=img] {
625
+ nano-card[layout=landscape]:not([size=small]) [slot=img] {
626
+ grid-column: 1/-1 !important;
627
+ }
628
+ }
629
+ @container (width < 320px) {
630
+ nano-card[layout=landscape][size=small] [slot] {
631
+ grid-column: 1/-1 !important;
632
+ }
633
+ nano-card[layout=landscape][size=small] [slot=img] {
624
634
  grid-column: 1/-1 !important;
625
635
  }
626
636
  }
@@ -646,6 +656,9 @@
646
656
  line-height: var(--nano-line-height-normal);
647
657
  letter-spacing: var(--nano-letter-spacing-loose);
648
658
  }
659
+ nano-card[size=small] {
660
+ grid-template-columns: minmax(calc(60px - var(--gap)), 31%) auto;
661
+ }
649
662
  nano-card[size=small] [slot=title],
650
663
  nano-card[size=small] [slot=title] > :first-child {
651
664
  font-size: var(--nano-font-size-sm);
package/dist/nano-components/nano-input-otp.entry.js CHANGED
@@ -1,4 +1,4 @@
1
1
  /*!
2
2
  * Custom elements for Nanopore-Digital Web applications
3
3
  */
4
- import{r as t,c as i,g as n,h as o,F as s,a as e}from"./index-BM3Om9WE.js";import{H as a}from"./slot-D31cEKyt.js";import"./dom-dlicJTEJ.js";const r=class{constructor(n){t(this,n),this.nanoInput=i(this,"nanoInput",7),this.nanoChange=i(this,"nanoChange",7),this.nanoComplete=i(this,"nanoComplete",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoFocus=i(this,"nanoFocus",7)}inputRefs=[];inputId="nano-input-otp-"+h++;slotCtrl=new a(this,"[default]");focusedValue;isKeyboardNavigation=!1;get el(){return n(this)}inputValues=[];hasFocus=!1;previousInputValues=[];invalid=!1;valid=!1;disabled=!1;inputmode;length=6;pattern;readonly=!1;type="number";value="";allowInvalid=!1;showValidity=!1;nanoInput;nanoChange;nanoComplete;nanoBlur;nanoFocus;async setFocus(t){if("number"==typeof t){const i=Math.max(0,Math.min(t,this.length-1));this.inputRefs[i]?.focus()}else{const t=this.getTabbableIndex();this.inputRefs[t]?.focus()}}valueChanged(){this.initializeValues(),this.updateTabIndexes(),this.computeValidity()}componentWillLoad(){this.initializeValues(),this.computeValidity()}componentDidLoad(){this.updateTabIndexes()}get validKeyPattern(){return new RegExp(`^${this.getPattern()}$`,"u")}get specialCharsPattern(){return new RegExp("^[\\p{S}\\p{P}]$","u")}getPattern(){const{pattern:t,type:i}=this;return t||("number"===i?"[\\p{N}]":"[\\p{L}\\p{N}]")}getInputmode(){const{inputmode:t}=this;return t||("number"==this.type?"numeric":"text")}initializeValues(){this.inputValues=Array(this.length).fill(""),null!=this.value&&0!==String(this.value).length&&(String(this.value).split("").slice(0,this.length).forEach(((t,i)=>{(this.allowInvalid&&!this.specialCharsPattern.test(t)||this.validKeyPattern.test(t))&&(this.inputValues[i]=t)})),this.value=this.inputValues.join(""),this.previousInputValues=[...this.inputValues])}isRTL=t=>t&&""!==t.dir?"rtl"===t.dir.toLowerCase():"rtl"===document?.dir.toLowerCase();updateValue(t){const{inputValues:i,length:n}=this,o=this.getValidChars(i.join("")).join("");this.value=o,this.computeValidity(),this.emitNanoInput(t),o.length===n&&this.nanoComplete.emit({value:o,valid:this.valid})}emitNanoChange(t){const{value:i}=this,n=null==i?i:i.toString();this.computeValidity(),this.nanoChange.emit({value:n?.toString(),event:t,valid:this.valid})}emitNanoInput(t){const{value:i}=this,n=null==i?i:i.toString();this.computeValidity(),this.nanoInput.emit({value:n?.toString(),event:t,valid:this.valid})}onFocus=t=>i=>{const{inputRefs:n}=this;this.hasFocus||(this.nanoFocus.emit(i),this.focusedValue=this.value),this.hasFocus=!0;let o=t;if(!this.isKeyboardNavigation){const i=this.inputValues[t]?t:this.getFirstEmptyIndex();o=-1===i?this.length-1:i,this.inputRefs[o]?.focus()}n.forEach(((t,i)=>{t.tabIndex=i===o?0:-1})),this.isKeyboardNavigation=!1};onBlur=t=>{const{inputRefs:i}=this,n=t.relatedTarget;null!=n&&i.includes(n)||(this.hasFocus=!1,this.updateTabIndexes(),this.nanoBlur.emit(t),this.focusedValue!==this.value&&this.emitNanoChange(t))};focusNext(t){const{inputRefs:i,length:n}=this;t<n-1&&i[t+1]?.focus()}focusPrevious(t){const{inputRefs:i}=this;t>0&&i[t-1]?.focus()}getFirstEmptyIndex(){const{inputValues:t,length:i}=this;return Array.from({length:i},((i,n)=>t[n]||"")).findIndex((t=>!t||""===t))??-1}getTabbableIndex(){const{length:t}=this,i=this.getFirstEmptyIndex();return-1===i?t-1:i}updateTabIndexes(){const{inputRefs:t,inputValues:i,length:n}=this;let o=-1;for(let t=0;t<n;t++)if(!i[t]||""===i[t]){o=t;break}t.forEach(((t,s)=>{const e=-1===o?s===n-1:o===s;t.tabIndex=e?0:-1,t.setAttribute("aria-hidden",i[s]&&""!==i[s]||e?"false":"true")}))}onKeyDown=t=>i=>{const{length:n}=this,o=this.isRTL(this.el),s=i.target;if(!(s.selectionStart!==s.selectionEnd||(i.metaKey||i.ctrlKey)&&["a","c","v","x","r","z","y"].includes(i.key.toLowerCase())))if("Backspace"===i.key)if(this.inputValues[t]){for(let i=t;i<n-1;i++)this.inputValues[i]=this.inputValues[i+1];this.inputValues[n-1]="";for(let t=0;t<n;t++)this.inputRefs[t].value=this.inputValues[t]||"";this.updateValue(i),i.preventDefault()}else!this.inputValues[t]&&t>0&&this.focusPrevious(t);else if("ArrowLeft"===i.key||"ArrowRight"===i.key){this.isKeyboardNavigation=!0,i.preventDefault();const s="ArrowLeft"===i.key;s&&o||!s&&!o?this.inputValues[t]&&t<n-1&&this.focusNext(t):this.focusPrevious(t)}else if("Tab"===i.key)return void(this.isKeyboardNavigation=!0)};onInput=t=>i=>{const{length:n,validKeyPattern:o,allowInvalid:s}=this,e=i.target,a=e.value,r=this.previousInputValues[t]||"";if(a.length-r.length>1){const t=this.getValidChars(a);0===t.length&&requestAnimationFrame((()=>{this.inputRefs.forEach((t=>{t.value=""}))}));for(let i=0;i<n;i++)this.inputValues[i]=t[i]||"",this.inputRefs[i].value=t[i]||"";return this.updateValue(i),setTimeout((()=>{const i=t.length<n?t.length:n-1;this.inputRefs[i]?.focus()}),20),void(this.previousInputValues=[...this.inputValues])}if(!s&&a.length>0&&!o.test(a[a.length-1])||s&&this.specialCharsPattern.test(a[a.length-1]))return e.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);if(0===e.selectionStart&&e.selectionEnd===a.length||!this.inputValues[t])return this.inputValues[t]=a,e.value=a,this.updateValue(i),this.focusNext(t),void(this.previousInputValues=[...this.inputValues]);if(this.inputValues[t]&&""===this.inputValues[this.inputValues.length-1]&&2===a.length){let n=i.data;if(n||(n=a.split("").find(((t,i)=>t!==r[i]))||a[a.length-1]),!s&&!o.test(n))return e.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);for(let i=this.inputValues.length-1;i>t;i--)this.inputValues[i]=this.inputValues[i-1],this.inputRefs[i].value=this.inputValues[i]||"";return this.inputValues[t]=n,this.inputRefs[t].value=n,this.updateValue(i),void(this.previousInputValues=[...this.inputValues])}const h=a[(e.selectionStart??a.length)-1]??a[0];if(!s&&!o.test(h))return e.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);this.inputValues[t]=h,e.value=h,this.updateValue(i),this.previousInputValues=[...this.inputValues]};onPaste=t=>{const{inputRefs:i,length:n}=this;t.preventDefault();const o=t.clipboardData?.getData("text");if(!o)return void this.emitNanoInput(t);const s=this.getValidChars(o);s.forEach(((t,i)=>{i<n&&(this.inputRefs[i].value=t,this.inputValues[i]=t)})),this.value=s.join(""),this.updateValue(t);const e=s.length<n?s.length:n-1;i[e]?.focus()};showSeparator(t){const{length:i}=this;return!(i<3||i%2!=0)&&t===i/2-1}getValidChars(t){const{allowInvalid:i,validKeyPattern:n,length:o}=this;return t.split("").filter(i?t=>""!==t.trim()&&!this.specialCharsPattern.test(t):t=>""!==t.trim()&&n.test(t)).slice(0,o)}computeValidity(){const{inputValues:t}=this;this.invalid=this.allowInvalid&&this.inputValues.some((t=>""!==t&&!this.validKeyPattern.test(t))),this.valid=this.inputValues.length===this.length&&this.inputValues.every((t=>""!==t&&this.validKeyPattern.test(t))),t.some((t=>""!==t&&!this.validKeyPattern.test(t)))}render(){const{disabled:t,hasFocus:i,inputId:n,inputRefs:a,inputValues:r,length:h,readonly:p,invalid:l,valid:c}=this,u=this.getInputmode(),d=this.getTabbableIndex(),v=this.getPattern();return o(e,{key:"fb427bd3cb9bda29ec05c851e23a522c6966f4c0",class:{"has-focus":i,"input-otp-disabled":t,"input-otp-readonly":p,"nano-invalid":l,"nano-valid":c}},o("div",{key:"7b5067c8e3f91b71d9110c26e7ec6a91c560de8c",class:"input-otp-container"},o("div",{key:"a2420e14e2392429eca041ed0ce70e2b387d4922",class:"input-otp-group",role:"group","aria-label":"One-time password input"},Array.from({length:h}).map(((i,e)=>o(s,null,o("div",{class:"native-wrapper"},o("input",{class:"native-input",id:`${n}-${e}`,"aria-label":`Input ${e+1} of ${h}`,type:"text",inputmode:u,pattern:v,disabled:t,readOnly:p,tabIndex:e===d?0:-1,value:r[e]||"",autocomplete:"one-time-code",ref:t=>a[e]=t,onInput:this.onInput(e),onBlur:this.onBlur,onFocus:this.onFocus(e),onKeyDown:this.onKeyDown(e),onPaste:this.onPaste})),this.showSeparator(e)&&o("div",{class:"input-otp-separator"}))))),this.showValidity&&o("div",{key:"345be96b0c208d367804822eef00fbfdee3ecbfe",class:{"input-otp-icon":!0,"input-otp-icon--valid":c,"input-otp-icon--invalid":l},part:"validity-icon"},o("slot",{key:"7d4a86988e4097f3422aaa2f0ee5df4518da1d41",name:"validity-icon"},o("nano-icon",{key:"6b81e7a0430e36c0381b7787558509f525f7eed5",hidden:!c,name:"light/circle-check",class:"input-otp-valid-icon","aria-label":"Valid input"})))),this.slotCtrl.has("[default]")&&o("div",{key:"6d97b65cc7fad0f1828608887773081312f3bf92",class:"input-otp-description"},o("slot",{key:"459b7f12a59fec36ff465126c79083f14dce4a8a"})))}static get watchers(){return{value:["valueChanged"]}}};let h=0;r.style=".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--icon-size:var(--nano-pictogram-size-small);--inline-padding:calc(var(--icon-size) + var(--gap));--spacing:var(--nano-spacing-xl);--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative;margin-inline:var(--inline-padding)}.input-otp-container.sc-nano-input-otp{position:relative;inline-size:fit-content;block-size:fit-content;margin:0 auto}.input-otp-group.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;margin-inline-start:var(--spacing)}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{position:absolute;inset-block-start:50%;transform:translateY(-43%);inset-inline-end:calc((var(--gap) + var(--icon-size)) * -1);inline-size:var(--icon-size);block-size:var(--icon-size);display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";export{r as nano_input_otp}
4
+ import{r as t,c as i,g as n,h as s,F as o,a}from"./index-BM3Om9WE.js";import{H as e}from"./slot-D31cEKyt.js";import"./dom-dlicJTEJ.js";const r=class{constructor(n){t(this,n),this.nanoInput=i(this,"nanoInput",7),this.nanoChange=i(this,"nanoChange",7),this.nanoComplete=i(this,"nanoComplete",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoFocus=i(this,"nanoFocus",7)}inputRefs=[];inputId="nano-input-otp-"+h++;slotCtrl=new e(this,"[default]");focusedValue;isKeyboardNavigation=!1;get el(){return n(this)}inputValues=[];hasFocus=!1;previousInputValues=[];invalid=!1;valid=!1;disabled=!1;inputmode;length=6;pattern;readonly=!1;type="number";value="";allowInvalid=!1;showValidity=!1;nanoInput;nanoChange;nanoComplete;nanoBlur;nanoFocus;async setFocus(t){if("number"==typeof t){const i=Math.max(0,Math.min(t,this.length-1));this.inputRefs[i]?.focus()}else{const t=this.getTabbableIndex();this.inputRefs[t]?.focus()}}valueChanged(){this.initializeValues(),this.updateTabIndexes(),this.computeValidity()}componentWillLoad(){this.initializeValues(),this.computeValidity(),this.valid&&this.nanoComplete.emit({valid:this.valid,value:this.value?.toString()})}componentDidLoad(){this.updateTabIndexes()}get validKeyPattern(){return new RegExp(`^${this.getPattern()}$`,"u")}get specialCharsPattern(){return new RegExp("^[\\p{S}\\p{P}]$","u")}getPattern(){const{pattern:t,type:i}=this;return t||("number"===i?"[\\p{N}]":"[\\p{L}\\p{N}]")}getInputmode(){const{inputmode:t}=this;return t||("number"==this.type?"numeric":"text")}initializeValues(){this.inputValues=Array(this.length).fill(""),null!=this.value&&0!==String(this.value).length&&(String(this.value).split("").slice(0,this.length).forEach(((t,i)=>{(this.allowInvalid&&!this.specialCharsPattern.test(t)||this.validKeyPattern.test(t))&&(this.inputValues[i]=t)})),this.value=this.inputValues.join(""),this.previousInputValues=[...this.inputValues])}isRTL=t=>t&&""!==t.dir?"rtl"===t.dir.toLowerCase():"rtl"===document?.dir.toLowerCase();updateValue(t){const{inputValues:i,length:n}=this,s=this.getValidChars(i.join("")).join("");this.value=s,this.computeValidity(),this.emitNanoInput(t),s.length===n&&this.nanoComplete.emit({value:s,valid:this.valid})}emitNanoChange(t){const{value:i}=this,n=null==i?i:i.toString();this.computeValidity(),this.nanoChange.emit({value:n?.toString(),event:t,valid:this.valid})}emitNanoInput(t){const{value:i}=this,n=null==i?i:i.toString();this.computeValidity(),this.nanoInput.emit({value:n?.toString(),event:t,valid:this.valid})}onFocus=t=>i=>{const{inputRefs:n}=this;this.hasFocus||(this.nanoFocus.emit(i),this.focusedValue=this.value),this.hasFocus=!0;let s=t;if(!this.isKeyboardNavigation){const i=this.inputValues[t]?t:this.getFirstEmptyIndex();s=-1===i?this.length-1:i,this.inputRefs[s]?.focus()}n.forEach(((t,i)=>{t.tabIndex=i===s?0:-1})),this.isKeyboardNavigation=!1};onBlur=t=>{const{inputRefs:i}=this,n=t.relatedTarget;null!=n&&i.includes(n)||(this.hasFocus=!1,this.updateTabIndexes(),this.nanoBlur.emit(t),this.focusedValue!==this.value&&this.emitNanoChange(t))};focusNext(t){const{inputRefs:i,length:n}=this;t<n-1&&i[t+1]?.focus()}focusPrevious(t){const{inputRefs:i}=this;t>0&&i[t-1]?.focus()}getFirstEmptyIndex(){const{inputValues:t,length:i}=this;return Array.from({length:i},((i,n)=>t[n]||"")).findIndex((t=>!t||""===t))??-1}getTabbableIndex(){const{length:t}=this,i=this.getFirstEmptyIndex();return-1===i?t-1:i}updateTabIndexes(){const{inputRefs:t,inputValues:i,length:n}=this;let s=-1;for(let t=0;t<n;t++)if(!i[t]||""===i[t]){s=t;break}t.forEach(((t,o)=>{const a=-1===s?o===n-1:s===o;t.tabIndex=a?0:-1,t.setAttribute("aria-hidden",i[o]&&""!==i[o]||a?"false":"true")}))}onKeyDown=t=>i=>{const{length:n}=this,s=this.isRTL(this.el),o=i.target;if(!(o.selectionStart!==o.selectionEnd||(i.metaKey||i.ctrlKey)&&["a","c","v","x","r","z","y"].includes(i.key.toLowerCase())))if("Backspace"===i.key)if(this.inputValues[t]){for(let i=t;i<n-1;i++)this.inputValues[i]=this.inputValues[i+1];this.inputValues[n-1]="";for(let t=0;t<n;t++)this.inputRefs[t].value=this.inputValues[t]||"";this.updateValue(i),i.preventDefault()}else!this.inputValues[t]&&t>0&&this.focusPrevious(t);else if("ArrowLeft"===i.key||"ArrowRight"===i.key){this.isKeyboardNavigation=!0,i.preventDefault();const o="ArrowLeft"===i.key;o&&s||!o&&!s?this.inputValues[t]&&t<n-1&&this.focusNext(t):this.focusPrevious(t)}else if("Tab"===i.key)return void(this.isKeyboardNavigation=!0)};onInput=t=>i=>{const{length:n,validKeyPattern:s,allowInvalid:o}=this,a=i.target,e=a.value,r=this.previousInputValues[t]||"";if(e.length-r.length>1){const t=this.getValidChars(e);0===t.length&&requestAnimationFrame((()=>{this.inputRefs.forEach((t=>{t.value=""}))}));for(let i=0;i<n;i++)this.inputValues[i]=t[i]||"",this.inputRefs[i].value=t[i]||"";return this.updateValue(i),setTimeout((()=>{const i=t.length<n?t.length:n-1;this.inputRefs[i]?.focus()}),20),void(this.previousInputValues=[...this.inputValues])}if(!o&&e.length>0&&!s.test(e[e.length-1])||o&&this.specialCharsPattern.test(e[e.length-1]))return a.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);if(0===a.selectionStart&&a.selectionEnd===e.length||!this.inputValues[t])return this.inputValues[t]=e,a.value=e,this.updateValue(i),this.focusNext(t),void(this.previousInputValues=[...this.inputValues]);if(this.inputValues[t]&&""===this.inputValues[this.inputValues.length-1]&&2===e.length){let n=i.data;if(n||(n=e.split("").find(((t,i)=>t!==r[i]))||e[e.length-1]),!o&&!s.test(n))return a.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);for(let i=this.inputValues.length-1;i>t;i--)this.inputValues[i]=this.inputValues[i-1],this.inputRefs[i].value=this.inputValues[i]||"";return this.inputValues[t]=n,this.inputRefs[t].value=n,this.updateValue(i),void(this.previousInputValues=[...this.inputValues])}const h=e[(a.selectionStart??e.length)-1]??e[0];if(!o&&!s.test(h))return a.value=this.inputValues[t]||"",void(this.previousInputValues=[...this.inputValues]);this.inputValues[t]=h,a.value=h,this.updateValue(i),this.previousInputValues=[...this.inputValues]};onPaste=t=>{const{inputRefs:i,length:n}=this;t.preventDefault();const s=t.clipboardData?.getData("text");if(!s)return void this.emitNanoInput(t);const o=this.getValidChars(s);o.forEach(((t,i)=>{i<n&&(this.inputRefs[i].value=t,this.inputValues[i]=t)})),this.value=o.join(""),this.updateValue(t);const a=o.length<n?o.length:n-1;i[a]?.focus()};showSeparator(t){const{length:i}=this;return!(i<3||i%2!=0)&&t===i/2-1}getValidChars(t){const{allowInvalid:i,validKeyPattern:n,length:s}=this;return t.split("").filter(i?t=>""!==t.trim()&&!this.specialCharsPattern.test(t):t=>""!==t.trim()&&n.test(t)).slice(0,s)}computeValidity(){const{inputValues:t}=this;this.invalid=this.allowInvalid&&this.inputValues.some((t=>""!==t&&!this.validKeyPattern.test(t))),this.valid=this.inputValues.length===this.length&&this.inputValues.every((t=>""!==t&&this.validKeyPattern.test(t))),t.some((t=>""!==t&&!this.validKeyPattern.test(t)))}render(){const{disabled:t,hasFocus:i,inputId:n,inputRefs:e,inputValues:r,length:h,readonly:p,invalid:l,valid:c}=this,u=this.getInputmode(),d=this.getTabbableIndex(),v=this.getPattern();return s(a,{key:"9b64211ca6a227c5f905a76a50ca3a44eff0a96b",class:{"has-focus":i,"input-otp-disabled":t,"input-otp-readonly":p,"nano-invalid":l,"nano-valid":c}},s("div",{key:"cc7fb4411962398f143d2dd17c40448111956e80",class:"input-otp-container"},s("div",{key:"4408d19628b34a25cb3bc39a0df1dd859700399f",class:"input-otp-group",role:"group","aria-label":"One-time password input"},Array.from({length:h}).map(((i,a)=>s(o,null,s("div",{class:"native-wrapper"},s("input",{class:"native-input",id:`${n}-${a}`,"aria-label":`Input ${a+1} of ${h}`,type:"text",inputmode:u,pattern:v,disabled:t,readOnly:p,tabIndex:a===d?0:-1,value:r[a]||"",autocomplete:"one-time-code",ref:t=>e[a]=t,onInput:this.onInput(a),onBlur:this.onBlur,onFocus:this.onFocus(a),onKeyDown:this.onKeyDown(a),onPaste:this.onPaste})),this.showSeparator(a)&&s("div",{class:"input-otp-separator"}))))),this.showValidity&&s("div",{key:"cc45bac1e7f7675b467bae6153d9ffa586ec6655",class:{"input-otp-icon":!0,"input-otp-icon--valid":c,"input-otp-icon--invalid":l},part:"validity-icon"},s("slot",{key:"84bd77959eaa572898cd48525512d93b6406b6b6",name:"validity-icon"},s("nano-icon",{key:"c903d61964571e006aca28afea7a911f47527d43",hidden:!c,name:"light/circle-check",class:"input-otp-valid-icon","aria-label":"Valid input"})))),this.slotCtrl.has("[default]")&&s("div",{key:"ddbf6145b86b48ad942227ec15ab419612e5ef41",class:"input-otp-description"},s("slot",{key:"56862b93b96aee7ecad1b36472666f94f2021a5f"})))}static get watchers(){return{value:["valueChanged"]}}};let h=0;r.style=".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{box-sizing:border-box}[hidden].sc-nano-input-otp{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-otp::before,*.sc-nano-input-otp::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-input-otp-h{--color:initial;--min-width:40px;--width:40px;--height:50px;--gap:8px;--icon-size:var(--nano-pictogram-size-small);--inline-padding:calc(var(--icon-size) + var(--gap));--spacing:var(--nano-spacing-xl);--separator-width:7px;--separator-height:1px;--separator-border-radius:0;--separator-color:var(--nano-color-primary-1000);--highlight-color-valid:var(--nano-color-success-1100);--highlight-color-invalid:var(--nano-color-warning-1100);--border-radius:8px;--border-color:var(--nano-color-neutral-700);--border-width:1px;display:block;position:relative;margin-inline:var(--inline-padding)}.input-otp-container.sc-nano-input-otp{position:relative;inline-size:fit-content;block-size:fit-content;margin:0 auto}.input-otp-group.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;gap:var(--gap)}.native-wrapper.sc-nano-input-otp{display:flex;align-items:center;justify-content:center;min-inline-size:var(--min-width)}.native-input.sc-nano-input-otp{border-radius:var(--border-radius);inline-size:var(--width);min-inline-size:inherit;block-size:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;appearance:none}.input-otp-description.sc-nano-input-otp{color:currentcolor;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-align:center;position:relative;margin-block-start:var(--spacing)}.input-otp-description-hidden.sc-nano-input-otp{display:none}.input-otp-separator.sc-nano-input-otp{border-radius:var(--separator-border-radius);flex-shrink:0;inline-size:var(--separator-width);block-size:var(--separator-height);background:var(--separator-color)}.input-otp-disabled.sc-nano-input-otp-h{--color:var(--nano-color-neutral-700);opacity:0.5}.input-otp-disabled.sc-nano-input-otp-h,.input-otp-disabled.sc-nano-input-otp-h .native-input.sc-nano-input-otp:disabled{cursor:not-allowed}.has-focus.sc-nano-input-otp-h .native-input.sc-nano-input-otp:focus{outline:var(--nano-focus-ring)}.nano-invalid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-invalid)}.nano-valid.sc-nano-input-otp-h .native-input.sc-nano-input-otp{border-color:var(--highlight-color-valid)}.input-otp-icon.sc-nano-input-otp{position:absolute;inset-block-start:50%;transform:translateY(-43%);inset-inline-end:calc((var(--gap) + var(--icon-size)) * -1);inline-size:var(--icon-size);block-size:var(--icon-size);display:flex;align-items:center}.input-otp-icon--valid.sc-nano-input-otp{color:var(--nano-color-success-1100)}.input-otp-icon--invalid.sc-nano-input-otp{color:var(--nano-color-warning-1100)}";export{r as nano_input_otp}