@nanoporetech-digital/components 3.13.0 → 4.0.0
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/CHANGELOG.md +51 -0
- package/dist/cjs/{algolia-data-533e3a95.js → algolia-data-ed53eaa8.js} +2 -2
- package/dist/cjs/{algolia-data-533e3a95.js.map → algolia-data-ed53eaa8.js.map} +1 -1
- package/dist/cjs/{component-store-5ad4de07.js → component-store-74d25f63.js} +2 -2
- package/dist/cjs/{component-store-5ad4de07.js.map → component-store-74d25f63.js.map} +1 -1
- package/dist/cjs/{form-control-80c69d1d.js → form-control-2e900f54.js} +2 -2
- package/dist/cjs/{form-control-80c69d1d.js.map → form-control-2e900f54.js.map} +1 -1
- package/dist/cjs/{index-46286eea.js → index-71f899a7.js} +85 -42
- package/dist/cjs/index-71f899a7.js.map +1 -0
- package/dist/cjs/{index-b13f69e7.js → index-99649bef.js} +2 -2
- package/dist/cjs/{index-b13f69e7.js.map → index-99649bef.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/nano-accordion.cjs.entry.js +1 -1
- package/dist/cjs/nano-alert.cjs.entry.js +2 -2
- package/dist/cjs/nano-algolia-filter.cjs.entry.js +3 -3
- package/dist/cjs/nano-algolia-input.cjs.entry.js +3 -3
- package/dist/cjs/nano-algolia-pagination.cjs.entry.js +2 -2
- package/dist/cjs/nano-algolia-results.cjs.entry.js +2 -2
- package/dist/cjs/nano-algolia.cjs.entry.js +3 -3
- package/dist/cjs/nano-aspect-ratio.cjs.entry.js +1 -1
- package/dist/cjs/nano-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/nano-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/nano-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-components.cjs.js +3 -3
- package/dist/cjs/nano-components.cjs.js.map +1 -1
- package/dist/cjs/nano-datalist_3.cjs.entry.js +1 -1
- package/dist/cjs/nano-date-input.cjs.entry.js +1 -1
- package/dist/cjs/nano-date-picker.cjs.entry.js +1 -1
- package/dist/cjs/nano-demo.cjs.entry.js +1 -1
- package/dist/cjs/nano-details.cjs.entry.js +2 -2
- package/dist/cjs/nano-dialog.cjs.entry.js +3 -3
- package/dist/cjs/nano-drawer.cjs.entry.js +2 -2
- package/dist/cjs/nano-drawer.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/nano-field-validator.cjs.entry.js +2 -2
- package/dist/cjs/nano-file-upload.cjs.entry.js +1 -1
- package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +5 -5
- package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-global-nav.cjs.entry.js +61 -75
- package/dist/cjs/nano-global-nav.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-global-search-results.cjs.entry.js +1 -1
- package/dist/cjs/nano-grid_3.cjs.entry.js +2 -2
- package/dist/cjs/nano-grid_3.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-hero.cjs.entry.js +2 -2
- package/dist/cjs/nano-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-icon-button.cjs.entry.js +1 -1
- package/dist/cjs/nano-icon.cjs.entry.js +2 -2
- package/dist/cjs/nano-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-input.cjs.entry.js +2 -2
- package/dist/cjs/nano-menu-drawer.cjs.entry.js +1 -1
- package/dist/cjs/nano-overflow-nav.cjs.entry.js +282 -0
- package/dist/cjs/nano-overflow-nav.cjs.entry.js.map +1 -0
- package/dist/cjs/nano-progress-bar_2.cjs.entry.js +1 -1
- package/dist/cjs/nano-progress-bar_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-range.cjs.entry.js +1 -1
- package/dist/cjs/nano-range.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-rating.cjs.entry.js +1 -1
- package/dist/cjs/nano-resize-observe_2.cjs.entry.js +4 -4
- package/dist/cjs/nano-resize-observe_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-slide.cjs.entry.js +1 -1
- package/dist/cjs/nano-slides.cjs.entry.js +11 -14
- package/dist/cjs/nano-slides.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-spinner.cjs.entry.js +1 -1
- package/dist/cjs/nano-spinner.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-split-pane.cjs.entry.js +1 -1
- package/dist/cjs/nano-sticker.cjs.entry.js +1 -1
- package/dist/cjs/nano-tab-content.cjs.entry.js +1 -1
- package/dist/cjs/nano-tab-group.cjs.entry.js +4 -4
- package/dist/cjs/nano-tab.cjs.entry.js +2 -2
- package/dist/cjs/nano-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/{nano-table-60c06885.js → nano-table-737365b7.js} +4 -4
- package/dist/cjs/{nano-table-60c06885.js.map → nano-table-737365b7.js.map} +1 -1
- package/dist/cjs/nano-table.cjs.entry.js +3 -3
- package/dist/cjs/{scroll-a197d9c4.js → scroll-6a9bedb4.js} +15 -8
- package/dist/cjs/scroll-6a9bedb4.js.map +1 -0
- package/dist/cjs/{table.worker-f902766e.js → table.worker-c3b11144.js} +4 -4
- package/dist/cjs/table.worker-c3b11144.js.map +1 -0
- package/dist/cjs/{transitions-5cd8f697.js → transitions-1205f12b.js} +3 -3
- package/dist/cjs/transitions-1205f12b.js.map +1 -0
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/checkbox/checkbox.css +3 -3
- package/dist/collection/components/drawer/drawer.css +1 -1
- package/dist/collection/components/global-nav/global-nav-user-profile.js +1 -1
- package/dist/collection/components/global-nav/global-nav-user-profile.js.map +1 -1
- package/dist/collection/components/global-nav/global-nav.js +60 -73
- package/dist/collection/components/global-nav/global-nav.js.map +1 -1
- package/dist/collection/components/global-nav/style/global-nav.css +4 -3
- package/dist/collection/components/hero/hero.css +2 -2
- package/dist/collection/components/icon/utils.js +1 -1
- package/dist/collection/components/icon/utils.js.map +1 -1
- package/dist/collection/components/img/img.css +1 -1
- package/dist/collection/components/input/input.css +3 -3
- package/dist/collection/components/nav-item/nav-item.css +2 -0
- package/dist/collection/components/overflow-nav/overflow-nav.css +223 -0
- package/dist/collection/components/overflow-nav/overflow-nav.js +441 -0
- package/dist/collection/components/overflow-nav/overflow-nav.js.map +1 -0
- package/dist/collection/components/progress-bar/progress-bar.css +2 -2
- package/dist/collection/components/range/range.css +1 -1
- package/dist/collection/components/resize-observe/resize-observe.js +5 -5
- package/dist/collection/components/resize-observe/resize-observe.js.map +1 -1
- package/dist/collection/components/select/select.css +3 -3
- package/dist/collection/components/slides/slides.css +5 -1
- package/dist/collection/components/slides/slides.js +9 -12
- package/dist/collection/components/slides/slides.js.map +1 -1
- package/dist/collection/components/spinner/spinner.css +2 -2
- package/dist/collection/components/tabs/tab.css +3 -3
- package/dist/collection/utils/scroll.js +14 -7
- package/dist/collection/utils/scroll.js.map +1 -1
- package/dist/collection/utils/transitions.js +2 -2
- package/dist/collection/utils/transitions.js.map +1 -1
- package/dist/components/global-nav-user-profile.js +1 -1
- package/dist/components/global-nav-user-profile.js.map +1 -1
- package/dist/components/icon.js +1 -1
- package/dist/components/icon.js.map +1 -1
- package/dist/components/img.js +1 -1
- package/dist/components/img.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/nano-checkbox.js.map +1 -1
- package/dist/components/nano-drawer.js.map +1 -1
- package/dist/components/nano-global-nav.js +59 -74
- package/dist/components/nano-global-nav.js.map +1 -1
- package/dist/components/nano-hero.js +1 -1
- package/dist/components/nano-hero.js.map +1 -1
- package/dist/components/nano-overflow-nav.d.ts +11 -0
- package/dist/components/nano-overflow-nav.js +317 -0
- package/dist/components/nano-overflow-nav.js.map +1 -0
- package/dist/components/nano-range.js.map +1 -1
- package/dist/components/nano-slides.js +10 -13
- package/dist/components/nano-slides.js.map +1 -1
- package/dist/components/nano-tab.js +1 -1
- package/dist/components/nano-tab.js.map +1 -1
- package/dist/components/nav-item.js +1 -1
- package/dist/components/nav-item.js.map +1 -1
- package/dist/components/progress-bar.js.map +1 -1
- package/dist/components/resize-observe.js +3 -3
- package/dist/components/resize-observe.js.map +1 -1
- package/dist/components/scroll.js +14 -7
- package/dist/components/scroll.js.map +1 -1
- package/dist/components/spinner.js.map +1 -1
- package/dist/components/transitions.js +2 -2
- package/dist/components/transitions.js.map +1 -1
- package/dist/esm/{algolia-data-e5e86f12.js → algolia-data-ef2829e0.js} +2 -2
- package/dist/esm/{algolia-data-e5e86f12.js.map → algolia-data-ef2829e0.js.map} +1 -1
- package/dist/esm/{component-store-2044c2c2.js → component-store-244a8431.js} +2 -2
- package/dist/esm/{component-store-2044c2c2.js.map → component-store-244a8431.js.map} +1 -1
- package/dist/esm/{form-control-4f3a88a1.js → form-control-269ba84f.js} +2 -2
- package/dist/esm/{form-control-4f3a88a1.js.map → form-control-269ba84f.js.map} +1 -1
- package/dist/esm/{index-728dda31.js → index-5d0f4704.js} +2 -2
- package/dist/esm/{index-728dda31.js.map → index-5d0f4704.js.map} +1 -1
- package/dist/esm/{index-52b0408e.js → index-dad5627b.js} +85 -42
- package/dist/esm/index-dad5627b.js.map +1 -0
- package/dist/esm/loader.js +4 -4
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/nano-accordion.entry.js +1 -1
- package/dist/esm/nano-alert.entry.js +2 -2
- package/dist/esm/nano-algolia-filter.entry.js +3 -3
- package/dist/esm/nano-algolia-input.entry.js +3 -3
- package/dist/esm/nano-algolia-pagination.entry.js +2 -2
- package/dist/esm/nano-algolia-results.entry.js +2 -2
- package/dist/esm/nano-algolia.entry.js +3 -3
- package/dist/esm/nano-aspect-ratio.entry.js +1 -1
- package/dist/esm/nano-checkbox-group.entry.js +1 -1
- package/dist/esm/nano-checkbox.entry.js +1 -1
- package/dist/esm/nano-checkbox.entry.js.map +1 -1
- package/dist/esm/nano-components.js +4 -4
- package/dist/esm/nano-components.js.map +1 -1
- package/dist/esm/nano-datalist_3.entry.js +1 -1
- package/dist/esm/nano-date-input.entry.js +1 -1
- package/dist/esm/nano-date-picker.entry.js +1 -1
- package/dist/esm/nano-demo.entry.js +1 -1
- package/dist/esm/nano-details.entry.js +2 -2
- package/dist/esm/nano-dialog.entry.js +3 -3
- package/dist/esm/nano-drawer.entry.js +2 -2
- package/dist/esm/nano-drawer.entry.js.map +1 -1
- package/dist/esm/nano-dropdown.entry.js +1 -1
- package/dist/esm/nano-field-validator.entry.js +2 -2
- package/dist/esm/nano-file-upload.entry.js +1 -1
- package/dist/esm/nano-global-nav-user-profile_3.entry.js +5 -5
- package/dist/esm/nano-global-nav-user-profile_3.entry.js.map +1 -1
- package/dist/esm/nano-global-nav.entry.js +61 -75
- package/dist/esm/nano-global-nav.entry.js.map +1 -1
- package/dist/esm/nano-global-search-results.entry.js +1 -1
- package/dist/esm/nano-grid_3.entry.js +2 -2
- package/dist/esm/nano-grid_3.entry.js.map +1 -1
- package/dist/esm/nano-hero.entry.js +2 -2
- package/dist/esm/nano-hero.entry.js.map +1 -1
- package/dist/esm/nano-icon-button.entry.js +1 -1
- package/dist/esm/nano-icon.entry.js +2 -2
- package/dist/esm/nano-icon.entry.js.map +1 -1
- package/dist/esm/nano-input.entry.js +2 -2
- package/dist/esm/nano-menu-drawer.entry.js +1 -1
- package/dist/esm/nano-overflow-nav.entry.js +278 -0
- package/dist/esm/nano-overflow-nav.entry.js.map +1 -0
- package/dist/esm/nano-progress-bar_2.entry.js +1 -1
- package/dist/esm/nano-progress-bar_2.entry.js.map +1 -1
- package/dist/esm/nano-range.entry.js +1 -1
- package/dist/esm/nano-range.entry.js.map +1 -1
- package/dist/esm/nano-rating.entry.js +1 -1
- package/dist/esm/nano-resize-observe_2.entry.js +4 -4
- package/dist/esm/nano-resize-observe_2.entry.js.map +1 -1
- package/dist/esm/nano-slide.entry.js +1 -1
- package/dist/esm/nano-slides.entry.js +11 -14
- package/dist/esm/nano-slides.entry.js.map +1 -1
- package/dist/esm/nano-spinner.entry.js +1 -1
- package/dist/esm/nano-spinner.entry.js.map +1 -1
- package/dist/esm/nano-split-pane.entry.js +1 -1
- package/dist/esm/nano-sticker.entry.js +1 -1
- package/dist/esm/nano-tab-content.entry.js +1 -1
- package/dist/esm/nano-tab-group.entry.js +4 -4
- package/dist/esm/nano-tab.entry.js +2 -2
- package/dist/esm/nano-tab.entry.js.map +1 -1
- package/dist/esm/{nano-table-e64af51e.js → nano-table-75d755ae.js} +4 -4
- package/dist/esm/{nano-table-e64af51e.js.map → nano-table-75d755ae.js.map} +1 -1
- package/dist/esm/nano-table.entry.js +3 -3
- package/dist/esm/{scroll-e5825d8d.js → scroll-952d292a.js} +15 -8
- package/dist/esm/scroll-952d292a.js.map +1 -0
- package/dist/esm/{table.worker-2f887b5f.js → table.worker-d60d6df4.js} +4 -4
- package/dist/esm/table.worker-d60d6df4.js.map +1 -0
- package/dist/esm/{transitions-71cca3ed.js → transitions-686c5fec.js} +3 -3
- package/dist/esm/transitions-686c5fec.js.map +1 -0
- package/dist/nano-components/nano-components.css +1 -1
- package/dist/nano-components/nano-components.esm.js +1 -1
- package/dist/nano-components/nano-components.esm.js.map +1 -1
- package/dist/nano-components/{p-f25d2e90.entry.js → p-053eb1df.entry.js} +2 -2
- package/dist/nano-components/{p-ad3ddbc8.entry.js → p-068bdd89.entry.js} +2 -2
- package/dist/nano-components/{p-e4505f00.entry.js → p-0d1ca590.entry.js} +2 -2
- package/dist/nano-components/{p-ece694af.entry.js → p-104b7e3a.entry.js} +2 -2
- package/dist/nano-components/p-104b7e3a.entry.js.map +1 -0
- package/dist/nano-components/p-107d4549.entry.js +5 -0
- package/dist/nano-components/p-107d4549.entry.js.map +1 -0
- package/dist/nano-components/p-15217442.entry.js +5 -0
- package/dist/nano-components/p-15217442.entry.js.map +1 -0
- package/dist/nano-components/p-1b7bad31.entry.js +5 -0
- package/dist/nano-components/{p-93bece01.entry.js → p-1c6c94cb.entry.js} +2 -2
- package/dist/nano-components/{p-a9beb006.entry.js → p-207a1fbc.entry.js} +2 -2
- package/dist/nano-components/{p-d32dafd9.entry.js → p-239d343a.entry.js} +2 -2
- package/dist/nano-components/{p-d32dafd9.entry.js.map → p-239d343a.entry.js.map} +1 -1
- package/dist/nano-components/{p-dab8526f.entry.js → p-288dbe6b.entry.js} +2 -2
- package/dist/nano-components/{p-7b21ec0b.entry.js → p-30d55046.entry.js} +2 -2
- package/dist/nano-components/{p-add3ac22.js → p-42e7f253.js} +2 -2
- package/dist/nano-components/{p-378fe272.entry.js → p-57085052.entry.js} +2 -2
- package/dist/nano-components/{p-8f888280.entry.js → p-578f5e8d.entry.js} +2 -2
- package/dist/nano-components/{p-17eebe94.entry.js → p-583d8d70.entry.js} +2 -2
- package/dist/nano-components/p-583d8d70.entry.js.map +1 -0
- package/dist/nano-components/{p-6bb4545b.entry.js → p-5984ae16.entry.js} +2 -2
- package/dist/nano-components/{p-76d8a8a8.js → p-5ac74848.js} +2 -2
- package/dist/nano-components/{p-ebb61a70.entry.js → p-5d466a58.entry.js} +2 -2
- package/dist/nano-components/p-60a8c896.js +5 -0
- package/dist/nano-components/{p-e113074e.entry.js → p-68928c59.entry.js} +2 -2
- package/dist/nano-components/p-68928c59.entry.js.map +1 -0
- package/dist/nano-components/{p-3667832c.entry.js → p-7304107c.entry.js} +2 -2
- package/dist/nano-components/{p-16e45583.entry.js → p-76a650b1.entry.js} +2 -2
- package/dist/nano-components/{p-09751447.entry.js → p-7d6065c6.entry.js} +2 -2
- package/dist/nano-components/{p-07b6af21.entry.js → p-935aef3d.entry.js} +2 -2
- package/dist/nano-components/{p-8065d85b.entry.js → p-93cfbdb6.entry.js} +2 -2
- package/dist/nano-components/p-9dfe2c55.entry.js +5 -0
- package/dist/nano-components/{p-f486c940.entry.js.map → p-9dfe2c55.entry.js.map} +1 -1
- package/dist/nano-components/{p-b65e0e63.js → p-9ebbb814.js} +2 -2
- package/dist/nano-components/{p-a26a7de3.entry.js → p-a1c0afb6.entry.js} +2 -2
- package/dist/nano-components/{p-76ab079e.entry.js → p-a5a560e7.entry.js} +2 -2
- package/dist/nano-components/{p-9d1432be.js → p-a6ff5ca6.js} +2 -2
- package/dist/nano-components/{p-4bbb04d3.entry.js → p-a761ac89.entry.js} +2 -2
- package/dist/nano-components/p-a761ac89.entry.js.map +1 -0
- package/dist/nano-components/{p-62e3646b.entry.js → p-ac0ac58f.entry.js} +2 -2
- package/dist/nano-components/p-b2655717.entry.js +5 -0
- package/dist/nano-components/p-b2655717.entry.js.map +1 -0
- package/dist/nano-components/{p-63f1e229.entry.js → p-b6306aff.entry.js} +2 -2
- package/dist/nano-components/p-b6306aff.entry.js.map +1 -0
- package/dist/nano-components/{p-3e7153c8.entry.js → p-cba50c3e.entry.js} +2 -2
- package/dist/nano-components/{p-ce07df57.entry.js → p-cd2f5e97.entry.js} +2 -2
- package/dist/nano-components/p-d0e15e46.entry.js +5 -0
- package/dist/nano-components/p-d0e15e46.entry.js.map +1 -0
- package/dist/nano-components/p-d4cebdef.entry.js +5 -0
- package/dist/nano-components/p-d4cebdef.entry.js.map +1 -0
- package/dist/nano-components/{p-dc88e52b.entry.js → p-d792f692.entry.js} +2 -2
- package/dist/nano-components/p-d792f692.entry.js.map +1 -0
- package/dist/nano-components/p-d7c34990.js +5 -0
- package/dist/nano-components/{p-45b7682a.js.map → p-d7c34990.js.map} +1 -1
- package/dist/nano-components/p-d98c6a62.js +5 -0
- package/dist/nano-components/{p-3d27d563.entry.js → p-db370094.entry.js} +4 -4
- package/dist/nano-components/{p-3d27d563.entry.js.map → p-db370094.entry.js.map} +1 -1
- package/dist/nano-components/{p-47866646.entry.js → p-e41baa11.entry.js} +2 -2
- package/dist/nano-components/{p-9be2cba5.entry.js → p-e43f76c8.entry.js} +2 -2
- package/dist/nano-components/{p-7f545755.entry.js → p-eab09335.entry.js} +2 -2
- package/dist/nano-components/p-f471a392.entry.js +5 -0
- package/dist/nano-components/p-f471a392.entry.js.map +1 -0
- package/dist/nano-components/p-f6a8467a.js +6 -0
- package/dist/nano-components/p-f6a8467a.js.map +1 -0
- package/dist/nano-components/p-f6de2d5d.js +5 -0
- package/dist/nano-components/p-f6de2d5d.js.map +1 -0
- package/dist/nano-components/{p-a20d2028.entry.js → p-f93bd976.entry.js} +2 -2
- package/dist/nano-components/{p-36a2f1c0.entry.js → p-fe7a0158.entry.js} +2 -2
- package/dist/nano-components/{p-6a5ae656.entry.js → p-fecb72b9.entry.js} +2 -2
- package/dist/themes/nanopore.cn.css +1 -0
- package/dist/themes/nanopore.cn.css.map +1 -0
- package/dist/types/components/global-nav/global-nav.d.ts +2 -1
- package/dist/types/components/overflow-nav/overflow-nav.d.ts +78 -0
- package/dist/types/components/resize-observe/resize-observe.d.ts +4 -2
- package/dist/types/components.d.ts +90 -1
- package/dist/types/utils/transitions.d.ts +1 -1
- package/docs-json.json +299 -23
- package/docs-vscode.json +26 -1
- package/hydrate/index.js +431 -116
- package/package.json +3 -3
- package/dist/cjs/index-46286eea.js.map +0 -1
- package/dist/cjs/scroll-a197d9c4.js.map +0 -1
- package/dist/cjs/table.worker-f902766e.js.map +0 -1
- package/dist/cjs/transitions-5cd8f697.js.map +0 -1
- package/dist/esm/index-52b0408e.js.map +0 -1
- package/dist/esm/scroll-e5825d8d.js.map +0 -1
- package/dist/esm/table.worker-2f887b5f.js.map +0 -1
- package/dist/esm/transitions-71cca3ed.js.map +0 -1
- package/dist/nano-components/p-0e2f0040.entry.js +0 -5
- package/dist/nano-components/p-0e2f0040.entry.js.map +0 -1
- package/dist/nano-components/p-167b9165.js +0 -5
- package/dist/nano-components/p-167b9165.js.map +0 -1
- package/dist/nano-components/p-17eebe94.entry.js.map +0 -1
- package/dist/nano-components/p-1aff5304.entry.js +0 -5
- package/dist/nano-components/p-1aff5304.entry.js.map +0 -1
- package/dist/nano-components/p-45b7682a.js +0 -5
- package/dist/nano-components/p-4bbb04d3.entry.js.map +0 -1
- package/dist/nano-components/p-63f1e229.entry.js.map +0 -1
- package/dist/nano-components/p-6ef53fa1.js +0 -6
- package/dist/nano-components/p-6ef53fa1.js.map +0 -1
- package/dist/nano-components/p-7733f1f8.entry.js +0 -5
- package/dist/nano-components/p-7733f1f8.entry.js.map +0 -1
- package/dist/nano-components/p-80ddfa30.entry.js +0 -5
- package/dist/nano-components/p-80ecc273.entry.js +0 -5
- package/dist/nano-components/p-80ecc273.entry.js.map +0 -1
- package/dist/nano-components/p-a145fbc1.js +0 -5
- package/dist/nano-components/p-b4b55f64.entry.js +0 -5
- package/dist/nano-components/p-b4b55f64.entry.js.map +0 -1
- package/dist/nano-components/p-d518b939.js +0 -5
- package/dist/nano-components/p-dc88e52b.entry.js.map +0 -1
- package/dist/nano-components/p-e113074e.entry.js.map +0 -1
- package/dist/nano-components/p-ece694af.entry.js.map +0 -1
- package/dist/nano-components/p-f486c940.entry.js +0 -5
- /package/dist/nano-components/{p-f25d2e90.entry.js.map → p-053eb1df.entry.js.map} +0 -0
- /package/dist/nano-components/{p-ad3ddbc8.entry.js.map → p-068bdd89.entry.js.map} +0 -0
- /package/dist/nano-components/{p-e4505f00.entry.js.map → p-0d1ca590.entry.js.map} +0 -0
- /package/dist/nano-components/{p-80ddfa30.entry.js.map → p-1b7bad31.entry.js.map} +0 -0
- /package/dist/nano-components/{p-93bece01.entry.js.map → p-1c6c94cb.entry.js.map} +0 -0
- /package/dist/nano-components/{p-a9beb006.entry.js.map → p-207a1fbc.entry.js.map} +0 -0
- /package/dist/nano-components/{p-dab8526f.entry.js.map → p-288dbe6b.entry.js.map} +0 -0
- /package/dist/nano-components/{p-7b21ec0b.entry.js.map → p-30d55046.entry.js.map} +0 -0
- /package/dist/nano-components/{p-add3ac22.js.map → p-42e7f253.js.map} +0 -0
- /package/dist/nano-components/{p-378fe272.entry.js.map → p-57085052.entry.js.map} +0 -0
- /package/dist/nano-components/{p-8f888280.entry.js.map → p-578f5e8d.entry.js.map} +0 -0
- /package/dist/nano-components/{p-6bb4545b.entry.js.map → p-5984ae16.entry.js.map} +0 -0
- /package/dist/nano-components/{p-76d8a8a8.js.map → p-5ac74848.js.map} +0 -0
- /package/dist/nano-components/{p-ebb61a70.entry.js.map → p-5d466a58.entry.js.map} +0 -0
- /package/dist/nano-components/{p-d518b939.js.map → p-60a8c896.js.map} +0 -0
- /package/dist/nano-components/{p-3667832c.entry.js.map → p-7304107c.entry.js.map} +0 -0
- /package/dist/nano-components/{p-16e45583.entry.js.map → p-76a650b1.entry.js.map} +0 -0
- /package/dist/nano-components/{p-09751447.entry.js.map → p-7d6065c6.entry.js.map} +0 -0
- /package/dist/nano-components/{p-07b6af21.entry.js.map → p-935aef3d.entry.js.map} +0 -0
- /package/dist/nano-components/{p-8065d85b.entry.js.map → p-93cfbdb6.entry.js.map} +0 -0
- /package/dist/nano-components/{p-b65e0e63.js.map → p-9ebbb814.js.map} +0 -0
- /package/dist/nano-components/{p-a26a7de3.entry.js.map → p-a1c0afb6.entry.js.map} +0 -0
- /package/dist/nano-components/{p-76ab079e.entry.js.map → p-a5a560e7.entry.js.map} +0 -0
- /package/dist/nano-components/{p-9d1432be.js.map → p-a6ff5ca6.js.map} +0 -0
- /package/dist/nano-components/{p-62e3646b.entry.js.map → p-ac0ac58f.entry.js.map} +0 -0
- /package/dist/nano-components/{p-3e7153c8.entry.js.map → p-cba50c3e.entry.js.map} +0 -0
- /package/dist/nano-components/{p-ce07df57.entry.js.map → p-cd2f5e97.entry.js.map} +0 -0
- /package/dist/nano-components/{p-a145fbc1.js.map → p-d98c6a62.js.map} +0 -0
- /package/dist/nano-components/{p-47866646.entry.js.map → p-e41baa11.entry.js.map} +0 -0
- /package/dist/nano-components/{p-9be2cba5.entry.js.map → p-e43f76c8.entry.js.map} +0 -0
- /package/dist/nano-components/{p-7f545755.entry.js.map → p-eab09335.entry.js.map} +0 -0
- /package/dist/nano-components/{p-a20d2028.entry.js.map → p-f93bd976.entry.js.map} +0 -0
- /package/dist/nano-components/{p-36a2f1c0.entry.js.map → p-fe7a0158.entry.js.map} +0 -0
- /package/dist/nano-components/{p-6a5ae656.entry.js.map → p-fecb72b9.entry.js.map} +0 -0
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"scroll-e5825d8d.js","mappings":";;;;;AAEA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;AAExB;;;;SAIgB,iBAAiB,CAAC,SAAsB;EACtD,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;EACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;AAClD,CAAC;AAED;;;SAGgB,mBAAmB,CAAC,SAAsB;EACxD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;EAExB,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;IACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;GACpD;AACH,CAAC;AAED,SAAS,QAAQ,CACf,OAAoB,EACpB,SAAiB,EACjB,WAAoB,KAAK;EAEzB,IAAI,CAAC,QAAQ,EAAE;IACb,IAAI;MACF,OAAO,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;KAC3D;IAAC,OAAO,CAAC,EAAE;MACV,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC;KAChC;IACD,OAAO;GACR;EACD,IAAI;IACF,OAAO,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;GAC1D;EAAC,OAAO,CAAC,EAAE;IACV,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;GAC/B;AACH,CAAC;AAED;;;SAGgB,cAAc,CAC5B,OAAoB,EACpB,SAAsB,EACtB,YAAgD,UAAU,EAC1D,WAA+B,OAAO;EAEtC,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;EAC7C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC;EACnD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;EACtD,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;EAClC,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,CAAC;EAC1D,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC;EACjC,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;EAE1D,IAAI,SAAS,KAAK,YAAY,IAAI,SAAS,KAAK,MAAM,EAAE;IACtD,IAAI,QAAQ,KAAK,OAAO,EAAE;MACxB,IAAI,UAAU,GAAG,IAAI;QAAE,QAAQ,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;WAClD,IAAI,UAAU,GAAG,OAAO,CAAC,WAAW,GAAG,IAAI;QAC9C,QAAQ,CACN,SAAS,EACT,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CACzD,CAAC;KACL;;MACC,QAAQ,CACN,SAAS,EACT,SAAS,CAAC,UAAU;QAClB,MAAM,CAAC,IAAI;QACX,SAAS,CAAC,WAAW,GAAG,CAAC;QACzB,OAAO,CAAC,WAAW,GAAG,CAAC,CAC1B,CAAC;GACL;EAED,IAAI,SAAS,KAAK,UAAU,IAAI,SAAS,KAAK,MAAM,EAAE;IACpD,IAAI,SAAS,GAAG,IAAI;MAAE,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;SACtD,IAAI,SAAS,GAAG,OAAO,CAAC,YAAY,GAAG,IAAI,EAAE;MAChD,QAAQ,CACN,SAAS,EACT,SAAS,GAAG,SAAS,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,EACzD,IAAI,CACL,CAAC;KACH;GACF;AACH;;;;","names":[],"sources":["./src/utils/scroll.ts"],"sourcesContent":["import { getOffset } from './dom';\n\nconst locks = new Set();\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n locks.add(lockingEl);\n document.body.classList.add('nano-scroll-lock');\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n locks.delete(lockingEl);\n\n if (locks.size === 0) {\n document.body.classList.remove('nano-scroll-lock');\n }\n}\n\nfunction scrollTo(\n element: HTMLElement,\n scrollAmt: number,\n vertical: boolean = false\n) {\n if (!vertical) {\n try {\n element.scrollTo({ left: scrollAmt, behavior: 'smooth' });\n } catch (e) {\n element.scrollLeft = scrollAmt;\n }\n return;\n }\n try {\n element.scrollTo({ top: scrollAmt, behavior: 'smooth' });\n } catch (e) {\n element.scrollTop = scrollAmt;\n }\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n element: HTMLElement,\n container: HTMLElement,\n direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n position: 'center' | 'start' = 'start'\n) {\n const offset = getOffset(element, container);\n const offsetTop = offset.top + container.scrollTop;\n const offsetLeft = offset.left + container.scrollLeft;\n const minX = container.scrollLeft;\n const maxX = container.scrollLeft + container.offsetWidth;\n const minY = container.scrollTop;\n const maxY = container.scrollTop + container.offsetHeight;\n\n if (direction === 'horizontal' || direction === 'both') {\n if (position === 'start') {\n if (offsetLeft < minX) scrollTo(container, offsetLeft);\n else if (offsetLeft + element.clientWidth > maxX)\n scrollTo(\n container,\n offsetLeft - container.offsetWidth + element.clientWidth\n );\n } else\n scrollTo(\n container,\n container.scrollLeft +\n offset.left -\n container.offsetWidth / 2 +\n element.offsetWidth / 2\n );\n }\n\n if (direction === 'vertical' || direction === 'both') {\n if (offsetTop < minY) scrollTo(container, offsetTop, true);\n else if (offsetTop + element.clientHeight > maxY) {\n scrollTo(\n container,\n offsetTop - container.offsetHeight + element.clientHeight,\n true\n );\n }\n }\n}\n"],"version":3}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"table.worker-2f887b5f.js","mappings":";;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"transitions-71cca3ed.js","mappings":";;;AAAA;;;;AAiBA;;;;;;;;;;MAUa,iBAAiB,GAAG,CAC/B,EAAe,EACf,SAAiB,EACjB,OAAgB,IAAI;EAEpB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO;IACzB,IAAI,IAAI,EAAE;MACR,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,OAAO,CAAC,OAAO,CAAC,CAAC;SAClB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;MAC3B,EAAE,CAAC,OAAO,CAAC,iBAAiB,GAAG,MAAM,CAAC;MACtC,UAAU,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;KACnD;SAAM;MACL,EAAE,CAAC,gBAAgB,CACjB,eAAe,EACf,CAAC,CAAQ;QACP,IACE,CAAC,CAAC,MAAM,KAAK,EAAE;UACf,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,EAC9C;UACA,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;UAC1B,OAAO,CAAC,QAAQ,CAAC,CAAC;SACnB;OACF,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;MACF,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KAChC;GACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n return new Promise((resolve) => {\n const callback = () => {\n el.removeEventListener('transitionend', callback);\n resolve;\n };\n el.addEventListener('transitionend', callback);\n // ??\n });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param className\n * @param show\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n el: HTMLElement,\n className: string,\n show: boolean = true\n): Promise<'shown' | 'hidden'> => {\n return new Promise((resolve) => {\n if (show) {\n el.addEventListener(\n 'transitionend',\n (e: Event) => {\n if (\n e.target === el ||\n e.composedPath().some((el) => el === e.target)\n ) {\n resolve('shown');\n }\n },\n { once: true }\n );\n el.style.display = 'block';\n el.dataset.displayTransition = 'true';\n setTimeout(() => el.classList.add(className), 20);\n } else {\n el.addEventListener(\n 'transitionend',\n (e: Event) => {\n if (\n e.target === el ||\n e.composedPath().some((el) => el === e.target)\n ) {\n el.style.display = 'none';\n resolve('hidden');\n }\n },\n { once: true }\n );\n el.classList.remove(className);\n }\n });\n};\n"],"version":3}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
/*!
|
2
|
-
* Web Components for Nanopore digital Web Apps
|
3
|
-
*/
|
4
|
-
import{r as n,h as t,a as i,g as e}from"./p-6ef53fa1.js";const o=":host {\n box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n**/\n:host {\n /**\n * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n */\n display: block;\n --nano-loader-base: #4a4a4a;\n --nano-loader-tint: #7d7d7d;\n --theme-color: #fff;\n --theme-tint-color: #90c6e7;\n --scrim-color: 0, 0, 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n color: var(--theme-color);\n}\n\n:host(.is-xl) {\n --quote-size: 3rem;\n}\n\n:host([theme=light]) {\n --nano-loader-base: #fff;\n --nano-loader-tint: white;\n --theme-color: #4a4a4a;\n --scrim-color: 255, 255, 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n --color: #4a4a4a;\n}\n\n.hero {\n position: relative;\n}\n.hero--rtl {\n --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n overflow: hidden;\n}\n.hero__bg-slot {\n position: absolute;\n inset: 0;\n}\n.hero__ctas {\n display: flex;\n justify-content: flex-end;\n padding-block: 32px 0;\n padding-inline: 32px;\n -webkit-margin-after: -64px;\n margin-block-end: -64px;\n position: relative;\n z-index: 1;\n}\n@media (max-width: 52em) {\n .hero__ctas {\n display: none;\n }\n}\n@media (max-width: 58em) {\n .hero__ctas {\n -webkit-margin-after: -48px;\n margin-block-end: -48px;\n }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n padding-block: 0.25rem !important;\n padding-inline: 0.5rem !important;\n font-size: 0.875rem !important;\n margin-block: 0 !important;\n margin-inline: 0.25rem !important;\n}\n.hero__img {\n display: block;\n container-type: inline-size;\n --padding: inherit;\n}\n.hero__breadcrumbs {\n display: none;\n margin-block: 20px 0;\n margin-inline: 14px;\n line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n display: block;\n}\n.is-xl .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n}\n@container (min-width: 800px) {\n .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n}\n.is-xxl .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 83px;\n}\n@container (min-width: 900px) {\n .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 83px;\n }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n -webkit-margin-after: 16px;\n margin-block-end: 16px;\n position: relative;\n z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n color: var(--theme-color);\n position: relative;\n margin-block: 0;\n margin-inline: 0.5rem;\n display: inline-block;\n}\n.hero__scrim {\n position: absolute;\n inset: 0;\n z-index: 0;\n background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n background: none;\n}\n.hero__content {\n max-inline-size: 1440px;\n display: block;\n --grid-row-gap: 0;\n margin-block: 0;\n margin-inline: auto;\n position: relative;\n}\n.hero__content.is-xl {\n -webkit-margin-before: 50px;\n margin-block-start: 50px;\n max-inline-size: 1540px;\n}\n@container (min-width: 800px) {\n .hero__content {\n margin-block: 50px 0 !important;\n max-inline-size: 1540px !important;\n }\n}\n.hero__content.is-xxl {\n -webkit-margin-before: 83px;\n margin-block-start: 83px;\n max-inline-size: 1606px;\n}\n@container (min-width: 900px) {\n .hero__content {\n margin-block: 83px 0 !important;\n max-inline-size: 1606px !important;\n }\n}\n.hero__primary {\n margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n margin-block: 0;\n margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n -webkit-margin-start: 0;\n margin-inline-start: 0;\n}\n.hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n font-size: 2rem;\n}\n.is-xl .hero__primary {\n margin-block: 0 50px;\n margin-inline: 50px 0;\n}\n.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n margin-block: 0;\n margin-inline: -3rem 0;\n}\n@container (min-width: 800px) {\n .hero__primary {\n margin-block: 0 50px !important;\n margin-inline: 50px 0 !important;\n }\n .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n margin-block: 0 !important;\n margin-inline: -3rem 0 !important;\n }\n}\n.is-xxl .hero__primary {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n}\n@container (min-width: 900px) {\n .hero__primary {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n}\n.hero__primary-content {\n max-inline-size: 45rem;\n --color: #fff;\n display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n padding-block: 10px 0;\n padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n line-height: 26px !important;\n margin-block: 0 18px !important;\n font-size: 2rem !important;\n}\n.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]) {\n line-height: 31px !important;\n -webkit-margin-after: 30px !important;\n margin-block-end: 30px !important;\n}\n.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]) {\n -webkit-margin-before: 20px !important;\n margin-block-start: 20px !important;\n}\n@container (min-width: 800px) {\n .hero__primary-content ::slotted(h1[slot=primary-content]) {\n line-height: 31px !important;\n -webkit-margin-after: 30px !important;\n margin-block-end: 30px !important;\n }\n .hero__primary-content ::slotted(.button[slot=primary-content]) {\n -webkit-margin-before: 20px !important;\n margin-block-start: 20px !important;\n }\n}\n.hero__secondary {\n display: none;\n block-size: 100%;\n padding-block: 0 20px;\n padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n display: flex;\n align-items: center;\n}\n.is-xl .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n}\n@container (min-width: 800px) {\n .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n}\n.is-xxl .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 83px;\n}\n@container (min-width: 900px) {\n .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n}\n.hero__icon-box {\n background: rgba(0, 0, 0, 0.7);\n padding: 24px;\n inline-size: 100%;\n -webkit-margin-after: auto;\n margin-block-end: auto;\n display: flex;\n flex-direction: column;\n color: white;\n}\n.is-xl .hero__icon-box {\n max-inline-size: 410px;\n flex: 0 1 410px;\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n -webkit-margin-after: 20px;\n margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n -webkit-margin-after: 0;\n margin-block-end: 0;\n}\n.hero__quote-content {\n -webkit-margin-before: auto;\n margin-block-start: auto;\n text-align: center;\n inline-size: 100%;\n}\n.is-xl .hero__quote-content {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n}\n@container (min-width: 800px) {\n .hero__quote-content {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n}\n.hero__quote::before, .hero__quote::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n}\n.hero__quote-author {\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n}\n.hero--sub .hero__content.is-xl {\n -webkit-margin-before: 40px;\n margin-block-start: 40px;\n}\n.hero--sub .hero__content.is-xl .hero__primary {\n margin-block: 0 40px;\n margin-inline: 50px 0;\n}\n.hero--sub .hero__content.is-xl .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 40px 50px;\n}\n.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]) {\n -webkit-margin-before: 8px !important;\n margin-block-start: 8px !important;\n}\n.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]) {\n -webkit-margin-after: 18px !important;\n margin-block-end: 18px !important;\n}\n.hero--sub .hero__content.is-xxl .hero__primary {\n margin-block: 0 40px;\n margin-inline: 83px 0;\n}\n.hero--sub .hero__content.is-xxl .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 40px 83px;\n}";const r=class{constructor(i){n(this,i);this.handleGridChange=n=>{this.gridSizes=n.detail};this.HeroContent=()=>[!this.hasIconBox&&this.hasCtas?t("div",{class:"hero__ctas"},t("slot",{name:"secondary-ctas"})):"",t("div",{class:"hero__scrim"},t("slot",{name:"scrim"})),t("nano-grid",{onNanoBpChange:this.handleGridChange,class:"hero__content",xlCols:2,xlSize:this.largeScreenBP},t("nano-grid-item",{gridStates:"xl-col-span-2"},t("div",{class:"hero__breadcrumbs"},t("slot",{name:"breadcrumb"}))),t("nano-grid-item",{gridStates:this.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},t("div",{class:"hero__primary"},t("div",{class:"hero__primary-content"},t("slot",{name:"back-btn"}),t("div",null,t("slot",{name:"primary-content"}))))),this.hasSecondaryContent&&t("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},t("div",{class:"hero__secondary"},t("slot",{name:"secondary-content"}),this.hasIconBox&&t("div",{class:"hero__icon-box"},t("slot",{name:"icon-box"}),t("slot",{name:"icon-box-item"})),this.hasQuote&&t("div",{class:"hero__quote-content"},t("span",{class:"hero__quote"},t("slot",{name:"quote"})),t("div",{class:"hero__quote-author"},t("slot",{name:"quote-author"}))))))];this.gridSizes=[];this.hasIconBox=undefined;this.hasScrim=undefined;this.hasSecondaryContent=undefined;this.hasQuote=undefined;this.hasBg=undefined;this.hasBackBtn=undefined;this.hasCtas=undefined;this.breadCrumbs=undefined;this.iconBoxItems=undefined;this.imgSrc=undefined;this.imgSrcSet=null;this.largeScreenBP=900;this.theme="dark";this.level="top"}breadCrumbChange(){this.breadCrumbs.filter((n=>n.tagName==="A"&&!n.nextElementSibling.classList.contains("slash"))).forEach((n=>{n.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))}iconBoxItemChange(){this.iconBoxItems.forEach((n=>n.classList.remove("last")));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")}slotChangeObserver(){if(!window["MutationObserver"])return;if(this.mo)this.mo.disconnect();const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.host,{childList:true})}processSlottedContent(){this.hasCtas=!!this.host.querySelector('[slot="secondary-ctas"]');this.iconBoxItems=Array.from(this.host.querySelectorAll('[slot="icon-box-item"]'));this.hasIconBox=!!this.host.querySelector('[slot="icon-box"]')||!!this.iconBoxItems.length;this.hasScrim=!!this.host.querySelector('[slot="scrim"]');this.breadCrumbs=Array.from(this.host.querySelectorAll('[slot="breadcrumb"]'));this.hasSecondaryContent=!!this.host.querySelector('[slot="icon-box"]')||!!this.host.querySelector('[slot="quote"]')||!!this.host.querySelector('[slot="icon-box-item"]')||!!this.host.querySelector('[slot="secondary-content"]');this.hasBg=!!this.host.querySelector('[slot="background"]')||!!this.imgSrc;this.hasBackBtn=!!this.host.querySelector('[slot="back-btn"]');this.hasQuote=!!this.host.querySelector('[slot="quote"]')}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver()}componentWillLoad(){this.processSlottedContent()}render(){const n=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return t(i,{class:{[this.gridSizes.join(" ")]:true}},t("div",{class:{hero:true,"hero--light":this.theme==="light","hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":n,"hero--scrim":this.hasScrim,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":this.level==="sub"}},t("div",{class:"hero__bg-wrap"},!!this.imgSrc&&t("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},t(this.HeroContent,null)),!this.imgSrc&&[t("div",{class:"hero__bg-slot"},t("slot",{name:"background"})),t(this.HeroContent,null)])))}get host(){return e(this)}static get watchers(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}}};r.style=o;export{r as nano_hero};
|
5
|
-
//# sourceMappingURL=p-0e2f0040.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["heroCss","Hero","this","handleGridChange","e","gridSizes","detail","HeroContent","hasIconBox","hasCtas","h","class","name","onNanoBpChange","xlCols","xlSize","largeScreenBP","gridStates","hasSecondaryContent","hasQuote","breadCrumbChange","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItemChange","iconBoxItems","item","remove","length","add","slotChangeObserver","window","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","disconnectedCallback","componentDidLoad","componentWillLoad","render","rtl","dir","ownerDocument","Host","join","hero","theme","level","lazy","background","srcSet","imgSrcSet","src"],"sources":["./src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","./src/components/hero/hero.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n**/\n\n:host {\n /**\n * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{map.get($colors, lightblue)};\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n */\n\n display: block;\n\n --nano-loader-base: #{map.get($colors, black)};\n --nano-loader-tint: #{lighten(map.get($colors, black), 20%)};\n --theme-color: #{map.get($colors, white)};\n --theme-tint-color: #{map.get($colors, lightblue)};\n --scrim-color: 0, 0, 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n\n color: var(--theme-color);\n}\n\n:host(.is-xl) {\n --quote-size: 3rem;\n}\n\n:host([theme='light']) {\n --nano-loader-base: #{map.get($colors, white)};\n --nano-loader-tint: #{lighten(map.get($colors, white), 20%)};\n --theme-color: #{map.get($colors, black)};\n --scrim-color: 255, 255, 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n\n color: var(--theme-color);\n\n .hero__primary-content {\n --color: #{map.get($colors, black)};\n }\n}\n\n.hero {\n position: relative;\n\n &--rtl {\n --scrim-direction: 270deg;\n }\n\n &--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n }\n\n &__bg-wrap {\n overflow: hidden;\n }\n\n &__bg-slot {\n position: absolute;\n inset: 0;\n }\n\n &__ctas {\n @media (max-width: 52em) {\n display: none;\n }\n\n @media (max-width: 58em) {\n margin-block-end: -48px;\n }\n\n display: flex;\n justify-content: flex-end;\n padding-block: 32px 0;\n padding-inline: 32px;\n margin-block-end: -64px;\n position: relative;\n z-index: 1;\n\n ::slotted(a.button[slot='secondary-ctas']) {\n padding-block: 0.25rem !important;\n padding-inline: 0.5rem !important;\n font-size: 0.875rem !important;\n margin-block: 0 !important;\n margin-inline: 0.25rem !important;\n }\n }\n\n &__img {\n display: block;\n container-type: inline-size;\n\n --padding: inherit;\n }\n\n &__breadcrumbs {\n display: none;\n margin-block: 20px 0;\n margin-inline: 14px;\n line-height: 14px;\n\n .hero--breadcrumb & {\n display: block;\n }\n\n .is-xl & {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n\n @container (min-width: 800px) {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n\n .is-xxl & {\n margin-block: 0;\n margin-inline: 83px;\n }\n\n @container (min-width: 900px) {\n margin-block: 0;\n margin-inline: 83px;\n }\n\n ::slotted(*[slot='breadcrumb']) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-block-end: 16px;\n position: relative;\n z-index: 2;\n\n .hero--hasbg & {\n text-shadow: 1px 1px rgb(0 0 0 / 15%);\n }\n }\n\n ::slotted(a[slot='breadcrumb']) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n }\n\n ::slotted(.slash[slot='breadcrumb']) {\n color: var(--theme-color);\n position: relative;\n margin-block: 0;\n margin-inline: 0.5rem;\n display: inline-block;\n }\n }\n\n &__scrim {\n position: absolute;\n inset: 0;\n z-index: 0;\n background:\n linear-gradient(\n var(--scrim-direction),\n rgb(var(--scrim-color) / var(--scrim-opacity-from)) 0%,\n rgb(var(--scrim-color) / var(--scrim-opacity-to)) 100%\n );\n\n .hero--scrim & {\n background: none;\n }\n }\n\n &__content {\n max-inline-size: 1440px;\n display: block;\n\n --grid-row-gap: 0;\n\n margin-block: 0;\n margin-inline: auto;\n position: relative;\n\n &.is-xl {\n margin-block-start: 50px;\n max-inline-size: 1540px;\n }\n\n @container (min-width: 800px) {\n margin-block: 50px 0 !important;\n max-inline-size: 1540px !important;\n }\n\n &.is-xxl {\n margin-block-start: 83px;\n max-inline-size: 1606px;\n }\n\n @container (min-width: 900px) {\n margin-block: 83px 0 !important;\n max-inline-size: 1606px !important;\n }\n }\n\n &__primary {\n margin: 16px;\n\n .hero--breadcrumb & {\n margin-block: 0;\n margin-inline: 16px;\n }\n\n .hero--backbtn & {\n margin-inline-start: 0;\n }\n\n ::slotted(nano-icon-button[slot='back-btn']) {\n font-size: 2rem;\n }\n\n .is-xl & {\n margin-block: 0 50px;\n margin-inline: 50px 0;\n\n ::slotted(nano-icon-button[slot='back-btn']) {\n margin-block: 0;\n margin-inline: -3rem 0;\n }\n }\n\n @container (min-width: 800px) {\n margin-block: 0 50px !important;\n margin-inline: 50px 0 !important;\n\n ::slotted(nano-icon-button[slot='back-btn']) {\n margin-block: 0 !important;\n margin-inline: -3rem 0 !important;\n }\n }\n\n .is-xxl & {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n\n @container (min-width: 900px) {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n }\n\n &__primary-content {\n max-inline-size: 45rem;\n\n --color: #fff;\n\n display: flex;\n\n .hero--backbtn & {\n > div {\n padding-block: 10px 0;\n padding-inline: 0;\n }\n }\n\n ::slotted(h1[slot='primary-content']) {\n line-height: 26px !important;\n margin-block: 0 18px !important;\n font-size: 2rem !important;\n }\n\n .is-xl & {\n ::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-block-end: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 20px !important;\n }\n }\n\n @container (min-width: 800px) {\n ::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-block-end: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 20px !important;\n }\n }\n }\n\n &__secondary {\n display: none;\n block-size: 100%;\n padding-block: 0 20px;\n padding-inline: 14px;\n\n .hero--secondary & {\n display: flex;\n align-items: center;\n }\n\n .is-xl & {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n\n @container (min-width: 800px) {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n\n .is-xxl & {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n\n @container (min-width: 900px) {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n }\n\n &__icon-box {\n background: rgb(0 0 0 / 70%);\n padding: 24px;\n inline-size: 100%;\n margin-block-end: auto;\n display: flex;\n flex-direction: column;\n color: white;\n\n .is-xl & {\n max-inline-size: 410px;\n flex: 0 1 410px;\n }\n\n ::slotted([slot='icon-box-item']) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-block-end: 20px;\n }\n\n ::slotted(.last[slot='icon-box-item']) {\n margin-block-end: 0;\n }\n }\n\n &__quote-content {\n margin-block-start: auto;\n text-align: center;\n inline-size: 100%;\n\n .is-xl & {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n\n @container (min-width: 800px) {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n }\n\n &__quote {\n &::before,\n &::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n }\n\n ::slotted([slot='quote']) {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n }\n }\n\n &__quote-author {\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n }\n\n &--sub {\n .hero__content.is-xl {\n margin-block-start: 40px;\n\n .hero__primary {\n margin-block: 0 40px;\n margin-inline: 50px 0;\n }\n\n .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 40px 50px;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 8px !important;\n }\n\n ::slotted(h1[slot='primary-content']) {\n margin-block-end: 18px !important;\n }\n }\n\n .hero__content.is-xxl {\n .hero__primary {\n margin-block: 0 40px;\n margin-inline: 83px 0;\n }\n\n .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 40px 83px;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n Host,\n} from '@stencil/core';\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n tag: 'nano-hero',\n styleUrl: 'hero.scss',\n shadow: true,\n})\nexport class Hero implements ComponentInterface {\n private mo?: MutationObserver;\n\n @Element() host: HTMLNanoHeroElement;\n\n @State() gridSizes: string[] = [];\n @State() hasIconBox: boolean;\n @State() hasScrim: boolean;\n @State() hasSecondaryContent: boolean;\n @State() hasQuote: boolean;\n @State() hasBg: boolean;\n @State() hasBackBtn: boolean;\n @State() hasCtas: boolean;\n @State() breadCrumbs: Element[];\n @Watch('breadCrumbs')\n breadCrumbChange() {\n // safari doesn't support ::slotted()::after ... so this :/\n this.breadCrumbs\n .filter(\n (crumb) =>\n crumb.tagName === 'A' &&\n !crumb.nextElementSibling.classList.contains('slash')\n )\n .forEach((crumb) => {\n crumb.insertAdjacentHTML(\n 'afterend',\n '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n );\n });\n }\n @State() iconBoxItems: Element[];\n @Watch('iconBoxItems')\n iconBoxItemChange() {\n this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n if (\n this.iconBoxItems[this.iconBoxItems.length - 1] &&\n this.iconBoxItems[this.iconBoxItems.length - 1].classList\n )\n this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n }\n\n /** src for backgronund image. For more control use the `background` slot instead. */\n @Prop() imgSrc?: string;\n\n /** Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n @Prop() imgSrcSet?: string = null;\n\n /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n @Prop() largeScreenBP: number = 900;\n\n /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n @Prop() theme: 'dark' | 'light' = 'dark';\n\n /** Set the content structure level of the hero. Defaults to 'top' */\n @Prop() level: 'top' | 'sub' = 'top';\n\n private slotChangeObserver() {\n if (!window['MutationObserver']) return;\n\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true });\n }\n\n // Event handlers\n\n private processSlottedContent() {\n this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n this.iconBoxItems = Array.from(\n this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n );\n this.hasIconBox =\n !!this.host.querySelector('[slot=\"icon-box\"]') ||\n !!this.iconBoxItems.length;\n this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n this.breadCrumbs = Array.from(\n this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n );\n this.hasSecondaryContent =\n !!this.host.querySelector('[slot=\"icon-box\"]') ||\n !!this.host.querySelector('[slot=\"quote\"]') ||\n !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n !!this.host.querySelector('[slot=\"secondary-content\"]');\n this.hasBg =\n !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n }\n\n private handleGridChange = (e: CustomEvent & { detail: string[] }) => {\n this.gridSizes = e.detail;\n };\n\n // Component lifecycle\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private HeroContent = (): VNode[] => {\n return [\n !this.hasIconBox && this.hasCtas ? (\n <div class=\"hero__ctas\">\n <slot name=\"secondary-ctas\" />\n </div>\n ) : (\n ''\n ),\n <div class=\"hero__scrim\">\n <slot name=\"scrim\" />\n </div>,\n <nano-grid\n onNanoBpChange={this.handleGridChange}\n class=\"hero__content\"\n xlCols={2}\n xlSize={this.largeScreenBP}\n >\n <nano-grid-item gridStates=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </nano-grid-item>\n <nano-grid-item\n gridStates={\n this.hasSecondaryContent\n ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n }\n >\n <div class=\"hero__primary\">\n <div class=\"hero__primary-content\">\n <slot name=\"back-btn\" />\n <div>\n <slot name=\"primary-content\" />\n </div>\n </div>\n </div>\n </nano-grid-item>\n {this.hasSecondaryContent && (\n <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n <div class=\"hero__secondary\">\n <slot name=\"secondary-content\" />\n {this.hasIconBox && (\n <div class=\"hero__icon-box\">\n <slot name=\"icon-box\" />\n <slot name=\"icon-box-item\" />\n </div>\n )}\n {this.hasQuote && (\n <div class=\"hero__quote-content\">\n <span class=\"hero__quote\">\n <slot name=\"quote\" />\n </span>\n <div class=\"hero__quote-author\">\n <slot name=\"quote-author\" />\n </div>\n </div>\n )}\n </div>\n </nano-grid-item>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' ||\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{\n [this.gridSizes.join(' ')]: true,\n }}\n >\n <div\n class={{\n hero: true,\n 'hero--light': this.theme === 'light',\n 'hero--secondary': this.hasSecondaryContent,\n 'hero--iconbox': this.hasIconBox,\n 'hero--rtl': rtl,\n 'hero--scrim': this.hasScrim,\n 'hero--breadcrumb': !!this.breadCrumbs.length,\n 'hero--hasbg': this.hasBg,\n 'hero--backbtn': this.hasBackBtn,\n 'hero--sub': this.level === 'sub',\n }}\n >\n <div class=\"hero__bg-wrap\">\n {!!this.imgSrc && (\n <nano-img\n class=\"hero__img\"\n lazy={false}\n background\n srcSet={this.imgSrcSet}\n src={this.imgSrc}\n >\n <this.HeroContent />\n </nano-img>\n )}\n {!this.imgSrc && [\n <div class=\"hero__bg-slot\">\n <slot name=\"background\" />\n </div>,\n <this.HeroContent />,\n ]}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
/*!
|
2
|
-
* Web Components for Nanopore digital Web Apps
|
3
|
-
*/
|
4
|
-
const e=(e,n,t=true)=>new Promise((o=>{if(t){e.addEventListener("transitionend",(n=>{if(n.target===e||n.composedPath().some((e=>e===n.target))){o("shown")}}),{once:true});e.style.display="block";e.dataset.displayTransition="true";setTimeout((()=>e.classList.add(n)),20)}else{e.addEventListener("transitionend",(n=>{if(n.target===e||n.composedPath().some((e=>e===n.target))){e.style.display="none";o("hidden")}}),{once:true});e.classList.remove(n)}}));export{e as d};
|
5
|
-
//# sourceMappingURL=p-167b9165.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["displayTransition","el","className","show","Promise","resolve","addEventListener","e","target","composedPath","some","once","style","display","dataset","setTimeout","classList","add","remove"],"sources":["./src/utils/transitions.ts"],"sourcesContent":["/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n return new Promise((resolve) => {\n const callback = () => {\n el.removeEventListener('transitionend', callback);\n resolve;\n };\n el.addEventListener('transitionend', callback);\n // ??\n });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n * @param el\n * @param className\n * @param show\n * @returns a promise of resolving as either 'show' or 'hidden'\n */\nexport const displayTransition = (\n el: HTMLElement,\n className: string,\n show: boolean = true\n): Promise<'shown' | 'hidden'> => {\n return new Promise((resolve) => {\n if (show) {\n el.addEventListener(\n 'transitionend',\n (e: Event) => {\n if (\n e.target === el ||\n e.composedPath().some((el) => el === e.target)\n ) {\n resolve('shown');\n }\n },\n { once: true }\n );\n el.style.display = 'block';\n el.dataset.displayTransition = 'true';\n setTimeout(() => el.classList.add(className), 20);\n } else {\n el.addEventListener(\n 'transitionend',\n (e: Event) => {\n if (\n e.target === el ||\n e.composedPath().some((el) => el === e.target)\n ) {\n el.style.display = 'none';\n resolve('hidden');\n }\n },\n { once: true }\n );\n el.classList.remove(className);\n }\n });\n};\n"],"mappings":";;;MA2BaA,EAAoB,CAC/BC,EACAC,EACAC,EAAgB,OAET,IAAIC,SAASC,IAClB,GAAIF,EAAM,CACRF,EAAGK,iBACD,iBACCC,IACC,GACEA,EAAEC,SAAWP,GACbM,EAAEE,eAAeC,MAAMT,GAAOA,IAAOM,EAAEC,SACvC,CACAH,EAAQ,Q,IAGZ,CAAEM,KAAM,OAEVV,EAAGW,MAAMC,QAAU,QACnBZ,EAAGa,QAAQd,kBAAoB,OAC/Be,YAAW,IAAMd,EAAGe,UAAUC,IAAIf,IAAY,G,KACzC,CACLD,EAAGK,iBACD,iBACCC,IACC,GACEA,EAAEC,SAAWP,GACbM,EAAEE,eAAeC,MAAMT,GAAOA,IAAOM,EAAEC,SACvC,CACAP,EAAGW,MAAMC,QAAU,OACnBR,EAAQ,S,IAGZ,CAAEM,KAAM,OAEVV,EAAGe,UAAUE,OAAOhB,E"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["checkboxCss","checkboxIds","Checkbox","this","inputId","handleInvalid","ev","_invalid","target","validity","valid","handleChange","checked","indeterminate","handleFocus","hasFocus","nanoFocus","emit","handleBlur","nanoBlur","async","input","inputType","name","form","host","closest","ctrls","Array","from","querySelectorAll","document","filter","radio","map","el","nanoChange","value","typeChange","type","handleIndeterminateChange","invalid","validityMessage","validationMessage","validateFirst","reportValidity","isValid","errorMessage","message","updateStatus","length","setCustomValidity","focus","focusVisible","force","blur","onReset","e","querySelector","isRadioChecked","requestAnimationFrame","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","h","Host","class","Object","assign","createColorClasses","color","nanocb","disabled","htmlFor","required","onBlur","onFocus","onChange","ref","id","onInvalid","label","hidden"],"sources":["./src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /**\n * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$control-focus-style};\n * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n\n * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get($colors, white)};\n * @prop --check-border-style: Initial border style. Defaults to 1px solid #{map.get($colors, palegrey)};\n * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get($colors, white)};\n * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{color-to-rgb-list(map.get($colors, lightblue))};\n * @prop --tagbox-border-color: Defaults to rgba(var(--tagbox-rgb), .5);\n * @prop --tagbox-bg-color: Defaults to rgba(var(--tagbox-rgb), .1);\n * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get($colors, blue)};\n * @prop --segment-border-radius: Defaults to 3px;\n * @prop --segment-shadow: 0 1px 4px rgba(0,0,0,.2);\n */\n\n --focus-shadow: #{$control-focus-style};\n --invalid-shadow: #{$control-focus-size + ' ' map.get($colors, red)};\n --padding: initial;\n --check-bg-color: #{map.get($colors, white)};\n --check-border-style: 1px solid #{map.get($colors, palegrey)};\n --check-checked-bg-color: #{map.get($colors, darkgrey)};\n --check-checked-border-color: #{map.get($colors, darkgrey)};\n --check-checked-higlight-color: #{map.get($colors, white)};\n --check-base-size: inherit;\n\n // type specific\n\n --tagbox-rgb: #{color-to-rgb-list(map.get($colors, lightblue))};\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 50%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 20%);\n --tagbox-border-radius: 0;\n --segment-color: #{map.get($colors, blue)};\n --segment-border-radius: 3px;\n --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n --cb-border-radius: 2px;\n --radio-border-radius: 50%;\n\n display: inline-block;\n max-width: 100%;\n\n * {\n box-sizing: inherit;\n }\n}\n\n:host([type='tag']) {\n text-transform: uppercase;\n\n --control-padding: 0.2rem 1rem;\n}\n\n:host([type='segment']) {\n --check-border-style: none;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n --check-border-style: 1px solid #{rgba(map.get($colors, palegrey), 0.5)};\n --segment-border-radius: 5px;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n --tagbox-rgb: var(--nano-color-base-rgb);\n --focus-shadow: #{$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 80%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 50%);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n --tagbox-rgb: #{color-to-rgb-list(map.get($colors, mediumgrey))};\n --check-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --check-checked-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --segment-color: #{map.get($colors, darkgrey)};\n}\n\n.nanocb {\n padding: var(--padding);\n cursor: pointer;\n display: flex;\n align-items: center;\n line-height: 1.2;\n position: relative;\n\n &__input {\n border-radius: var(--cb-border-radius, 3px);\n font-size: var(--check-base-size);\n position: relative;\n height: 1.5em;\n width: 1.5em;\n min-width: 1.5em;\n border: var(--check-border-style);\n box-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n &::before {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: 0.625em;\n inset-block-start: 0.625em;\n width: 0;\n height: 0;\n border: 2px solid var(--check-checked-higlight-color);\n transform: scale(0);\n }\n\n &--radio {\n border-radius: var(--radio-border-radius);\n background-color: var(--check-bg-color);\n }\n\n &--checkbox {\n background-color: var(--check-bg-color);\n\n &::after {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: 0.75em;\n inset-block-start: 0.75em;\n height: 0;\n width: 0;\n border: solid var(--check-checked-higlight-color);\n border-width: 0 0.1875em 0.1875em 0;\n transform: rotate(0deg) scale(0);\n opacity: 1;\n transition: all 0.15s ease-out;\n\n .nanocb--indeterminate & {\n border-width: 0 0 0.1875em;\n }\n }\n }\n\n &--segment,\n &--segment-pill {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n }\n\n &--invalid:not(.nanocb--focused) {\n .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--invalid-shadow);\n\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--invalid-shadow);\n z-index: 1;\n }\n }\n }\n\n input {\n @include visually-hide();\n\n &:focus ~ .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--focus-shadow);\n }\n\n &.focus-visible:focus ~ .nanocb__input {\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--focus-shadow);\n z-index: 1;\n }\n }\n\n &:checked ~ .nanocb__input {\n border-radius: var(--cb-border-radius);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border: 0.125em solid var(--check-checked-border-color);\n\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n color: var(--check-checked-higlight-color);\n background-color: var(--check-checked-bg-color);\n box-shadow: inset 0 3px 4px rgb(0 0 0 / 20%);\n }\n\n &--radio {\n border-radius: var(--radio-border-radius);\n border-width: 0.3125em;\n background-color: var(--check-checked-higlight-color);\n\n &::after {\n border: solid var(--check-checked-border-color);\n border-width: 0 0.125em 0.125em 0;\n opacity: 0;\n }\n\n &::before {\n border-radius: var(--radio-border-radius);\n }\n }\n\n &--checkbox {\n &::after {\n transform: rotate(45deg) scale(1);\n opacity: 1;\n inset-inline-start: 0.475em;\n inset-block-start: 0.1875em;\n width: 0.375em;\n height: 0.75em;\n border-radius: 0;\n }\n }\n\n &--tag + .nanocb__label::after {\n transform: rotate(45deg);\n }\n }\n\n &:indeterminate ~ .nanocb__input--checkbox {\n border-radius: var(--input-border-radius, 5px);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border: 0.125em solid var(--check-checked-bg-color);\n\n &::after {\n transform: scale(1);\n opacity: 1;\n inset-inline-start: 0.3125em;\n inset-block-start: 0;\n width: 0.7em;\n height: 0.7em;\n border-radius: 0;\n }\n }\n }\n\n &__label {\n padding-inline: 10px 0;\n padding-block: 0;\n display: flex;\n align-items: center;\n font-stretch: condensed;\n line-height: 1;\n flex: 1;\n justify-content: space-between;\n\n &--segment,\n &--segment-pill {\n border: var(--check-border-style);\n border-radius: var(--segment-border-radius);\n box-shadow: var(--segment-shadow);\n display: inline-flex;\n padding: var(--control-padding);\n background: var(--check-bg-color);\n color: var(--segment-color);\n align-items: center;\n width: 100%;\n }\n\n &--segment-pill {\n // first\n :host(:first-of-type) & {\n border-start-start-radius: var(--segment-border-radius);\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n border-end-start-radius: var(--segment-border-radius);\n border-inline-end: none;\n }\n\n // middle\n :host(:not(:last-of-type):not(:first-of-type)) & {\n border-radius: 0;\n border-inline-end: none;\n }\n\n // last\n :host(:last-of-type) & {\n border-start-start-radius: 0;\n border-start-end-radius: var(--segment-border-radius);\n border-end-end-radius: var(--segment-border-radius);\n border-end-start-radius: 0;\n }\n\n // single\n :host(:first-of-type:last-of-type) & {\n border-radius: var(--segment-border-radius);\n border: var(--check-border-style);\n }\n }\n\n &--tag {\n letter-spacing: 2px;\n font-weight: 500;\n font-size: 0.65em;\n line-height: 1.4;\n padding: var(--control-padding);\n border: 2px solid #b5aea7;\n border-color: var(--tagbox-border-color);\n background-color: var(--tagbox-bg-color);\n transition: all 0.2s;\n border-radius: var(--cb-border-radius);\n width: 100%;\n\n &::after {\n content: '+';\n margin-inline: 0.3125em 0;\n margin-block: 0;\n font-weight: 200;\n position: relative;\n font-family: inherit;\n font-size: 1.8em;\n display: inline-block;\n transform: rotate(0deg);\n transform-origin: center;\n }\n\n span {\n display: block;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n h,\n ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport type {\n CheckboxChangeEventDetail,\n ControlValidity,\n Color,\n} from '../../interface';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n tag: 'nano-checkbox',\n styleUrl: 'checkbox.scss',\n scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n private inputId = `nano-cb-${checkboxIds++}`;\n private input: HTMLInputElement;\n\n @Element() private host: HTMLNanoCheckboxElement;\n @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n /** @internal */\n @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n /**\n * checked property that can be used to get/set the value. accepts only boolean values\n */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n @Watch('checked')\n async handleCheckedChange() {\n this.input.checked = this.checked;\n\n if (this.inputType === 'radio' && this.name && this.checked) {\n const form = this.host.closest('form');\n let ctrls: Element[];\n if (form) {\n ctrls = Array.from(\n form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n );\n } else {\n ctrls = Array.from(\n document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n ).filter((radio) => !radio.closest('form'));\n }\n ctrls.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /**\n * If `true`, the user cannot interact with the checkbox.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n */\n @Prop({ reflect: true }) value: string = 'on';\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop({ reflect: true }) name: string;\n\n /**\n * Set to true to make the field required.\n */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Controls the underlying field type and style.\n */\n @Prop({ reflect: true }) type:\n | 'radio'\n | 'checkbox'\n | 'tag'\n | 'segment'\n | 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (this.type === 'checkbox' || this.type === 'tag')\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /**\n * label property that can be used to set the label text. Alternatively you may use a label slot.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n */\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\n\n /**\n * This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n */\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /**\n * Current validation message - if any. @readonly\n */\n @Prop()\n get validityMessage() {\n if (!this.input) return '';\n return this.input.validationMessage;\n }\n\n /**\n * Color to use from your application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * The form element to associate the input with (its form owner). Must be the id of a form.\n */\n @Prop() form?: string | null;\n\n /**\n * Emited when the checkbox is toggled\n */\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /**\n * Emited when the checkbox is focused\n */\n @Event() nanoFocus: EventEmitter;\n\n /**\n * Emited when the checkbox is blurred\n */\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /**\n * Returns the native input control\n */\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /**\n * Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n */\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) this.input.reportValidity();\n this._invalid = !this.input.validity.valid;\n\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /**\n * Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n */\n @Method()\n async setError(message: string, updateStatus = true) {\n if (!this.input) return;\n if (updateStatus) this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /**\n * Sets focus on the checkbox.\n */\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /**\n * Removes focus from the checkbox.\n */\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form || e.target !== this.host.closest('form')) return;\n\n this.checked = false;\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n /* Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n requestAnimationFrame(() => (this.checked = this.input.checked));\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n form={this.form}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
/*!
|
2
|
-
* Web Components for Nanopore digital Web Apps
|
3
|
-
*/
|
4
|
-
import{i as n,r as i,h as o,a as t,g as r}from"./p-6ef53fa1.js";import{c as s}from"./p-411bb8f1.js";let e;const a=()=>{if(!e){const n=window;n.Nanoicons=n.Nanoicons||{};e=n.Nanoicons.map=n.Nanoicons.map||new Map}return e};const c=n=>{let i=f(n.src);if(i){return i}i=h(n.name,n.icon);if(i){return l(i)}if(n.icon){i=f(n.icon);if(i){return i}}return null};const l=i=>{const o=a().get(i);if(o){return o}return n(`../nano-assets/fontawesome-pro/svgs/${i}.svg`)};const h=(n,i)=>{if(!n&&i&&!d(i)){n=i}if(u(n)){n=m(n)}if(!u(n)||n.trim()===""){return null}const o=n.replace(/[a-z]|-|\/|\d/gi,"");if(o!==""){console.warn("invalid characters in icon name "+n);return null}return n};const f=n=>{if(u(n)){n=n.trim();if(d(n)){return n}}return null};const d=n=>n.length>0&&/(\/|\.)/.test(n);const u=n=>typeof n==="string";const m=n=>n.toLowerCase();const p=n=>{if(n){const i=document.createElement("div");i.innerHTML=n;for(let n=i.childNodes.length-1;n>=0;n--){if(i.childNodes[n].nodeName.toLowerCase()!=="svg"){i.removeChild(i.childNodes[n])}}const o=i.firstElementChild;if(o&&o.nodeName.toLowerCase()==="svg"){const n=o.getAttribute("class")||"";o.setAttribute("class",(n+" sc-nano-icon s-nano-icon svg").trim());if(g(o)){return i.innerHTML}}}return""};const g=n=>{if(n.nodeType===1){if(n.nodeName.toLowerCase()==="script"){return false}for(let i=0;i<n.attributes.length;i++){const o=n.attributes[i].value;if(u(o)&&o.toLowerCase().indexOf("on")===0){return false}}for(let i=0;i<n.childNodes.length;i++){if(!g(n.childNodes[i])){return false}}}return true};const v=new Map;const b=new Map;const w=n=>{let i=b.get(n);if(!i){i=fetch(n).then((i=>{if(i.ok){return i.text().then((i=>{v.set(n,p(i))}))}v.set(n,"")}));b.set(n,i)}return i};const y=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--color:var(--nano-color-base, currentcolor);--primary-color:var(--nano-color-tint, currentcolor);--secondary-color:var(--nano-color-shade, currentcolor);--stroke-width:32px;--primary-opacity:0.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);min-height:var(--icon-size);contain:strict;fill:currentcolor;box-sizing:content-box !important;transition:opacity 0.3s ease;color:var(--color);margin-inline:var(--icon-margin-start) var(--icon-margin-end);margin-block:var(--icon-margin-top) var(--icon-margin-bottom)}:host .nanoicon{stroke:currentcolor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;height:100%;width:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}";const x=class{constructor(n){i(this,n);this.svgContent=undefined;this.isVisible=false;this.isLoading=true;this.color=undefined;this.ariaLabel=undefined;this.flipRtl=undefined;this.name=undefined;this.src=undefined;this.icon=undefined;this.size=undefined;this.lazy=true}setAriaLabel(){if(!this.ariaLabel){const n=h(this.name,this.icon);if(n){this.ariaLabel=n.split("/").slice(-1)[0].replace(/\-/g," ")}}}connectedCallback(){this.waitUntilVisible(this.el,"50px",(()=>{this.isVisible=true;this.loadIcon()}))}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}}componentWillLoad(){this.setAriaLabel()}waitUntilVisible(n,i,o){if(this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){const t=this.io=new window.IntersectionObserver((n=>{if(n[0].isIntersecting||n[1]&&n[1].isIntersecting){t.disconnect();this.io=undefined;o()}}),{rootMargin:i});t.observe(n)}else{o()}}loadIcon(){if(this.isVisible){const n=c(this);if(n){if(v.has(n)){this.svgContent=v.get(n);requestAnimationFrame((()=>this.isLoading=false))}else{w(n).then((()=>{this.svgContent=v.get(n);requestAnimationFrame((()=>this.isLoading=false))}))}}}this.setAriaLabel()}render(){const n=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&this.el.ownerDocument.dir==="rtl"&&this.flipRtl!==false;return o(t,{role:"img",class:Object.assign(Object.assign({},s(this.color)),{loading:this.isLoading,[`icon-${this.size}`]:!!this.size,"flip-rtl":!!n})},this.svgContent?o("div",{class:"icon-inner",innerHTML:this.svgContent}):o("div",{class:"icon-inner"}))}get el(){return r(this)}static get watchers(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}}};x.style=y;export{x as nano_icon};
|
5
|
-
//# sourceMappingURL=p-1aff5304.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["CACHED_MAP","getIconMap","win","window","Nanoicons","map","Map","getUrl","i","url","getSrc","src","getName","name","icon","getNamedUrl","iconName","get","getAssetPath","isSrc","isStr","toLower","trim","invalidChars","replace","console","warn","str","length","test","val","toLowerCase","validateContent","svgContent","div","document","createElement","innerHTML","childNodes","nodeName","removeChild","svgElm","firstElementChild","svgClass","getAttribute","setAttribute","isValid","elm","nodeType","attributes","value","indexOf","iconContent","requests","getSvgContent","req","fetch","then","rsp","ok","text","set","iconCss","Icon","setAriaLabel","this","ariaLabel","label","split","slice","connectedCallback","waitUntilVisible","el","isVisible","loadIcon","disconnectedCallback","io","disconnect","undefined","componentWillLoad","rootMargin","cb","lazy","IntersectionObserver","data","isIntersecting","observe","has","requestAnimationFrame","isLoading","render","flipRtl","ownerDocument","dir","h","Host","role","class","Object","assign","createColorClasses","color","loading","size"],"sources":["./src/components/icon/utils.ts","./src/components/icon/validate.ts","./src/components/icon/request.ts","./src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n if (!CACHED_MAP) {\n const win = window as any;\n win.Nanoicons = win.Nanoicons || {};\n CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();\n }\n return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n const map = getIconMap();\n Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n let url = getSrc(i.src);\n if (url) {\n return url;\n }\n\n url = getName(i.name, i.icon);\n if (url) {\n return getNamedUrl(url);\n }\n\n if (i.icon) {\n url = getSrc(i.icon);\n if (url) {\n return url;\n }\n }\n return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n const url = getIconMap().get(iconName);\n if (url) {\n return url;\n }\n return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n iconName: string | undefined,\n icon: string | undefined\n) => {\n if (!iconName && icon && !isSrc(icon)) {\n iconName = icon;\n }\n if (isStr(iconName)) {\n iconName = toLower(iconName);\n }\n\n if (!isStr(iconName) || iconName.trim() === '') {\n return null;\n }\n\n // only allow alpha characters and dash\n const invalidChars = iconName.replace(/[a-z]|-|\\/|\\d/gi, '');\n if (invalidChars !== '') {\n console.warn('invalid characters in icon name ' + iconName);\n return null;\n }\n return iconName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n if (isStr(src)) {\n src = src.trim();\n if (isSrc(src)) {\n return src;\n }\n }\n return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string | null) => {\n if (svgContent) {\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n // setup this way to ensure it works on our buddy IE\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n const svgClass = svgElm.getAttribute('class') || '';\n svgElm.setAttribute(\n 'class',\n (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n );\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as any)) {\n return div.innerHTML;\n }\n }\n }\n return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n if (elm.nodeType === 1) {\n if (elm.nodeName.toLowerCase() === 'script') {\n return false;\n }\n\n for (let i = 0; i < elm.attributes.length; i++) {\n const val = elm.attributes[i].value;\n if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n return false;\n }\n }\n\n for (let i = 0; i < elm.childNodes.length; i++) {\n if (!isValid(elm.childNodes[i] as any)) {\n return false;\n }\n }\n }\n return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n // see if we already have a request for this url\n let req = requests.get(url);\n if (!req) {\n // we don't already have a request\n req = fetch(url).then((rsp) => {\n if (rsp.ok) {\n return rsp.text().then((svgContent) => {\n iconContent.set(url, validateContent(svgContent));\n });\n }\n iconContent.set(url, '');\n });\n\n // cache for the same requests\n requests.set(url, req);\n }\n return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n /**\n * @prop --color: defaults to current context color\n * @prop --primary-color: used for duotone icons to set the primary color\n * @prop --secondary-color: used for duotone icons to set the secondary color\n * @prop --primary-opacity: used for duotone icons to set the primary opacity\n * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n * @prop --stroke-width: 32px default stroke width\n */\n\n --color: var(--nano-color-base, currentcolor);\n --primary-color: var(--nano-color-tint, currentcolor);\n --secondary-color: var(--nano-color-shade, currentcolor);\n --stroke-width: 32px;\n --primary-opacity: 0.8;\n --secondary-opacity: 1;\n --icon-size: var(--nano-icon-size, 1em);\n --icon-margin-top: var(--nano-icon-margin-top, 0);\n --icon-margin-end: var(--nano-icon-margin-end, 0);\n --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n display: inline-block;\n width: var(--icon-size);\n height: var(--icon-size);\n min-width: var(--icon-size);\n min-height: var(--icon-size);\n contain: strict;\n fill: currentcolor;\n box-sizing: content-box !important;\n transition: opacity 0.3s ease;\n color: var(--color);\n margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n fill: none;\n}\n\n.nanoicon-stroke-width {\n stroke-width: 32px;\n stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n display: block;\n height: 100%;\n width: 100%;\n overflow: visible;\n}\n\n:host(.loading) {\n opacity: 0;\n}\n\n.fa-primary {\n color: var(--primary-color);\n opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n color: var(--secondary-color);\n opacity: var(--secondary-opacity) !important;\n}\n\n/* Icon RTL\n * -----------------------------------------------------------\n */\n:host(.flip-rtl) .icon-inner {\n transform: scaleX(-1);\n}\n\n/* Icon Sizes\n * -----------------------------------------------------------\n */\n:host(.icon-small) {\n font-size: 18px !important;\n}\n\n:host(.icon-large) {\n font-size: 32px !important;\n}\n","import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\n/**\n * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n */\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /**\n * Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n */\n @Prop() color?: Color;\n\n /**\n * Specifies the label to use for accessibility. Defaults to the icon name.\n */\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /**\n * Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n */\n @Prop() flipRtl?: boolean;\n\n /**\n * Specifies which icon to use from the built-in set of icons.\n */\n @Prop() name?: string;\n\n /**\n * Specifies the exact `src` of an SVG file to use.\n */\n @Prop() src?: string;\n\n /**\n * A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n */\n @Prop() icon?: any;\n\n /**\n * The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n */\n @Prop() size?: 'small' | 'large';\n\n /**\n * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n private setAriaLabel() {\n if (!this.ariaLabel) {\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n }\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // browser doesn't support IntersectionObserver\n // so just fallback to always show it\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n });\n }\n }\n }\n this.setAriaLabel();\n }\n\n render() {\n const flipRtl =\n this.flipRtl ||\n (this.name &&\n (this.name.indexOf('arrow') > -1 ||\n this.name.indexOf('chevron') > -1) &&\n (this.el.ownerDocument as Document).dir === 'rtl' &&\n this.flipRtl !== false);\n\n return (\n <Host\n role=\"img\"\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
/*!
|
2
|
-
* Web Components for Nanopore digital Web Apps
|
3
|
-
*/
|
4
|
-
import{a as t}from"./p-257432ff.js";const o=new Set;function n(t){o.add(t);document.body.classList.add("nano-scroll-lock")}function c(t){o.delete(t);if(o.size===0){document.body.classList.remove("nano-scroll-lock")}}function s(t,o,n=false){if(!n){try{t.scrollTo({left:o,behavior:"smooth"})}catch(n){t.scrollLeft=o}return}try{t.scrollTo({top:o,behavior:"smooth"})}catch(n){t.scrollTop=o}}function e(o,n,c="vertical",e="start"){const i=t(o,n);const f=i.top+n.scrollTop;const r=i.left+n.scrollLeft;const a=n.scrollLeft;const l=n.scrollLeft+n.offsetWidth;const u=n.scrollTop;const h=n.scrollTop+n.offsetHeight;if(c==="horizontal"||c==="both"){if(e==="start"){if(r<a)s(n,r);else if(r+o.clientWidth>l)s(n,r-n.offsetWidth+o.clientWidth)}else s(n,n.scrollLeft+i.left-n.offsetWidth/2+o.offsetWidth/2)}if(c==="vertical"||c==="both"){if(f<u)s(n,f,true);else if(f+o.clientHeight>h){s(n,f-n.offsetHeight+o.clientHeight,true)}}}export{n as l,e as s,c as u};
|
5
|
-
//# sourceMappingURL=p-45b7682a.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["tabCss","id","Tab","this","tabId","handleCloseClick","nanoTabClose","emit","handleCloseKeydown","e","key","async","tab","focus","preventScroll","blur","render","h","Host","host","part","ref","el","class","nanotab","active","disabled","closable","role","tabindex","label","iconName","onClick","onKeyDown","tabIndex"],"sources":["./src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","./src/components/tabs/tab.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --focus-shadow: Defaults to #{$control-focus-style};\n\n * @prop --padding: Defaults to .75rem 1rem on placement 'top' and 1rem on placement 'start';\n\n * @prop --bg-rgb: Defaults to #{$layer-bg-color-rgb};\n * @prop --active-bg: Defaults to rgba(var(--bg-rgb), 1);\n * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n * @prop --inactive-bg: Defaults to rgba(var(--bg-rgb), 0.7);\n\n * @prop --text-color: Defaults to #{map.get($colors, blue)};\n * @prop --disabled-text-color: Defaults to #{map.get($colors, darkgrey)};\n * @prop --active-text-color: Defaults to #{map.get($colors, darkblue)};\n\n * @prop --h-font-size: Defaults to .93em;\n * @prop --v-font-size: Defaults to .875em;\n * @prop --tab-spacing: Gap between tabs. Defaults to 1rem;\n * @prop --tab-divider-size: Defaults to 0;\n * @prop --tab-divider-color: Defaults to #{map.get($colors, lightblue)};\n */\n\n:host {\n --focus-shadow: #{$control-focus-style};\n --padding: 0.75rem 1rem;\n --bg-rgb: #{$layer-bg-color-rgb};\n --active-bg: rgb(var(--bg-rgb) / 100%);\n --inactive-bg: rgb(var(--bg-rgb) / 70%);\n --disabled-bg-rgb: var(--bg-rgb);\n --text-color: #{map.get($colors, blue)};\n --disabled-text-color: #{map.get($colors, darkgrey)};\n --active-text-color: #{map.get($colors, darkblue)};\n --h-font-size: 0.93em;\n --v-font-size: 0.875em;\n --tab-spacing: 0.5rem;\n --tab-divider-size: 0;\n --tab-divider-color: #{map.get($colors, lightblue)};\n --tab-indicator-size: 5px;\n\n display: inline-block;\n}\n\n:host([direction='vertical']) {\n --padding: 1rem;\n\n .nanotab {\n font-size: var(--v-font-size);\n\n &.nanotab--active {\n font-weight: 600;\n color: var(--active-text-color);\n }\n }\n}\n\n:host([direction='horizontal']) {\n .nanotab {\n font-size: var(--h-font-size);\n margin-block-start: var(--tab-indicator-size);\n border-inline-end: solid var(--tab-divider-size) var(--tab-divider-color);\n\n &.nanotab--active {\n margin-block-start: 0;\n border-block-start:\n solid var(--tab-indicator-size)\n var(--tab-indicator-color);\n background: var(--active-bg);\n color: var(--active-text-color);\n }\n }\n}\n\n.nanotab {\n @include text-inherit();\n\n margin-inline-end: var(--tab-spacing);\n padding: var(--padding);\n display: flex;\n block-size: 100%;\n inline-size: auto;\n background: var(--inactive-bg);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n user-select: none;\n cursor: pointer;\n overflow: visible;\n white-space: nowrap;\n align-items: center;\n\n & ::slotted(*) {\n display: flex;\n align-items: center;\n }\n\n :host(:last-of-type) & {\n margin-inline-end: 0;\n }\n\n &:hover:not(.tab--disabled) {\n text-shadow: 0 0 0.01px var(--text-color);\n }\n\n &:focus {\n outline: none;\n outline-style: none;\n box-shadow: none;\n border-color: transparent;\n }\n\n &:focus:not(.nanotab--disabled) {\n box-shadow: var(--focus-shadow) inset;\n }\n\n &--disabled {\n background: rgb(var(--disabled-bg-rgb) / 100%);\n opacity: 0.5;\n cursor: not-allowed;\n color: var(--disabled-text-color);\n }\n\n &__close-button {\n margin-inline-start: #{$spacing-small};\n appearance: none !important;\n\n --padding: #{$spacing-xsmall} !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n ComponentInterface,\n Method,\n Prop,\n h,\n Event,\n EventEmitter,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab's label.\n */\n\n@Component({\n tag: 'nano-tab',\n styleUrl: 'tab.scss',\n shadow: true,\n})\nexport class Tab implements ComponentInterface {\n private tabId = `nano-tab-${++id}`;\n private tab: HTMLElement;\n\n @Element() host: HTMLNanoTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** The active, selected tab. If none active, the first will automatically be selected. */\n @Prop({ reflect: true }) active = false;\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event() nanoTabClose: EventEmitter;\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus() {\n this.tab.focus({ preventScroll: true });\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab.blur();\n }\n\n private handleCloseClick = () => {\n this.nanoTabClose.emit();\n };\n\n private handleCloseKeydown = (e: KeyboardEvent) => {\n if (e.key === ' ') this.handleCloseClick();\n };\n\n render() {\n return (\n <Host id={this.host.id || this.tabId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n nanotab: true,\n 'nanotab--active': this.active,\n 'nanotab--disabled': this.disabled,\n 'nanotab--closable': this.closable,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <nano-icon-button\n label=\"Close this tab\"\n iconName=\"light/times\"\n class=\"nanotab__close-button\"\n onClick={this.handleCloseClick}\n onKeyDown={this.handleCloseKeydown}\n tabIndex={-1}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":";;;gEAAA,MAAMA,EAAS,owFCYf,IAAIC,EAAK,E,MAWIC,EAAG,M,oEACNC,KAAAC,MAAQ,cAAcH,IAgCtBE,KAAAE,iBAAmB,KACzBF,KAAKG,aAAaC,MAAM,EAGlBJ,KAAAK,mBAAsBC,IAC5B,GAAIA,EAAEC,MAAQ,IAAKP,KAAKE,kBAAkB,E,WA/BX,G,YAGC,M,cAGE,M,cAGjB,K,CAOnBM,iBACER,KAAKS,IAAIC,MAAM,CAAEC,cAAe,M,CAKlCH,oBACER,KAAKS,IAAIG,M,CAWXC,SACE,OACEC,EAACC,EAAI,CAACjB,GAAIE,KAAKgB,KAAKlB,IAAME,KAAKC,OAC7Ba,EAAA,OACEG,KAAK,OACLC,IAAMC,GAAQnB,KAAKS,IAAMU,EACzBC,MAAO,CACLC,QAAS,KACT,kBAAmBrB,KAAKsB,OACxB,oBAAqBtB,KAAKuB,SAC1B,oBAAqBvB,KAAKwB,UAE5BC,KAAK,MAAK,gBACKzB,KAAKuB,SAAW,OAAS,QAAO,gBAChCvB,KAAKsB,OAAS,OAAS,QACtCI,SAAU1B,KAAKuB,WAAavB,KAAKsB,OAAS,KAAO,KAEjDR,EAAA,aACCd,KAAKwB,UACJV,EAAA,oBACEa,MAAM,iBACNC,SAAS,cACTR,MAAM,wBACNS,QAAS7B,KAAKE,iBACd4B,UAAW9B,KAAKK,mBAChB0B,UAAW,K"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["drawerCss","id","Drawer","this","componentId","handleOpenChange","open","show","hide","handleTypeChange","type","contentEle","console","warn","handleContentSelector","contentSelector","host","ownerDocument","querySelector","connectedCallback","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","componentWillLoad","disconnectedCallback","unlockBodyScrolling","async","isVisible","nanoShow","emit","defaultPrevented","contained","activate","lockBodyScrolling","style","right","transition","position","overflow","setTimeout","_","nanoHide","deactivate","event","key","slOverlayDismiss","nanoOverlayDismiss","hasFooter","target","propertyName","classList","contains","nanoAfterShow","nanoAfterHide","panel","focus","render","placementClass","placement","typeClass","h","Host","part","class","drawer","onKeyDown","onTransitionEnd","onClick","ref","el","role","noHeader","label","tabIndex","name","String","fromCharCode","onSlotchange"],"sources":["./src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","./src/components/drawer/drawer.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/utilities/css-patterns/visually_hidden';\n\n:host {\n /**\n * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n * @prop --panel-background-color: background color of panel. Default to 'white'\n * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';\n * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';\n */\n\n position: relative;\n display: block;\n\n --size: 25rem;\n --panel-background-color: white;\n --panel-shadow: 0 4px 16px rgb(0 0 0 / 10%);\n --overlay-color: hsl(203deg 10% 20% / 50%);\n}\n\n.drawer {\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n\n &:not(.drawer--visible) {\n @include hidden;\n }\n}\n\n.drawer--contained {\n position: absolute;\n z-index: initial;\n}\n\n.drawer--fixed {\n position: fixed;\n z-index: 2000;\n}\n\n.drawer__panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n z-index: 2;\n max-width: 100%;\n max-height: 100%;\n background-color: var(--panel-background-color);\n box-shadow: var(--panel-shadow);\n transition: 250ms transform;\n overflow: auto;\n pointer-events: all;\n\n &:focus {\n outline: none;\n }\n}\n\n.drawer--start .drawer__panel {\n @include transform(translate3d(-100%, 0, 0));\n\n inset-block: 0 auto;\n width: var(--size);\n height: 100%;\n}\n\n.drawer--end .drawer__panel {\n @include transform(translate3d(100%, 0, 0));\n\n inset-block: 0 auto;\n width: var(--size);\n height: 100%;\n}\n\n.drawer--top .drawer__panel {\n inset-inline: auto 0;\n inset-block: 0 auto;\n width: 100%;\n height: var(--size);\n transform: translate(0, -100%);\n}\n\n.drawer--bottom .drawer__panel {\n inset-inline: auto 0;\n inset-block: auto 0;\n width: 100%;\n height: var(--size);\n transform: translate(0, 100%);\n}\n\n.drawer--open .drawer__panel {\n transform: translate(0, 0);\n}\n\n.drawer__header {\n display: flex;\n}\n\n.drawer__title {\n flex: 1 1 auto;\n // font-size: var(--sl-font-size-large);\n // line-height: var(--sl-line-height-dense);\n padding: 20px;\n}\n\n.drawer__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n // font-size: var(--sl-font-size-x-large);\n // padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n flex: 1 1 auto;\n // padding: var(--sl-spacing-large);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n text-align: end;\n // padding: var(--sl-spacing-large);\n\n // ::slotted(sl-button:not(:last-of-type)) {\n // margin-right: var(--sl-spacing-x-small);\n // }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n display: none;\n}\n\n.drawer__overlay {\n display: block;\n position: fixed;\n inset: 0;\n background-color: var(--overlay-color);\n opacity: 0;\n transition: 250ms opacity;\n pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n opacity: 1;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\n\nlet id = 0;\n\n/**\n * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24\n * @slot - The drawer's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n */\n@Component({\n tag: 'nano-drawer',\n styleUrl: 'drawer.scss',\n shadow: true,\n})\nexport class Drawer {\n private componentId = `drawer-${++id}`;\n private modal: Modal;\n private panel: HTMLElement;\n private contentEle: HTMLElement;\n\n @Element() host: HTMLNanoDrawerElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /**\n * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.\n */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /**\n * The drawer's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility.\n */\n @Prop() label = '';\n\n /** The direction from which the drawer will open. */\n @Prop() placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n /**\n * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this prop and add `position: relative` to the parent.\n */\n @Prop() contained = false;\n\n /**\n * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n * accessible way for users to dismiss the drawer.\n */\n @Prop() noHeader = false;\n\n /**\n * The display type of the drawer\n */\n @Prop() type: 'overlay' | 'reveal' | 'push' = 'overlay';\n\n /**\n * Required for 'reveal' and 'push' types\n * A valid DOM selector of the content element that this drawer will push or reveal underneath\n * Please remember - elements wrapping the content element must be 'overflow: hidden'\n * otherwise menus will be shown when closed\n */\n @Prop() contentSelector: string;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n @Watch('type')\n handleTypeChange() {\n if (this.type !== 'push' && this.type !== 'reveal') return;\n if (!this.contentEle) {\n this.type = 'overlay';\n console.warn('a valid contentSelector must be set');\n return;\n }\n }\n\n @Watch('contentSelector')\n handleContentSelector() {\n if (!this.contentSelector) this.contentEle = null;\n else\n this.contentEle = (this.host.ownerDocument as Document).querySelector(\n this.contentSelector\n );\n }\n\n /**\n * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.\n */\n @Event() nanoShow: EventEmitter;\n\n /**\n * Emitted after the drawer opens and all transitions are complete.\n */\n @Event() nanoAfterShow: EventEmitter;\n\n /**\n * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.\n */\n @Event() nanoHide: EventEmitter;\n\n /**\n * Emitted after the drawer closes and all transitions are complete.\n */\n @Event() nanoAfterHide: EventEmitter;\n\n /**\n * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.\n */\n @Event() nanoOverlayDismiss: EventEmitter;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleOverlayClick = this.handleOverlayClick.bind(this);\n this.handleSlotChange = this.handleSlotChange.bind(this);\n\n this.modal = new Modal(this.host);\n }\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n this.handleContentSelector();\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /** Shows the drawer */\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n\n if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))\n return;\n this.contentEle.style.right = '0';\n this.contentEle.style.transition = 'all ease 250ms';\n this.contentEle.style.position = 'relative';\n this.contentEle.style.overflow = 'hidden';\n setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);\n }\n\n /** Hides the drawer */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.open = false;\n this.modal.deactivate();\n\n unlockBodyScrolling(this.host);\n\n if (!this.contentEle) return;\n this.contentEle.style.transition = '';\n this.contentEle.style.position = '';\n this.contentEle.style.overflow = '';\n this.contentEle.style.right = '';\n }\n\n private handleCloseClick() {\n this.hide();\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n this.hide();\n }\n }\n\n private handleOverlayClick() {\n const slOverlayDismiss = this.nanoOverlayDismiss.emit();\n\n if (!slOverlayDismiss.defaultPrevented) {\n this.hide();\n }\n }\n\n private handleSlotChange() {\n this.hasFooter = !!this.host.querySelector('[slot=\"footer\"]');\n }\n\n private handleTransitionEnd(event: TransitionEvent) {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (\n event.propertyName === 'transform' &&\n target.classList.contains('drawer__panel')\n ) {\n this.isVisible = this.open;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n\n if (this.open) {\n this.panel.focus();\n }\n }\n }\n\n render() {\n const placementClass = 'drawer--' + this.placement;\n const typeClass = 'drawer--' + this.type;\n\n return (\n <Host>\n <div\n part=\"base\"\n class={{\n drawer: true,\n 'drawer--open': this.open,\n 'drawer--visible': this.isVisible,\n [typeClass]: true,\n [placementClass]: true,\n 'drawer--contained': this.contained,\n 'drawer--fixed': !this.contained,\n 'drawer--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div\n part=\"overlay\"\n class=\"drawer__overlay\"\n onClick={this.handleOverlayClick}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"drawer__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"drawer__header\">\n <span\n part=\"title\"\n class=\"drawer__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label || String.fromCharCode(65279)}\n </slot>\n </span>\n {/* <sl-icon-button part=\"close-button\" class=\"drawer__close\" name=\"x\" onClick={this.handleCloseClick} /> */}\n </header>\n )}\n\n <div part=\"body\" class=\"drawer__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"drawer__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,6 +0,0 @@
|
|
1
|
-
/*!
|
2
|
-
* Web Components for Nanopore digital Web Apps
|
3
|
-
*/
|
4
|
-
const t="nano-components";let e;let n;let s;let i=false;let o=false;let l=false;let f=false;let c=null;let r=false;const u={isDev:false,isBrowser:true,isServer:false,isTesting:false};const a=t=>{const e=new URL(t,ke.t);return e.origin!==_e.location.origin?e.href:e.pathname};const d=(t,e="")=>{{return()=>{}}};const h=(t,e)=>{{return()=>{}}};const b="r";const $="o";const m="s";const p="t";const g="s-id";const j="sty-id";const y="c-id";const v="{visibility:hidden}.hydrated{visibility:inherit}";const O="sf-id";const w="http://www.w3.org/1999/xlink";const S={};const x=t=>t!=null;const _=t=>{t=typeof t;return t==="object"||t==="function"};function E(t){var e,n,s;return(s=(n=(e=t.head)===null||e===void 0?void 0:e.querySelector('meta[name="csp-nonce"]'))===null||n===void 0?void 0:n.getAttribute("content"))!==null&&s!==void 0?s:undefined}const T=(t,e,...n)=>{let s=null;let i=null;let o=null;let l=false;let f=false;const c=[];const r=e=>{for(let n=0;n<e.length;n++){s=e[n];if(Array.isArray(s)){r(s)}else if(s!=null&&typeof s!=="boolean"){if(l=typeof t!=="function"&&!_(s)){s=String(s)}if(l&&f){c[c.length-1].i+=s}else{c.push(l?k(null,s):s)}f=l}}};r(n);if(e){if(e.key){i=e.key}if(e.name){o=e.name}{const t=e.className||e.class;if(t){e.class=typeof t!=="object"?t:Object.keys(t).filter((e=>t[e])).join(" ")}}}if(typeof t==="function"){return t(e===null?{}:e,c,N)}const u=k(t,null);u.o=e;if(c.length>0){u.l=c}{u.u=i}{u.h=o}return u};const k=(t,e)=>{const n={$:0,m:t,i:e,p:null,l:null};{n.o=null}{n.u=null}{n.h=null}return n};const C={};const M=t=>t&&t.m===C;const N={forEach:(t,e)=>t.map(L).forEach(e),map:(t,e)=>t.map(L).map(e).map(I)};const L=t=>({vattrs:t.o,vchildren:t.l,vkey:t.u,vname:t.h,vtag:t.m,vtext:t.i});const I=t=>{if(typeof t.vtag==="function"){const e=Object.assign({},t.vattrs);if(t.vkey){e.key=t.vkey}if(t.vname){e.name=t.vname}return T(t.vtag,e,...t.vchildren||[])}const e=k(t.vtag,t.vtext);e.o=t.vattrs;e.l=t.vchildren;e.u=t.vkey;e.h=t.vname;return e};const R=(t,e)=>{if(!t["s-hsf"]||!t.parentNode)return;let n=t.parentNode.__childNodes||t.parentNode.childNodes;let s;const i=n.length;let o=0;for(o;o<i;o++){s=n[o];if(s["s-sr"]&&e&&s["s-psn"]===t["s-sn"]){R(s,true);continue}if(s["s-sn"]!==t["s-sn"])continue;if(s.nodeType===1&&s["s-sf"]){s.hidden=e;s.style.display=e?"none":""}else if(!!s["s-sfc"]){if(e){s["s-sfc"]=s.textContent||undefined;s.textContent=""}else if(!s.textContent||s.textContent.trim()===""){s.textContent=s["s-sfc"]}}}};const H=t=>{if(!t)return;const e=t.__childNodes||t.childNodes;let n;let s;let i;let o;let l;let f;for(s=0,i=e.length;s<i;s++){if(e[s]["s-sr"]){l=e[s]["s-sn"];n=e[s];R(n,false);for(o=0;o<i;o++){f=e[o].nodeType;if(e[o]["s-sf"])continue;if(e[o]["s-hn"]!==n["s-hn"]||l!==""){if(f===1&&l===e[o]["s-sn"]){R(n,true);nt(e[o]);break}}else if(e[o]["s-sn"]===l){if(f===1||f===3&&e[o]&&e[o].textContent&&e[o].textContent.trim()!==""){R(n,true);nt(e[o]);break}}}}H(e[s])}};const U=t=>{P(t);B(t);q(t);z(t);V(t);J(t);K(t);Q(t);G(t);D(t);W(t);F(t)};const A=t=>{t.__cloneNode=t.cloneNode;t.cloneNode=function(e){const n=this;const s=t.__cloneNode.call(n,false);if(e){let t=0;let e,i;const o=["s-id","s-cr","s-lr","s-rc","s-sc","s-p","s-cn","s-sr","s-sn","s-hn","s-ol","s-nr","s-si","s-sf","s-sfc","s-hsf"];for(;t<n.__childNodes.length;t++){e=n.__childNodes[t]["s-nr"];i=o.every((e=>!n.__childNodes[t][e]));if(e){s.__appendChild(e.cloneNode(true))}if(i){s.__appendChild(n.__childNodes[t].cloneNode(true))}}}return s}};const P=t=>{if(!globalThis.Node)return;class e extends Array{item(t){return this[t]}}let n=Object.getOwnPropertyDescriptor(Node.prototype,"childNodes");if(!n){n=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(Node.prototype),"childNodes")}if(n)Object.defineProperty(t,"__childNodes",n);let s=Object.getOwnPropertyDescriptor(Element.prototype,"children");if(s)Object.defineProperty(t,"__children",s);const i=Object.getOwnPropertyDescriptor(Element.prototype,"childElementCount");if(i)Object.defineProperty(t,"__childElementCount",i);Object.defineProperty(t,"children",{get(){return this.childNodes.map((t=>{if(t.nodeType===1)return t;else return null})).filter((t=>!!t))}});Object.defineProperty(t,"firstChild",{get(){return this.childNodes[0]}});Object.defineProperty(t,"lastChild",{get(){return this.childNodes[this.childNodes.length-1]}});Object.defineProperty(t,"childElementCount",{get(){return t.children.length}});if(!n)return;Object.defineProperty(t,"childNodes",{get(){const t=this.__childNodes;const n=new e;for(let e=0;e<t.length;e++){const s=t[e]["s-nr"];if(s&&(s.nodeType!==8||s.nodeValue.indexOf($+".")!==0)){n.push(s)}}return n}})};const D=t=>{if(!globalThis.Element)return;let e=Object.getOwnPropertyDescriptor(Element.prototype,"innerHTML");if(!e)e=Object.getOwnPropertyDescriptor(HTMLElement.prototype,"innerHTML");if(e)Object.defineProperty(t,"__innerHTML",e);Object.defineProperty(t,"innerHTML",{get:function(){let t="";this.childNodes.forEach((e=>t+=e.outerHTML||e.textContent));return t},set:function(t){this.childNodes.forEach((t=>{if(t["s-ol"])t["s-ol"].remove();t.remove()}));this.insertAdjacentHTML("beforeend",t)}})};const W=t=>{if(!globalThis.Element)return;let e=Object.getOwnPropertyDescriptor(Element.prototype,"innerText");if(!e)e=Object.getOwnPropertyDescriptor(HTMLElement.prototype,"innerText");if(e)Object.defineProperty(t,"__innerText",e);Object.defineProperty(t,"innerText",{get:function(){let t="";this.childNodes.forEach((e=>{if(e.innerText)t+=e.innerText;else if(e.textContent)t+=e.textContent.trimEnd()}));return t},set:function(t){this.childNodes.forEach((t=>{if(t["s-ol"])t["s-ol"].remove();t.remove()}));this.insertAdjacentHTML("beforeend",t)}})};const F=t=>{if(!globalThis.Node)return;const e=Object.getOwnPropertyDescriptor(Node.prototype,"textContent");if(e)Object.defineProperty(t,"__textContent",e);Object.defineProperty(t,"textContent",{get:function(){let t="";this.childNodes.forEach((e=>t+=e.textContent||""));return t},set:function(t){this.childNodes.forEach((t=>{if(t["s-ol"])t["s-ol"].remove();t.remove()}));this.insertAdjacentHTML("beforeend",t)}})};const B=t=>{if(t.__insertBefore)return;t.__insertBefore=t.insertBefore;t.insertBefore=function(t,e){const n=t["s-sn"]=ot(t);const s=lt(this.__childNodes,n);if(s){let i=false;this.childNodes.forEach((o=>{if(o===e||e===null){i=true;it(t,s);if(e===null){this.__append(t);return}if(n===e["s-sn"]){const n=e.parentNode.__insertBefore||e.parentNode.insertBefore;n.call(e.parentNode,t,e);nt(t)}else{this.__append(t)}return}}));if(i){return t}}return this.__insertBefore(t,e)}};const q=t=>{if(t.__appendChild)return;t.__appendChild=t.appendChild;t.appendChild=function(t){const e=t["s-sn"]=ot(t);const n=lt(this.__childNodes||this.childNodes,e);if(n){it(t,n);const e=ft(n);const s=e[e.length-1];if(s.parentNode){const e=s.parentNode;e.__insertBefore?e.__insertBefore(t,s.nextSibling):e.insertBefore(t,s.nextSibling);nt(t)}if(n["s-hsf"]){H(n.parentNode)}return t}if(t.nodeType===1&&!!t.getAttribute("slot")&&this.__childNodes)t.hidden=true;return this.__appendChild(t)}};const V=t=>{if(t.__prepend)return;t.__prepend=t.prepend;t.prepend=function(...t){t.forEach((t=>{if(typeof t==="string"){t=this.ownerDocument.createTextNode(t)}const e=t["s-sn"]=ot(t);const n=lt(this.__childNodes,e);if(n){it(t,n);const e=ft(n);const s=e[0];if(s.parentNode){s.parentNode.insertBefore(t,s.nextSibling);nt(t)}if(n["s-hsf"]){H(n.parentNode)}return}if(t.nodeType===1&&!!t.getAttribute("slot")&&this.__childNodes)t.hidden=true;return this.__prepend(t)}))}};const z=t=>{if(t.__append)return;t.__append=t.append;t.append=function(...t){t.forEach((t=>{if(typeof t==="string"){t=this.ownerDocument.createTextNode(t)}this.appendChild(t)}))}};const G=t=>{if(t.__replaceChildren)return;t.__replaceChildren=t.replaceChildren;t.replaceChildren=function(...t){const e=lt(this.__childNodes,"");if(e){const n=ft(e);n.forEach((t=>{if(!t["s-sr"]){t.remove()}}));this.append(...t)}}};const J=t=>{if(t.__insertAdjacentHTML)return;t.__insertAdjacentHTML=t.insertAdjacentHTML;t.insertAdjacentHTML=function(t,e){if(t!=="afterbegin"&&t!=="beforeend"){return this.__insertAdjacentHTML(t,e)}const n=this.ownerDocument.createElement("_");let s;n.innerHTML=e;if(t==="afterbegin"){while(s=n.firstChild){this.prepend(s)}}else if(t==="beforeend"){while(s=n.firstChild){this.append(s)}}}};const K=t=>{if(t.__insertAdjacentText)return;t.__insertAdjacentText=t.insertAdjacentText;t.insertAdjacentText=function(t,e){this.insertAdjacentHTML(t,e)}};const Q=t=>{if(t.__insertAdjacentElement)return;t.__insertAdjacentElement=t.insertAdjacentElement;t.insertAdjacentElement=function(t,e){if(t!=="afterbegin"&&t!=="beforeend"){return this.__insertAdjacentElement(t,e)}if(t==="afterbegin"){this.prepend(e)}else if(t==="beforeend"){this.append(e)}}};const X=t=>{if(!t||t.__nextSibling||!globalThis.Node)return;Y(t);tt(t);Z(t);et(t)};const Y=t=>{if(!t||t.__nextSibling)return;const e=Object.getOwnPropertyDescriptor(Node.prototype,"nextSibling");if(e)Object.defineProperty(t,"__nextSibling",e);else{t.__nextSibling=t.nextSibling||true}Object.defineProperty(t,"nextSibling",{get:function(){var t;const e=(t=this["s-ol"])===null||t===void 0?void 0:t.parentNode.childNodes;const n=e===null||e===void 0?void 0:e.indexOf(this);if(e&&n>-1){return e[n+1]}return this.__nextSibling}})};const Z=t=>{if(!t||t.__nextElementSibling||!t.nextSiblingElement)return;const e=Object.getOwnPropertyDescriptor(Element.prototype,"nextElementSibling");if(e)Object.defineProperty(t,"__nextElementSibling",e);else{t.__nextElementSibling=t.nextSiblingElement||true}Object.defineProperty(t,"nextElementSibling",{get:function(){var t;const e=(t=this["s-ol"])===null||t===void 0?void 0:t.parentNode.children;const n=e===null||e===void 0?void 0:e.indexOf(this);if(e&&n>-1){return e[n+1]}return this.__nextElementSibling}})};const tt=t=>{if(!t||t.__previousSibling)return;const e=Object.getOwnPropertyDescriptor(Node.prototype,"previousSibling");if(e)Object.defineProperty(t,"__previousSibling",e);else{t.__previousSibling=t.previousSibling||true}Object.defineProperty(t,"previousSibling",{get:function(){var t;const e=(t=this["s-ol"])===null||t===void 0?void 0:t.parentNode.childNodes;const n=e===null||e===void 0?void 0:e.indexOf(this);if(e&&n>-1){return e[n-1]}return this.__previousSibling}})};const et=t=>{if(!t||t.__previousElementSibling||!t.previousElementSibling)return;const e=Object.getOwnPropertyDescriptor(Element.prototype,"previousElementSibling");if(e)Object.defineProperty(t,"__previousElementSibling",e);else{t.__previousElementSibling=t.previousSiblingElement||true}Object.defineProperty(t,"previousElementSibling",{get:function(){var t;const e=(t=this["s-ol"])===null||t===void 0?void 0:t.parentNode.children;const n=e===null||e===void 0?void 0:e.indexOf(this);if(e&&n>-1){return e[n-1]}return this.__previousElementSibling}})};const nt=t=>{if(!t||t.__remove)return;t.__remove=t.remove||true;st(t.parentNode);t.remove=function(){if(this.parentNode){return this.parentNode.removeChild(this)}return this.__remove()}};const st=t=>{if(!t||t.__removeChild)return;t.__removeChild=t.removeChild;t.removeChild=function(t){if(t&&typeof t["s-sn"]!=="undefined"){const e=lt(this.__childNodes||this.childNodes,t["s-sn"]);t.parentElement.__removeChild(t);if(e&&e["s-hsf"]){H(e.parentElement)}return}return this.__removeChild(t)}};const it=(t,e)=>{if(t["s-ol"]&&t["s-ol"].isConnected)return;const n=document.createTextNode("");n["s-nr"]=t;if(e["s-cr"]&&e["s-cr"].parentNode){const t=e["s-cr"].parentNode.__appendChild||e["s-cr"].parentNode.appendChild;t.call(e["s-cr"].parentNode,n)}t["s-ol"]=n};const ot=t=>t["s-sn"]||t.nodeType===1&&t.getAttribute("slot")||t.slot||"";const lt=(t,e)=>{let n=0;let s;if(!t)return null;for(;n<t.length;n++){s=t[n];if(s["s-sr"]&&s["s-sn"]===e){return s}s=lt(s.childNodes,e);if(s){return s}}return null};const ft=t=>{const e=[t];const n=t["s-sn"]||"";while((t=t.nextSibling)&&t["s-sn"]===n){e.push(t)}return e};const ct=(t,e,n,s)=>{const i=d("hydrateClient",e);const o=t.shadowRoot;const l=[];const f=[];const c=[];const r=o?[]:null;let u=k(e,null);u.p=t;if(!ke.g){ut(Ee.body,ke.g=new Map)}t[g]=n;t.removeAttribute(g);s.j=rt(u,l,f,r,t,t,n,c);let a=0;const h=l.length;let b;for(a;a<h;a++){b=l[a];const n=b.v+"."+b.O;const s=ke.g.get(n);const i=b.p;if(!o){i["s-hn"]=e.toUpperCase();if(b.m==="slot"){i["s-cr"]=t["s-cr"]}}if(s&&s.isConnected){if(o&&s["s-en"]===""){s.parentNode.insertBefore(i,s.nextSibling)}s.parentNode.removeChild(s)}ke.g.delete(n)}const $=[];let m=0;const p=c.length;let j;let y;let v;let O;for(m;m<p;m++){j=c[m];if(!j||!j.length)continue;v=j.length;y=0;for(y;y<v;y++){O=j[y];if(!$[O.hostId]){$[O.hostId]=ke.g.get(O.hostId)}if(!$[O.hostId])continue;const t=$[O.hostId];if(!t.shadowRoot||!o){O.slot["s-cr"]=t["s-cr"];if(!O.slot["s-cr"]&&t.shadowRoot){O.slot["s-cr"]=t}else{const e=t.__childNodes||t.childNodes;O.slot["s-cr"]=e[0]}it(O.node,O.slot);X(O.node)}if(t.shadowRoot){t.appendChild(O.node)}}}if(o){let e=0;const n=r.length;for(e;e<n;e++){o.appendChild(r[e])}Array.from(t.childNodes).forEach((t=>{if(t.nodeType===8&&typeof t["s-sn"]!=="string"){t.parentNode.removeChild(t)}}))}s.S=t;i()};const rt=(t,e,n,s,i,o,l,f=[])=>{let c;let r;let u;let a;const d=i["s-sc"];if(o.nodeType===1){c=o.getAttribute(y);if(c){r=c.split(".");if(r[0]===l||r[0]==="0"){u=at({v:r[0],O:r[1],_:r[2],T:r[3],m:o.tagName.toLowerCase(),p:o,o:{class:o.className}});e.push(u);o.removeAttribute(y);if(!t.l){t.l=[]}const l=u.p.getAttribute("s-sn");if(typeof l==="string"){u.p["s-sn"]=l;u.p.removeAttribute("s-sn")}const f=u.p.getAttribute(O);if(f){u.p.removeAttribute(O);const t=n.find((t=>t.p["s-sn"]===u.p["s-sn"]||t.h===u.p["s-sn"]));if(t){u.p["s-sf"]=true;u.p["s-hn"]=i.tagName;t.l=t.l||[];t.l[u.T]=u;if(t.p.nodeType===1){t.p.appendChild(u.p)}}}else if(u.T!==undefined){t.l[u.T]=u}if(d)o["s-si"]=d;t=u;if(s&&u._==="0"&&!f){s[u.T]=u.p}}}const h=o.__childNodes||o.childNodes;for(a=h.length-1;a>=0;a--){rt(t,e,n,s,i,h[a],l,f)}if(o.shadowRoot){for(a=o.shadowRoot.childNodes.length-1;a>=0;a--){rt(t,e,n,s,i,o.shadowRoot.childNodes[a],l,f)}}}else if(o.nodeType===8){r=o.nodeValue.split(".");if(r[1]===l||r[1]==="0"){c=r[0];u=at({v:r[1],O:r[2],_:r[3],T:r[4]||"0",p:o});if(c===p){let f=u.p=o.nextSibling;if(u.p&&u.p.nodeType===3){u.i=u.p.textContent;e.push(u);o.remove();if(r[5]==="1"){f["s-sf"]=true;f["s-sn"]=r[6]||"";f["s-sfc"]=f.textContent;f["s-hn"]=i.tagName;const t=n.find((t=>t.p["s-sn"]===f["s-sn"]||t.h===f["s-sn"]));if(t){t.l=t.l||[];t.l[u.T]=u;if(t.p.nodeType===1){t.p.appendChild(f)}}}else{if(l===u.v){if(!t.l){t.l=[]}t.l[u.T]=u}if(s&&u._==="0"){s[u.T]=u.p}}}}else if(u.v===l){if(c===m){u.m="slot";t.o=undefined;const i=o["s-sn"]=u.h=r[5]||"";o["s-sr"]=true;if(r[6]==="1"){o["s-hsf"]=true}if(r[7]==="1"){let t=o.previousSibling;while(!!t&&t.nodeType!==8){t=t.previousSibling}o["s-sfc"]=t.nodeValue}const l=(t===null||t===void 0?void 0:t.p)?t.p["s-id"]||t.p.getAttribute("s-id"):"";if(s){const e=u.p=Ee.createElement(u.m);if(u.h){u.p.setAttribute("name",i)}if(l&&l!==u.v){t.p.insertBefore(e,t.p.children[0])}else{o.parentNode.insertBefore(u.p,o)}dt(f,r[2],i,o,u.v);o.remove();if(u._==="0"){s[u.T]=u.p}}else{const n=u.p;const s=l&&l!==u.v&&t.p.shadowRoot;dt(f,r[2],i,o,s?l:u.v);if(s){t.p.insertBefore(n,t.p.children[0])}e.push(u)}n.push(u);if(!t.l){t.l=[]}t.l[u.T]=u}else if(c===b){if(s){o.remove()}else{i["s-cr"]=o;o["s-cn"]=true}}}}}else if(t&&t.m==="style"){const e=k(null,o.textContent);e.p=o;e.T="0";t.l=[e]}return t};const ut=(t,e)=>{if(t.nodeType===1){const n=t[g]||t.getAttribute(g);if(n){e.set(n,t)}let s=0;const i=t.__childNodes||t.childNodes;for(;s<i.length;s++){ut(i[s],e)}if(t.shadowRoot){for(s=0;s<t.shadowRoot.childNodes.length;s++){ut(t.shadowRoot.childNodes[s],e)}}}else if(t.nodeType===8){const n=t.nodeValue.split(".");if(n[0]===$){e.set(n[1]+"."+n[2],t);t["s-en"]=n[3]}}};const at=t=>{const e={$:0,v:null,O:null,_:null,T:"0",p:null,o:null,l:null,u:null,h:null,m:null,i:null};return Object.assign(Object.assign({},e),t)};const dt=(t,e,n,s,i)=>{let o=s.nextSibling;t[e]=t[e]||[];while(o&&(o["s-sn"]===n||n===""&&!o["s-sn"]&&(o.nodeType===8&&o.nodeValue.indexOf(".")!==1||o.nodeType===3))&&!o["s-sf"]){o["s-sn"]=n;t[e].push({slot:s,node:o,hostId:i});o=o.nextSibling}};const ht=t=>xe.map((e=>e(t))).find((t=>!!t));const bt=(t,e)=>{if(t!=null&&!_(t)){if(e&4){return t==="false"?false:t===""||!!t}if(e&2){return parseFloat(t)}if(e&1){return String(t)}return t}return t};const $t=t=>pe(t).S;const mt=(t,e,n)=>{const s=$t(t);return{emit:t=>pt(s,e,{bubbles:!!(n&4),composed:!!(n&2),cancelable:!!(n&1),detail:t})}};const pt=(t,e,n)=>{const s=ke.ce(e,n);t.dispatchEvent(s);return s};const gt=new WeakMap;const jt=(t,e,n)=>{let s=Se.get(t);if(Me&&n){s=s||new CSSStyleSheet;if(typeof s==="string"){s=e}else{s.replaceSync(e)}}else{s=e}Se.set(t,s)};const yt=(t,e,n,s)=>{var i;let o=Ot(e);const l=Se.get(o);t=t.nodeType===11?t:Ee;if(l){if(typeof l==="string"){t=t.head||t;let e=gt.get(t);let n;if(!e){gt.set(t,e=new Set)}if(!e.has(o)){if(t.host&&(n=t.querySelector(`[${j}="${o}"]`))){n.innerHTML=l}else{{n=Ee.createElement("style");n.innerHTML=l}const e=(i=ke.k)!==null&&i!==void 0?i:E(Ee);if(e!=null){n.setAttribute("nonce",e)}t.insertBefore(n,t.querySelector("link"))}if(e){e.add(o)}}}else if(!t.adoptedStyleSheets.includes(l)){t.adoptedStyleSheets=[...t.adoptedStyleSheets,l]}}return o};const vt=t=>{const e=t.C;const n=t.S;const s=e.$;const i=d("attachStyles",e.M);const o=yt(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);if(s&10){n["s-sc"]=o;n.classList.add(o+"-h");if(s&2){n.classList.add(o+"-s")}}i()};const Ot=(t,e)=>"sc-"+t.M;const wt=t=>t.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g,"$1{");const St=(t,e,n,s,i,o)=>{if(n!==s){let l=ye(t,e);let f=e.toLowerCase();if(e==="class"){const e=t.classList;const i=_t(n);const o=_t(s);if(t["s-si"]&&o.indexOf(t["s-si"])<0){o.push(t["s-si"])}e.remove(...i.filter((t=>t&&!o.includes(t))));e.add(...o.filter((t=>t&&!i.includes(t))))}else if(e==="style"){{for(const e in n){if(!s||s[e]==null){if(e.includes("-")){t.style.removeProperty(e)}else{t.style[e]=""}}}}for(const e in s){if(!n||s[e]!==n[e]){if(e.includes("-")){t.style.setProperty(e,s[e])}else{t.style[e]=s[e]}}}}else if(e==="key");else if(e==="ref"){if(s){s(t)}}else if(!l&&e[0]==="o"&&e[1]==="n"){if(e[2]==="-"){e=e.slice(3)}else if(ye(_e,f)){e=f.slice(2)}else{e=f[2]+e.slice(3)}if(n){ke.rel(t,e,n,false)}if(s){ke.ael(t,e,s,false)}}else{const c=_(s);if((l||c&&s!==null)&&!i){try{if(!t.tagName.includes("-")){const i=s==null?"":s;if(e==="list"){l=false}else if(n==null||t[e]!=i){t[e]=i}}else{t[e]=s}}catch(t){}}let r=false;{if(f!==(f=f.replace(/^xlink\:?/,""))){e=f;r=true}}if(s==null||s===false){if(s!==false||t.getAttribute(e)===""){if(r){t.removeAttributeNS(w,e)}else{t.removeAttribute(e)}}}else if((!l||o&4||i)&&!c){s=s===true?"":s;if(r){t.setAttributeNS(w,e,s)}else{t.setAttribute(e,s)}}}}};const xt=/\s/;const _t=t=>!t?[]:t.split(xt);const Et=(t,e,n,s)=>{const i=e.p.nodeType===11&&e.p.host?e.p.host:e.p;const o=t&&t.o||S;const l=e.o||S;{for(s in o){if(!(s in l)){St(i,s,o[s],undefined,n,e.$)}}}for(s in l){St(i,s,o[s],l[s],n,e.$)}};const Tt=(t,o,c,r)=>{const u=o.l[c];let a=0;let d;let h;let b;if(!i){l=true;if(u.m==="slot"){if(e){r.classList.add(e+"-s")}u.$|=u.l?2:1}}if(u.i!==null){d=u.p=Ee.createTextNode(u.i)}else if(u.$&(1|2)){d=u.p=Ee.createTextNode("")}else{d=u.p=Ee.createElement(u.m);{Et(null,u,f)}if(x(e)&&d["s-si"]!==e){d.classList.add(d["s-si"]=e)}if(u.l){for(a=0;a<u.l.length;++a){h=Tt(t,u,a,d);if(h){d.__appendChild?d.__appendChild(h):d.appendChild(h)}}}}{d["s-hn"]=s;if(u.$&(2|1)){d["s-sr"]=true;d["s-cr"]=n;d["s-sn"]=u.h||"";if(o.h){d["s-psn"]=o.h}if(u.$&2){if(u.l){for(a=0;a<u.l.length;++a){let e=d.nodeType===1?d:r;while(e.nodeType!==1){e=e.parentNode}h=Tt(t,u,a,e);h["s-sf"]=d["s-hsf"]=true;if(typeof h["s-sn"]==="undefined"){h["s-sn"]=u.h||""}if(h.nodeType===3){h["s-sfc"]=h.textContent}if(h&&(!t||!t.l)){e.appendChild(h)}}}if(t&&t.l)Ut(t,u)}b=t&&t.l&&t.l[c];if(b&&b.m===u.m&&t.p){kt(t.p,false)}}}return d};const kt=(t,e)=>{ke.$|=1;const n=t.__childNodes||t.childNodes;for(let t=n.length-1;t>=0;t--){const i=n[t];if(i["s-hn"]!==s&&i["s-ol"]){Ht(i).insertBefore(i,Rt(i));i["s-ol"].remove();i["s-ol"]=undefined;l=true}if(e){kt(i,e)}}ke.$&=~1};const Ct=(t,e,n,i,o,l)=>{let f=t["s-cr"]&&t["s-cr"].parentNode||t;let c;if(f.shadowRoot&&f.tagName===s){f=f.shadowRoot}for(;o<=l;++o){if(i[o]){c=Tt(null,n,o,t);if(c){i[o].p=c;f.insertBefore(c,Rt(e))}}}};const Mt=t=>{const e=t.__childNodes||t.childNodes;let n;let s;let i;for(s=0,i=e.length;s<i;s++){n=e[s];if(n["s-ol"]){if(n["s-hn"])n["s-hn"]=undefined}else{Mt(n)}}};const Nt=(t,e,n,s,i)=>{for(;e<=n;++e){if(s=t[e]){i=s.p;Wt(s);{o=true;Mt(i);if(i["s-ol"]){i["s-ol"].remove()}else{kt(i,true)}}i.remove()}}};const Lt=(t,e,n,s)=>{const i=[];const l={};let f=0;let c=0;let r=0;let u=0;let a=0;let d=e.length-1;let h=e[0];let b=e[d];let $=s.length-1;let m=s[0];let p=s[$];let g;let j;let y;let v;let O;let w;let S;let x;let _;while(f<=d&&c<=$){if(h==null){h=e[++f]}else if(b==null){b=e[--d]}else if(m==null){m=s[++c]}else if(p==null){p=s[--$]}else if(It(h,m)){Ut(h,m);h=e[++f];m=s[++c]}else if(It(b,p)){Ut(b,p);b=e[--d];p=s[--$]}else if(It(h,p)){if(h.m==="slot"||p.m==="slot"){kt(h.p.parentNode,false)}Ut(h,p);t.insertBefore(h.p,b.p.nextSibling);h=e[++f];p=s[--$]}else if(It(b,m)){if(h.m==="slot"||p.m==="slot"){kt(b.p.parentNode,false)}Ut(b,m);t.insertBefore(b.p,h.p);b=e[--d];m=s[++c]}else{r=-1;{for(u=f;u<=d;++u){if(e[u]&&e[u].u!==null&&e[u].u===m.u){r=u;break}}}if(r>=0){j=e[r];if(j.m!==m.m){g=Tt(e&&e[c],n,r,t)}else{Ut(j,m);e[r]=undefined;g=j.p}m=s[++c]}else{g=Tt(e&&e[c],n,c,t);m=s[++c]}if(g){{Ht(h.p).insertBefore(g,Rt(h.p))}}}}if(f>d){Ct(t,s[$+1]==null?null:s[$+1].p,n,s,c,$)}else if(c>$){Nt(e,f,d)}if(t.parentNode&&n.p["s-hsf"]){y=t.parentNode.__childNodes||t.parentNode.childNodes;v=y.length-1;for(u=0;u<=v;++u){S=y[u];if(S["s-hsf"]){i.push(S);continue}if(S["s-sf"]){if(!l[S["s-sn"]])l[S["s-sn"]]=[];l[S["s-sn"]].push(S)}}O=i.length-1;for(u=0;u<=O;++u){x=i[u];if(typeof l[x["s-sn"]]==="undefined")continue;w=l[x["s-sn"]].length-1;for(a=0;a<=w;++a){_=l[x["s-sn"]][a];x.parentNode.insertBefore(_,x)}}o=true}};const It=(t,e)=>{if(t.m===e.m){if(t.m==="slot"){return t.h===e.h}{return t.u===e.u}}return false};const Rt=t=>t&&t["s-ol"]||t;const Ht=t=>(t["s-ol"]?t["s-ol"]:t).parentNode;const Ut=(t,e)=>{const n=e.p=t.p;const s=t.l;const i=e.l;const o=e.m;const l=e.i;let c;if(l===null){{if(o==="slot");else{Et(t,e,f)}}if(s!==null&&i!==null){Lt(n,s,e,i)}else if(i!==null){if(t.i!==null){n.textContent=""}Ct(n,null,e,i,0,i.length-1)}else if(s!==null){Nt(s,0,s.length-1)}}else if(c=n["s-cr"]){c.parentNode.textContent=l}else if(t.i!==l){n.textContent=l;if(n["s-sf"]){n["s-sfc"]=l}}};const At=[];const Pt=t=>{let e;let n;let s;let i;let l;let f;let c=0;const r=t.__childNodes||t.childNodes;const u=r.length;for(;c<u;c++){e=r[c];if(e["s-sr"]&&(n=e["s-cr"])&&n.parentNode){if(e["s-hsf"]){o=true}s=n.parentNode.__childNodes||n.parentNode.childNodes;i=e["s-sn"];for(f=s.length-1;f>=0;f--){n=s[f];if(!n["s-cn"]&&!n["s-nr"]&&n["s-hn"]!==e["s-hn"]){if(Dt(n,i)){l=At.find((t=>t.N===n));o=true;n["s-sn"]=n["s-sn"]||i;if(l){l.L=e}else{At.push({L:e,N:n})}if(n["s-sr"]){At.map((t=>{if(Dt(t.N,n["s-sn"])){l=At.find((t=>t.N===n));if(l&&!t.L){t.L=l.L}}}))}}else if(!At.some((t=>t.N===n))){At.push({N:n})}}}}if(e.nodeType===1){Pt(e)}}};const Dt=(t,e)=>{if(t.nodeType===1){if(t.getAttribute("slot")===null&&e===""){return true}if(t.getAttribute("slot")===e){return true}return false}if(t["s-sn"]===e){return true}return e===""};const Wt=t=>{{t.o&&t.o.ref&&t.o.ref(null);t.l&&t.l.map(Wt)}};const Ft=(t,f)=>{const c=t.S;const r=t.C;const u=t.j||k(null,null);const a=M(f)?f:T(null,null,f);s=c.tagName;if(r.I){a.o=a.o||{};r.I.map((([t,e])=>a.o[e]=c[t]))}a.m=null;a.$|=4;t.j=a;a.p=u.p=c.shadowRoot||c;{e=c["s-sc"]}{n=c["s-cr"];i=(r.$&1)!==0;o=false}Ut(u,a);{ke.$|=1;if(l){Pt(a.p);let t;let e;let n;let s;let i;let o;let l;let f=0;for(;f<At.length;f++){t=At[f];e=t.N;if(!e["s-ol"]){n=Ee.createTextNode("");n["s-nr"]=e;e.parentNode.insertBefore(e["s-ol"]=n,e)}}for(f=0;f<At.length;f++){t=At[f];e=t.N;if(t.L){s=t.L.parentNode;i=t.L.__nextSibling||t.L.nextSibling;n=e["s-ol"];l=i;while(n=n.__previousSibling||n.previousSibling){o=n["s-nr"];if(o&&o["s-sn"]===e["s-sn"]&&s===o.parentNode){o=o.__nextSibling||o.nextSibling;if(!o||!o["s-nr"]){i=o;break}}}if(!i&&s!==e.parentNode||(e.__nextSibling||e.nextSibling)!==i){if(e!==i){if(!e["s-hn"]&&e["s-ol"]){e["s-hn"]=e["s-ol"].parentNode.nodeName}s.insertBefore(e,i);e.hidden=false}else{s.insertBefore(e,l)}}}else{if(e.nodeType===1){e.hidden=true}}}}if(o){H(a.p)}ke.$&=~1;At.length=0}};const Bt=(t,e)=>{if(e&&!t.R&&e["s-p"]){e["s-p"].push(new Promise((e=>t.R=e)))}};const qt=(t,e)=>{{t.$|=16}if(t.$&4){t.$|=512;return}Bt(t,t.H);const n=()=>Vt(t,e);return Pe(n)};const Vt=(t,e)=>{const n=t.S;const s=d("scheduleUpdate",t.C.M);const i=t.U;let o;if(e){{t.$|=256;if(t.A){t.A.map((([t,e])=>Yt(i,t,e,n)));t.A=null}}{o=Yt(i,"componentWillLoad",undefined,n)}}{o=Zt(o,(()=>Yt(i,"componentWillRender",undefined,n)))}s();return Zt(o,(()=>zt(t,i,e)))};const zt=async(t,e,n)=>{const s=t.S;const i=d("update",t.C.M);const o=s["s-rc"];if(n){vt(t)}const l=d("render",t.C.M);{Gt(t,e)}if(o){o.map((t=>t()));s["s-rc"]=undefined}l();i();{const e=s["s-p"];const n=()=>Kt(t);if(e.length===0){n()}else{Promise.all(e).then(n);t.$|=4;e.length=0}}};const Gt=(t,e,n)=>{try{c=e;e=e.render();{t.$&=~16}{t.$|=2}{{{Ft(t,e)}}}}catch(e){ve(e,t.S)}c=null;return null};const Jt=()=>c;const Kt=t=>{const e=t.C.M;const n=t.S;const s=d("postUpdate",e);const i=t.U;const o=t.H;{Yt(i,"componentDidRender",undefined,n)}if(!(t.$&64)){t.$|=64;{te(n)}{Yt(i,"componentDidLoad",undefined,n)}s();{t.P(n);if(!o){Xt()}}}else{{Yt(i,"componentDidUpdate",undefined,n)}s()}{t.D(n)}{if(t.R){t.R();t.R=undefined}if(t.$&512){Ue((()=>qt(t,false)))}t.$&=~(4|512)}};const Qt=t=>{{const e=pe(t);const n=e.S.isConnected;if(n&&(e.$&(2|16))===2){qt(e,false)}return n}};const Xt=e=>{{te(Ee.documentElement)}Ue((()=>pt(_e,"appload",{detail:{namespace:t}})))};const Yt=(t,e,n,s)=>{if(t&&t[e]){try{return t[e](n)}catch(t){ve(t,s)}}return undefined};const Zt=(t,e)=>t&&t.then?t.then(e):e();const te=t=>t.classList.add("hydrated");const ee=(t,e)=>pe(t).W.get(e);const ne=(t,e,n,s,i=true)=>{const o=pe(t);const l=o.S;const f=o.W.get(e);const c=o.$;const r=o.U;n=bt(n,s.F[e][0]);const u=Number.isNaN(f)&&Number.isNaN(n);const a=n!==f&&!u;if((!(c&8)||f===undefined)&&a){o.W.set(e,n);if(r){if(s.B&&c&128&&i){const t=s.B[e];if(t){t.map((t=>{try{r[t](n,f,e)}catch(t){ve(t,l)}}))}}if((c&(2|16))===2){if(r.componentShouldUpdate){if(r.componentShouldUpdate(n,f,e)===false){return}}qt(o,false)}}}};const se=(t,e,n)=>{if(e.F){if(t.watchers){e.B=t.watchers}const s=Object.entries(e.F);const i=t.prototype;s.map((([t,[s]])=>{if(s&31||n&2&&s&32){if((s&2048)===0){Object.defineProperty(i,t,{get(){return ee(this,t)},set(n){ne(this,t,n,e)},configurable:true,enumerable:true})}else if(n&1&&s&2048){{Object.defineProperty(i,t,{get(){const e=pe(this);const n=e?e.U:i;if(!n)return;return n[t]},configurable:true,enumerable:true})}}if(s&4096){const n=Object.getOwnPropertyDescriptor(i,t).set;Object.defineProperty(i,t,{set(s){const i=pe(this);if(n){n.apply(this,[s]);ne(this,t,i.S[t],e);return}if(!i)return;const o=(n=false)=>{i.U[t]=s;ne(this,t,i.U[t],e,!n)};if(i.U){o()}else{i.q.then((()=>o(true)))}}})}}else if(n&1&&s&64){Object.defineProperty(i,t,{value(...e){const n=pe(this);return n.q.then((()=>n.U[t](...e)))}})}}));if(n&1){const n=new Map;i.attributeChangedCallback=function(t,e,s){ke.jmp((()=>{const e=n.get(t);if(this.hasOwnProperty(e)){s=this[e];delete this[e]}else if(i.hasOwnProperty(e)&&typeof this[e]==="number"&&this[e]==s){return}const o=Object.getOwnPropertyDescriptor(i,e);if(!o.get||!!o.set){this[e]=s===null&&typeof this[e]==="boolean"?false:s}}))};t.observedAttributes=s.filter((([t,e])=>e[0]&15)).map((([t,s])=>{const i=s[1]||t;n.set(i,t);if(s[0]&512){e.I.push([t,i])}return i}))}}return t};const ie=async(t,e,n,s,i)=>{if((e.$&32)===0){{e.$|=32;i=we(n,e);if(i.then){const t=h();i=await i;t()}if(!i.isProxied){{n.B=i.watchers}se(i,n,2);i.isProxied=true}const s=d("createInstance",n.M);{e.$|=8}try{new i(e)}catch(e){ve(e,t)}{e.$&=~8}{e.$|=128}s();oe(e.U,t)}if(i.style){let t=i.style;const e=Ot(n);if(!Se.has(e)){const s=d("registerStyles",n.M);jt(e,t,!!(n.$&1));s()}}}const o=e.H;const l=()=>qt(e,true);if(o&&o["s-rc"]){o["s-rc"].push(l)}else{l()}};const oe=(t,e)=>{{Yt(t,"connectedCallback",undefined,e)}};const le=t=>{if((ke.$&1)===0){const e=pe(t);const n=e.C;const s=d("connectedCallback",n.M);if(!(e.$&1)){e.$|=1;let s;{s=t.getAttribute(g);if(s){if(n.$&1){const e=yt(t.shadowRoot,n);t.classList.remove(e+"-h",e+"-s")}else if(n.$&2){let e=Ot(n);t["s-sc"]=e}ct(t,n.M,s,e)}}if(!s){if(n.$&(4|8)){fe(t)}}{let n=t;while(n=n.parentNode||n.host){if(n.nodeType===1&&n.hasAttribute("s-id")&&n["s-p"]||n["s-p"]){Bt(e,e.H=n);break}}}if(n.F){Object.entries(n.F).map((([e,[n]])=>{if(n&31&&t.hasOwnProperty(e)){const n=t[e];delete t[e];t[e]=n}}))}{ie(t,e,n)}}else if(e){ae(t,e,n.V);oe(e.U)}s()}};const fe=t=>{const e=t["s-cr"]=Ee.createComment("");e["s-cn"]=true;const n=t.__firstChild||t.firstChild;if(!!n){t.__insertBefore?t.__insertBefore(e,n):t.insertBefore(e,n)}else{t.__appendChild?t.__appendChild(e):t.appendChild(e)}};const ce=t=>{if((ke.$&1)===0){const e=pe(t);const n=e.U;{if(e.G){e.G.map((t=>t()));e.G=undefined}}{Yt(n,"disconnectedCallback",undefined,t)}}};const re=(t,e={})=>{var n;const s=d();const i=[];const o=e.exclude||[];const l=_e.customElements;const f=Ee.head;const c=f.querySelector("meta[charset]");const r=Ee.createElement("style");const u=[];const a=Ee.querySelectorAll(`[${j}]`);let h;let b=true;Object.assign(ke,e);ke.t=new URL(e.resourcesUrl||"./",Ee.baseURI).href;{ke.$|=2}t.map((t=>{t[1].map((n=>{const s={$:n[0],M:n[1],F:n[2],V:n[3]};{s.F=n[2]}{s.V=n[3]}{s.I=[]}{s.B={}}const f=e.transformTagName?e.transformTagName(s.M):s.M;const c=class extends HTMLElement{constructor(t){super(t);t=this;{const e=Ot(s,ht(t));const n=Array.from(a).find((t=>t.getAttribute(j)===e));if(n){if(s.$&1){jt(e,wt(n.innerHTML),true)}else{jt(e,n.innerHTML,false)}}}je(t,s);if(s.$&1){{{t.attachShadow({mode:"open"})}}}}connectedCallback(){if(h){clearTimeout(h);h=null}if(b){u.push(this)}else{ke.jmp((()=>le(this)))}}disconnectedCallback(){ke.jmp((()=>ce(this)))}componentOnReady(){return pe(this).J}};if(s.$&4||s.$&8){U(c.prototype);{A(c.prototype)}}s.K=t[0];if(!o.includes(f)&&!l.get(f)){i.push(f);l.define(f,se(c,s,1))}}))}));{r.innerHTML=i+v;r.setAttribute("data-styles","");const t=(n=ke.k)!==null&&n!==void 0?n:E(Ee);if(t!=null){r.setAttribute("nonce",t)}f.insertBefore(r,c?c.nextSibling:f.firstChild)}b=false;if(u.length){u.map((t=>t.connectedCallback()))}else{{ke.jmp((()=>h=setTimeout(Xt,30)))}}s()};const ue=(t,e)=>e;const ae=(t,e,n,s)=>{if(n){n.map((([n,s,i])=>{const o=he(t,n);const l=de(e,i);const f=be(n);ke.ael(o,s,l,f);(e.G=e.G||[]).push((()=>ke.rel(o,s,l,f)))}))}};const de=(t,e)=>n=>{try{{if(t.$&256){t.U[e](n)}else{(t.A=t.A||[]).push([e,n])}}}catch(e){ve(e,t.S||null)}};const he=(t,e)=>{if(e&8)return _e;if(e&16)return Ee.body;return t};const be=t=>(t&2)!==0;const $e=t=>ke.k=t;const me=new WeakMap;const pe=t=>me.get(t);const ge=(t,e)=>me.set(e.U=t,e);const je=(t,e)=>{const n={$:0,S:t,C:e,W:new Map};{n.q=new Promise((t=>n.D=t))}{n.J=new Promise((t=>n.P=t));t["s-p"]=[];t["s-rc"]=[]}ae(t,n,e.V);return me.set(t,n)};const ye=(t,e)=>e in t;const ve=(t,e)=>(0,console.error)(t,e);const Oe=new Map;const we=(t,e,n)=>{const s=t.M.replace(/-/g,"_");const i=t.K;const o=Oe.get(i);if(o){return o[s]}
|
5
|
-
/*!__STENCIL_STATIC_IMPORT_SWITCH__*/return import(`./${i}.entry.js${""}`).then((t=>{if(i){Oe.set(i,t)}return t[s]}),(t=>{ve(t,e.S)}))};const Se=new Map;const xe=[];const _e=typeof window!=="undefined"?window:{};const Ee=_e.document||{head:{}};const Te=_e.HTMLElement||class{};const ke={$:0,t:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,s)=>t.addEventListener(e,n,s),rel:(t,e,n,s)=>t.removeEventListener(e,n,s),ce:(t,e)=>new CustomEvent(t,e)};const Ce=t=>Promise.resolve(t);const Me=(()=>{try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(t){}return false})();const Ne=[];const Le=[];const Ie=(t,e)=>n=>{t.push(n);if(!r){r=true;if(e&&ke.$&4){Ue(He)}else{ke.raf(He)}}};const Re=t=>{for(let e=0;e<t.length;e++){try{t[e](performance.now())}catch(t){ve(t)}}t.length=0};const He=()=>{Re(Ne);{Re(Le);if(r=Ne.length>0){ke.raf(He)}}};const Ue=t=>Ce().then(t);const Ae=Ie(Ne,false);const Pe=Ie(Le,true);export{u as B,ue as F,Te as H,C as a,re as b,mt as c,Ae as d,Jt as e,Qt as f,$t as g,T as h,a as i,ve as j,Ce as p,ge as r,$e as s,Pe as w};
|
6
|
-
//# sourceMappingURL=p-6ef53fa1.js.map
|