@nanoporetech-digital/components 8.0.0-alpha.8 → 8.0.0-alpha.9
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/{algolia-data-Ck3OvAaS.js → algolia-data-CSm7qrG0.js} +1 -1
- package/dist/cjs/{component-store-Cpxjkhrv.js → component-store-Bjf_XOwd.js} +1 -1
- package/dist/cjs/{dom-B0-coRX2.js → dom-DM4lO0bS.js} +1 -1
- package/dist/cjs/{fade-463IMjUb.js → fade-DYt6Phy3.js} +3 -3
- package/dist/cjs/{form-control-OWJOOoxA.js → form-control-BGk1kbyE.js} +1 -1
- package/dist/cjs/{fullscreen-0yMY8mhF.js → fullscreen-B0RzdP3s.js} +3 -3
- package/dist/cjs/{index-ZOnWVzxx.js → index-DMCNW34o.js} +1 -1
- package/dist/cjs/{index-BlC8UV0T.js → index-trCnMfo7.js} +1 -1
- package/dist/cjs/index.cjs.js +3 -3
- package/dist/cjs/{lazyload-CnQrwJrf.js → lazyload-DzKvneFi.js} +3 -3
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/{modal-DTqHsNdW.js → modal-Ca7dG1up.js} +1 -1
- package/dist/cjs/nano-accordion.cjs.entry.js +3 -3
- package/dist/cjs/nano-alert.cjs.entry.js +7 -7
- package/dist/cjs/nano-algolia-filter.cjs.entry.js +4 -4
- package/dist/cjs/nano-algolia-pagination.cjs.entry.js +2 -2
- package/dist/cjs/nano-algolia-results.cjs.entry.js +3 -3
- package/dist/cjs/nano-algolia.cjs.entry.js +6 -6
- package/dist/cjs/nano-animation.cjs.entry.js +2 -2
- package/dist/cjs/nano-avatar_5.cjs.entry.js +17 -17
- package/dist/cjs/nano-breadcrumb.cjs.entry.js +42 -9
- package/dist/cjs/nano-card-carousel.cjs.entry.js +2 -2
- package/dist/cjs/nano-card.cjs.entry.js +1 -1
- package/dist/cjs/nano-checkbox-group.cjs.entry.js +2 -2
- package/dist/cjs/nano-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/nano-collapsible-comparison.cjs.entry.js +2 -2
- package/dist/cjs/nano-components.cjs.js +3 -3
- package/dist/cjs/nano-content-links.cjs.entry.js +1 -1
- package/dist/cjs/nano-cta.cjs.entry.js +1 -1
- package/dist/cjs/{nano-data-table-fppjZGKo.js → nano-data-table-zUnFb2XO.js} +5 -5
- package/dist/cjs/nano-data-table.cjs.entry.js +6 -6
- package/dist/cjs/nano-datalist_3.cjs.entry.js +15 -15
- package/dist/cjs/nano-date-input.cjs.entry.js +6 -6
- package/dist/cjs/nano-date-picker_2.cjs.entry.js +4 -4
- package/dist/cjs/nano-details.cjs.entry.js +3 -3
- package/dist/cjs/nano-dialog.cjs.entry.js +8 -8
- package/dist/cjs/nano-dropdown_2.cjs.entry.js +5 -5
- package/dist/cjs/nano-feature-box.cjs.entry.js +1 -1
- package/dist/cjs/nano-field-validator.cjs.entry.js +3 -3
- package/dist/cjs/nano-file-upload.cjs.entry.js +2 -2
- package/dist/cjs/nano-footer.cjs.entry.js +2 -2
- package/dist/cjs/nano-global-nav.cjs.entry.js +20 -12
- package/dist/cjs/nano-grid-item.cjs.entry.js +1 -1
- package/dist/cjs/nano-grid_2.cjs.entry.js +3 -3
- package/dist/cjs/nano-hero.cjs.entry.js +2 -2
- package/dist/cjs/nano-icon-item.cjs.entry.js +1 -1
- package/dist/cjs/nano-icon_3.cjs.entry.js +4 -4
- package/dist/cjs/nano-in-page-nav.cjs.entry.js +14 -8
- package/dist/cjs/nano-intersection-observe.cjs.entry.js +4 -4
- package/dist/cjs/nano-masked-overflow.cjs.entry.js +4 -4
- package/dist/cjs/nano-menu-drawer.cjs.entry.js +63 -99
- package/dist/cjs/nano-more-less.cjs.entry.js +4 -4
- package/dist/cjs/nano-nav-item.cjs.entry.js +12 -16
- package/dist/cjs/nano-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/nano-range.cjs.entry.js +2 -2
- package/dist/cjs/nano-rating.cjs.entry.js +6 -6
- package/dist/cjs/nano-resize-observe.cjs.entry.js +43 -34
- package/dist/cjs/nano-slide.cjs.entry.js +3 -3
- package/dist/cjs/{nano-slides-BxtmLUSX.js → nano-slides-C3CzGlwK.js} +9 -9
- package/dist/cjs/nano-slides.cjs.entry.js +3 -3
- package/dist/cjs/nano-sortable.cjs.entry.js +3 -3
- package/dist/cjs/nano-spinner.cjs.entry.js +1 -1
- package/dist/cjs/nano-split-pane.cjs.entry.js +2 -2
- package/dist/cjs/nano-sticker.cjs.entry.js +6 -6
- package/dist/cjs/nano-tab-content.cjs.entry.js +4 -4
- package/dist/cjs/nano-tab-group.cjs.entry.js +4 -4
- package/dist/cjs/nano-tab.cjs.entry.js +4 -4
- package/dist/cjs/nano-table.cjs.entry.js +4 -4
- package/dist/cjs/{page-dots-B2slCN6O.js → page-dots-Cpgo_xGE.js} +3 -3
- package/dist/cjs/{renderer-BjTjwe8d.js → renderer-W7BRtd3i.js} +1 -1
- package/dist/cjs/{scroll-CtgMHKrt.js → scroll-33Y1FRj4.js} +9 -14
- package/dist/cjs/{slot-CoMwYflw.js → slot-CppKo1Tn.js} +1 -1
- package/dist/cjs/{tabbable-D33Xh_1b.js → tabbable-CQ4-mXv0.js} +1 -1
- package/dist/cjs/{table.worker-CBBDTe_S.js → table.worker-Dto6wn52.js} +6 -6
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/algolia/algolia.js +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.css +24 -28
- package/dist/collection/components/breadcrumb/breadcrumb.js +41 -8
- package/dist/collection/components/datalist/datalist.js +6 -6
- package/dist/collection/components/date-input/date-input.js +5 -6
- package/dist/collection/components/drawer/drawer.css +0 -1
- package/dist/collection/components/dropdown/dropdown.js +1 -1
- package/dist/collection/components/field-validator/field-validator.js +1 -1
- package/dist/collection/components/footer/footer.css +15 -1
- package/dist/collection/components/global-nav/global-nav.css +1 -1
- package/dist/collection/components/global-nav/global-nav.js +34 -9
- package/dist/collection/components/global-search-results/global-search-results.css +0 -1
- package/dist/collection/components/grid/grid.css +8 -5
- package/dist/collection/components/in-page-nav/in-page-nav.js +15 -5
- package/dist/collection/components/menu-drawer/menu-drawer.css +61 -83
- package/dist/collection/components/menu-drawer/menu-drawer.js +66 -151
- package/dist/collection/components/more-less/more-less.js +2 -2
- package/dist/collection/components/nav-item/nav-item.css +1 -93
- package/dist/collection/components/nav-item/nav-item.js +15 -32
- package/dist/collection/components/option/option.css +1 -3
- package/dist/collection/components/option/option.js +4 -4
- package/dist/collection/components/rating/rating.js +4 -4
- package/dist/collection/components/resize-observe/resize-observe.js +44 -32
- 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 +6 -6
- 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/tag/tag.js +2 -2
- package/dist/collection/components/tooltip/tooltip.js +2 -2
- package/dist/collection/utils/scroll.js +8 -13
- package/dist/components/algolia.js +1 -1
- package/dist/components/datalist.js +6 -6
- package/dist/components/drawer.js +1 -1
- package/dist/components/grid.js +1 -1
- package/dist/components/nano-breadcrumb.js +42 -9
- package/dist/components/nano-date-input.js +4 -4
- package/dist/components/nano-footer.js +1 -1
- package/dist/components/nano-global-nav.js +19 -10
- package/dist/components/nano-in-page-nav.js +15 -5
- package/dist/components/nano-menu-drawer.js +64 -105
- 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-tab-content.js +2 -2
- package/dist/components/nano-tab.js +2 -2
- package/dist/components/nano-table.js +2 -2
- package/dist/components/nav-item.js +7 -12
- package/dist/components/option.js +4 -4
- package/dist/components/resize-observe.js +41 -32
- package/dist/components/scroll.js +8 -13
- package/dist/components/select.js +7 -7
- package/dist/components/slides.js +3 -3
- package/dist/components/sticker.js +2 -2
- package/dist/components/tag.js +2 -2
- package/dist/components/tooltip.js +2 -2
- package/dist/esm/{algolia-data-B1lm-wYl.js → algolia-data-BWVUf8dc.js} +1 -1
- package/dist/esm/{component-store-DMqr8_D3.js → component-store-6lIsMtwd.js} +1 -1
- package/dist/esm/{dom-COiksOVZ.js → dom-C8mB0MAq.js} +1 -1
- package/dist/esm/{fade-BR_L2aBv.js → fade-BUaM9GO7.js} +3 -3
- package/dist/esm/{form-control-dh9YtDPa.js → form-control-COOIq-Al.js} +1 -1
- package/dist/esm/{fullscreen-ChzUqF71.js → fullscreen-D9bU32l7.js} +3 -3
- package/dist/esm/{index-CX_Hk6ss.js → index-q0XK-YfO.js} +1 -1
- package/dist/esm/{index-VZJF9v1K.js → index-wpeqhSWn.js} +1 -1
- package/dist/esm/index.js +4 -4
- package/dist/esm/{lazyload-IYX4l8Tu.js → lazyload-C6olXHXA.js} +3 -3
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{modal-CH7Vma1I.js → modal-DmA7xt58.js} +1 -1
- package/dist/esm/nano-accordion.entry.js +3 -3
- package/dist/esm/nano-alert.entry.js +7 -7
- package/dist/esm/nano-algolia-filter.entry.js +4 -4
- package/dist/esm/nano-algolia-pagination.entry.js +2 -2
- package/dist/esm/nano-algolia-results.entry.js +3 -3
- package/dist/esm/nano-algolia.entry.js +6 -6
- package/dist/esm/nano-animation.entry.js +2 -2
- package/dist/esm/nano-avatar_5.entry.js +17 -17
- package/dist/esm/nano-breadcrumb.entry.js +42 -9
- package/dist/esm/nano-card-carousel.entry.js +2 -2
- package/dist/esm/nano-card.entry.js +1 -1
- package/dist/esm/nano-checkbox-group.entry.js +2 -2
- package/dist/esm/nano-checkbox.entry.js +2 -2
- package/dist/esm/nano-collapsible-comparison.entry.js +2 -2
- package/dist/esm/nano-components.js +4 -4
- package/dist/esm/nano-content-links.entry.js +1 -1
- package/dist/esm/nano-cta.entry.js +1 -1
- package/dist/esm/{nano-data-table-EkTqZy8O.js → nano-data-table-CC6zn15I.js} +5 -5
- package/dist/esm/nano-data-table.entry.js +6 -6
- package/dist/esm/nano-datalist_3.entry.js +15 -15
- package/dist/esm/nano-date-input.entry.js +6 -6
- package/dist/esm/nano-date-picker_2.entry.js +4 -4
- package/dist/esm/nano-details.entry.js +3 -3
- package/dist/esm/nano-dialog.entry.js +8 -8
- package/dist/esm/nano-dropdown_2.entry.js +5 -5
- package/dist/esm/nano-feature-box.entry.js +1 -1
- package/dist/esm/nano-field-validator.entry.js +3 -3
- package/dist/esm/nano-file-upload.entry.js +2 -2
- package/dist/esm/nano-footer.entry.js +2 -2
- package/dist/esm/nano-global-nav.entry.js +20 -12
- package/dist/esm/nano-grid-item.entry.js +1 -1
- package/dist/esm/nano-grid_2.entry.js +3 -3
- package/dist/esm/nano-hero.entry.js +2 -2
- package/dist/esm/nano-icon-item.entry.js +1 -1
- package/dist/esm/nano-icon_3.entry.js +4 -4
- package/dist/esm/nano-in-page-nav.entry.js +14 -8
- package/dist/esm/nano-intersection-observe.entry.js +4 -4
- package/dist/esm/nano-masked-overflow.entry.js +4 -4
- package/dist/esm/nano-menu-drawer.entry.js +63 -99
- package/dist/esm/nano-more-less.entry.js +4 -4
- package/dist/esm/nano-nav-item.entry.js +12 -16
- package/dist/esm/nano-progress-bar.entry.js +1 -1
- package/dist/esm/nano-range.entry.js +2 -2
- package/dist/esm/nano-rating.entry.js +6 -6
- package/dist/esm/nano-resize-observe.entry.js +43 -34
- package/dist/esm/nano-slide.entry.js +3 -3
- package/dist/esm/{nano-slides-DL3S1wHE.js → nano-slides-B0sdF3jS.js} +9 -9
- package/dist/esm/nano-slides.entry.js +3 -3
- package/dist/esm/nano-sortable.entry.js +3 -3
- package/dist/esm/nano-spinner.entry.js +1 -1
- package/dist/esm/nano-split-pane.entry.js +2 -2
- package/dist/esm/nano-sticker.entry.js +6 -6
- package/dist/esm/nano-tab-content.entry.js +4 -4
- package/dist/esm/nano-tab-group.entry.js +4 -4
- package/dist/esm/nano-tab.entry.js +4 -4
- package/dist/esm/nano-table.entry.js +4 -4
- package/dist/esm/{page-dots-gxG3_NaA.js → page-dots-B8o2-Gb8.js} +3 -3
- package/dist/esm/{renderer-ZmozgREV.js → renderer-BjGZGWn8.js} +1 -1
- package/dist/esm/{scroll-D4n69pGx.js → scroll-N_WMYKm7.js} +9 -14
- package/dist/esm/{slot-CjAtXEOo.js → slot-CUINJXSo.js} +1 -1
- package/dist/esm/{tabbable-CZtanbA9.js → tabbable-DqhO0wy7.js} +1 -1
- package/dist/esm/{table.worker-Dcaz5STw.js → table.worker-DxcGLZVJ.js} +6 -6
- package/dist/nano-components/{algolia-data-B1lm-wYl.js → algolia-data-BWVUf8dc.js} +1 -1
- package/dist/nano-components/{component-store-DMqr8_D3.js → component-store-6lIsMtwd.js} +1 -1
- package/dist/nano-components/{dom-COiksOVZ.js → dom-C8mB0MAq.js} +1 -1
- package/dist/nano-components/{fade-BR_L2aBv.js → fade-BUaM9GO7.js} +1 -1
- package/dist/nano-components/{form-control-dh9YtDPa.js → form-control-COOIq-Al.js} +1 -1
- package/dist/nano-components/{fullscreen-ChzUqF71.js → fullscreen-D9bU32l7.js} +1 -1
- package/dist/nano-components/{index-VZJF9v1K.js → index-wpeqhSWn.js} +1 -1
- package/dist/nano-components/index.esm.js +1 -1
- package/dist/nano-components/{lazyload-IYX4l8Tu.js → lazyload-C6olXHXA.js} +1 -1
- package/dist/nano-components/{modal-CH7Vma1I.js → modal-DmA7xt58.js} +1 -1
- package/dist/nano-components/nano-accordion.entry.js +1 -1
- package/dist/nano-components/nano-alert.entry.js +1 -1
- package/dist/nano-components/nano-algolia-filter.entry.js +1 -1
- package/dist/nano-components/nano-algolia-pagination.entry.js +1 -1
- package/dist/nano-components/nano-algolia-results.entry.js +1 -1
- package/dist/nano-components/nano-algolia.entry.js +1 -1
- package/dist/nano-components/nano-animation.entry.js +1 -1
- package/dist/nano-components/nano-avatar_5.entry.js +1 -1
- package/dist/nano-components/nano-breadcrumb.entry.js +1 -1
- package/dist/nano-components/nano-card-carousel.entry.js +1 -1
- package/dist/nano-components/nano-card.entry.js +1 -1
- package/dist/nano-components/nano-checkbox-group.entry.js +1 -1
- package/dist/nano-components/nano-checkbox.entry.js +1 -1
- package/dist/nano-components/nano-collapsible-comparison.entry.js +1 -1
- package/dist/nano-components/nano-components.css +319 -176
- package/dist/nano-components/nano-components.esm.js +1 -1
- package/dist/nano-components/nano-content-links.entry.js +1 -1
- package/dist/nano-components/nano-cta.entry.js +1 -1
- package/dist/nano-components/{nano-data-table-EkTqZy8O.js → nano-data-table-CC6zn15I.js} +1 -1
- package/dist/nano-components/nano-data-table.entry.js +1 -1
- package/dist/nano-components/nano-datalist_3.entry.js +1 -1
- package/dist/nano-components/nano-date-input.entry.js +1 -1
- package/dist/nano-components/nano-date-picker_2.entry.js +1 -1
- 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-feature-box.entry.js +1 -1
- package/dist/nano-components/nano-field-validator.entry.js +1 -1
- package/dist/nano-components/nano-file-upload.entry.js +1 -1
- package/dist/nano-components/nano-footer.entry.js +1 -1
- package/dist/nano-components/nano-global-nav.entry.js +1 -1
- package/dist/nano-components/nano-grid-item.entry.js +1 -1
- package/dist/nano-components/nano-grid_2.entry.js +1 -1
- package/dist/nano-components/nano-hero.entry.js +1 -1
- package/dist/nano-components/nano-icon-item.entry.js +1 -1
- package/dist/nano-components/nano-icon_3.entry.js +1 -1
- package/dist/nano-components/nano-in-page-nav.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-progress-bar.entry.js +1 -1
- package/dist/nano-components/nano-range.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-DL3S1wHE.js → nano-slides-B0sdF3jS.js} +4 -4
- 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-spinner.entry.js +1 -1
- package/dist/nano-components/nano-split-pane.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-group.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-gxG3_NaA.js → page-dots-B8o2-Gb8.js} +1 -1
- package/dist/nano-components/{renderer-ZmozgREV.js → renderer-BjGZGWn8.js} +1 -1
- package/dist/nano-components/scroll-N_WMYKm7.js +4 -0
- package/dist/nano-components/{slot-CjAtXEOo.js → slot-CUINJXSo.js} +1 -1
- package/dist/nano-components/{tabbable-CZtanbA9.js → tabbable-DqhO0wy7.js} +1 -1
- package/dist/nano-components/table.worker-DxcGLZVJ.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/breadcrumb/breadcrumb.d.ts +7 -1
- package/dist/types/components/date-input/date-input.d.ts +1 -2
- package/dist/types/components/global-nav/global-nav.d.ts +5 -0
- package/dist/types/components/in-page-nav/in-page-nav.d.ts +1 -0
- package/dist/types/components/menu-drawer/menu-drawer.d.ts +12 -27
- package/dist/types/components/nav-item/nav-item.d.ts +9 -4
- package/dist/types/components/option/option.d.ts +1 -1
- package/dist/types/components/resize-observe/resize-observe.d.ts +3 -0
- package/dist/types/components.d.ts +32 -58
- package/dist/types/stencil-public-runtime.d.ts +12 -5
- package/dist/types/utils/testing/index.d.ts +50 -0
- package/docs-json.json +128 -124
- package/docs-vscode.json +4 -16
- package/hydrate/index.js +221 -299
- package/hydrate/index.mjs +221 -299
- package/package.json +3 -3
- package/dist/nano-components/scroll-D4n69pGx.js +0 -4
- package/dist/nano-components/table.worker-Dcaz5STw.js +0 -4
- /package/dist/nano-components/{index-CX_Hk6ss.js → index-q0XK-YfO.js} +0 -0
|
@@ -511,7 +511,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
|
|
|
511
511
|
}
|
|
512
512
|
componentDidRender() {
|
|
513
513
|
setTimeout(() => {
|
|
514
|
-
if (!this.connectedInput)
|
|
514
|
+
if (!this.connectedInput && this.host.isConnected)
|
|
515
515
|
console.warn('no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop', this.host);
|
|
516
516
|
}, 500);
|
|
517
517
|
}
|
|
@@ -525,18 +525,18 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
|
|
|
525
525
|
}
|
|
526
526
|
}
|
|
527
527
|
render() {
|
|
528
|
-
return (h(Host, { key: '
|
|
528
|
+
return (h(Host, { key: '2b8f7500f1ed990dc79bda02a6980a018697d508', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
|
|
529
529
|
? 'Select options from the list below'
|
|
530
|
-
: undefined }, h("nano-dropdown", { key: '
|
|
530
|
+
: undefined }, h("nano-dropdown", { key: '7beb913e00bb595dd36ad107edfdac05ab902efd', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
|
|
531
531
|
dlist__dropdown: true,
|
|
532
532
|
'dlist--isfiltered': this.isFiltered,
|
|
533
|
-
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '
|
|
533
|
+
}, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '125572d377ad74a2b6d3e0ae36f708075517d60f', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
|
|
534
534
|
dlist__menu: true,
|
|
535
535
|
'dlist__menu--open': this.dropwdownOpen,
|
|
536
|
-
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '
|
|
536
|
+
}, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '63f4fc2409d3e2ef1bc38658f4d0e890326ddb7e', name: "list-top" }), h("slot", { key: '0bd4aa53d535ac07a779f9f44dae01801c5ddb43' }), h("slot", { key: 'ee39e492165395226a04b49dbe4ba0d6d3a70172', name: "internal-opts" }), h("slot", { key: 'd7af12aa6cf517a89b1718b74c48235753970664', name: "list-bottom" })), h("nano-menu", { key: 'bb1f661fc618cacc2f81aaeca1d03c96c1d1c557', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
|
|
537
537
|
dlist__menu: true,
|
|
538
538
|
'dlist__menu--open': this.dropwdownOpen,
|
|
539
|
-
} }, h("slot", { key: '
|
|
539
|
+
} }, h("slot", { key: 'c343a887d35603ba194a4774e2ca66e7e299ed2c', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '2810cc360410aae1263442e29aca34f0cd39c9b6', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
|
|
540
540
|
}
|
|
541
541
|
static get watchers() { return {
|
|
542
542
|
"open": ["openWatcher"],
|
|
@@ -16,7 +16,7 @@ import { d as defineCustomElement$3 } from './icon-button.js';
|
|
|
16
16
|
import { d as defineCustomElement$2 } from './sticker.js';
|
|
17
17
|
import { d as defineCustomElement$1 } from './tooltip.js';
|
|
18
18
|
|
|
19
|
-
const drawerCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--size:25rem;--min-size:25rem;--max-size:50%;--panel-background:var(--nano-color-neutral-75);--panel-shadow:var(--nano-shadow-l3);--scrim-color:var(--nano-overlay-background-color);--header-button-color:var(--nano-color-primary-1200);--header-button-size:1.375rem;--footer-background:var(--panel-background);--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--body-spacing:var(--nano-spacing-l1-default);--footer-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--dir:1}:host([placement=top]),:host([placement=bottom]){--max-size:80%}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;pointer-events:none;overflow:hidden;border:none;inline-size:100%;block-size:100%;color:unset;background-color:unset}.drawer::backdrop{display:none}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-z-index-modal)}.drawer__panel{position:absolute;
|
|
19
|
+
const drawerCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--size:25rem;--min-size:25rem;--max-size:50%;--panel-background:var(--nano-color-neutral-75);--panel-shadow:var(--nano-shadow-l3);--scrim-color:var(--nano-overlay-background-color);--header-button-color:var(--nano-color-primary-1200);--header-button-size:1.375rem;--footer-background:var(--panel-background);--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--body-spacing:var(--nano-spacing-l1-default);--footer-spacing:var(--nano-spacing-l) var(--nano-spacing-l1-default);--dir:1}:host([placement=top]),:host([placement=bottom]){--max-size:80%}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;pointer-events:none;overflow:hidden;border:none;inline-size:100%;block-size:100%;color:unset;background-color:unset}.drawer::backdrop{display:none}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-z-index-modal)}.drawer__panel{position:absolute;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform;display:flex}.drawer--top .drawer__panel,.drawer--bottom .drawer__panel{flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px var(--nano-color-base-1000)}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{scale:1}50%{scale:1.08}100%{scale:1}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__resize-handle{display:flex;align-items:center;justify-content:center;position:absolute;z-index:var(--nano-z-index-dropdown);color:var(--nano-color-primary-1200);background-color:var(--nano-color-neutral-75)}.drawer__resize-handle:focus{outline:none}.drawer__resize-handle:focus-visible{background-color:var(--nano-focus-ring-color)}.drawer__resize-handle:active{color:var(--nano-color-primary-800)}.drawer--top .drawer__resize-handle,.drawer--bottom .drawer__resize-handle{cursor:row-resize;inset-inline:0}.drawer--end .drawer__resize-handle,.drawer--start .drawer__resize-handle{cursor:col-resize;inset-block:0}.drawer--end .drawer__resize-handle{inset-inline-start:0}.drawer--start .drawer__resize-handle{inset-inline-end:0}.drawer--top .drawer__resize-handle{inset-block-end:0}.drawer--bottom .drawer__resize-handle{inset-block-start:0}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background);align-items:center;padding:var(--header-spacing)}[stuck] .drawer__header{box-shadow:var(--nano-shadow-l0)}.drawer__title{flex:1 1 auto;margin:0;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser)}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-sm);color:var(--header-button-color);inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);position:relative}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(.nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--header-button-size)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;opacity:0;transition:var(--nano-transition-fast) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";
|
|
20
20
|
|
|
21
21
|
const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends HTMLElement {
|
|
22
22
|
constructor() {
|
package/dist/components/grid.js
CHANGED
|
@@ -129,7 +129,7 @@ function getHostChildren(node) {
|
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
131
|
|
|
132
|
-
const gridCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--grid-col-gap:var(--nano-spacing-
|
|
132
|
+
const gridCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--grid-col-gap:var(--nano-spacing-md);--grid-row-gap:var(--nano-spacing-md);--grid-align-items:start;--grid-justify-items:start;--current-grid-size:\"grid size: s\";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit;align-items:var(--grid-align-items);justify-items:var(--grid-justify-items)}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none;display:grid !important;overflow:hidden}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{background:hsla(204, 80%, 72%, 0.25);block-size:100vh}";
|
|
133
133
|
|
|
134
134
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
135
135
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './icon.js';
|
|
|
8
8
|
import { d as defineCustomElement$3 } from './menu.js';
|
|
9
9
|
import { d as defineCustomElement$2 } from './nav-item.js';
|
|
10
10
|
|
|
11
|
-
const breadcrumbCss = ":host
|
|
11
|
+
const breadcrumbCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--text-color:var(--nano-color-primary-1000);--text-color-hover:var(--nano-color-primary-1200);--text-color-secondary:var(--nano-color-neutral-1400);--text-color-disabled:var(--nano-color-neutral-1000);--border-color:var(--nano-color-neutral-400);--trigger-bg-color:var(--nano-color-base-0);display:block}.breadcrumbs{inline-size:fit-content}nano-menu.breadcrumbs{inline-size:100%}.breadcrumbs-hidden{position:absolute;visibility:hidden;pointer-events:none;height:0;overflow:hidden}ol{list-style:none;padding:var(--nano-spacing-l3) 0;margin:0;display:flex;flex-direction:row}li{display:flex;align-items:center;justify-content:flex-start;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);text-wrap:nowrap;margin-block-end:0}li:not(.return-only li)::after,nano-nav-item::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}a.link{color:var(--text-color)}a:not(.link){color:var(--text-color-secondary)}a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}a.link:hover{color:var(--text-color-hover)}a.return.link{display:flex;align-items:center;gap:calc(var(--nano-spacing-sm) / 2)}.breadcrumbs__dropdown{inline-size:100%}.breadcrumbs__dropdown[open]::part(trigger){box-shadow:var(--nano-shadow-l1)}.trigger-button{inline-size:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--nano-spacing-l3) var(--nano-spacing-l2);color:var(--text-color);background-color:var(--trigger-bg-color);cursor:pointer;text-align:start;border:none;font-size:var(--nano-font-size-xs)}.trigger-button .trigger-button_label{text-decoration:underline}.trigger-button .trigger-button_label::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}.trigger-button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.trigger-icon{transform:rotate(0deg);transition:var(--nano-transition-x-fast) ease transform}.trigger-icon--open{transform:rotate(180deg)}nano-nav-item::after{display:none !important}.trigger-button_label::after{display:inline-block !important}.return-only{padding:var(--nano-spacing-l3) var(--nano-spacing-l2) !important}";
|
|
12
12
|
|
|
13
13
|
const NanoBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NanoBreadcrumb extends HTMLElement {
|
|
14
14
|
constructor() {
|
|
@@ -20,31 +20,64 @@ const NanoBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NanoBreadcrumb e
|
|
|
20
20
|
/** Array of breadcrumb items to render */
|
|
21
21
|
breadcrumbs = [];
|
|
22
22
|
isOpen = false;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
isOverflowing = false;
|
|
24
|
+
mainRef;
|
|
25
|
+
componentDidLoad() {
|
|
26
|
+
if (Build.isBrowser) {
|
|
27
|
+
this.checkOverflow();
|
|
26
28
|
addGlobalStylesheetToShadow(this.el?.shadowRoot);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
componentDidUpdate() {
|
|
32
|
+
if (Build.isBrowser) {
|
|
33
|
+
this.checkOverflow();
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
connectedCallback() {
|
|
37
|
+
if (Build.isBrowser) {
|
|
38
|
+
window.addEventListener('resize', this.checkOverflow);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
disconnectedCallback() {
|
|
42
|
+
if (Build.isBrowser) {
|
|
43
|
+
window.removeEventListener('resize', this.checkOverflow);
|
|
44
|
+
}
|
|
27
45
|
}
|
|
46
|
+
checkOverflow = () => {
|
|
47
|
+
if (!this.mainRef)
|
|
48
|
+
return;
|
|
49
|
+
const containerWidth = this.el.clientWidth;
|
|
50
|
+
const contentWidth = this.mainRef.scrollWidth;
|
|
51
|
+
const shouldOverflow = contentWidth > containerWidth * 0.9;
|
|
52
|
+
if (this.isOverflowing !== shouldOverflow) {
|
|
53
|
+
this.isOverflowing = shouldOverflow;
|
|
54
|
+
if (this.isOverflowing)
|
|
55
|
+
this.isOpen = false; // Reset dropdown state when overflow occurs
|
|
56
|
+
}
|
|
57
|
+
};
|
|
28
58
|
render() {
|
|
29
59
|
const returnBreadcrumb = this.breadcrumbs?.find((breadcrumb) => breadcrumb.return);
|
|
30
|
-
// if we have a return breadcrumb, we only want to show that
|
|
31
60
|
if (returnBreadcrumb) {
|
|
32
61
|
return (h("nav", { "aria-label": "Breadcrumb", class: "breadcrumbs" }, h(BreadcrumbList, { breadcrumbs: [returnBreadcrumb], className: "return-only" })));
|
|
33
62
|
}
|
|
34
63
|
const parentBreadcrumb = this.breadcrumbs?.length
|
|
35
64
|
? this.breadcrumbs.at(-1)
|
|
36
65
|
: null;
|
|
37
|
-
return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className:
|
|
66
|
+
return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: `main${this.isOverflowing ? ' breadcrumbs-hidden' : ''}`, mainRef: (el) => (this.mainRef = el) })), this.isOverflowing && (h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
|
|
38
67
|
'trigger-icon': true,
|
|
39
68
|
'trigger-icon--open': this.isOpen,
|
|
40
|
-
}, name: "light/chevron-down" })), h("nav", null, h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (h("nano-nav-item", { key: index, href: breadcrumb.href, class: {
|
|
69
|
+
}, name: "light/chevron-down" })), h("nav", null, h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (h("nano-nav-item", { key: index, href: breadcrumb.href, class: {
|
|
70
|
+
return: breadcrumb.return,
|
|
71
|
+
link: !!breadcrumb.href,
|
|
72
|
+
}, disabled: !breadcrumb.href }, breadcrumb.label)))))))));
|
|
41
73
|
}
|
|
42
74
|
static get style() { return breadcrumbCss; }
|
|
43
75
|
}, [1, "nano-breadcrumb", {
|
|
44
76
|
"breadcrumbs": [16],
|
|
45
|
-
"isOpen": [32]
|
|
77
|
+
"isOpen": [32],
|
|
78
|
+
"isOverflowing": [32]
|
|
46
79
|
}]);
|
|
47
|
-
const BreadcrumbList = ({ breadcrumbs, className, }) => (h("ol", { class: `breadcrumbs ${className}
|
|
80
|
+
const BreadcrumbList = ({ breadcrumbs, className, mainRef, }) => (h("ol", { class: `breadcrumbs ${className}`, ref: mainRef }, breadcrumbs?.map((breadcrumb, index) => (h("li", null, h("a", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href } }, breadcrumb.return && (h("nano-icon", { name: "light/chevron-left", size: "small", class: "breadcrumb-icon" })), breadcrumb.label))))));
|
|
48
81
|
function defineCustomElement$1() {
|
|
49
82
|
if (typeof customElements === "undefined") {
|
|
50
83
|
return;
|
|
@@ -413,10 +413,10 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
|
|
|
413
413
|
this.dropDownConfig.tetherTo = this.trigger;
|
|
414
414
|
const valueDate = parseISODate(this.value);
|
|
415
415
|
const hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
|
|
416
|
-
return (h(Host, { key: '
|
|
417
|
-
h("button", { key: '
|
|
418
|
-
h("nano-dropdown", { key: '
|
|
419
|
-
], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: '
|
|
416
|
+
return (h(Host, { key: 'd584003b7188229e35c59048e46b0c2be1068987', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: '88ef9423db0ed1e11b5ccad2c75a0c9d0f9b9d29', class: "date-field" }, h("nano-input", { key: 'a4d5c368da0bb9b296563e09760d8c450360d2d3', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearable: this.clearable || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, h("slot", { key: '8852fd0a14ed85773706f6313be4af121c33f212', name: "start", slot: "start" }), h("slot", { key: 'c34815b4acd3bd9e556d908dcebb4e39a9ab1f78', name: "label", slot: "label" }), h("slot", { key: '3ba077636a9908c1ff57ca6a82824586becd8497', name: "end", slot: "end" }), this.picker && [
|
|
417
|
+
h("button", { key: 'c45a42017fc0023f1f9b6c8201b209979678fd52', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { key: 'ae888424999bff07e6693023e1ef38a2ae471c96', name: "light/calendar-days" })),
|
|
418
|
+
h("nano-dropdown", { key: 'd82337659d8656f162e51789dcd32c102f733f77', slot: "end", onNanoHide: this.onDropdownHide, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: 'f5c9d99cd1a6725068f7f1acd27cf6e3e3717754' }, h("div", { key: 'b9e02ade28a5213382b993e57143dff2d19ececd', class: "date-field__close-bar" }, h("button", { key: 'af6aebad9c406b500d17338a0f5fb178638d3a01', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: '6cecd49256234320e73d732e689dd552dbf22645', name: "light/xmark" }), h("span", { key: 'fc9f86d2f3dbf06d53217ccf6556b3b119240ceb', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: 'd0a388667a9372ecfebae22d0175fe68230c11ac', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
|
|
419
|
+
], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: '109ec3fe3dd22087fca3240b3ad2b712b7444a3e', slot: "helper" }, h("span", { key: 'a709814dfcb66923cb512737768b4385c6a2fa85', class: { vhidden: !!this.value.length } }, h("slot", { key: '16375d1e2af0839d94b93b02117817fe54ed5887', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'dce160d23dbf15337800f15f43380c75643f6373' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: 'c50fb0b2a5104229cf44f9564a902b813e45111f', type: "hidden", value: this.value, name: this.name }))));
|
|
420
420
|
}
|
|
421
421
|
static get watchers() { return {
|
|
422
422
|
"value": ["handleValueChange", "testDateValidity"],
|
|
@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, Build, h, getAssetPath } from '@stenci
|
|
|
5
5
|
import { a as addGlobalStylesheetToShadow } from './style.js';
|
|
6
6
|
import { d as defineCustomElement$2 } from './icon.js';
|
|
7
7
|
|
|
8
|
-
const footerCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host {\n --col-gap: var(--nano-spacing-l1-default);\n --icon-gap-md: var(--nano-spacing-md);\n --icon-gap-sm: var(--nano-spacing-sm);\n --vertical-padding: var(--nano-spacing-l1-default);\n --horizontal-padding: 0;\n --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n display: block;\n}\n:host .footer {\n container-type: inline-size;\n container-name: footer-container;\n display: flex;\n flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-md);\n --col-gap: var(--nano-spacing-l);\n --vertical-padding: var(--nano-spacing-md);\n }\n :host .top-start,\n :host .top-center,\n :host .top-end {\n --header-margin: 0 0 var(--nano-spacing-md) 0;\n }\n}\n@container footer-container (max-width: 1023px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-l);\n }\n}\n@container footer-container (max-width: 1346px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-l1-default);\n }\n}\n:host .upper {\n border-block-start: 1px solid var(--nano-color-neutral-200);\n}\n:host .lower {\n background-color: var(--nano-color-basic-black);\n color: var(--nano-color-basic-white);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n display: grid;\n gap: var(--col-gap);\n margin: 0 auto;\n max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n grid-template-columns: repeat(3, 1fr);\n padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n grid-template-columns: repeat(2, 1fr);\n padding-inline: var(--horizontal-padding);\n padding-block-end: var(--vertical-padding);\n}\n:host .middle-center a {\n color: inherit;\n}\n:host .middle-center a:hover {\n color: var(--nano-color-primary-1000);\n}\n:host .middle-center a:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n flex-direction: column;\n}\n:host .middle-start,\n:host .middle-center,\n:host .middle-end {\n align-items: center;\n}\n:host .middle-start {\n display: flex;\n justify-content: flex-start;\n}\n:host .middle-center {\n display: flex;\n justify-content: center;\n gap: var(--icon-gap-md);\n flex-wrap: nowrap;\n}\n:host .middle-end {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 20rem));\n gap: var(--icon-gap-sm);\n justify-content: end;\n}\n:host [slot=middle-end] {\n inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n font-weight: var(--nano-font-weight-normal) !important;\n font-size: var(--nano-font-size-xs) !important;\n line-height: var(--nano-line-height-normal) !important;\n letter-spacing: var(--nano-letter-spacing-loose) !important;\n margin-block: 0 !important;\n}\n:host .bottom-end {\n display: flex;\n justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n --input-font-size: var(--nano-font-size-2xs) !important;\n max-inline-size: 9rem !important;\n}\n@container footer-container (max-width:
|
|
8
|
+
const footerCss = ":host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host,\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n :host,\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }:host {\n --col-gap: var(--nano-spacing-l1-default);\n --icon-gap-md: var(--nano-spacing-md);\n --icon-gap-sm: var(--nano-spacing-sm);\n --vertical-padding: var(--nano-spacing-l1-default);\n --horizontal-padding: 0;\n --header-margin: 0 0 var(--nano-spacing-l1-default) 0;\n display: block;\n}\n:host .footer {\n container-type: inline-size;\n container-name: footer-container;\n display: flex;\n flex-direction: column;\n}\n@container footer-container (max-width: 768px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-md);\n --col-gap: var(--nano-spacing-l);\n --vertical-padding: var(--nano-spacing-md);\n }\n :host .top-start,\n :host .top-center,\n :host .top-end {\n --header-margin: 0 0 var(--nano-spacing-md) 0;\n }\n}\n@container footer-container (max-width: 1023px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-l);\n }\n}\n@container footer-container (max-width: 1346px) {\n :host .top,\n :host .middle,\n :host .bottom {\n --horizontal-padding: var(--nano-spacing-l1-default);\n }\n}\n:host .upper {\n border-block-start: 1px solid var(--nano-color-neutral-200);\n}\n:host .lower {\n background-color: var(--nano-color-basic-black);\n color: var(--nano-color-basic-white);\n}\n:host .top,\n:host .middle,\n:host .bottom {\n display: grid;\n gap: var(--col-gap);\n margin: 0 auto;\n max-inline-size: 1266px;\n}\n:host .top,\n:host .middle {\n grid-template-columns: repeat(3, 1fr);\n padding: var(--vertical-padding) var(--horizontal-padding);\n}\n:host .bottom {\n grid-template-columns: repeat(2, 1fr);\n padding-inline: var(--horizontal-padding);\n padding-block-end: var(--vertical-padding);\n}\n:host .middle-center a {\n color: inherit;\n}\n:host .middle-center a:hover {\n color: var(--nano-color-primary-1000);\n}\n:host .middle-center a:focus-visible {\n outline: var(--nano-focus-ring);\n outline-offset: var(--nano-focus-ring-offset);\n}\n:host .top-start,\n:host .top-center,\n:host .top-end {\n flex-direction: column;\n}\n:host .middle-start,\n:host .middle-center,\n:host .middle-end {\n align-items: center;\n}\n:host .middle-start {\n display: flex;\n justify-content: flex-start;\n}\n:host .middle-center {\n display: flex;\n justify-content: center;\n gap: var(--icon-gap-md);\n flex-wrap: nowrap;\n}\n:host .middle-end {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 20rem));\n gap: var(--icon-gap-sm);\n justify-content: end;\n}\n:host [slot=middle-end] {\n inline-size: 100%;\n}\n:host .bottom-start p,\n:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {\n font-weight: var(--nano-font-weight-normal) !important;\n font-size: var(--nano-font-size-xs) !important;\n line-height: var(--nano-line-height-normal) !important;\n letter-spacing: var(--nano-letter-spacing-loose) !important;\n margin-block: 0 !important;\n}\n:host .bottom-end {\n display: flex;\n justify-content: flex-end;\n}\n:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {\n --input-font-size: var(--nano-font-size-2xs) !important;\n max-inline-size: 9rem !important;\n}\n@container footer-container (max-width: 1200px) {\n :host .top {\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(2, auto);\n }\n :host .top-end {\n grid-row: 2;\n grid-column: 1/-1;\n }\n}\n@container footer-container (max-width: 912px) {\n :host .middle,\n :host .bottom {\n grid-template-columns: 1fr;\n grid-template-rows: 1fr;\n }\n :host .top {\n display: flex;\n flex-direction: column;\n }\n :host .middle-center {\n flex-wrap: wrap;\n }\n :host .middle-end {\n grid-template-columns: minmax(0, 6.6rem);\n }\n :host .bottom {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n }\n :host .middle-start,\n :host .middle-center,\n :host .middle-end {\n justify-content: center;\n }\n}";
|
|
9
9
|
|
|
10
10
|
const NanoFooter$1 = /*@__PURE__*/ proxyCustomElement(class NanoFooter extends HTMLElement {
|
|
11
11
|
constructor() {
|
|
@@ -25,7 +25,7 @@ import { d as defineCustomElement$4 } from './sticker.js';
|
|
|
25
25
|
import { d as defineCustomElement$3 } from './tag.js';
|
|
26
26
|
import { d as defineCustomElement$2 } from './tooltip.js';
|
|
27
27
|
|
|
28
|
-
const globalNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--main-menu-bar-bg-color:var(--nano-color-base-0);--main-menu-text-color:var(--nano-color-base-1000);--main-menu-hover-text-color:var(--nano-color-primary-1000);--main-menu-active-text-color:var(--nano-color-primary-1200);--main-menu-active-border-color:var(--nano-color-primary-1000);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-blue-cerulean-700);--overflow-active-text-color:var(--nano-color-blue-cerulean-300);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent}.gn__menu-bar-wrapper{z-index:var(--nano-z-index-menubar);position:relative}.gn__menu-bar-wrapper::after{content:\"\";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-neutral-200)}.gn__menu-bar{inline-size:100%;overflow:clip}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;
|
|
28
|
+
const globalNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--main-menu-bar-bg-color:var(--nano-color-base-0);--main-menu-text-color:var(--nano-color-base-1000);--main-menu-hover-text-color:var(--nano-color-primary-1000);--main-menu-active-text-color:var(--nano-color-primary-1200);--main-menu-active-border-color:var(--nano-color-primary-1000);--overflow-bg-color:var(--nano-color-grey-mono-1600);--overflow-text-color:var(--nano-color-basic-white);--overflow-hover-text-color:var(--nano-color-blue-cerulean-700);--overflow-active-text-color:var(--nano-color-blue-cerulean-300);display:block;color:var(--main-menu-text-color)}img{max-inline-size:none;display:block}::slotted(a),:host::slotted(a),a{text-decoration:none}a:has(img){display:inline-block}a:focus{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}nano-drawer:not(:defined){display:none}nano-badge{position:absolute;font-size:0.5625rem;pointer-events:none}.gn__cart{position:relative}.gn__cart nano-badge{inset-block-start:-0.35rem;inset-inline-end:-0.4rem}.gn__login-cta{--bg:transparent}.gn__menu-bar-wrapper{z-index:var(--nano-z-index-menubar);position:relative}.gn__menu-bar-wrapper::after{content:\"\";position:absolute;block-size:1px;inline-size:100%;inset-inline:0;inset-block-end:-1px;z-index:-3;background-color:var(--nano-color-neutral-200)}.gn__menu-bar{inline-size:100%;overflow:clip;background-color:var(--main-menu-bar-bg-color)}.gn__menu-bar a{color:var(--main-menu-text-color)}.gn__menu-bar a:hover{color:var(--main-menu-hover-text-color)}.gn__menu-bar a:active{color:var(--main-menu-active-text-color)}.gn__main-menu{display:inline-flex;align-items:center;min-inline-size:100%;padding:var(--nano-spacing-md);transition:opacity var(--nano-transition-x-fast) ease;opacity:1}.gn__main-menu.resizing{transition:none;opacity:0}.gn__main-menu>*{margin-inline-end:var(--nano-spacing-xl)}.gn__main-menu>*:is(slot,slot-fb){display:flex}.gn__main-menu>*:last-child{margin-inline-end:0}.gn__overflow-button{--padding:0.5rem 0.875rem 0.5rem 0;margin-inline-end:0.875rem;font-size:1.125rem;position:relative}.gn__overflow-button::after{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-end:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__main-menu-links,.gn__main-menu-actions{display:inline-flex;align-items:center}.gn__main-menu-links .nano-icon,.gn__main-menu-links .nano-icon-button,.gn__main-menu-actions .nano-icon,.gn__main-menu-actions .nano-icon-button{--active-color:var(--main-menu-active-text-color);--hover-color:var(--main-menu-hover-text-color);font-size:1rem}.gn__main-menu-links .nano-icon-button:hover,.gn__main-menu-actions .nano-icon-button:hover{color:var(--main-menu-hover-text-color)}.gn__main-menu-links{gap:var(--nano-spacing-xl)}.gn__main-menu-links ::slotted(a),.gn__main-menu-links::slotted(a){color:var(--main-menu-text-color)}.gn__main-menu-links ::slotted(a:hover){color:var(--main-menu-hover-text-color)}.gn__main-menu-links ::slotted(*:active){color:var(--main-menu-active-text-color)}.gn__main-menu-actions{margin-inline-start:auto;font-size:0.9375rem;gap:var(--nano-spacing-md)}.gn__search-dropdown{--overflow:visible;--padding:0;--background:transparent}.gn__search-dropdown .nano-icon-button{position:relative}.gn__search-dropdown .nano-icon-button::before{content:\"\";position:absolute;background-color:var(--main-menu-active-border-color);block-size:4px;inset-inline:5px 2px;inset-block-end:-1.5625rem;transform:translateZ(0) scaleX(0);transform-origin:0 center;transition:transform var(--nano-transition-x-fast) ease-in-out}.gn__search-open .gn__search-dropdown .nano-icon-button::before{transform:translateZ(0) scaleX(1)}.gn__search-form{display:inline-flex;max-inline-size:100vw;inline-size:30.625rem}.gn__search-form .nano-select{--input-bg-color:var(--nano-color-neutral-200);flex:0}.gn__search-form .nano-select:focus-within{z-index:1}.gn__search-form .nano-select .form-ctrl__input{border-inline-end:none}.gn__search-form .nano-input{flex:1}.gn__search-results{--padding-start:var(--nano-spacing-md);--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);font-size:var(--nano-font-size-2xs)}.gn__search-loading{display:flex;justify-content:center}.gn__search-result{--padding-start:0.3125rem;--padding-top:var(--nano-spacing-sm);--padding-bottom:var(--nano-spacing-sm);--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-neutral-1400);font-size:var(--nano-font-size-2xs)}.gn__search-result .search__highlight{font-style:normal;background:var(--nano-color-highlight)}.gn__search-viewall{--bg-focus:var(--nano-color-primary-300);--color-focus:var(--nano-color-neutral-1400);--color:var(--nano-color-primary-1200)}.gn__search-viewall::part(label){justify-content:flex-end;text-decoration:underline}.gn__user-dropdown-trigger{all:unset;cursor:pointer;color:var(--nano-color-primary-1200);display:flex;white-space:nowrap;gap:var(--nano-spacing-xs);align-items:center;position:relative;padding-inline-start:var(--nano-spacing-md)}.gn__user-dropdown-trigger:hover{color:var(--main-menu-hover-text-color)}.gn__user-dropdown-trigger:active{color:var(--main-menu-active-text-color)}.gn__user-dropdown-trigger:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.gn__user-dropdown-trigger::before{content:\"\";position:absolute;inline-size:1px;block-size:100%;inset-inline-start:0;background-color:var(--nano-color-neutral-300);opacity:0.7;inset-block-start:0}.gn__user-dropdown-trigger .gn__user-dropdown-chevron{transition:rotate var(--nano-transition-x-fast) linear}[open] .gn__user-dropdown-trigger .gn__user-dropdown-chevron{rotate:180deg}.gn__user-dropdown-trigger nano-badge{inset-block-start:-0.7rem;inset-inline-end:-0.7rem}.gn__user-dropdown{--background:var(--overflow-bg-color);--padding:0;--overflow:visible}.gn__user-panel{inline-size:21.25rem;max-inline-size:21.25rem;color:var(--overflow-text-color);padding:var(--nano-spacing-md)}.gn__user-panel a{color:var(--overflow-text-color)}.gn__user-panel a:hover{text-decoration:underline;color:var(--overflow-hover-text-color)}.gn__user-panel-head{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding-block-end:var(--nano-spacing-md);display:flex;align-items:center;gap:var(--nano-spacing-sm);font-size:var(--nano-font-size-xs)}.gn__user-panel-head .gn__user-avatar nano-icon{font-size:2.5rem}.gn__user-panel-body{display:flex;flex-direction:column}.gn__user-panel-body a{position:relative;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);padding-block:var(--nano-spacing-md)}.gn__user-panel-body a:first-child{border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__user-panel-foot{padding-block-start:var(--nano-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--nano-spacing-md)}.gn__drawer{--panel-background:var(--overflow-bg-color);--header-button-color:var(--overflow-text-color);--body-spacing:0;--header-spacing:var(--nano-spacing-md) 0;--footer-spacing:var(--nano-spacing-md)}.gn__drawer::part(title){display:flex;justify-content:flex-end}.gn__drawer::part(header-actions){order:-1}.gn__drawer-header{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.gn__drawer-menu{display:flex;flex-direction:column;margin:0 var(--nano-spacing-md);padding-block-end:var(--nano-spacing-md);color:var(--overflow-text-color);border-block-start:1px solid rgb(var(--nano-color-base-rgb-1000)/10%);position:relative}.gn__drawer-menu ::slotted(a),.gn__drawer-menu::slotted(a){padding:var(--nano-spacing-md) 0}.gn__drawer-menu ::slotted(a),.gn__drawer-menu ::slotted(.nano-nav-item),.gn__drawer-menu::slotted(a),.gn__drawer-menu::slotted(.nano-nav-item){--padding:var(--nano-spacing-md) 0;display:block;color:inherit !important;border-block-end:1px solid rgb(var(--nano-color-base-rgb-1000)/10%)}.gn__drawer-menu ::slotted(a:hover),.gn__drawer-menu ::slotted(.nano-nav-item:hover){text-decoration:underline;color:var(--overflow-hover-text-color) !important}";
|
|
29
29
|
|
|
30
30
|
const MIN_SEARCH_LENGTH = 3;
|
|
31
31
|
const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLElement {
|
|
@@ -142,6 +142,14 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
142
142
|
this._mainMenuBar = el;
|
|
143
143
|
this.addMainmenuRo();
|
|
144
144
|
}
|
|
145
|
+
/**
|
|
146
|
+
* Manually triggers the main menu bar resize behaviour.
|
|
147
|
+
* This can be useful if you append new children to the global-nav
|
|
148
|
+
*/
|
|
149
|
+
async triggerResize() {
|
|
150
|
+
this.shouldResize = true;
|
|
151
|
+
this.breakpoint = 0;
|
|
152
|
+
}
|
|
145
153
|
shouldResize = true;
|
|
146
154
|
breakpoint = 0;
|
|
147
155
|
breakpointChanged() {
|
|
@@ -490,20 +498,20 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
490
498
|
}
|
|
491
499
|
render() {
|
|
492
500
|
const bpps = this.bpPartials;
|
|
493
|
-
return (h(Host, { key: '
|
|
501
|
+
return (h(Host, { key: '00499c2d65244ee4bba6b85c830c7f586ac3dbb9', class: {
|
|
494
502
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
495
503
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
496
504
|
'nano-global-nav': true,
|
|
497
|
-
} }, h("div", { key: '
|
|
505
|
+
} }, h("div", { key: '56a6a9c2521b37bd2273ca8919bf74b572b5ca22', class: {
|
|
498
506
|
gn: true,
|
|
499
507
|
'gn__search-open': this.searchBarShown,
|
|
500
|
-
} }, h("nano-drawer", { key: '
|
|
508
|
+
} }, h("nano-drawer", { key: 'bc4b0680aa33d9084668eaa40ca867cdd039375b', ref: (el) => (this.overflowMenu = el), label: "Main menu", part: "drawer", class: "gn__drawer nano-theme-dark", placement: "start", open: this.overflowOpen, onNanoAfterHide: () => (this.overflowOpen = false), onNanoAfterShow: () => (this.overflowOpen = true) }, h("div", { key: '03a2d6fed3ac78527aefb80a881f270b6fad48a2', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '0b1fb1192dd02f22944f40a772ffa8a88ba39e8c', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
501
509
|
? bpps.mainMenu.tpl()
|
|
502
|
-
: '', h("slot", { key: '
|
|
510
|
+
: '', h("slot", { key: '8a5c53acab83acf5055bbb893400bdee271f55e2', name: "overflow" }))), h("div", { key: '83b09941ac6af91ed7eee1537597bb73d0be8f78', class: "gn__menu-bar-wrapper" }, h("div", { key: '65c85c1b34a5c3e687797ac88bc480356a348a99', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: '7ebee46ce5c2e5b5c5226ebefb082c64cc54aa61', class: `gn__main-menu ${this.shouldResize ? 'resizing' : ''}`, part: "main-menu", ref: (el) => (this.mainMenu = el) }, this.breakpoint > bpps.mainMenu.breakpoint && (h("nano-icon-button", { key: 'c8d58d9ed7c74d7044a42544a638520efa199a84', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '1239a8949b63a740eca77ddf9d2a894571c1099c', name: "logo" }, h("a", { key: 'dd3c247f271d0c62aca93033d9ae5f9f1580be61', href: this.logoUrl, class: "gn__logo-link", part: "logo-link" }, this.breakpoint <= bpps.logo.breakpoint ? (h("img", { src: getAssetPath('../nano-assets/ont-logo.svg'), alt: `Oxford Nanopore Technologies logo. Features a stylised representation of a nanopore,
|
|
503
511
|
(a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--large", width: "152", height: "36", part: "logo logo--large" })) : (h("img", { src: getAssetPath('../nano-assets/ont-wheel.svg'), alt: `Oxford Nanopore Technologies logo. A stylised representation of a nanopore,
|
|
504
|
-
(a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: '
|
|
512
|
+
(a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.`, class: "gn__logo gn__logo--small", width: "36", height: "36", part: "logo logo--small" })))), this.breakpoint <= bpps.mainMenu.breakpoint && (h("div", { key: 'f8704085d6b7013c96ea922d783e4117fdd1a085', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '9b056f95508275dd70aa7626396795ab348beb02', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '8ae5f8986cfa43e035570c0af6e01b63d2a41ec3', dialogTitle: "Search Oxford Nanopore Technologies", placement: "bottom", class: "gn__search-dropdown", skidding: -30, distance: 25, open: this.searchBarShown, onNanoAfterShow: this.handleSearchOpenEvent, onNanoAfterHide: this.handleSearchCloseEvent, autoOpen: !!this.searchIndices.length }, h("nano-icon-button", { key: '6026bb1da1649da1bfa8fdd0aca64637768e264d', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: '7a662aeeae84bea4e73a907c185933ef40239061', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: 'e047a10dcabdde6ea485f08a03f3b92d12109846', part: "search-select", label: "Which site do you wish to search in?", mask: true, hideLabel: true, value: this.activeIndex?.index, onNanoChange: this.handleSearchIndexChangeEvent }, this.searchIndices.map((index) => (h("nano-option", { selected: index.name === this.searchIndex, value: index.index }, index.name || index.index))))), h("nano-input", { key: '94f69085cc0aad1a16cd37c34edb08bec7ddfa07', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
|
|
505
513
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
506
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '
|
|
514
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: 'cbf4fe8934165e90ea788e51994471120886343b', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '066d8efa608ce3de3f55c0d4acc9db4c236e8e79', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: '2cf9e1520de0e89ced9eee012990034b4602cfe5', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: '76da20f849a0d244a3127c937a08ee0e06381922' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
507
515
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
508
516
|
searchInsight.sendClick({
|
|
509
517
|
index: this.activeIndex.index,
|
|
@@ -513,10 +521,10 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
513
521
|
positions: [i + 1],
|
|
514
522
|
});
|
|
515
523
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
516
|
-
h("nano-option", { key: '
|
|
517
|
-
]))))), h("div", { key: '
|
|
524
|
+
h("nano-option", { key: '59565a179d237c35d5528e4527b92372d2088b18', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
525
|
+
]))))), h("div", { key: '33cc9bf94208059a733ef7c3abf2fda237f7193c', class: "gn__cart" }, h("nano-icon-button", { key: '62158360ce5c519c5d49246897cd3768831bea60', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '668b68f55175618acfdbf787373fdc05ca6c6586', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
|
|
518
526
|
? bpps.contact.tpl()
|
|
519
|
-
: '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("
|
|
527
|
+
: '', this.isLoggedIn ? (h("nano-dropdown", { dialogTitle: "User menu", class: "gn__user-dropdown", distance: 10, placement: "bottom-end" }, h("button", { slot: "trigger", class: "gn__user-dropdown-trigger" }, h("nano-icon", { name: "light/user" }), h("nano-icon", { name: "light/chevron-down", class: "gn__user-dropdown-chevron" }), !!this.msgCount && (h("nano-badge", { theme: "danger", strength: "2" }, this.msgCount > 9 ? '9+' : this.msgCount))), this.loggedInPanel())) : (h("nano-cta", { secondary: true, size: "small", icon: "false", class: "gn__login-cta" }, h("a", { href: this.formatLoginLink(this.loginUrl) }, "Login"))))))), h("nano-global-search-results", { key: '46f38c9e68b64668a7dc28cf98ae772bae059fb5', part: "site-search-results" }, h("div", { key: '5be5030d0eaaa992f334e818be155683b7f282e6', class: "gn__site", part: "site-wrapper" }, h("slot", { key: 'b144415e3e26914d026c403052d65237c693db2a' }))))));
|
|
520
528
|
}
|
|
521
529
|
static get assetsDirs() { return ["assets"]; }
|
|
522
530
|
static get watchers() { return {
|
|
@@ -553,6 +561,7 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
553
561
|
"_searchValue": [32],
|
|
554
562
|
"openOverflowMenu": [64],
|
|
555
563
|
"closeOverflowMenu": [64],
|
|
564
|
+
"triggerResize": [64],
|
|
556
565
|
"submitSearch": [64]
|
|
557
566
|
}, undefined, {
|
|
558
567
|
"myAccountUrl": ["handleMyAccountUrl"],
|
|
@@ -20,14 +20,15 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
|
|
|
20
20
|
/** Whether the headers should be sticky (small screen only). Defaults to true */
|
|
21
21
|
stickyHeaders = true;
|
|
22
22
|
get el() { return this; }
|
|
23
|
-
isMobile =
|
|
23
|
+
isMobile = false;
|
|
24
24
|
stickyClass = 'sticky';
|
|
25
25
|
stuckClass = 'stuck';
|
|
26
26
|
stickyObserver;
|
|
27
27
|
slotCtrl = new HasSlotController(this, '[default]', 'mobile', 'back', 'accessory');
|
|
28
28
|
componentDidLoad() {
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
if (Build.isBrowser) {
|
|
30
|
+
this.updateNavForBreakpoint();
|
|
31
|
+
}
|
|
31
32
|
}
|
|
32
33
|
/**
|
|
33
34
|
* Checks if the current screen width is less than or equal to the breakpoint.
|
|
@@ -35,6 +36,8 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
|
|
|
35
36
|
* If not, it transforms the mobile navigation back into a desktop one.
|
|
36
37
|
*/
|
|
37
38
|
updateNavForBreakpoint = () => {
|
|
39
|
+
if (Build.isServer)
|
|
40
|
+
return;
|
|
38
41
|
this.isMobile = window.innerWidth <= this.breakpoint;
|
|
39
42
|
if (this.isMobile) {
|
|
40
43
|
// if the mobile slot is not there, we need to transform the desktop nav into a mobile one
|
|
@@ -51,6 +54,8 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
|
|
|
51
54
|
};
|
|
52
55
|
// make nano-details headers sticky
|
|
53
56
|
initStickiness() {
|
|
57
|
+
if (Build.isServer)
|
|
58
|
+
return;
|
|
54
59
|
let lastScrollTop = 0;
|
|
55
60
|
// shadowRoot for mobile slot, light DOM for default nav
|
|
56
61
|
const nanoDetails = this.isMobile && this.slotCtrl.has('mobile')
|
|
@@ -92,11 +97,16 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
|
|
|
92
97
|
this.stickyObserver.observe(details);
|
|
93
98
|
});
|
|
94
99
|
}
|
|
100
|
+
connectedCallback() {
|
|
101
|
+
if (Build.isBrowser) {
|
|
102
|
+
window.addEventListener('resize', this.updateNavForBreakpoint);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
95
105
|
disconnectedCallback() {
|
|
96
106
|
if (this.stickyObserver) {
|
|
97
107
|
this.stickyObserver.disconnect();
|
|
98
108
|
}
|
|
99
|
-
if (
|
|
109
|
+
if (Build.isBrowser) {
|
|
100
110
|
window.removeEventListener('resize', this.updateNavForBreakpoint);
|
|
101
111
|
}
|
|
102
112
|
}
|
|
@@ -206,7 +216,7 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
|
|
|
206
216
|
});
|
|
207
217
|
}
|
|
208
218
|
render() {
|
|
209
|
-
return (h(Host, { key: '
|
|
219
|
+
return (h(Host, { key: 'fd3f27b1f30fa2e769abff0f6f28d95a09a9573c', class: "nano-in-page-nav" }, h("nav", { key: '56bb0757c62664ca08d55f12d5be0461c8333363', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: 'd1ec827847505fcef24412a84b47a9816c06b117', class: "header" }, h("slot", { key: 'edf50c9a0f9968dd7b224f919f800634f0b49ece', name: "back" }), h("slot", { key: '09e6a97a71aebda4e1217f3d7bfad9ae1264a9cc', name: "accessory" }))), this.slotCtrl.has('mobile') && this.isMobile ? (h("nano-details", { label: "Menu", class: this.stickyHeaders
|
|
210
220
|
? `details-wrapper ${this.stickyClass}`
|
|
211
221
|
: 'details-wrapper' }, h("slot", { name: "mobile" }))) : (h("slot", null)))));
|
|
212
222
|
}
|