@nanoporetech-digital/components 8.10.3 → 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.
- package/dist/cjs/nano-input-otp.cjs.entry.js +11 -4
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/collection/components/input-otp/input-otp.css +1 -1
- package/dist/collection/components/input-otp/input-otp.js +10 -3
- package/dist/components/nano-input-otp.js +11 -4
- package/dist/esm/nano-input-otp.entry.js +11 -4
- package/dist/nano-components/nano-input-otp.entry.js +1 -1
- package/docs-json.json +2 -2
- package/hydrate/index.js +11 -4
- package/hydrate/index.mjs +11 -4
- package/package.json +2 -2
- /package/dist/types/builds/{8qhywLzS → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{8qhywLzS → FKs_t1C_}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
|
@@ -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-
|
|
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: '
|
|
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: '
|
|
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: '
|
|
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"]
|
|
@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
|
|
|
89
89
|
"references": {
|
|
90
90
|
"Breadcrumb": {
|
|
91
91
|
"location": "local",
|
|
92
|
-
"path": "/builds/
|
|
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
|
}
|
|
@@ -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: '
|
|
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: '
|
|
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: '
|
|
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"; }
|
|
@@ -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-
|
|
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: '
|
|
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: '
|
|
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: '
|
|
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"]
|
|
@@ -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-
|
|
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: '
|
|
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: '
|
|
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: '
|
|
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"]
|
|
@@ -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}
|
package/docs-json.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-09-
|
|
2
|
+
"timestamp": "2025-09-30T13:00:14",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.36.1",
|
|
@@ -3358,7 +3358,7 @@
|
|
|
3358
3358
|
"references": {
|
|
3359
3359
|
"Breadcrumb": {
|
|
3360
3360
|
"location": "local",
|
|
3361
|
-
"path": "/builds/
|
|
3361
|
+
"path": "/builds/FKs_t1C_/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
|
|
3362
3362
|
"id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
|
|
3363
3363
|
}
|
|
3364
3364
|
}
|
package/hydrate/index.js
CHANGED
|
@@ -17744,7 +17744,7 @@ class Input {
|
|
|
17744
17744
|
}; }
|
|
17745
17745
|
}
|
|
17746
17746
|
|
|
17747
|
-
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-
|
|
17747
|
+
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)}";
|
|
17748
17748
|
|
|
17749
17749
|
/**
|
|
17750
17750
|
* A component for entering one-time passwords (OTP) with multiple input fields.
|
|
@@ -17895,6 +17895,13 @@ class InputOTP {
|
|
|
17895
17895
|
componentWillLoad() {
|
|
17896
17896
|
this.initializeValues();
|
|
17897
17897
|
this.computeValidity();
|
|
17898
|
+
// if a code is provided on load, we want to let the consumer know
|
|
17899
|
+
if (this.valid) {
|
|
17900
|
+
this.nanoComplete.emit({
|
|
17901
|
+
valid: this.valid,
|
|
17902
|
+
value: this.value?.toString(),
|
|
17903
|
+
});
|
|
17904
|
+
}
|
|
17898
17905
|
}
|
|
17899
17906
|
componentDidLoad() {
|
|
17900
17907
|
this.updateTabIndexes();
|
|
@@ -18434,17 +18441,17 @@ class InputOTP {
|
|
|
18434
18441
|
const inputmode = this.getInputmode();
|
|
18435
18442
|
const tabbableIndex = this.getTabbableIndex();
|
|
18436
18443
|
const pattern = this.getPattern();
|
|
18437
|
-
return (hAsync(Host, { key: '
|
|
18444
|
+
return (hAsync(Host, { key: '9b64211ca6a227c5f905a76a50ca3a44eff0a96b', class: {
|
|
18438
18445
|
'has-focus': hasFocus,
|
|
18439
18446
|
'input-otp-disabled': disabled,
|
|
18440
18447
|
'input-otp-readonly': readonly,
|
|
18441
18448
|
'nano-invalid': invalid,
|
|
18442
18449
|
'nano-valid': valid,
|
|
18443
|
-
} }, hAsync("div", { key: '
|
|
18450
|
+
} }, hAsync("div", { key: 'cc7fb4411962398f143d2dd17c40448111956e80', class: "input-otp-container" }, hAsync("div", { key: '4408d19628b34a25cb3bc39a0df1dd859700399f', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", 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) && (hAsync("div", { class: "input-otp-separator" })))))), this.showValidity && (hAsync("div", { key: 'cc45bac1e7f7675b467bae6153d9ffa586ec6655', class: {
|
|
18444
18451
|
'input-otp-icon': true,
|
|
18445
18452
|
'input-otp-icon--valid': valid,
|
|
18446
18453
|
'input-otp-icon--invalid': invalid,
|
|
18447
|
-
}, part: "validity-icon" }, hAsync("slot", { key: '
|
|
18454
|
+
}, part: "validity-icon" }, hAsync("slot", { key: '84bd77959eaa572898cd48525512d93b6406b6b6', name: "validity-icon" }, hAsync("nano-icon", { key: 'c903d61964571e006aca28afea7a911f47527d43', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (hAsync("div", { key: 'ddbf6145b86b48ad942227ec15ab419612e5ef41', class: "input-otp-description" }, hAsync("slot", { key: '56862b93b96aee7ecad1b36472666f94f2021a5f' })))));
|
|
18448
18455
|
}
|
|
18449
18456
|
static get watchers() { return {
|
|
18450
18457
|
"value": ["valueChanged"]
|
package/hydrate/index.mjs
CHANGED
|
@@ -17742,7 +17742,7 @@ class Input {
|
|
|
17742
17742
|
}; }
|
|
17743
17743
|
}
|
|
17744
17744
|
|
|
17745
|
-
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-
|
|
17745
|
+
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)}";
|
|
17746
17746
|
|
|
17747
17747
|
/**
|
|
17748
17748
|
* A component for entering one-time passwords (OTP) with multiple input fields.
|
|
@@ -17893,6 +17893,13 @@ class InputOTP {
|
|
|
17893
17893
|
componentWillLoad() {
|
|
17894
17894
|
this.initializeValues();
|
|
17895
17895
|
this.computeValidity();
|
|
17896
|
+
// if a code is provided on load, we want to let the consumer know
|
|
17897
|
+
if (this.valid) {
|
|
17898
|
+
this.nanoComplete.emit({
|
|
17899
|
+
valid: this.valid,
|
|
17900
|
+
value: this.value?.toString(),
|
|
17901
|
+
});
|
|
17902
|
+
}
|
|
17896
17903
|
}
|
|
17897
17904
|
componentDidLoad() {
|
|
17898
17905
|
this.updateTabIndexes();
|
|
@@ -18432,17 +18439,17 @@ class InputOTP {
|
|
|
18432
18439
|
const inputmode = this.getInputmode();
|
|
18433
18440
|
const tabbableIndex = this.getTabbableIndex();
|
|
18434
18441
|
const pattern = this.getPattern();
|
|
18435
|
-
return (hAsync(Host, { key: '
|
|
18442
|
+
return (hAsync(Host, { key: '9b64211ca6a227c5f905a76a50ca3a44eff0a96b', class: {
|
|
18436
18443
|
'has-focus': hasFocus,
|
|
18437
18444
|
'input-otp-disabled': disabled,
|
|
18438
18445
|
'input-otp-readonly': readonly,
|
|
18439
18446
|
'nano-invalid': invalid,
|
|
18440
18447
|
'nano-valid': valid,
|
|
18441
|
-
} }, hAsync("div", { key: '
|
|
18448
|
+
} }, hAsync("div", { key: 'cc7fb4411962398f143d2dd17c40448111956e80', class: "input-otp-container" }, hAsync("div", { key: '4408d19628b34a25cb3bc39a0df1dd859700399f', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", 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) && (hAsync("div", { class: "input-otp-separator" })))))), this.showValidity && (hAsync("div", { key: 'cc45bac1e7f7675b467bae6153d9ffa586ec6655', class: {
|
|
18442
18449
|
'input-otp-icon': true,
|
|
18443
18450
|
'input-otp-icon--valid': valid,
|
|
18444
18451
|
'input-otp-icon--invalid': invalid,
|
|
18445
|
-
}, part: "validity-icon" }, hAsync("slot", { key: '
|
|
18452
|
+
}, part: "validity-icon" }, hAsync("slot", { key: '84bd77959eaa572898cd48525512d93b6406b6b6', name: "validity-icon" }, hAsync("nano-icon", { key: 'c903d61964571e006aca28afea7a911f47527d43', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (hAsync("div", { key: 'ddbf6145b86b48ad942227ec15ab419612e5ef41', class: "input-otp-description" }, hAsync("slot", { key: '56862b93b96aee7ecad1b36472666f94f2021a5f' })))));
|
|
18446
18453
|
}
|
|
18447
18454
|
static get watchers() { return {
|
|
18448
18455
|
"value": ["valueChanged"]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nanoporetech-digital/components",
|
|
3
|
-
"version": "8.10.
|
|
3
|
+
"version": "8.10.4",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"smart-array-filter": "^4.0.2",
|
|
61
61
|
"stencil-wormhole": "3.2.1",
|
|
62
62
|
"tyqs": "^0.1.3",
|
|
63
|
-
"@nanoporetech-digital/style": "8.10.
|
|
63
|
+
"@nanoporetech-digital/style": "8.10.4"
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
66
66
|
"@algolia/client-search": "^4.22.1",
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|