@nanoporetech-digital/components 8.10.0 → 8.10.2
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/{fade-BUa4h2hW.js → fade-CPjR03EH.js} +1 -1
- package/dist/cjs/{fullscreen-Dro71U7W.js → fullscreen-Bzjv2HGI.js} +1 -1
- package/dist/cjs/{lazyload-CTZM4xbV.js → lazyload-BNO_n6W8.js} +1 -1
- package/dist/cjs/nano-alert.cjs.entry.js +1 -1
- package/dist/cjs/nano-avatar_5.cjs.entry.js +8 -8
- package/dist/cjs/nano-details.cjs.entry.js +1 -1
- package/dist/cjs/nano-dialog.cjs.entry.js +1 -1
- package/dist/cjs/nano-dropdown_2.cjs.entry.js +1 -1
- package/dist/cjs/nano-icon-button_2.cjs.entry.js +2 -2
- package/dist/cjs/nano-in-page-nav.cjs.entry.js +1 -1
- package/dist/cjs/nano-input-otp.cjs.entry.js +8 -10
- package/dist/cjs/nano-intersection-observe.cjs.entry.js +1 -1
- package/dist/cjs/nano-masked-overflow.cjs.entry.js +3 -3
- package/dist/cjs/nano-menu-drawer.cjs.entry.js +3 -3
- package/dist/cjs/nano-more-less.cjs.entry.js +2 -2
- package/dist/cjs/nano-nav-item.cjs.entry.js +1 -1
- package/dist/cjs/nano-rating.cjs.entry.js +4 -4
- package/dist/cjs/nano-resize-observe.cjs.entry.js +2 -2
- package/dist/cjs/nano-slide.cjs.entry.js +1 -1
- package/dist/cjs/{nano-slides-Dg9sFuVO.js → nano-slides-C2K7j1yc.js} +7 -7
- package/dist/cjs/nano-slides.cjs.entry.js +1 -1
- package/dist/cjs/nano-sortable.cjs.entry.js +1 -1
- package/dist/cjs/nano-step-accordion.cjs.entry.js +1 -1
- package/dist/cjs/nano-step-breadcrumb.cjs.entry.js +2 -2
- package/dist/cjs/nano-sticker.cjs.entry.js +2 -2
- package/dist/cjs/nano-tab-content.cjs.entry.js +2 -2
- package/dist/cjs/nano-tab.cjs.entry.js +2 -2
- package/dist/cjs/nano-table.cjs.entry.js +2 -2
- package/dist/cjs/{page-dots-CaQhBKfq.js → page-dots-Db7Ce8kX.js} +1 -1
- package/dist/cjs/{slot-CJgcluNw.js → slot-BUMYLmup.js} +19 -3
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/collection/components/input-otp/input-otp.css +24 -23
- package/dist/collection/components/input-otp/input-otp.js +8 -9
- package/dist/collection/components/intersection-observe/intersection-observe.js +1 -1
- package/dist/collection/components/masked-overflow/masked-overflow.js +3 -3
- package/dist/collection/components/menu-drawer/menu-drawer.js +2 -2
- package/dist/collection/components/more-less/more-less.js +2 -2
- package/dist/collection/components/rating/rating.js +4 -4
- package/dist/collection/components/resize-observe/resize-observe.js +2 -2
- package/dist/collection/components/select/select.js +7 -7
- package/dist/collection/components/slides/slide.js +1 -1
- package/dist/collection/components/slides/slides.js +3 -3
- package/dist/collection/components/sortable/sortable.js +1 -1
- package/dist/collection/components/step-accordion/step-accordion.js +1 -1
- package/dist/collection/components/step-breadcrumb/step-breadcrumb.js +2 -2
- package/dist/collection/components/sticker/sticker.js +2 -2
- package/dist/collection/components/table/table.js +2 -2
- package/dist/collection/components/tabs/tab-content.js +2 -2
- package/dist/collection/components/tabs/tab.js +2 -2
- package/dist/collection/components/tooltip/tooltip.js +2 -2
- package/dist/collection/utils/slot.js +19 -3
- package/dist/components/masked-overflow.js +3 -3
- package/dist/components/nano-input-otp.js +7 -10
- package/dist/components/nano-intersection-observe.js +1 -1
- package/dist/components/nano-menu-drawer.js +2 -2
- package/dist/components/nano-more-less.js +2 -2
- package/dist/components/nano-rating.js +4 -4
- package/dist/components/nano-slide.js +1 -1
- package/dist/components/nano-sortable.js +1 -1
- package/dist/components/nano-step-accordion.js +1 -1
- package/dist/components/nano-step-breadcrumb.js +2 -2
- package/dist/components/nano-tab-content.js +2 -2
- package/dist/components/nano-tab.js +2 -2
- package/dist/components/nano-table.js +2 -2
- package/dist/components/resize-observe.js +2 -2
- package/dist/components/select.js +7 -7
- package/dist/components/slides.js +3 -3
- package/dist/components/slot.js +19 -3
- package/dist/components/sticker.js +2 -2
- package/dist/components/tooltip.js +2 -2
- package/dist/esm/{fade-bCJIX80t.js → fade-DWf-ekic.js} +1 -1
- package/dist/esm/{fullscreen-DOYo_j8C.js → fullscreen-DWET5K4U.js} +1 -1
- package/dist/esm/{lazyload-D2MQBzOR.js → lazyload-BSH0U2zW.js} +1 -1
- package/dist/esm/nano-alert.entry.js +1 -1
- package/dist/esm/nano-avatar_5.entry.js +8 -8
- package/dist/esm/nano-details.entry.js +1 -1
- package/dist/esm/nano-dialog.entry.js +1 -1
- package/dist/esm/nano-dropdown_2.entry.js +1 -1
- package/dist/esm/nano-icon-button_2.entry.js +2 -2
- package/dist/esm/nano-in-page-nav.entry.js +1 -1
- package/dist/esm/nano-input-otp.entry.js +8 -10
- package/dist/esm/nano-intersection-observe.entry.js +1 -1
- package/dist/esm/nano-masked-overflow.entry.js +3 -3
- package/dist/esm/nano-menu-drawer.entry.js +3 -3
- package/dist/esm/nano-more-less.entry.js +2 -2
- package/dist/esm/nano-nav-item.entry.js +1 -1
- package/dist/esm/nano-rating.entry.js +4 -4
- package/dist/esm/nano-resize-observe.entry.js +2 -2
- package/dist/esm/nano-slide.entry.js +1 -1
- package/dist/esm/{nano-slides-CuEgW0Us.js → nano-slides-BU8CjO-X.js} +7 -7
- package/dist/esm/nano-slides.entry.js +1 -1
- package/dist/esm/nano-sortable.entry.js +1 -1
- package/dist/esm/nano-step-accordion.entry.js +1 -1
- package/dist/esm/nano-step-breadcrumb.entry.js +2 -2
- package/dist/esm/nano-sticker.entry.js +2 -2
- package/dist/esm/nano-tab-content.entry.js +2 -2
- package/dist/esm/nano-tab.entry.js +2 -2
- package/dist/esm/nano-table.entry.js +2 -2
- package/dist/esm/{page-dots-D6hhv2PU.js → page-dots-Ckyic5vY.js} +1 -1
- package/dist/esm/{slot-CFTP7C_Z.js → slot-D31cEKyt.js} +19 -3
- package/dist/nano-components/{fade-bCJIX80t.js → fade-DWf-ekic.js} +1 -1
- package/dist/nano-components/{fullscreen-DOYo_j8C.js → fullscreen-DWET5K4U.js} +1 -1
- package/dist/nano-components/{lazyload-D2MQBzOR.js → lazyload-BSH0U2zW.js} +1 -1
- package/dist/nano-components/nano-alert.entry.js +1 -1
- package/dist/nano-components/nano-avatar_5.entry.js +1 -1
- package/dist/nano-components/nano-components.css +31 -6
- package/dist/nano-components/nano-details.entry.js +1 -1
- package/dist/nano-components/nano-dialog.entry.js +1 -1
- package/dist/nano-components/nano-dropdown_2.entry.js +1 -1
- package/dist/nano-components/nano-icon-button_2.entry.js +1 -1
- package/dist/nano-components/nano-in-page-nav.entry.js +1 -1
- package/dist/nano-components/nano-input-otp.entry.js +1 -1
- package/dist/nano-components/nano-intersection-observe.entry.js +1 -1
- package/dist/nano-components/nano-masked-overflow.entry.js +1 -1
- package/dist/nano-components/nano-menu-drawer.entry.js +1 -1
- package/dist/nano-components/nano-more-less.entry.js +1 -1
- package/dist/nano-components/nano-nav-item.entry.js +1 -1
- package/dist/nano-components/nano-rating.entry.js +1 -1
- package/dist/nano-components/nano-resize-observe.entry.js +1 -1
- package/dist/nano-components/nano-slide.entry.js +1 -1
- package/dist/nano-components/{nano-slides-CuEgW0Us.js → nano-slides-BU8CjO-X.js} +2 -2
- package/dist/nano-components/nano-slides.entry.js +1 -1
- package/dist/nano-components/nano-sortable.entry.js +1 -1
- package/dist/nano-components/nano-step-accordion.entry.js +1 -1
- package/dist/nano-components/nano-step-breadcrumb.entry.js +1 -1
- package/dist/nano-components/nano-sticker.entry.js +1 -1
- package/dist/nano-components/nano-tab-content.entry.js +1 -1
- package/dist/nano-components/nano-tab.entry.js +1 -1
- package/dist/nano-components/nano-table.entry.js +1 -1
- package/dist/nano-components/{page-dots-D6hhv2PU.js → page-dots-Ckyic5vY.js} +1 -1
- package/dist/nano-components/slot-D31cEKyt.js +4 -0
- package/dist/style/components.css +1 -1
- package/dist/style/components.css.map +1 -1
- package/dist/style/nano.css +1 -1
- package/dist/style/nano.css.map +1 -1
- package/dist/types/components/input-otp/input-otp.d.ts +3 -0
- package/docs-json.json +21 -37
- package/hydrate/index.js +62 -50
- package/hydrate/index.mjs +62 -50
- package/package.json +2 -2
- package/dist/nano-components/slot-CFTP7C_Z.js +0 -4
- /package/dist/types/builds/{z1_PBzhd → _6Vabn6i}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{z1_PBzhd → _6Vabn6i}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
- /package/dist/types/builds/{z1_PBzhd → _6Vabn6i}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
- /package/dist/types/builds/{z1_PBzhd → _6Vabn6i}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
- /package/dist/types/builds/{z1_PBzhd → _6Vabn6i}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
- /package/dist/types/builds/{z1_PBzhd → _6Vabn6i}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
- /package/dist/types/builds/{z1_PBzhd → _6Vabn6i}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{z1_PBzhd → _6Vabn6i}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{z1_PBzhd → _6Vabn6i}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{z1_PBzhd → _6Vabn6i}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
|
@@ -8,10 +8,13 @@ import type { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpIn
|
|
|
8
8
|
*
|
|
9
9
|
* @slot - The default slot for the input description.
|
|
10
10
|
* @slot validity-icon - A slot for a custom validity icon. If not provided, a default icon will be used.
|
|
11
|
+
*
|
|
12
|
+
* @part validity-icon - The validity icon.
|
|
11
13
|
*/
|
|
12
14
|
export declare class InputOTP implements ComponentInterface {
|
|
13
15
|
private inputRefs;
|
|
14
16
|
private inputId;
|
|
17
|
+
private slotCtrl;
|
|
15
18
|
/**
|
|
16
19
|
* Stores the initial value of the input when it receives focus.
|
|
17
20
|
* Used to determine if the value changed during the focus session
|
package/docs-json.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-09-
|
|
2
|
+
"timestamp": "2025-09-26T11:14:51",
|
|
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/_6Vabn6i/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
|
|
3362
3362
|
"id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
|
|
3363
3363
|
}
|
|
3364
3364
|
}
|
|
@@ -17889,6 +17889,10 @@
|
|
|
17889
17889
|
{
|
|
17890
17890
|
"name": "slot",
|
|
17891
17891
|
"text": "validity-icon - A slot for a custom validity icon. If not provided, a default icon will be used."
|
|
17892
|
+
},
|
|
17893
|
+
{
|
|
17894
|
+
"name": "part",
|
|
17895
|
+
"text": "validity-icon - The validity icon."
|
|
17892
17896
|
}
|
|
17893
17897
|
],
|
|
17894
17898
|
"usage": {},
|
|
@@ -18369,50 +18373,20 @@
|
|
|
18369
18373
|
"docs": "The color of the highlight on the input when valid"
|
|
18370
18374
|
},
|
|
18371
18375
|
{
|
|
18372
|
-
"name": "--
|
|
18373
|
-
"annotation": "prop",
|
|
18374
|
-
"docs": "Bottom margin of the input group"
|
|
18375
|
-
},
|
|
18376
|
-
{
|
|
18377
|
-
"name": "--margin-end",
|
|
18378
|
-
"annotation": "prop",
|
|
18379
|
-
"docs": "Right margin if direction is left-to-right, and left margin if direction is right-to-left of the input group"
|
|
18380
|
-
},
|
|
18381
|
-
{
|
|
18382
|
-
"name": "--margin-start",
|
|
18376
|
+
"name": "--icon-size",
|
|
18383
18377
|
"annotation": "prop",
|
|
18384
|
-
"docs": "
|
|
18378
|
+
"docs": "Size of the validity icon"
|
|
18385
18379
|
},
|
|
18386
18380
|
{
|
|
18387
|
-
"name": "--
|
|
18381
|
+
"name": "--inline-padding",
|
|
18388
18382
|
"annotation": "prop",
|
|
18389
|
-
"docs": "
|
|
18383
|
+
"docs": "Horizontal padding surrounding the input boxes"
|
|
18390
18384
|
},
|
|
18391
18385
|
{
|
|
18392
18386
|
"name": "--min-width",
|
|
18393
18387
|
"annotation": "prop",
|
|
18394
18388
|
"docs": "Minimum width of input boxes"
|
|
18395
18389
|
},
|
|
18396
|
-
{
|
|
18397
|
-
"name": "--padding-bottom",
|
|
18398
|
-
"annotation": "prop",
|
|
18399
|
-
"docs": "Bottom padding of the input group"
|
|
18400
|
-
},
|
|
18401
|
-
{
|
|
18402
|
-
"name": "--padding-end",
|
|
18403
|
-
"annotation": "prop",
|
|
18404
|
-
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input group"
|
|
18405
|
-
},
|
|
18406
|
-
{
|
|
18407
|
-
"name": "--padding-start",
|
|
18408
|
-
"annotation": "prop",
|
|
18409
|
-
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input group"
|
|
18410
|
-
},
|
|
18411
|
-
{
|
|
18412
|
-
"name": "--padding-top",
|
|
18413
|
-
"annotation": "prop",
|
|
18414
|
-
"docs": "Top padding of the input group"
|
|
18415
|
-
},
|
|
18416
18390
|
{
|
|
18417
18391
|
"name": "--separator-border-radius",
|
|
18418
18392
|
"annotation": "prop",
|
|
@@ -18433,6 +18407,11 @@
|
|
|
18433
18407
|
"annotation": "prop",
|
|
18434
18408
|
"docs": "Width of the separator between boxes"
|
|
18435
18409
|
},
|
|
18410
|
+
{
|
|
18411
|
+
"name": "--spacing",
|
|
18412
|
+
"annotation": "prop",
|
|
18413
|
+
"docs": "Spacing between input boxes and description"
|
|
18414
|
+
},
|
|
18436
18415
|
{
|
|
18437
18416
|
"name": "--width",
|
|
18438
18417
|
"annotation": "prop",
|
|
@@ -18449,7 +18428,12 @@
|
|
|
18449
18428
|
"docs": "A slot for a custom validity icon. If not provided, a default icon will be used."
|
|
18450
18429
|
}
|
|
18451
18430
|
],
|
|
18452
|
-
"parts": [
|
|
18431
|
+
"parts": [
|
|
18432
|
+
{
|
|
18433
|
+
"name": "validity-icon",
|
|
18434
|
+
"docs": "The validity icon."
|
|
18435
|
+
}
|
|
18436
|
+
],
|
|
18453
18437
|
"dependents": [],
|
|
18454
18438
|
"dependencies": [
|
|
18455
18439
|
"nano-icon"
|
package/hydrate/index.js
CHANGED
|
@@ -3831,7 +3831,21 @@ class HasSlotController {
|
|
|
3831
3831
|
hasDefaultSlot() {
|
|
3832
3832
|
if (!this.host)
|
|
3833
3833
|
return false;
|
|
3834
|
-
|
|
3834
|
+
let childNodes;
|
|
3835
|
+
if (this.host.shadowRoot) {
|
|
3836
|
+
// * Regular shadow DOM component *
|
|
3837
|
+
childNodes = [...this.host.shadowRoot.childNodes];
|
|
3838
|
+
}
|
|
3839
|
+
else if (!this.host.classList.contains('hydrated')) {
|
|
3840
|
+
// * Non-shadow, polyfilled component *
|
|
3841
|
+
// Component has not done initial render. Return component internals
|
|
3842
|
+
childNodes = [...(this.host?.__childNodes ?? [])];
|
|
3843
|
+
}
|
|
3844
|
+
else {
|
|
3845
|
+
// Component is ready, return 'light DOM' children
|
|
3846
|
+
childNodes = [...this.host.childNodes];
|
|
3847
|
+
}
|
|
3848
|
+
return childNodes.some((node) => {
|
|
3835
3849
|
if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
|
|
3836
3850
|
return true;
|
|
3837
3851
|
}
|
|
@@ -17730,7 +17744,7 @@ class Input {
|
|
|
17730
17744
|
}; }
|
|
17731
17745
|
}
|
|
17732
17746
|
|
|
17733
|
-
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{--
|
|
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-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)}";
|
|
17734
17748
|
|
|
17735
17749
|
/**
|
|
17736
17750
|
* A component for entering one-time passwords (OTP) with multiple input fields.
|
|
@@ -17740,6 +17754,8 @@ const inputOtpCss = ".sc-nano-input-otp-h,*.sc-nano-input-otp,*.sc-nano-input-ot
|
|
|
17740
17754
|
*
|
|
17741
17755
|
* @slot - The default slot for the input description.
|
|
17742
17756
|
* @slot validity-icon - A slot for a custom validity icon. If not provided, a default icon will be used.
|
|
17757
|
+
*
|
|
17758
|
+
* @part validity-icon - The validity icon.
|
|
17743
17759
|
*/
|
|
17744
17760
|
class InputOTP {
|
|
17745
17761
|
constructor(hostRef) {
|
|
@@ -17752,6 +17768,7 @@ class InputOTP {
|
|
|
17752
17768
|
}
|
|
17753
17769
|
inputRefs = [];
|
|
17754
17770
|
inputId = `nano-input-otp-${inputIds++}`;
|
|
17771
|
+
slotCtrl = new HasSlotController(this, '[default]');
|
|
17755
17772
|
/**
|
|
17756
17773
|
* Stores the initial value of the input when it receives focus.
|
|
17757
17774
|
* Used to determine if the value changed during the focus session
|
|
@@ -18413,26 +18430,21 @@ class InputOTP {
|
|
|
18413
18430
|
inputValues.some((v) => v !== '' && !this.validKeyPattern.test(v));
|
|
18414
18431
|
}
|
|
18415
18432
|
render() {
|
|
18416
|
-
const { disabled,
|
|
18433
|
+
const { disabled, hasFocus, inputId, inputRefs, inputValues, length, readonly, invalid, valid, } = this;
|
|
18417
18434
|
const inputmode = this.getInputmode();
|
|
18418
18435
|
const tabbableIndex = this.getTabbableIndex();
|
|
18419
18436
|
const pattern = this.getPattern();
|
|
18420
|
-
|
|
18421
|
-
return (hAsync(Host, { key: 'f397a0775d2d961ccc9013206fae72a8d0ad90ae', class: {
|
|
18437
|
+
return (hAsync(Host, { key: 'fb427bd3cb9bda29ec05c851e23a522c6966f4c0', class: {
|
|
18422
18438
|
'has-focus': hasFocus,
|
|
18423
18439
|
'input-otp-disabled': disabled,
|
|
18424
18440
|
'input-otp-readonly': readonly,
|
|
18425
18441
|
'nano-invalid': invalid,
|
|
18426
18442
|
'nano-valid': valid,
|
|
18427
|
-
} }, hAsync("div", { key: '
|
|
18443
|
+
} }, hAsync("div", { key: '7b5067c8e3f91b71d9110c26e7ec6a91c560de8c', class: "input-otp-container" }, hAsync("div", { key: 'a2420e14e2392429eca041ed0ce70e2b387d4922', 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: '345be96b0c208d367804822eef00fbfdee3ecbfe', class: {
|
|
18428
18444
|
'input-otp-icon': true,
|
|
18429
18445
|
'input-otp-icon--valid': valid,
|
|
18430
18446
|
'input-otp-icon--invalid': invalid,
|
|
18431
|
-
} }, hAsync("slot", { key: '
|
|
18432
|
-
'input-otp-description': true,
|
|
18433
|
-
'input-otp-description-hidden': !hasDescription,
|
|
18434
|
-
'input-otp-description-inset': this.showValidity,
|
|
18435
|
-
} }, hAsync("slot", { key: 'e875d5c5d7ed8f804b9866618b7ed5e5211dd7b1' }))));
|
|
18447
|
+
}, part: "validity-icon" }, hAsync("slot", { key: '7d4a86988e4097f3422aaa2f0ee5df4518da1d41', name: "validity-icon" }, hAsync("nano-icon", { key: '6b81e7a0430e36c0381b7787558509f525f7eed5', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (hAsync("div", { key: '6d97b65cc7fad0f1828608887773081312f3bf92', class: "input-otp-description" }, hAsync("slot", { key: '459b7f12a59fec36ff465126c79083f14dce4a8a' })))));
|
|
18436
18448
|
}
|
|
18437
18449
|
static get watchers() { return {
|
|
18438
18450
|
"value": ["valueChanged"]
|
|
@@ -18603,7 +18615,7 @@ class IntersectionObserve {
|
|
|
18603
18615
|
this.removeIO();
|
|
18604
18616
|
}
|
|
18605
18617
|
render() {
|
|
18606
|
-
return (h(Host, { key: '
|
|
18618
|
+
return (h(Host, { key: '6ed0913499a9caede509c0394a2be337ddbcfc7c', class: "nano-intersection-observe" }, h("slot", { key: 'a55eeb8c1527dd62aba761b60b6a0764cbd5bfa4', ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
|
|
18607
18619
|
}
|
|
18608
18620
|
static get watchers() { return {
|
|
18609
18621
|
"root": ["handleRootChange"],
|
|
@@ -18948,7 +18960,7 @@ class MaskedOverflow {
|
|
|
18948
18960
|
}
|
|
18949
18961
|
}
|
|
18950
18962
|
render() {
|
|
18951
|
-
return (h(Host, { key: '
|
|
18963
|
+
return (h(Host, { key: 'f09154c9daef9d42d1ac6bf1ae1cab43b25fc759', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'c08a301b623b69a8a8936e846fb4d61c3d7a5d42', part: "base", class: {
|
|
18952
18964
|
onav: true,
|
|
18953
18965
|
[`onav--${this.orientation}`]: true,
|
|
18954
18966
|
'onav--has-scroll-controls': this.hasScrollControls,
|
|
@@ -18957,12 +18969,12 @@ class MaskedOverflow {
|
|
|
18957
18969
|
'onav--no-transitions': this.instantReCalc,
|
|
18958
18970
|
'onnav--has-indicator': this.showIndicator,
|
|
18959
18971
|
'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
|
|
18960
|
-
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '
|
|
18972
|
+
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '4430bfab6920f77fe64885eb12c7a1f2ebfdbf31', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '800ac8de65485ebaa4060c26a7f0b3432348c8d1', part: "scroll-button scroll-button-prev", class: {
|
|
18961
18973
|
'onav__scroll-button': true,
|
|
18962
18974
|
'onav__scroll-button--start': true,
|
|
18963
18975
|
}, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|
|
18964
18976
|
? 'light/chevron-left'
|
|
18965
|
-
: 'light/chevron-up' })), h("div", { key: '
|
|
18977
|
+
: 'light/chevron-up' })), h("div", { key: '48fff7814d1c8a864ca9f29c0b4bc2196c7b4a98', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '376a6e0007b1e9e35d3226e6575d0ca840b1f75a', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'c0b933b6b29071de0f5b3d3b97497de231b45801', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '2bff315c99ce804c26240ef5e134c1f08fed0547', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'd568e4adaf25dbf10127e433220fa6900298e31f', part: "scroll-button scroll-button-next", class: {
|
|
18966
18978
|
'onav__scroll-button': true,
|
|
18967
18979
|
'onav__scroll-button--end': true,
|
|
18968
18980
|
}, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|
|
@@ -19403,14 +19415,14 @@ class MenuDrawer {
|
|
|
19403
19415
|
disconnectedCallback() {
|
|
19404
19416
|
}
|
|
19405
19417
|
render() {
|
|
19406
|
-
return (h(Host, { key: '
|
|
19418
|
+
return (h(Host, { key: 'bed821db8e5a30f26c3c9bad45b01321bdf4ca77', class: {
|
|
19407
19419
|
open: this.open,
|
|
19408
19420
|
'secondary-open': this.secondaryOpen,
|
|
19409
19421
|
hide: this.hide,
|
|
19410
19422
|
loading: this.isLoading,
|
|
19411
19423
|
'has-global-nav': !!this.globalNav,
|
|
19412
19424
|
'nano-menu-drawer': true,
|
|
19413
|
-
}, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: '
|
|
19425
|
+
}, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'e80fe18a73873359fc1d86ca93a06b8c6d3173c1', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'fe83b1858bacd94f3e0540ee3933d1018f7bfb9d', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: 'bed3b6c253cf16f8a796393be71c2c1b9aebd266', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: 'a8ea363c51345c83fcbf8723a32627bd99c5a9cf', class: "head" }, h("button", { key: 'fa9765354704685582e64771ded73c30c88e0374', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '0489c46c0c76a72720daf6656e26c2946433bccc', name: "light/arrow-right-to-line" }), h("span", { key: '81b00aaf09a528d6137351df20e23149a5325bf0', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: 'ab5f6ed3b81b2d5f741a1d102a12db5b0f68bae7' }), this.slotCtrl.has('foot') && (h("div", { key: 'dbb8345173ee78b9685cc46c6dcde5c2d617a868', class: "foot" }, h("slot", { key: '93bfeb1493a1d5e9a420803a09e64dced877591b', name: "foot" }))))))));
|
|
19414
19426
|
}
|
|
19415
19427
|
static get watchers() { return {
|
|
19416
19428
|
"open": ["openChange"]
|
|
@@ -23735,7 +23747,7 @@ class NanoStepAccordion {
|
|
|
23735
23747
|
}
|
|
23736
23748
|
}
|
|
23737
23749
|
render() {
|
|
23738
|
-
return (h("nano-accordion", { key: '
|
|
23750
|
+
return (h("nano-accordion", { key: '3676ae38e897988059d679e2f3b3291641a4a2b0', alwaysOpen: true, onNanoToggle: (event) => this.handleToggle(event) }, this.steps.map((step, index) => (h("nano-details", { open: index === this.activeStep, disabled: !step.enabled, class: {
|
|
23739
23751
|
step: true,
|
|
23740
23752
|
'step--active': index === this.activeStep,
|
|
23741
23753
|
'step--complete': step.complete,
|
|
@@ -23864,10 +23876,10 @@ class NanoStepBreadcrumb {
|
|
|
23864
23876
|
};
|
|
23865
23877
|
render() {
|
|
23866
23878
|
const Wrapper = this.steps.filter((step) => step.href).length > 0 ? 'nav' : 'div';
|
|
23867
|
-
return (h(Host, { key: '
|
|
23879
|
+
return (h(Host, { key: 'c1b1866d4889830fa70d570df0bea118561df7bf' }, h(Wrapper, { key: '630fc450433bd177410e4e69730781cec88b0ea5', class: "step-wrapper" }, h("ul", { key: 'd8b35166bbb9b01df388387997f4b2a4dc612f55', class: `step-list desktop ${this.cacheKey}` }, this.steps.map((step, index) => (h("li", { class: "step-item-wrapper", key: index }, h(this.ControlTag, { step: step, index: index }))))), h("div", { key: 'aa8e3119c641c02f4ac960d4e415c7c327249c8e', class: `step-list mobile ${this.cacheKey}` }, h("nano-dropdown", { key: '61172362d21ec93527e431ab96d9f66075aa52dc', dialogTitle: "Steps", class: "step-dropdown" }, h("button", { key: '8edb7e0ddac43cff9b001ba504f003d6df64895f', slot: "trigger", class: "step-trigger" }, h("div", { key: 'a7ba7d9b0c6724ce19bd556cbfef2fdd9dc36f2b', class: "step-progress-circle", role: "progressbar", "aria-valuenow": "2", "aria-valuemin": "0", "aria-valuemax": "5", style: {
|
|
23868
23880
|
'--value': '' + (this.activeStep + 1),
|
|
23869
23881
|
'--max': '' + this.steps.length,
|
|
23870
|
-
} }, h("span", { key: '
|
|
23882
|
+
} }, h("span", { key: 'd84750e092190edd64cd3cecc7a36e2b8b400fbe', class: "step-progress-text" }, h("strong", { key: '6b2f3cd970a2e64299c0d9f85ee59cd93a041858' }, this.activeStep + 1), " of", ' ', this.steps.length)), h("div", { key: '53ebc1b869804b2bae5dc6e9a8cdb2e78027c0c2', class: "step-trigger-text" }, h("div", { key: 'b419abee3f2fa764f19f9f3910347dac89f7b278', class: "step-trigger-now" }, this.steps[this.activeStep | 0]?.title || 'Select a step'), h("div", { key: '6c307ffcd845df90950811e0e88e624ebec495a4', class: "step-trigger-next" }, this.steps[this.activeStep + 1]?.title || 'Next step')), h("nano-icon", { key: '1c012c4bf4e264a328dad23317f73451148176fc', class: "step-trigger-icon", name: "light/chevron-down" })), h("nano-menu", { key: 'ef2bac97f59de0f9b63837cb5c0d67958b32d3ce' }, this.steps.map((step, index) => (h("nano-nav-item", { class: {
|
|
23871
23883
|
'step-item-mobile': true,
|
|
23872
23884
|
'step-item-mobile step-item--active': index === this.activeStep,
|
|
23873
23885
|
'step-item-mobile step-item--complete': step.complete,
|
|
@@ -23954,12 +23966,12 @@ class NanoTab {
|
|
|
23954
23966
|
}
|
|
23955
23967
|
};
|
|
23956
23968
|
render() {
|
|
23957
|
-
return (h(Host, { key: '
|
|
23969
|
+
return (h(Host, { key: '735b30efba4aecf7bfa515f1fc33d9c507d8ded0', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: '400e6997781a7499613f0b04cf559ee8598801e2', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
|
|
23958
23970
|
tab: true,
|
|
23959
23971
|
'tab--active': this.active,
|
|
23960
23972
|
'tab--disabled': this.disabled,
|
|
23961
23973
|
'tab--closable': this.closable,
|
|
23962
|
-
} }, h("slot", { key: '
|
|
23974
|
+
} }, h("slot", { key: '059131aa192ceac9ca9b61db2daf7029c0153d66', name: "start" }), h("div", { key: '76fba07c2ded5f4a2d93f9540fd222655c507517', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '2ac34a7e63e38ed4821d39e35b276b1155e2edd3' })), h("slot", { key: '7d1b2f561c64e3be7a464d9e24ea7fd5d2a56b66', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '72497156f9858f16c0d4521cbc6d559cd2266be8', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
|
|
23963
23975
|
}
|
|
23964
23976
|
static get style() { return tabCss; }
|
|
23965
23977
|
static get cmpMeta() { return {
|
|
@@ -24005,10 +24017,10 @@ class NanoTabContent {
|
|
|
24005
24017
|
requestAnimationFrame(() => (this.ready = true));
|
|
24006
24018
|
}
|
|
24007
24019
|
render() {
|
|
24008
|
-
return (h(Host, { key: '
|
|
24020
|
+
return (h(Host, { key: '7899878aa521145bc4fe77a7e81ddbd2d48b739e', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
|
|
24009
24021
|
ready: this.ready,
|
|
24010
24022
|
'nano-tab-content': true,
|
|
24011
|
-
} }, h("div", { key: '
|
|
24023
|
+
} }, h("div", { key: '68d1c780cf1f6d4d0ef77b1dafa7766aa08ba52b', part: "base", class: "nano-tab-content" }, h("slot", { key: 'd8be1c667173f69f74fbead600d79bf96da42cbe' }))));
|
|
24012
24024
|
}
|
|
24013
24025
|
static get style() { return tabContentCss; }
|
|
24014
24026
|
static get cmpMeta() { return {
|
|
@@ -24587,10 +24599,10 @@ class NanoTable {
|
|
|
24587
24599
|
this.cleanUpObservers();
|
|
24588
24600
|
}
|
|
24589
24601
|
render() {
|
|
24590
|
-
return (h(Host, { key: '
|
|
24602
|
+
return (h(Host, { key: 'e2ee468673f70252fc559a82e48b74f12273e416', class: {
|
|
24591
24603
|
'nano-table': true,
|
|
24592
24604
|
'nano-table--props-ready': this.propsReady,
|
|
24593
|
-
} }, this.scrollable && (h("nano-masked-overflow", { key: '
|
|
24605
|
+
} }, this.scrollable && (h("nano-masked-overflow", { key: '63091df4a07695276d762d2a5ad5f535c9ed67dd', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '2defbb73d6077d95351c50685c70e6c32f05fd87', class: "nano-table__overflow" }))), h("slot", { key: '71a9d57114363f976eb139d494a8383795a67a8b' })));
|
|
24594
24606
|
}
|
|
24595
24607
|
static get watchers() { return {
|
|
24596
24608
|
"compact": ["handleCompactChange"],
|
|
@@ -25667,8 +25679,8 @@ let Rating$1 = class Rating {
|
|
|
25667
25679
|
this.handleShowHideElements();
|
|
25668
25680
|
}
|
|
25669
25681
|
render() {
|
|
25670
|
-
return (h(Host, { key: '
|
|
25671
|
-
h("div", { key: '
|
|
25682
|
+
return (h(Host, { key: 'b129148afdc959f912a16d1e2642c3e920a0a381', class: "nano-more-less" }, h("slot", { key: '92aa96b6301d14f7b4d9aee9cc4cafbf0ff75431', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
|
|
25683
|
+
h("div", { key: '73a5c457e8243cd8cf8e8ec1e681aa2c62244936', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '48802275120ff78676a19b25f792806dd03db2c1', name: "less" }, h("button", { key: '703d054e4560cf22d571a29838dfbd649062f7ca', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
|
|
25672
25684
|
!this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
|
|
25673
25685
|
]));
|
|
25674
25686
|
}
|
|
@@ -25889,20 +25901,20 @@ class Rating {
|
|
|
25889
25901
|
else {
|
|
25890
25902
|
displayValue = this.isHovering ? this.hoverValue : this.value;
|
|
25891
25903
|
}
|
|
25892
|
-
return (h(Host, { key: '
|
|
25904
|
+
return (h(Host, { key: '3011ba88cafed0ec3c79d823a3abac433f68b5d1', class: "nano-rating" }, h("label", { key: 'ea6a01bc5a7f8e7fecbb16a905c472b5e1c62328', class: `rating-label${this.hideLabel ? ' visually-hidden' : ''}`, part: "label", htmlFor: this.name }, h("slot", { key: '22e31eeaed0aca337a71c1bbb39c238413f1c00c', name: "label" }, this.label)), h("input", { key: '265bd0055cbd05911611e0a5e45828d4dab7ac8c', class: "range-input visually-hidden", name: this.name, id: this.name, disabled: this.disabled || this.readonly, required: this.required, value: this.value, onFocus: () => {
|
|
25893
25905
|
this.setFocus();
|
|
25894
|
-
} }), h("div", { key: '
|
|
25906
|
+
} }), h("div", { key: '4c0af619c68c230a5994871efdf5608870fb83e0', class: "rating-wrap" }, h("div", { key: 'e6f94c258bc04b6a4a6aad66c9364c1c811f859a', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
|
|
25895
25907
|
rating: true,
|
|
25896
25908
|
'rating--readonly': this.readonly,
|
|
25897
25909
|
'rating--disabled': this.disabled,
|
|
25898
|
-
}, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '
|
|
25910
|
+
}, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: 'd514ae0f85be4d59ab6a2ae4496357c5d6601ba9', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (h("span", { class: {
|
|
25899
25911
|
rating__symbol: true,
|
|
25900
25912
|
'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
|
|
25901
25913
|
},
|
|
25902
25914
|
// Users can click the current value to clear the rating. When this happens, we set this.isHovering to
|
|
25903
25915
|
// false to prevent the hover state from confusing them as they move the mouse out of the control. This
|
|
25904
25916
|
// extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
|
|
25905
|
-
onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '
|
|
25917
|
+
onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), h("span", { key: '0caf2f0561d3b74e6891e6c2a4b970fef53298f3', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
|
|
25906
25918
|
clip: this.clip(displayValue),
|
|
25907
25919
|
} }, counter.map((index) => (h("span", { class: {
|
|
25908
25920
|
rating__symbol: true,
|
|
@@ -26174,13 +26186,13 @@ class ResizeObserve {
|
|
|
26174
26186
|
}
|
|
26175
26187
|
}
|
|
26176
26188
|
render() {
|
|
26177
|
-
return (h(Host, { key: '
|
|
26189
|
+
return (h(Host, { key: 'a2c57218f65a9af2297e6662c29d3a7c853092df', class: {
|
|
26178
26190
|
'nano-resize-observe': true,
|
|
26179
26191
|
'content-fit-x': this.contentFitX,
|
|
26180
26192
|
'content-fit-y': this.contentFitY,
|
|
26181
26193
|
'content-nofit-x': this.contentFitX === false,
|
|
26182
26194
|
'content-nofit-y': this.contentFitY === false,
|
|
26183
|
-
} }, h("slot", { key: '
|
|
26195
|
+
} }, h("slot", { key: 'cf0faa31f7c1daa08238555a46699c1b731e13b8' }), !!this.notifyContentFit &&
|
|
26184
26196
|
(this.contentFitX !== null || this.contentFitY !== null) && [
|
|
26185
26197
|
this.contentFitX ? (h("slot", { name: "content-fit-x" })) : (h("slot", { name: "content-nofit-x" })),
|
|
26186
26198
|
this.contentFitY ? (h("slot", { name: "content-fit-y" })) : (h("slot", { name: "content-nofit-y" })),
|
|
@@ -26911,30 +26923,30 @@ class Select {
|
|
|
26911
26923
|
disabled,
|
|
26912
26924
|
clearControl: this.clearable,
|
|
26913
26925
|
}))(this);
|
|
26914
|
-
return (h(Host, { key: '
|
|
26926
|
+
return (h(Host, { key: 'a2c56f43fef750f8e336a1612644761293b19bd4', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
|
|
26915
26927
|
'has-value': !!this.value.length || !!this.inputSearchVal.length,
|
|
26916
26928
|
'has-focus': this.hasFocus,
|
|
26917
26929
|
'is-invalid': this._invalid === true,
|
|
26918
26930
|
'is-valid': this._invalid === false,
|
|
26919
26931
|
'nano-select': true,
|
|
26920
|
-
} }, h(FormControlWrap, { key: '
|
|
26932
|
+
} }, h(FormControlWrap, { key: '632d901cdff60d36ae1a410f6c252c671eac8e63', ...wrapOptions, class: {
|
|
26921
26933
|
'has-error': !!this.errorMessage &&
|
|
26922
26934
|
this.showInlineError &&
|
|
26923
26935
|
this._invalid === true,
|
|
26924
26936
|
'has-helper': this.hasHelperSlot,
|
|
26925
26937
|
'is-open': this.hasOpened,
|
|
26926
26938
|
masked: this.mask,
|
|
26927
|
-
} }, h(FormControl, { key: '
|
|
26928
|
-
this.mask && (h("div", { key: '
|
|
26929
|
-
h("input", { key: '
|
|
26930
|
-
])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '
|
|
26939
|
+
} }, h(FormControl, { key: '387a55518ed1c74ea944008c750a0ca42a6bbbe8', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: '660b70b098520471d4f7653af5cc50388625cd1c', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
|
|
26940
|
+
this.mask && (h("div", { key: '44f53317d26f2f8b85b5c8b397ccfd68a26eebb5', class: "select__mask" }, this.getLabel(this.value))),
|
|
26941
|
+
h("input", { key: '04f3935c7f759e3767f32faecb9e6ef81a36c777', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readonly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
|
|
26942
|
+
])), !this.readonly && !this.disabled && (h("nano-datalist", { key: 'aae86b85c3bd2c2c562468f2a33e52c7036ad69b', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
|
|
26931
26943
|
e.preventDefault();
|
|
26932
26944
|
this.removeValue(e.detail.value);
|
|
26933
26945
|
}, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
|
|
26934
26946
|
// @ts-expect-error - this bubbles from the nano-dropdown
|
|
26935
26947
|
onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
|
|
26936
26948
|
this.multiple &&
|
|
26937
|
-
!!this.inputSearchVal && (h("nano-option", { key: '
|
|
26949
|
+
!!this.inputSearchVal && (h("nano-option", { key: 'cf744eb6bbad3ce2d8d05354d5edaf3eab07a207', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '990e00208c403d92d1586fb0b2c4618768f5fda5', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '54fce41f95c01e0b2ff1619209ebb15a28383677' }))), h("select", { key: '1c5ff40ac84be25c6b7075ef031b29f2b6f9b007', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
|
|
26938
26950
|
this.valArray.map((val) => {
|
|
26939
26951
|
return (h("option", { value: val, selected: true }, val));
|
|
26940
26952
|
}), !this.allowCustomValues &&
|
|
@@ -27077,7 +27089,7 @@ let Slide$2 = class Slide {
|
|
|
27077
27089
|
});
|
|
27078
27090
|
}
|
|
27079
27091
|
render() {
|
|
27080
|
-
return (h(Host, { key: '
|
|
27092
|
+
return (h(Host, { key: '3de94ff45cb6dddcca7f0097f3376361c2666f7e', class: "nano-slide" }, h("slot", { key: '9998d9102bdc69eecd28752b4a2c130497b34d06' })));
|
|
27081
27093
|
}
|
|
27082
27094
|
static get watchers() { return {
|
|
27083
27095
|
"ready": ["readyChange"]
|
|
@@ -30056,15 +30068,15 @@ class Slides {
|
|
|
30056
30068
|
this.destroyflickity();
|
|
30057
30069
|
}
|
|
30058
30070
|
render() {
|
|
30059
|
-
return (h(Host, { key: '
|
|
30071
|
+
return (h(Host, { key: '3a10721073af3ef6658047ba47aef766698df2c1', class: "nano-slides" }, h("div", { key: '2603091b764a61836422c2b1edacfa99f2275533', class: {
|
|
30060
30072
|
slideshow: true,
|
|
30061
30073
|
ready: this.ready,
|
|
30062
30074
|
'not-ready': !this.ready,
|
|
30063
|
-
}, part: "base" }, h("div", { key: '
|
|
30075
|
+
}, part: "base" }, h("div", { key: 'a7c997143a864dd9d458deed4ea8034701c4e270', ref: (div) => (this.flickityEl = div), class: {
|
|
30064
30076
|
'flickity-container': true,
|
|
30065
30077
|
'slides-ready': this.slidesReady,
|
|
30066
30078
|
'slides-not-ready': !this.slidesReady,
|
|
30067
|
-
}, part: "slide-container" }, h("slot", { key: '
|
|
30079
|
+
}, part: "slide-container" }, h("slot", { key: '366fbe336c1f7a77781327d4b887da201a59c732' })), h("div", { key: 'e2d9004f2e5e4e95d98275f80d63073d7ea2518b', class: "ui-extras" }, h("slot", { key: '0e88f115692ab91d33040f4ee03422f99ac10771', name: "ui" })))));
|
|
30068
30080
|
}
|
|
30069
30081
|
static get watchers() { return {
|
|
30070
30082
|
"options": ["optionsChanged"],
|
|
@@ -30842,7 +30854,7 @@ class Sortable {
|
|
|
30842
30854
|
}
|
|
30843
30855
|
}
|
|
30844
30856
|
render() {
|
|
30845
|
-
return (h(Host, { key: '
|
|
30857
|
+
return (h(Host, { key: '290c407551a2742f1aea13b69bf6e76783ac04cf', class: "nano-sortable" }, h("div", { key: '85d9c75f73d2c010bf8a8944855ef4b9af8ca24e', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '9c7984602c800c36731218593811876aac6ed948' })));
|
|
30846
30858
|
}
|
|
30847
30859
|
static get watchers() { return {
|
|
30848
30860
|
"itemSelector": ["handleItemSelectorChange"],
|
|
@@ -31841,12 +31853,12 @@ class Sticker {
|
|
|
31841
31853
|
this.hasBootstrapped = false;
|
|
31842
31854
|
}
|
|
31843
31855
|
render() {
|
|
31844
|
-
return (h(Host, { key: '
|
|
31856
|
+
return (h(Host, { key: 'f339585bb8f9d509f374404a6462b482ee7f7001', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: 'a0825842c7fb6fd7ab7e15a6775547693e38c1cb', class: {
|
|
31845
31857
|
sticker: true,
|
|
31846
31858
|
sticky: this.isRootSticker && this.isSticky,
|
|
31847
31859
|
stuck: this.isStuck && this.isRootSticker && this.isSticky,
|
|
31848
31860
|
hide: this.isRootSticker && this.hide && this.isStuck,
|
|
31849
|
-
}, ref: (div) => (this.sticker = div) }, h("div", { key: '
|
|
31861
|
+
}, ref: (div) => (this.sticker = div) }, h("div", { key: '3693b4a7c4daf5b5208b36a158b0d0b1f3ced9b0', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '526f2d5e88882133ec67866d90cdf18b95ce86cc' })))));
|
|
31850
31862
|
}
|
|
31851
31863
|
static get watchers() { return {
|
|
31852
31864
|
"trigger": ["updateTriggerOffset"],
|
|
@@ -32135,10 +32147,10 @@ class Tooltip {
|
|
|
32135
32147
|
this.popover.destroy();
|
|
32136
32148
|
}
|
|
32137
32149
|
render() {
|
|
32138
|
-
return (h(Host, { key: '
|
|
32150
|
+
return (h(Host, { key: '4e1a851a25fb3b85f17ce51e6d3ca6c4ef88096b', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: '040fd84cf165db44447013c4f830c127f9c3cffa', onSlotchange: this.handleSlotChange }), h("div", { key: 'ce342385aa99cb783ee5438812eba7eb6d52993a', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: '37c9a935a2e9b9d1970a1bf4269aea5fd959176b', part: "base", ref: (el) => (this.tooltip = el), class: {
|
|
32139
32151
|
tooltip: true,
|
|
32140
32152
|
'tooltip--open': this.open,
|
|
32141
|
-
}, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '
|
|
32153
|
+
}, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '2131e35600ffcf0bf1531f84a2dbc0d954083ab8', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '98953a383fbc4f68c96015e1e44a5618fb6efb97', class: "tooltip-arrow", "data-popper-arrow": true })))));
|
|
32142
32154
|
}
|
|
32143
32155
|
static get watchers() { return {
|
|
32144
32156
|
"content": ["setLabel"],
|