@nanoporetech-digital/components 8.0.0-alpha.1 → 8.0.0-alpha.3
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-CFc_52My.js → algolia-data-CSD3I9WJ.js} +1 -1
- package/dist/cjs/{component-store-DdyLi-VY.js → component-store-DS6c_IIg.js} +1 -1
- package/dist/cjs/{dom-CvQQBdol.js → dom-3kyE_RMm.js} +1 -1
- package/dist/cjs/{fade-Bq3U8uF7.js → fade-CqKYrZYq.js} +3 -3
- package/dist/cjs/{form-control-gUYfW0n-.js → form-control-BVH0tPGy.js} +2 -2
- package/dist/cjs/{fullscreen-Czdw-D-5.js → fullscreen-D-fHJ_IJ.js} +3 -3
- package/dist/cjs/{index-B76C6Tm9.js → index-IR1lkhwT.js} +157 -136
- package/dist/cjs/{index-ChTXweZN.js → index-yq5hsIxW.js} +1 -1
- package/dist/cjs/index.cjs.js +3 -3
- package/dist/cjs/{lazyload-BpoUFECt.js → lazyload-DK1ITMfR.js} +3 -3
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/{modal-DddxtK2h.js → modal-DZVjwBg8.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 +5 -5
- package/dist/cjs/nano-animation.cjs.entry.js +3 -3
- package/dist/cjs/nano-avatar_5.cjs.entry.js +16 -16
- package/dist/cjs/nano-breadcrumb.cjs.entry.js +2 -2
- 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 +6 -6
- package/dist/cjs/nano-collapsible-comparison.cjs.entry.js +3 -3
- 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 +10 -8
- package/dist/cjs/{nano-data-table-BNwDI1rg.js → nano-data-table-C_KLyFMO.js} +10 -7
- package/dist/cjs/nano-data-table.cjs.entry.js +6 -6
- package/dist/cjs/nano-datalist_3.cjs.entry.js +11 -11
- package/dist/cjs/nano-date-input.cjs.entry.js +2 -2
- 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-field-validator.cjs.entry.js +3 -3
- package/dist/cjs/nano-file-upload.cjs.entry.js +50 -31
- package/dist/cjs/nano-footer.cjs.entry.js +4 -4
- package/dist/cjs/nano-global-nav.cjs.entry.js +19 -15
- package/dist/cjs/nano-grid-item.cjs.entry.js +1 -1
- package/dist/cjs/nano-grid_2.cjs.entry.js +2 -2
- 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 +3 -3
- package/dist/cjs/nano-intersection-observe.cjs.entry.js +4 -4
- package/dist/cjs/nano-masked-overflow.cjs.entry.js +9 -9
- package/dist/cjs/nano-menu-drawer.cjs.entry.js +3 -3
- package/dist/cjs/nano-more-less.cjs.entry.js +4 -4
- package/dist/cjs/nano-nav-item.cjs.entry.js +5 -5
- package/dist/cjs/nano-progress-bar.cjs.entry.js +4 -18
- 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_2.cjs.entry.js +5 -5
- package/dist/cjs/nano-slide.cjs.entry.js +3 -3
- package/dist/cjs/{nano-slides-Cj4figHV.js → nano-slides-BhpvytBB.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 +3 -3
- 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 +5 -5
- package/dist/cjs/{page-dots-E6b7S4vs.js → page-dots-DeSuT5bE.js} +3 -3
- package/dist/cjs/{renderer-Z8wHFL4e.js → renderer-h0yo23iy.js} +1 -1
- package/dist/cjs/{scroll-DspYj7mY.js → scroll-_aiH0KkA.js} +1 -1
- package/dist/cjs/{slot-B4QUWT-c.js → slot-Hlplqf1Z.js} +1 -1
- package/dist/cjs/{style-BccHkuhC.js → style-Bf3iH5GX.js} +16 -2
- package/dist/cjs/{tabbable-YPytg5sg.js → tabbable-CkzmpQhq.js} +1 -1
- package/dist/cjs/{table.worker-bFxUCos7.js → table.worker-C5ofbi7M.js} +6 -6
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/animation/animation.js +4 -1
- package/dist/collection/components/checkbox/checkbox.js +4 -4
- package/dist/collection/components/cta/cta.js +9 -11
- package/dist/collection/components/data-table/table.js +5 -2
- package/dist/collection/components/datalist/datalist.js +6 -6
- package/dist/collection/components/file-upload/file-upload.css +140 -215
- package/dist/collection/components/file-upload/file-upload.js +66 -44
- package/dist/collection/components/footer/footer.css +2 -3
- package/dist/collection/components/footer/footer.js +4 -3
- package/dist/collection/components/form-control/form-control.js +1 -1
- package/dist/collection/components/global-nav/global-nav.js +35 -14
- package/dist/collection/components/masked-overflow/masked-overflow.css +3 -4
- package/dist/collection/components/masked-overflow/masked-overflow.js +8 -6
- package/dist/collection/components/more-less/more-less.js +6 -3
- package/dist/collection/components/progress-bar/progress-bar.css +78 -33
- package/dist/collection/components/progress-bar/progress-bar.js +18 -61
- package/dist/collection/components/rating/rating.js +4 -4
- package/dist/collection/components/resize-observe/resize-observe.js +1 -1
- package/dist/collection/components/select/select.js +7 -7
- package/dist/collection/components/skeleton/skeleton.js +2 -2
- package/dist/collection/components/slides/slide.js +1 -1
- package/dist/collection/components/slides/slides.js +4 -4
- package/dist/collection/components/sortable/sortable.js +1 -1
- package/dist/collection/components/spinner/spinner.js +1 -1
- package/dist/collection/components/sticker/sticker.js +2 -2
- package/dist/collection/components/table/table.js +3 -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/style.js +16 -2
- package/dist/components/cta.js +11 -9
- package/dist/components/datalist.js +6 -6
- package/dist/components/form-control.js +1 -1
- package/dist/components/masked-overflow.js +5 -5
- package/dist/components/nano-animation.js +1 -1
- package/dist/components/nano-checkbox.js +4 -4
- package/dist/components/nano-data-table.js +5 -2
- package/dist/components/nano-file-upload.js +58 -33
- package/dist/components/nano-footer.js +5 -4
- package/dist/components/nano-global-nav.js +18 -13
- 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 +4 -4
- package/dist/components/progress-bar.js +7 -23
- package/dist/components/resize-observe.js +1 -1
- package/dist/components/select.js +7 -7
- package/dist/components/skeleton.js +2 -2
- package/dist/components/slides.js +3 -3
- package/dist/components/spinner.js +1 -1
- package/dist/components/sticker.js +2 -2
- package/dist/components/style.js +16 -2
- package/dist/components/tag.js +2 -2
- package/dist/components/tooltip.js +2 -2
- package/dist/esm/{algolia-data-CCqzaIh4.js → algolia-data-D6wnbV__.js} +1 -1
- package/dist/esm/{component-store-C-YnXSQE.js → component-store-CH5BI3Tg.js} +1 -1
- package/dist/esm/{dom-GYcqUAl_.js → dom-Cb7FUtXp.js} +1 -1
- package/dist/esm/{fade-C3aqZinc.js → fade-CnaZvOTY.js} +3 -3
- package/dist/esm/{form-control-BjKTwcqA.js → form-control-BOVGZF9R.js} +2 -2
- package/dist/esm/{fullscreen-T7b44-vN.js → fullscreen-BIFliVxG.js} +3 -3
- package/dist/esm/{index-DOuz1S3w.js → index-DXvE-U_j.js} +157 -136
- package/dist/esm/{index-DkZY6pJu.js → index-Dw3NZx59.js} +1 -1
- package/dist/esm/index.js +4 -4
- package/dist/esm/{lazyload-BdH0bSmg.js → lazyload-D_Ju_KaC.js} +3 -3
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{modal-s7sHBYzQ.js → modal-B_AxJQQp.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 +5 -5
- package/dist/esm/nano-animation.entry.js +3 -3
- package/dist/esm/nano-avatar_5.entry.js +16 -16
- package/dist/esm/nano-breadcrumb.entry.js +2 -2
- 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 +6 -6
- package/dist/esm/nano-collapsible-comparison.entry.js +3 -3
- 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 +10 -8
- package/dist/esm/{nano-data-table-Bm9J8Phu.js → nano-data-table-CJbVKIuu.js} +10 -7
- package/dist/esm/nano-data-table.entry.js +6 -6
- package/dist/esm/nano-datalist_3.entry.js +11 -11
- package/dist/esm/nano-date-input.entry.js +2 -2
- 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-field-validator.entry.js +3 -3
- package/dist/esm/nano-file-upload.entry.js +50 -31
- package/dist/esm/nano-footer.entry.js +4 -4
- package/dist/esm/nano-global-nav.entry.js +19 -15
- package/dist/esm/nano-grid-item.entry.js +1 -1
- package/dist/esm/nano-grid_2.entry.js +2 -2
- 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 +3 -3
- package/dist/esm/nano-intersection-observe.entry.js +4 -4
- package/dist/esm/nano-masked-overflow.entry.js +9 -9
- package/dist/esm/nano-menu-drawer.entry.js +3 -3
- package/dist/esm/nano-more-less.entry.js +4 -4
- package/dist/esm/nano-nav-item.entry.js +5 -5
- package/dist/esm/nano-progress-bar.entry.js +4 -18
- package/dist/esm/nano-range.entry.js +2 -2
- package/dist/esm/nano-rating.entry.js +6 -6
- package/dist/esm/nano-resize-observe_2.entry.js +5 -5
- package/dist/esm/nano-slide.entry.js +3 -3
- package/dist/esm/{nano-slides-BEE7xEu_.js → nano-slides-B9KjZVqC.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 +3 -3
- 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 +5 -5
- package/dist/esm/{page-dots-D2WI1eZ0.js → page-dots-BmS6HUrx.js} +3 -3
- package/dist/esm/{renderer-CnE0Hztu.js → renderer-BUaAsDso.js} +1 -1
- package/dist/esm/{scroll-DHa1CIPP.js → scroll-iCYjzh9N.js} +1 -1
- package/dist/esm/{slot-lixS0pd2.js → slot-DYFgWo5f.js} +1 -1
- package/dist/esm/{style-BrRDhFfF.js → style-xLaX004n.js} +16 -2
- package/dist/esm/{tabbable-QmV19K7Q.js → tabbable-C4l-rYq9.js} +1 -1
- package/dist/esm/{table.worker-zeRR3oed.js → table.worker-CsTdjWrS.js} +6 -6
- package/dist/nano-components/{algolia-data-CCqzaIh4.js → algolia-data-D6wnbV__.js} +1 -1
- package/dist/nano-components/{component-store-C-YnXSQE.js → component-store-CH5BI3Tg.js} +1 -1
- package/dist/nano-components/{dom-GYcqUAl_.js → dom-Cb7FUtXp.js} +1 -1
- package/dist/nano-components/{fade-C3aqZinc.js → fade-CnaZvOTY.js} +1 -1
- package/dist/nano-components/form-control-BOVGZF9R.js +4 -0
- package/dist/nano-components/{fullscreen-T7b44-vN.js → fullscreen-BIFliVxG.js} +1 -1
- package/dist/nano-components/index-DXvE-U_j.js +5 -0
- package/dist/nano-components/{index-DkZY6pJu.js → index-Dw3NZx59.js} +1 -1
- package/dist/nano-components/index.esm.js +1 -1
- package/dist/nano-components/{lazyload-BdH0bSmg.js → lazyload-D_Ju_KaC.js} +1 -1
- package/dist/nano-components/{modal-s7sHBYzQ.js → modal-B_AxJQQp.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 +24 -20
- 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-Bm9J8Phu.js → nano-data-table-CJbVKIuu.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-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_2.entry.js +1 -1
- package/dist/nano-components/nano-slide.entry.js +1 -1
- package/dist/nano-components/{nano-slides-BEE7xEu_.js → nano-slides-B9KjZVqC.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-D2WI1eZ0.js → page-dots-BmS6HUrx.js} +1 -1
- package/dist/nano-components/{renderer-CnE0Hztu.js → renderer-BUaAsDso.js} +1 -1
- package/dist/nano-components/{scroll-DHa1CIPP.js → scroll-iCYjzh9N.js} +1 -1
- package/dist/nano-components/{slot-lixS0pd2.js → slot-DYFgWo5f.js} +1 -1
- package/dist/nano-components/style-xLaX004n.js +4 -0
- package/dist/nano-components/{tabbable-QmV19K7Q.js → tabbable-C4l-rYq9.js} +1 -1
- package/dist/nano-components/table.worker-CsTdjWrS.js +4 -0
- package/dist/style/components.css +1 -1
- package/dist/style/components.css.map +1 -1
- package/dist/style/core.css +1 -1
- package/dist/style/core.css.map +1 -1
- package/dist/style/dark.css +1 -1
- package/dist/style/dark.css.map +1 -1
- package/dist/style/light.css +1 -1
- package/dist/style/light.css.map +1 -1
- package/dist/style/nano.css +1 -1
- package/dist/style/nano.css.map +1 -1
- package/dist/types/components/animation/animation.d.ts +3 -0
- package/dist/types/components/cta/cta.d.ts +0 -2
- package/dist/types/components/file-upload/file-upload.d.ts +14 -9
- package/dist/types/components/global-nav/global-nav.d.ts +4 -2
- package/dist/types/components/masked-overflow/masked-overflow.d.ts +4 -2
- package/dist/types/components/more-less/more-less.d.ts +4 -1
- package/dist/types/components/progress-bar/progress-bar.d.ts +6 -13
- package/dist/types/components/slides/slides-interface.d.ts +1 -1
- package/dist/types/components.d.ts +83 -69
- package/docs-json.json +171 -186
- package/docs-vscode.json +18 -11
- package/hydrate/index.js +299 -254
- package/hydrate/index.mjs +299 -254
- package/package.json +2 -2
- package/dist/collection/components/file-upload/file-upload-list.js +0 -3
- package/dist/nano-components/form-control-BjKTwcqA.js +0 -4
- package/dist/nano-components/index-DOuz1S3w.js +0 -5
- package/dist/nano-components/style-BrRDhFfF.js +0 -4
- package/dist/nano-components/table.worker-zeRR3oed.js +0 -4
- package/dist/types/components/file-upload/file-upload-list.d.ts +0 -0
|
@@ -103,7 +103,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
|
|
|
103
103
|
writeTask(() => {
|
|
104
104
|
if (this.open) {
|
|
105
105
|
const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
|
|
106
|
-
this.nanoDropdown.style.setProperty('--max-height', window.innerHeight - (height + top + 40)
|
|
106
|
+
this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
|
|
107
107
|
}
|
|
108
108
|
this.nanoDropdown.open = this.open;
|
|
109
109
|
if (this.connectedInput) {
|
|
@@ -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: 'b9c67e5dfc3c26c4eac219d9bdc9081aa79d7122', 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: '29a0de977f7be1a39c5c869a5ab366bb64711d9e', 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: '86769c73825853c557ed7a1dfb0f86898ce6504f', 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: 'f5ea0623591a368f38ce3c1e41ef431c4a9f5960', name: "list-top" }), h("slot", { key: '98804885ffb99528138867d2747af3acef3f64f7' }), h("slot", { key: '1341dc10f96570c04613153cf939aaf7dc21f0d3', name: "internal-opts" }), h("slot", { key: '84d86a667a69cd571f7b96dc29d1ddd58c3d482c', name: "list-bottom" })), h("nano-menu", { key: '9b09caa70bd106eb9e64c714072c0b88275f34c6', 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: '58187330291198ff00571570e2b6b6bfdc79c905', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '72ea39405f558d10de86a14704ed48e869f01426', 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"],
|
|
@@ -35,7 +35,7 @@ const FormControlWrap = (props, children) => {
|
|
|
35
35
|
'has-float-label': label !== null && floatLabel,
|
|
36
36
|
'has-helper-end': hasHelperEndSlot,
|
|
37
37
|
rtl,
|
|
38
|
-
[props.class]:
|
|
38
|
+
[props.class]: !!props.class,
|
|
39
39
|
} },
|
|
40
40
|
h("div", { class: "form-ctrl__wrapper" },
|
|
41
41
|
!floatLabel ? renderLabel({ ...props }) : '',
|
|
@@ -10,7 +10,7 @@ import { d as defineCustomElement$3 } from './icon.js';
|
|
|
10
10
|
import { d as defineCustomElement$2 } from './icon-button.js';
|
|
11
11
|
import { d as defineCustomElement$1 } from './tooltip.js';
|
|
12
12
|
|
|
13
|
-
const maskedOverflowCss = ":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{--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-size:3px;--indicator-track-color:var(--nano-color-neutral-300);--indicator-track-size:var(--indicator-size);--scroll-btn-color:var(--nano-color-primary-1200);--scroll-btn-size:1rem;--fade-size:100px;position:relative;z-index:var(--nano-z-index-raised)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__nav:has(.onav__scroller:focus-visible){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.onav__scroller{scrollbar-width:thin;overflow:auto;display:flex;transition:var(--nano-transition-fast) ease}.onav__scroller:focus{outline:none}.onnav--hide-scrollbars .onav__scroller{scrollbar-width:none;-ms-overflow-style:none}.onnav--hide-scrollbars .onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onnav--has-indicator .onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.nano-icon-button.onav__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast) ease opacity;opacity:0;color:var(--scroll-btn-color);font-size:var(--scroll-btn-size);pointer-events:none}.nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav--horizontal.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--horizontal.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -2) 0;mask-position:calc(var(--fade-size) * -2) 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100%;mask-size:100%}.onav--horizontal .onav__items{flex-direction:row}.
|
|
13
|
+
const maskedOverflowCss = ":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{--indicator-transition:var(--nano-transition-fast);--indicator-color:var(--nano-color-primary-1000);--indicator-size:3px;--indicator-track-color:var(--nano-color-neutral-300);--indicator-track-size:var(--indicator-size);--scroll-btn-color:var(--nano-color-primary-1200);--scroll-btn-size:1rem;--fade-size:100px;position:relative;z-index:var(--nano-z-index-raised)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__nav:has(.onav__scroller:focus-visible){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.onav__scroller{scrollbar-width:thin;overflow:auto;display:flex;transition:var(--nano-transition-fast) ease}.onav__scroller:focus{outline:none}.onnav--hide-scrollbars .onav__scroller{scrollbar-width:none;-ms-overflow-style:none}.onnav--hide-scrollbars .onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onnav--has-indicator .onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.nano-icon-button.onav__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast) ease opacity;opacity:0;color:var(--scroll-btn-color);font-size:var(--scroll-btn-size);pointer-events:none}.nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav--horizontal.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--horizontal.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -2) 0;mask-position:calc(var(--fade-size) * -2) 0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--horizontal.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100%;mask-size:100%}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{--fade-size:70px;inline-size:100%;display:flex}.onav--vertical .onav__nav{max-block-size:100%;min-inline-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;flex-direction:column}.onav--vertical.onav--has-scroll-controls .onav__scroller{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--fade-size) * 0.2), rgb(0, 0, 0) var(--fade-size), rgb(0, 0, 0) calc(100% - var(--fade-size)), rgba(0, 0, 0, 0) calc(100% - var(--fade-size) * 0.2), rgba(0, 0, 0, 0) 100%)}.onav--vertical.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 calc(var(--fade-size) * -2);mask-position:0 calc(var(--fade-size) * -2);-webkit-mask-size:100% calc(100% + var(--fade-size) * 2);mask-size:100% calc(100% + var(--fade-size) * 2)}.onav--vertical.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% 100%;mask-size:100% 100%}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
|
|
14
14
|
|
|
15
15
|
const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow extends HTMLElement {
|
|
16
16
|
// public surface
|
|
@@ -320,7 +320,7 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
|
|
|
320
320
|
}
|
|
321
321
|
}
|
|
322
322
|
render() {
|
|
323
|
-
return (h(Host, { key: '
|
|
323
|
+
return (h(Host, { key: '4f88bf0a4cd8f01c745685afe7b0c5f9fc9b26b2', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'b7894467af4981a53bb0540998f9fdee3b5e4db7', part: "base", class: {
|
|
324
324
|
onav: true,
|
|
325
325
|
[`onav--${this.orientation}`]: true,
|
|
326
326
|
'onav--has-scroll-controls': this.hasScrollControls,
|
|
@@ -328,13 +328,13 @@ const MaskedOverflow = /*@__PURE__*/ proxyCustomElement(class MaskedOverflow ext
|
|
|
328
328
|
'onav--has-scroll-controls-end': !this.hideControlEnd,
|
|
329
329
|
'onav--no-transitions': this.instantReCalc,
|
|
330
330
|
'onnav--has-indicator': this.showIndicator,
|
|
331
|
-
'onnav--hide-scrollbars': this.hideScrollbars,
|
|
332
|
-
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '
|
|
331
|
+
'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
|
|
332
|
+
}, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'c12e39f98ea4750a0709c822f1827fd3a4580ca5', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '9f45887d61630f41398e872bb7d3538f87fcc7c0', part: "scroll-button scroll-button-prev", class: {
|
|
333
333
|
'onav__scroll-button': true,
|
|
334
334
|
'onav__scroll-button--start': true,
|
|
335
335
|
}, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|
|
336
336
|
? 'light/chevron-left'
|
|
337
|
-
: 'light/chevron-up' })), h("div", { key: '
|
|
337
|
+
: 'light/chevron-up' })), h("div", { key: '1b6402869156bb7d6f3ddaf5b6b9e1ba80e94104', 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: '1018eef93e68d13faf4c7898a69f6723e772ec3c', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'ab21bd04d6bb661f716d835ee4bc0d111fed863f', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: 'bb66cabd059551b392e5049eb8d18f83de8eb818', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'bd48cb7171ee606a9c368a36090cefb3e61337bd', part: "scroll-button scroll-button-next", class: {
|
|
338
338
|
'onav__scroll-button': true,
|
|
339
339
|
'onav__scroll-button--end': true,
|
|
340
340
|
}, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
|
|
@@ -1212,7 +1212,7 @@ const NanoAnimation$1 = /*@__PURE__*/ proxyCustomElement(class NanoAnimation ext
|
|
|
1212
1212
|
this.animation?.finish();
|
|
1213
1213
|
}
|
|
1214
1214
|
render() {
|
|
1215
|
-
return (h(Host, { key: '
|
|
1215
|
+
return (h(Host, { key: 'a71dc9c9b6505aa5ad8cdaefb32cadc0ca37fbb5', class: "nano-animation" }, h("slot", { key: 'a01cc1638ec3b57d56deb0f91d2421be4874d212', ref: (slot) => {
|
|
1216
1216
|
this.defaultSlot = slot;
|
|
1217
1217
|
}, onSlotchange: this.handleSlotChange })));
|
|
1218
1218
|
}
|
|
@@ -23,7 +23,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
|
|
|
23
23
|
}
|
|
24
24
|
set slotWrapper(value) {
|
|
25
25
|
this._slotWrapper = value;
|
|
26
|
-
this.hasLabel = !!value
|
|
26
|
+
this.hasLabel = !!value?.querySelectorAll('*').length || !!this.label;
|
|
27
27
|
}
|
|
28
28
|
get host() { return this; }
|
|
29
29
|
inputType = 'checkbox';
|
|
@@ -231,7 +231,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
|
|
|
231
231
|
}
|
|
232
232
|
render() {
|
|
233
233
|
const labelId = this.inputId + '-lbl';
|
|
234
|
-
return (h(Host, { key: '
|
|
234
|
+
return (h(Host, { key: 'd1c462c6850bad6dd37696c1edc61d1413613908' }, h("label", { key: 'e45bce2bffd58378e79606d848b8dc4b2a023fb2', class: {
|
|
235
235
|
nanocb: true,
|
|
236
236
|
'nanocb--checked': this.checked,
|
|
237
237
|
'nanocb--invalid': this.invalid,
|
|
@@ -239,11 +239,11 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
|
|
|
239
239
|
'nanocb--focused': this.hasFocus,
|
|
240
240
|
'nanocb--indeterminate': this.indeterminate,
|
|
241
241
|
['nanocb__' + this.type]: true,
|
|
242
|
-
}, htmlFor: this.inputId }, h("input", { key: '
|
|
242
|
+
}, htmlFor: this.inputId }, h("input", { key: '732c982c1613eed2075857fff33a869378ce2356', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": this.hasLabel ? labelId : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '7299bc0cca8ea4230d4317ad1a5e9ec5c72fd58d', class: 'nanocb__input' }), this.hasLabel && (h("div", { key: 'daa0fd8b2b63796e96ea40e843390ca62c41c968', id: labelId, class: {
|
|
243
243
|
nanocb__label: true,
|
|
244
244
|
[`nanocb__label--${this.type}`]: true,
|
|
245
245
|
'nanocb__label--hidden': this.hideLabel,
|
|
246
|
-
} }, this.label && !!this.label.length && h("span", { key: '
|
|
246
|
+
} }, this.label && !!this.label.length && h("span", { key: 'cdcdf9528ee8f39f22ddd9f61c490d4c02f910e4' }, this.label), h("span", { key: '021ecfc889a1bc89df711343cad337d847d93191', hidden: this.label && !!this.label.length, ref: (s) => (this.slotWrapper = s) }, h("slot", { key: 'da6bb8cfd800f4f423aaa7be538b1e33af73f5bc' })))))));
|
|
247
247
|
}
|
|
248
248
|
static get watchers() { return {
|
|
249
249
|
"checked": ["handleCheckedChange"],
|
|
@@ -1812,10 +1812,13 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
|
|
|
1812
1812
|
return (h$1(Host, { class: "nano-data-table" }, h$1("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h$1("nano-resize-observe", { onNanoResize: () => {
|
|
1813
1813
|
if (this.tablePinnedService)
|
|
1814
1814
|
this.tablePinnedService.onResize();
|
|
1815
|
-
} }), Wrap(h$1("div", { class: `${CSSNAMESPACE}__wrap` }, h$1("nano-progress-bar", {
|
|
1815
|
+
} }), Wrap(h$1("div", { class: `${CSSNAMESPACE}__wrap` }, h$1("nano-progress-bar", {
|
|
1816
|
+
// indeterminate
|
|
1817
|
+
class: {
|
|
1816
1818
|
[`${CSSNAMESPACE}__progress-bar`]: true,
|
|
1817
1819
|
[`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
|
|
1818
|
-
}
|
|
1820
|
+
}
|
|
1821
|
+
}), h$1("table", { "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-data-table-' + this.renderId }, h$1("caption", { class: {
|
|
1819
1822
|
[`${CSSNAMESPACE}__caption`]: true,
|
|
1820
1823
|
[`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
|
|
1821
1824
|
} }, h$1("slot", { name: "caption" }, this.caption)), h$1("thead", null, h$1(TableHeadFootRow, { rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
|
|
@@ -3,11 +3,12 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
|
|
5
5
|
import { h } from './renderer.js';
|
|
6
|
+
import { d as defineCustomElement$5 } from './cta.js';
|
|
6
7
|
import { d as defineCustomElement$4 } from './icon.js';
|
|
7
8
|
import { d as defineCustomElement$3 } from './icon-button.js';
|
|
8
9
|
import { d as defineCustomElement$2 } from './tooltip.js';
|
|
9
10
|
|
|
10
|
-
const fileUploadCss = ".sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{block-size:1em;margin-block:calc(var(--label-padding) / 2) var(--label-padding);margin-inline:3px 0;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-block-size:var(--drop-height);display:flex;align-items:center;justify-content:center;font-size:0.9em;position:relative;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgb(var(--drop-border-tint)/50%);border-style:dashed;inset:0;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgb(var(--drop-border--invalid)/100%)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgb(var(--drop-border-tint)/100%);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;transform:translateZ(0);animation:hideListItem 0.3s ease-in-out forwards}@keyframes hideListItem{0%{opacity:1;transform:translateY(0);transform:translateZ(0)}100%{opacity:0;transform:translateY(10px);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem 0.3s ease-in-out forwards}@keyframes showListItem{0%{opacity:0;transform:translateY(10px);transform:translateZ(0)}100%{opacity:1;transform:translateY(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px;margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgb(var(--drop-border--invalid) / 100%)}.file-upload__button.sc-nano-file-upload{padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-inline-size:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload nano-spinner.sc-nano-file-upload{--base-color-rgb:255 255 255;margin-inline:0.5em 0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.button--icon-start.sc-nano-file-upload nano-spinner.sc-nano-file-upload{margin-inline:0 0.5em}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled,.sc-nano-file-upload:disabled){box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(:focus,.button--focus).sc-nano-file-upload,.file-upload__button.button--keyline.button--active.sc-nano-file-upload{box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:flex;align-items:stretch;inline-size:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin-inline:0.4rem 0;margin-block:0}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:flex;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}";
|
|
11
|
+
const fileUploadCss = ".sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--color-error:var(--nano-color-danger-1100);--color-error-light:var(--nano-color-danger-100);--color-text:var(--nano-color-neutral-1400);--color-drop-browse:var(--nano-color-primary-1200);--color-drop-border:var(--nano-color-primary-1200);--color-drop-bg:var(--nano-color-primary-75);--drop-height:3.5em;--color-btn-bg:var(--nano-color-base-0);--color-btn-border:var(--nano-color-primary-1000);--color-btn-text:var(--nano-color-primary-1000)}[disabled].sc-nano-file-upload-h:not([disabled=false]){cursor:not-allowed}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload--invalid.sc-nano-file-upload{--color-drop-bg:var(--color-error-light)}.file-upload--dragging.sc-nano-file-upload{--color-drop-bg:var(--nano-color-success-50)}.file-upload__label.sc-nano-file-upload{font-size:var(--nano-font-size-xs);margin:0;line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__label.sc-nano-file-upload{color:var(--nano-color-neutral-1200)}.file-upload__input.sc-nano-file-upload{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0;position:relative}.file-upload__more.sc-nano-file-upload:has(.file-upload__error) .file-upload__help.sc-nano-file-upload{display:none !important}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;font-style:italic;font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--color-error);opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1;display:block}.file-upload__help.sc-nano-file-upload{opacity:1;color:var(--color-text);display:block}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0;display:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__help.sc-nano-file-upload{color:var(--nano-color-neutral-1200);opacity:0.8}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--color-drop-bg);color:var(--color-text);min-block-size:var(--drop-height);padding:var(--nano-spacing-md);display:flex;align-items:center;justify-content:center;position:relative;transition:background-color var(--nano-transition-x-fast) ease-in-out;font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{color:var(--nano-color-neutral-1200);background-color:var(--nano-color-neutral-300);border-color:var(--nano-color-neutral-1200)}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-width:1px;background-color:var(--color-drop-border);-webkit-mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;inset:0;transition:top var(--nano-transition-x-fast) ease-in-out, bottom var(--nano-transition-x-fast) ease-in-out, left var(--nano-transition-x-fast) ease-in-out, right var(--nano-transition-x-fast) ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--nano-color-success-1100);inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--color-drop-browse);text-decoration:underline;z-index:1;cursor:pointer;position:relative}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--nano-color-neutral-1200);opacity:0.8}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__list.sc-nano-file-upload{list-style:none;margin:var(--nano-spacing-xs) 0 0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;animation:hideListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes hideListItem{0%{opacity:1}100%{opacity:0}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes showListItem{0%{opacity:0}100%{opacity:1}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--color-drop-bg);padding:var(--nano-spacing-xs);margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--nano-font-size-2xs);color:var(--color-text)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{--padding:0.406rem;background:var(--color-drop-bg);margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:var(--color-error)}.file-upload__drop-area.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0}.file-upload__button.sc-nano-file-upload{max-inline-size:100%;display:flex}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload{color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;display:flex;align-items:center;inline-size:auto;color:var(--color-btn-text);background:var(--color-btn-bg)}.is-invalid.sc-nano-file-upload-h .file-upload__clear-btn.sc-nano-file-upload{color:var(--color-error)}.file-upload__clear-btn.sc-nano-file-upload:focus-visible>nano-icon.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin:0.1rem 0 0 var(--nano-spacing-sm)}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0;display:block}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__icon.sc-nano-file-upload{align-self:center;margin-inline-start:var(--nano-spacing-sm);size:var(--nano-icon-size-small)}.file-upload__icon-error.sc-nano-file-upload{color:var(--color-error);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__icon-error.sc-nano-file-upload{opacity:1}.file-upload__icon-success.sc-nano-file-upload{color:var(--nano-color-success-1100);opacity:0}.file-upload--valid.sc-nano-file-upload .file-upload__icon-success.sc-nano-file-upload{opacity:1}";
|
|
11
12
|
|
|
12
13
|
let fileInputIds = 0;
|
|
13
14
|
let getDataTransfer = () => new DataTransfer();
|
|
@@ -66,12 +67,18 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
66
67
|
capture;
|
|
67
68
|
/** The maximum file size allowed per file (Megabytes) */
|
|
68
69
|
maxFileSize = 1;
|
|
69
|
-
/** The maximum
|
|
70
|
+
/** The maximum number of files that can be selected. Defaults to 1 */
|
|
70
71
|
maxFiles = 1;
|
|
72
|
+
_label = '';
|
|
71
73
|
/** String to place within a label element. */
|
|
72
|
-
label
|
|
74
|
+
get label() {
|
|
75
|
+
return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
|
|
76
|
+
}
|
|
77
|
+
set label(value) {
|
|
78
|
+
this._label = value;
|
|
79
|
+
}
|
|
73
80
|
/** Placeholder only used within single file uploads. */
|
|
74
|
-
placeholder = 'Choose a file
|
|
81
|
+
placeholder = 'Choose a file';
|
|
75
82
|
/** Visually hide the label - but make it accessible. */
|
|
76
83
|
hideLabel = false;
|
|
77
84
|
/** If `true`, the user must select a file to upload before submitting a form. */
|
|
@@ -80,11 +87,11 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
80
87
|
disabled = false;
|
|
81
88
|
/** If `true`, a clear icon will appear in the input when there is a value.
|
|
82
89
|
* Clicking it clears the input. Only used within single file uploads. */
|
|
83
|
-
|
|
90
|
+
clearable = false;
|
|
84
91
|
/** Whether to show validation errors underneath input */
|
|
85
92
|
showInlineError = true;
|
|
86
93
|
/** When should the field perform validation */
|
|
87
|
-
validateOn = '
|
|
94
|
+
validateOn = 'submitThenDirty';
|
|
88
95
|
/** The form element to associate with this input (its form owner). Must be the id of a form. */
|
|
89
96
|
form;
|
|
90
97
|
shouldValidate() {
|
|
@@ -96,7 +103,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
96
103
|
this.showInlineValidation();
|
|
97
104
|
});
|
|
98
105
|
}
|
|
99
|
-
_invalid =
|
|
106
|
+
_invalid = null;
|
|
100
107
|
/** This will be true when the control is in an invalid state.
|
|
101
108
|
* Validity is determined by the `required` prop. Or if custom validity message is set. @readonly */
|
|
102
109
|
get invalid() {
|
|
@@ -176,7 +183,6 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
176
183
|
async showError(message) {
|
|
177
184
|
if (this.inputEl) {
|
|
178
185
|
this.inputEl.setCustomValidity(message);
|
|
179
|
-
this.validate();
|
|
180
186
|
this.showInlineValidation();
|
|
181
187
|
}
|
|
182
188
|
}
|
|
@@ -228,7 +234,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
228
234
|
checkFileType(type) {
|
|
229
235
|
if (!this.accept)
|
|
230
236
|
return true;
|
|
231
|
-
return this.accept.match(type) && this.accept.match(type).length > 0;
|
|
237
|
+
return !!type && this.accept.match(type) && this.accept.match(type).length > 0;
|
|
232
238
|
}
|
|
233
239
|
validate = () => {
|
|
234
240
|
this.errorMessage = '';
|
|
@@ -238,24 +244,36 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
238
244
|
error = this.inputEl.validationMessage;
|
|
239
245
|
}
|
|
240
246
|
else {
|
|
241
|
-
this.fileList.
|
|
242
|
-
error =
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
247
|
+
if (this.fileList.length > this.maxFiles) {
|
|
248
|
+
error = `Maximum number of files exceeded (${this.maxFiles})`;
|
|
249
|
+
}
|
|
250
|
+
else {
|
|
251
|
+
this.fileList.forEach((fileItem) => {
|
|
252
|
+
let listeItemError = null;
|
|
253
|
+
if (!this.checkFileSize(fileItem.file.size)) {
|
|
254
|
+
listeItemError =
|
|
255
|
+
'Maximum file size exceeded. Max file size is ' +
|
|
256
|
+
this.maxFileSize +
|
|
257
|
+
'Mb';
|
|
258
|
+
}
|
|
259
|
+
else if (!this.checkFileType(fileItem.file.type)) {
|
|
260
|
+
listeItemError = `File type is not allowed (${this.accept})`;
|
|
261
|
+
}
|
|
262
|
+
fileItem.validationMessage = listeItemError;
|
|
263
|
+
fileItem.valid = !listeItemError;
|
|
264
|
+
if (listeItemError) {
|
|
265
|
+
error = listeItemError;
|
|
266
|
+
}
|
|
267
|
+
});
|
|
268
|
+
}
|
|
256
269
|
}
|
|
257
|
-
if (error)
|
|
270
|
+
if (error) {
|
|
258
271
|
this.inputEl.setCustomValidity(error);
|
|
272
|
+
}
|
|
273
|
+
else {
|
|
274
|
+
this.inputEl.setCustomValidity('');
|
|
275
|
+
this.errorMessage = '';
|
|
276
|
+
}
|
|
259
277
|
};
|
|
260
278
|
showInlineValidation(ev) {
|
|
261
279
|
if (this.validateOn === 'submitThenDirty')
|
|
@@ -371,9 +389,10 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
371
389
|
h("div", { class: 'file-upload__' + eleType + '-wrap' }, h("label", { class: `file-upload__` + eleType, htmlFor: this.fileInputId, id: labelId, onDrop: (e) => {
|
|
372
390
|
this.onDrop(e);
|
|
373
391
|
this.onDragStop(e);
|
|
374
|
-
}, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (h("slot", { name: "label" })))), eleType === 'drop' && (h("div", { class: "file-upload__drop-area" }, h("div", null, this.hasLabelSlot && h("slot", { name: "label" })), h("div", null, "Drag and drop or\u00A0", h("span", null, "browse")))), eleType === 'btn' && (h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, h("
|
|
392
|
+
}, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (h("slot", { name: "label" })))), eleType === 'drop' && (h("div", { class: "file-upload__drop-area" }, h("div", null, this.hasLabelSlot && h("slot", { name: "label" })), h("div", null, "Drag and drop or\u00A0", h("span", null, "browse")))), eleType === 'btn' && (h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, h("nano-cta", { secondary: true, class: `file-upload__btn-content` }, h("div", { class: "button", disabled: this.disabled }, this.fileList.length
|
|
375
393
|
? this.fileList[0].file.name
|
|
376
|
-
: this.placeholder), !!this.value && this.
|
|
394
|
+
: this.placeholder)), !!this.value && this.clearable && !this.disabled && (h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "0", "aria-label": "Clear selected file", onClick: this.onClearClick }, h("nano-icon", { name: "light/xmark" }))), !this.disabled && this.showInlineError &&
|
|
395
|
+
(this._invalid ? (h("nano-icon", { name: "solid/circle-xmark", class: "file-upload__icon file-upload__icon-error" })) : (h("nano-icon", { name: "solid/circle-check", class: "file-upload__icon file-upload__icon-success" }))))), h("input", { "aria-labelledby": labelId + ' ' + moreId + ' ' + listId, type: "file", id: this.fileInputId, accept: this.accept, class: "file-upload__input", multiple: this.maxFiles > 1, disabled: this.disabled, name: this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
|
|
377
396
|
if (this.canChangeFileList) {
|
|
378
397
|
this.publicInputEl = input;
|
|
379
398
|
return;
|
|
@@ -400,11 +419,12 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
400
419
|
];
|
|
401
420
|
};
|
|
402
421
|
render() {
|
|
403
|
-
return (h(Host, { key: '
|
|
422
|
+
return (h(Host, { key: '4f495870314e3f688517b34be6749cf2b77810ea', class: "nano-file-upload" }, h("div", { key: '9baa63fe75b200913f82abb4304d73e22fbb4be4', class: {
|
|
404
423
|
'file-upload': true,
|
|
405
424
|
'file-upload--dragging': this.isDragging,
|
|
406
425
|
'file-upload--focus': this.hasFocus,
|
|
407
|
-
'file-upload--invalid': this._invalid,
|
|
426
|
+
'file-upload--invalid': this._invalid === true,
|
|
427
|
+
'file-upload--valid': this._invalid === false,
|
|
408
428
|
} }, this.maxFiles > 1 ? h(this.dropArea, null) : h(this.button, null))));
|
|
409
429
|
}
|
|
410
430
|
static get watchers() { return {
|
|
@@ -423,16 +443,16 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
|
|
|
423
443
|
"capture": [1],
|
|
424
444
|
"maxFileSize": [2, "max-file-size"],
|
|
425
445
|
"maxFiles": [2, "max-files"],
|
|
426
|
-
"label": [
|
|
446
|
+
"label": [6145],
|
|
427
447
|
"placeholder": [1],
|
|
428
448
|
"hideLabel": [4, "hide-label"],
|
|
429
449
|
"required": [4],
|
|
430
450
|
"disabled": [516],
|
|
431
|
-
"
|
|
451
|
+
"clearable": [4],
|
|
432
452
|
"showInlineError": [516, "show-inline-error"],
|
|
433
453
|
"validateOn": [1025, "validate-on"],
|
|
434
454
|
"form": [1],
|
|
435
|
-
"invalid": [
|
|
455
|
+
"invalid": [2568],
|
|
436
456
|
"validityMessage": [2049, "validity-message"],
|
|
437
457
|
"files": [6160],
|
|
438
458
|
"value": [6145],
|
|
@@ -460,13 +480,18 @@ function defineCustomElement$1() {
|
|
|
460
480
|
if (typeof customElements === "undefined") {
|
|
461
481
|
return;
|
|
462
482
|
}
|
|
463
|
-
const components = ["nano-file-upload", "nano-icon", "nano-icon-button", "nano-tooltip"];
|
|
483
|
+
const components = ["nano-file-upload", "nano-cta", "nano-icon", "nano-icon-button", "nano-tooltip"];
|
|
464
484
|
components.forEach(tagName => { switch (tagName) {
|
|
465
485
|
case "nano-file-upload":
|
|
466
486
|
if (!customElements.get(tagName)) {
|
|
467
487
|
customElements.define(tagName, FileUpload);
|
|
468
488
|
}
|
|
469
489
|
break;
|
|
490
|
+
case "nano-cta":
|
|
491
|
+
if (!customElements.get(tagName)) {
|
|
492
|
+
defineCustomElement$5();
|
|
493
|
+
}
|
|
494
|
+
break;
|
|
470
495
|
case "nano-icon":
|
|
471
496
|
if (!customElements.get(tagName)) {
|
|
472
497
|
defineCustomElement$4();
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
4
|
+
import { proxyCustomElement, HTMLElement, Build, h, getAssetPath } from '@stencil/core/internal/client';
|
|
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
|
|
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: 912px) {\n :host .top,\n :host .middle,\n :host .bottom {\n grid-template-columns: 1fr;\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() {
|
|
@@ -15,10 +15,11 @@ const NanoFooter$1 = /*@__PURE__*/ proxyCustomElement(class NanoFooter extends H
|
|
|
15
15
|
}
|
|
16
16
|
get host() { return this; }
|
|
17
17
|
componentWillLoad() {
|
|
18
|
-
|
|
18
|
+
if (Build.isBrowser)
|
|
19
|
+
addGlobalStylesheetToShadow(this.host.shadowRoot);
|
|
19
20
|
}
|
|
20
21
|
render() {
|
|
21
|
-
return (h("footer", { key: '
|
|
22
|
+
return (h("footer", { key: '7df3395d83480c2efaffd3a745dcb8486492ec8d', class: "footer" }, h("div", { key: '2277f9b209312a0be9c503590f9871c3da7ab7c5', class: "upper" }, h("div", { key: '43ca2ad3f23948f23d787c3179f6012021fe0786', class: "top" }, h("div", { key: '05ee9cb69076053c9accbae4d188232d344e7bf0', class: "top-start" }, h("slot", { key: 'a34bf50a87e10191e65d0be67f88c16abcf48304', name: "top-start_heading" }), h("slot", { key: 'db386e86277ae22fa9b5e7723c78ec48b4ff5444', name: "top-start_content" })), h("div", { key: '061fd17bfdb8ad8af11dce8cd3abac07d7c58290', class: "top-center" }, h("slot", { key: '885c3acef88311528147a249ca29003ec64b10c0', name: "top-center_heading" }), h("slot", { key: '8d4f513adfd5f24880ca76a214d2d2051d3b9ad7', name: "top-center_content" })), h("div", { key: 'f6138faa2e07af7e9e46a20e1510708f58ddba27', class: "top-end" }, h("slot", { key: 'aa7570bfa51e27ec2745b2563db6736c1b7def19', name: "top-end_heading" }), h("slot", { key: '9dd64f4ad61d9a0d5dd1b305e9089c5190e89738', name: "top-end_content" })))), h("div", { key: 'bbf554d8a85ee66cf0a38f82a8de608615510722', class: "lower nano-theme-dark" }, h("div", { key: '4a46e9541cc2fa7b45cfa3fd3a8628e5aed47eae', class: "middle" }, h("div", { key: 'ef13e5c2a35f64533bba7522fa34c964c4ee8acc', class: "middle-start" }, h("img", { key: '2bf403ca600f0588be99898b4e0a42ee5f64f736', src: getAssetPath('../nano-assets/ont-logo-light.svg'), alt: "Oxford Nanopore Technologies logo. Featuring a stylised representation of a nanopore,\n (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.", height: "46" })), h("div", { key: 'c3796b77148a0ba37fba2a7d1f3583233294de22', class: "middle-center" }, h("a", { key: 'abd8ff0fcbb1b3e7365090310c67ae0c29a8073f', href: "https://x.com/nanopore", target: "_blank" }, h("nano-icon", { key: '78ec0f32afa4da8f87fce46f36c2958a61cadaef', name: "brands/x-twitter", size: "large", ariaLabel: "X (formerly Twitter)" })), h("a", { key: '28315142cc17313a65d9039601b26bbe2400d715', href: "https://bsky.app/profile/nanoporetech.com", target: "_blank" }, h("nano-icon", { key: '155bedeeea937afe7740c867f9780ad26dd6eadf', name: "brands/bluesky", size: "large", ariaLabel: "Bluesky" })), h("a", { key: '4047f00cd32d045bd46660aaa9eb17536a5555f4', href: "https://www.youtube.com/channel/UC5yMlYjHSgFfZ37LYq-dzig", target: "_blank" }, h("nano-icon", { key: '63e9bb9f849a10b70b1a5cd32c1f9545587f8902', name: "brands/youtube", size: "large", ariaLabel: "YouTube" })), h("a", { key: 'fd2f4d639c13c99523a9f026457414aa805171bc', href: "https://www.facebook.com/Oxford-Nanopore-Technologies-251034380246/", target: "_blank" }, h("nano-icon", { key: '71a31a51945079e3419ce150a7908db2125a6523', name: "brands/facebook", size: "large", ariaLabel: "Facebook" })), h("a", { key: '426b6c582345b1e32bbd0e6ca206a75cd56ed434', href: "https://www.linkedin.com/company/oxford-nanopore-technologies", target: "_blank" }, h("nano-icon", { key: 'ec8256f6a70d0bb68beacab2a8c8adc381d26661', name: "brands/linkedin", size: "large", ariaLabel: "LinkedIn" })), h("a", { key: 'ddf5456cb764238fb5d932b2b44cf5466e82ad2f', href: "https://www.instagram.com/oxfordnanopore", target: "_blank" }, h("nano-icon", { key: '293464c660b8734f0bae8eb612c8377e763b8053', name: "brands/instagram", size: "large", ariaLabel: "Instagram" }))), h("div", { key: '6b7ed0e2ad110329ce9c5e4e085278d4e7dd4568', class: "middle-end" }, h("slot", { key: '15c3d94e8f35ee98fafdc6f062d9639b0ac54b63', name: "middle-end" }))), h("div", { key: 'a72b24bd18b825b160608a1b20e221b37c070bc4', class: "bottom" }, h("div", { key: 'a63f935bacfc660dc1c45e0dcb43514272837fdd', class: "bottom-start" }, h("slot", { key: '1fb95aa9e6da5ae676470cf532c47ecbe5ae0015', name: "bottom-start" }, h("p", { key: 'd78582a9baa27c818155577a7a49ccbc6b0fe141' }, "\u00A9 2008 - 2025 Oxford Nanopore Technologies plc. All rights reserved. Registered Office: Gosling Building, Edmund Halley Road, Oxford Science Park, OX4 4DQ, UK | Registered No. 05386273 | VAT No 336942382. Oxford Nanopore Technologies, the Wheel icon, EPI2ME, Flongle, GridION, Metrichor, MinION, MinIT, MinKNOW, Plongle, PromethION, SmidgION, Ubik and VolTRAX are registered trademarks of Oxford Nanopore Technologies plc in various countries. Oxford Nanopore Technologies products are not intended for use for health assessment or to diagnose, treat, mitigate, cure, or prevent any disease or condition."))), h("div", { key: '08a48aaf322de5c4292e24803e8ca6da40e1e3c5', class: "bottom-end" }, h("slot", { key: '81873c5375cc33b1f1b533354b960a66eadaf94b', name: "bottom-end" }))))));
|
|
22
23
|
}
|
|
23
24
|
static get style() { return footerCss; }
|
|
24
25
|
}, [1, "nano-footer"]);
|
|
@@ -56,9 +56,13 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
56
56
|
cartCount = 0;
|
|
57
57
|
/** MyAccount un-read message count. */
|
|
58
58
|
msgCount = 0;
|
|
59
|
-
/** Manually
|
|
60
|
-
async
|
|
61
|
-
this.overflowOpen =
|
|
59
|
+
/** Manually open the overflow menu */
|
|
60
|
+
async openOverflowMenu() {
|
|
61
|
+
this.overflowOpen = true;
|
|
62
|
+
}
|
|
63
|
+
/** Manually close the overflow menu */
|
|
64
|
+
async closeOverflowMenu() {
|
|
65
|
+
this.overflowOpen = false;
|
|
62
66
|
}
|
|
63
67
|
/// MY-ACCOUNT - start ///
|
|
64
68
|
/** A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url */
|
|
@@ -485,20 +489,20 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
485
489
|
}
|
|
486
490
|
render() {
|
|
487
491
|
const bpps = this.bpPartials;
|
|
488
|
-
return (h(Host, { key: '
|
|
492
|
+
return (h(Host, { key: '184e0e7a9468ebb9d60cfac752d955358a4fe0fe', class: {
|
|
489
493
|
'overflow-menu': this.breakpoint > bpps.mainMenu.breakpoint,
|
|
490
494
|
'bar-menu': this.breakpoint <= bpps.mainMenu.breakpoint,
|
|
491
495
|
'nano-global-nav': true,
|
|
492
|
-
} }, h("div", { key: '
|
|
496
|
+
} }, h("div", { key: '8eaa12e98b9a38721b9f03e2d646d20add74b3e6', class: {
|
|
493
497
|
gn: true,
|
|
494
498
|
'gn__search-open': this.searchBarShown,
|
|
495
|
-
} }, h("nano-drawer", { key: '
|
|
499
|
+
} }, h("nano-drawer", { key: 'b874e6c5aa026ed4c266601c52d41859857f38b5', 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: '29e9160530cb0bfbc335cbae26a22a4a3fecdff7', class: "gn__drawer-header", part: "overflow-header", slot: "label" }, "Main menu"), h("nav", { key: '0b09f539037bd906065f5cf2cc6e806173d97b66', class: "gn__drawer-menu", part: "overflow-menu" }, this.breakpoint > bpps.mainMenu.breakpoint
|
|
496
500
|
? bpps.mainMenu.tpl()
|
|
497
|
-
: '', h("slot", { key: '
|
|
501
|
+
: '', h("slot", { key: '197989ea9849d9143024538c26b2678c6220e6d4', name: "overflow" }))), h("div", { key: 'ce2b19cb76ff12eda8c4589ac188749ba3684c9f', class: "gn__menu-bar-wrapper" }, h("div", { key: '11c7745248090f0163a2a505fb5a20f56fdd11d2', class: "gn__menu-bar", part: "menu-bar", ref: (el) => (this.mainMenuBar = el) }, h("nav", { key: 'a797355c5204357100884bf865d5ffb58967028e', 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: '0bf6477cd3dac4dd6cb0f55dd3ff3a313b55fb84', class: "gn__overflow-button", iconName: "light/bars", label: "Open Menu", onClick: () => this.overflowMenu.show() })), h("slot", { key: '8dbb4a02f736efcddc019aa602953ff41c5eb15e', name: "logo" }, h("a", { key: '5d60a835f364ada7ae8d8ee7b608df9b75443c26', 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,
|
|
498
502
|
(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,
|
|
499
|
-
(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: '
|
|
503
|
+
(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: '4270c5dc3e334ca906debe763771acc1dc4dd82b', class: "gn__main-menu-links" }, bpps.mainMenu.tpl())), h("div", { key: '7f39cd0f1338a1124a6c59c18774c62d7b3e36e7', class: "gn__main-menu-actions" }, h("nano-dropdown", { key: '503d51cd5f72ad19203bab7939230f8f7a7f4bd3', 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: '0a82c9022cb41265d8cb969057404ad32d7179f2', class: "gn__search-button", slot: "trigger", iconName: "light/magnifying-glass", label: "Search" }), !!this.searchIndices.length && (h("form", { key: 'ee9b0742d2e8e6c3e51d35de68141bedb3677081', ref: (form) => (this.searchForm = form), class: "gn__search-form", part: "search-form", onSubmit: this.onSearchSubmit }, this.searchIndices.length > 1 && (h("nano-select", { key: 'df0da7c60f0ced0d52eeb84360a7215d7247a5e7', 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: '83bdee0aca807f594505c657a4b1aeaabdb8a3d0', ref: (ele) => (this.searchInput = ele), part: "search-input", label: "Search Oxford Nanopore Technologies", placeholder: "Search Oxford Nanopore...", hideLabel: true, clearable: true, onNanoChange: (e) => {
|
|
500
504
|
this.handleSearchTermChangeEvent(e.detail.value);
|
|
501
|
-
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '
|
|
505
|
+
}, onNanoInput: this.handleSearchTermInputEvent, debounce: 500, value: this._searchValue }, h("nano-icon", { key: '2f7a3e620d015b8d56044d048ed49ee6a6e29ba4', slot: "end", name: "light/magnifying-glass" }), h("nano-datalist", { key: '528da1d7293b7589ce34a00007e83cf00ac71547', class: "gn__search-results", onNanoSelect: (e) => e.preventDefault(), dropDownConfig: { tetherTo: this.searchForm }, disableFilter: true }, this.searchLoading && (h("div", { key: 'f1556946842927cd1aa65a97346bc3ce1886311e', slot: "no-result", class: "gn__search-loading" }, h("nano-spinner", { key: 'b7d9e741bdbcde586cb1734961b628de31aca103' }, "Searching..."))), this.noResultPartial(), !!this.autocompleteResults?.hits.length && [
|
|
502
506
|
this.autocompleteResults.hits.map((hit, i) => (h("nano-option", { href: hit.url, class: "gn__search-result", onClick: () => {
|
|
503
507
|
searchInsight.sendClick({
|
|
504
508
|
index: this.activeIndex.index,
|
|
@@ -508,10 +512,10 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
508
512
|
positions: [i + 1],
|
|
509
513
|
});
|
|
510
514
|
} }, h("span", { innerHTML: this.autocompleteSnippet(hit) })))),
|
|
511
|
-
h("nano-option", { key: '
|
|
512
|
-
]))))), h("div", { key: '
|
|
515
|
+
h("nano-option", { key: '88e617068d30bfa4ca09f6b122109d9a3539088b', class: "gn__search-viewall", onNanoSelect: this.onSearchSubmit }, "View all results"),
|
|
516
|
+
]))))), h("div", { key: 'acceaf54481ab87951bbd9384f079c9d37fa0663', class: "gn__cart" }, h("nano-icon-button", { key: '6bed2b6a26492c9e7e4fe205b9ef94845360327d', iconName: "light/cart-shopping", label: "View your cart", href: this.cartUrl }), !!this.cartCount && (h("nano-badge", { key: '4034d7828876c1237b1869abeb977e258d55006b', theme: "danger", strength: "2" }, this.cartCount > 9 ? '9+' : this.cartCount))), this.breakpoint <= bpps.contact.breakpoint
|
|
513
517
|
? bpps.contact.tpl()
|
|
514
|
-
: '', 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("div", { key: '
|
|
518
|
+
: '', 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("div", { key: 'f52e45cccc15b745f54978bc140816847dc66560', class: "gn__site", part: "site-wrapper" }, h("nano-global-search-results", { key: '0dd16b2bb789a66f3ef5b214ea54609aedad3ae4', part: "site-search-results" }, h("slot", { key: '3a86b5ee10f5da29d3da8d06b2b6ad36f27e725c' }))))));
|
|
515
519
|
}
|
|
516
520
|
static get assetsDirs() { return ["assets"]; }
|
|
517
521
|
static get watchers() { return {
|
|
@@ -546,7 +550,8 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class GlobalNav extends HTMLE
|
|
|
546
550
|
"searchBarShown": [32],
|
|
547
551
|
"searchLoading": [32],
|
|
548
552
|
"_searchValue": [32],
|
|
549
|
-
"
|
|
553
|
+
"openOverflowMenu": [64],
|
|
554
|
+
"closeOverflowMenu": [64],
|
|
550
555
|
"submitSearch": [64]
|
|
551
556
|
}, undefined, {
|
|
552
557
|
"myAccountUrl": ["handleMyAccountUrl"],
|