@nanoporetech-digital/components 5.10.0 → 5.11.1
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 +48 -0
- package/dist/cjs/{algolia-data-6841724e.js → algolia-data-dba27b97.js} +2 -2
- package/dist/cjs/{algolia-data-6841724e.js.map → algolia-data-dba27b97.js.map} +1 -1
- package/dist/cjs/{algoliasearch-lite.esm.browser-992a2eff.js → algoliasearch-lite.esm.browser-b74ca774.js} +30 -5
- package/dist/cjs/algoliasearch-lite.esm.browser-b74ca774.js.map +1 -0
- package/dist/cjs/{component-store-6d7b8855.js → component-store-149aeffe.js} +2 -2
- package/dist/cjs/{component-store-6d7b8855.js.map → component-store-149aeffe.js.map} +1 -1
- package/dist/cjs/fade-dcabf3c1.js +211 -0
- package/dist/cjs/fade-dcabf3c1.js.map +1 -0
- package/dist/cjs/{form-control-8db579a2.js → form-control-f100407e.js} +2 -2
- package/dist/cjs/{form-control-8db579a2.js.map → form-control-f100407e.js.map} +1 -1
- package/dist/cjs/fullscreen-d24940a1.js +133 -0
- package/dist/cjs/fullscreen-d24940a1.js.map +1 -0
- package/dist/cjs/{global-3a6a7873.js → global-a5710651.js} +7 -7
- package/dist/cjs/{global-3a6a7873.js.map → global-a5710651.js.map} +1 -1
- package/dist/cjs/{index-1d3ebe1a.js → index-14451c95.js} +8 -6
- package/dist/cjs/index-14451c95.js.map +1 -0
- package/dist/cjs/{index-0f470227.js → index-f6f89d47.js} +2 -2
- package/dist/cjs/{index-0f470227.js.map → index-f6f89d47.js.map} +1 -1
- package/dist/cjs/lazyload-f6be7590.js +95 -0
- package/dist/cjs/lazyload-f6be7590.js.map +1 -0
- package/dist/cjs/loader.cjs.js +4 -4
- 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 +3 -3
- package/dist/cjs/nano-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-algolia-filter.cjs.entry.js +3 -3
- package/dist/cjs/nano-algolia-filter.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-algolia-pagination.cjs.entry.js +2 -7
- package/dist/cjs/nano-algolia-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-algolia-results.cjs.entry.js +2 -2
- package/dist/cjs/nano-algolia-results.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-algolia.cjs.entry.js +982 -26
- package/dist/cjs/nano-algolia.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-aspect-ratio.cjs.entry.js +1 -1
- package/dist/cjs/nano-checkbox-group.cjs.entry.js +10 -4
- package/dist/cjs/nano-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-checkbox.cjs.entry.js +4 -2
- package/dist/cjs/nano-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-components.cjs.js +4 -4
- package/dist/cjs/nano-components.cjs.js.map +1 -1
- package/dist/cjs/nano-datalist_3.cjs.entry.js +4 -4
- package/dist/cjs/nano-datalist_3.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-date-input.cjs.entry.js +1 -1
- package/dist/cjs/nano-date-picker.cjs.entry.js +2 -2
- package/dist/cjs/nano-date-picker.cjs.entry.js.map +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-details.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-dialog.cjs.entry.js +5 -5
- package/dist/cjs/nano-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-drawer.cjs.entry.js +5 -5
- 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-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-field-validator.cjs.entry.js +7 -5
- package/dist/cjs/nano-field-validator.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-file-upload.cjs.entry.js +2 -2
- package/dist/cjs/nano-file-upload.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +4 -4
- package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-global-nav.cjs.entry.js +122 -153
- package/dist/cjs/nano-global-nav.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-global-search-results.cjs.entry.js +4 -4
- package/dist/cjs/nano-global-search-results.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-grid-item.cjs.entry.js +1 -1
- package/dist/cjs/nano-grid_2.cjs.entry.js +2 -2
- package/dist/cjs/nano-grid_2.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_2.cjs.entry.js +24 -4
- package/dist/cjs/nano-icon-button_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-icon.cjs.entry.js +4 -4
- package/dist/cjs/nano-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-input.cjs.entry.js +3 -3
- package/dist/cjs/nano-input.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-menu-drawer.cjs.entry.js +2 -2
- package/dist/cjs/nano-menu-drawer.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-overflow-nav.cjs.entry.js +2 -2
- package/dist/cjs/nano-overflow-nav.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-progress-bar.cjs.entry.js +2 -2
- package/dist/cjs/nano-progress-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-range.cjs.entry.js +2 -2
- package/dist/cjs/nano-range.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-rating.cjs.entry.js +2 -2
- package/dist/cjs/nano-rating.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-resize-observe_2.cjs.entry.js +1 -1
- package/dist/cjs/nano-slide.cjs.entry.js +1 -1
- package/dist/cjs/nano-slides-2f3dcc02.js +2975 -0
- package/dist/cjs/nano-slides-2f3dcc02.js.map +1 -0
- package/dist/cjs/nano-slides.cjs.entry.js +3 -4292
- package/dist/cjs/nano-slides.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-sortable.cjs.entry.js +1 -1
- package/dist/cjs/nano-spinner.cjs.entry.js +2 -2
- 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 +3 -2
- package/dist/cjs/nano-sticker.cjs.entry.js.map +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-group.cjs.entry.js.map +1 -1
- 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-72d5dc63.js → nano-table-bbd65636.js} +5 -5
- package/dist/cjs/{nano-table-72d5dc63.js.map → nano-table-bbd65636.js.map} +1 -1
- package/dist/cjs/nano-table.cjs.entry.js +3 -3
- package/dist/cjs/page-dots-ae2cefb4.js +140 -0
- package/dist/cjs/page-dots-ae2cefb4.js.map +1 -0
- package/dist/cjs/{scroll-fc1b8387.js → scroll-e8c21f80.js} +8 -4
- package/dist/cjs/scroll-e8c21f80.js.map +1 -0
- package/dist/cjs/{table.worker-3df34efe.js → table.worker-ea98a8dd.js} +4 -4
- package/dist/cjs/table.worker-ea98a8dd.js.map +1 -0
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/alert/alert.css +1 -2
- package/dist/collection/components/algolia/algolia-data.js.map +1 -1
- package/dist/collection/components/algolia/algolia-filter.js.map +1 -1
- package/dist/collection/components/algolia/algolia-pagination.js +0 -5
- package/dist/collection/components/algolia/algolia-pagination.js.map +1 -1
- package/dist/collection/components/algolia/algolia-results.js.map +1 -1
- package/dist/collection/components/algolia/algolia.js +4 -27
- package/dist/collection/components/algolia/algolia.js.map +1 -1
- package/dist/collection/components/algolia/lib/squirrelly/browser.js +10 -0
- package/dist/collection/components/algolia/lib/squirrelly/browser.js.map +1 -0
- package/dist/collection/components/algolia/lib/squirrelly/compile-string.js +151 -0
- package/dist/collection/components/algolia/lib/squirrelly/compile-string.js.map +1 -0
- package/dist/collection/components/algolia/lib/squirrelly/compile.js +44 -0
- package/dist/collection/components/algolia/lib/squirrelly/compile.js.map +1 -0
- package/dist/collection/components/algolia/lib/squirrelly/config.js +68 -0
- package/dist/collection/components/algolia/lib/squirrelly/config.js.map +1 -0
- package/dist/collection/components/algolia/lib/squirrelly/container-utils.js +57 -0
- package/dist/collection/components/algolia/lib/squirrelly/container-utils.js.map +1 -0
- package/dist/collection/components/algolia/lib/squirrelly/containers.js +128 -0
- package/dist/collection/components/algolia/lib/squirrelly/containers.js.map +1 -0
- package/dist/collection/components/algolia/lib/squirrelly/err.js +39 -0
- package/dist/collection/components/algolia/lib/squirrelly/err.js.map +1 -0
- package/dist/collection/components/algolia/lib/squirrelly/parse.js +327 -0
- package/dist/collection/components/algolia/lib/squirrelly/parse.js.map +1 -0
- package/dist/collection/components/algolia/lib/squirrelly/render.js +62 -0
- package/dist/collection/components/algolia/lib/squirrelly/render.js.map +1 -0
- package/dist/collection/components/algolia/lib/squirrelly/storage.js +32 -0
- package/dist/collection/components/algolia/lib/squirrelly/storage.js.map +1 -0
- package/dist/collection/components/algolia/lib/squirrelly/utils.js +102 -0
- package/dist/collection/components/algolia/lib/squirrelly/utils.js.map +1 -0
- package/dist/collection/{utils → components/algolia/lib}/template.js +1 -2
- package/dist/collection/components/algolia/lib/template.js.map +1 -0
- package/dist/collection/components/checkbox/checkbox-group.css +17 -15
- package/dist/collection/components/checkbox/checkbox-group.js +29 -2
- package/dist/collection/components/checkbox/checkbox-group.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox.css +20 -22
- package/dist/collection/components/checkbox/checkbox.js +2 -0
- package/dist/collection/components/checkbox/checkbox.js.map +1 -1
- package/dist/collection/components/date-picker/date-picker.css +5 -10
- package/dist/collection/components/details/details.css +4 -4
- package/dist/collection/components/dialog/dialog.css +3 -6
- package/dist/collection/components/dialog/dialog.js +1 -1
- package/dist/collection/components/dialog/dialog.js.map +1 -1
- package/dist/collection/components/drawer/drawer.css +18 -24
- package/dist/collection/components/drawer/drawer.js +1 -1
- package/dist/collection/components/drawer/drawer.js.map +1 -1
- package/dist/collection/components/dropdown/dropdown.js +1 -1
- package/dist/collection/components/dropdown/dropdown.js.map +1 -1
- package/dist/collection/components/field-validator/field-validator.js +5 -3
- package/dist/collection/components/field-validator/field-validator.js.map +1 -1
- package/dist/collection/components/file-upload/file-upload.css +16 -30
- package/dist/collection/components/global-nav/global-nav.js +118 -157
- package/dist/collection/components/global-nav/global-nav.js.map +1 -1
- package/dist/collection/components/global-nav/style/global-nav.css +97 -138
- package/dist/collection/components/global-search-results/global-search-results.css +85 -127
- package/dist/collection/components/global-search-results/global-search-results.js +2 -2
- package/dist/collection/components/global-search-results/global-search-results.js.map +1 -1
- package/dist/collection/components/hero/hero.css +13 -26
- package/dist/collection/components/icon/icon.css +6 -6
- package/dist/collection/components/icon/icon.js +2 -2
- package/dist/collection/components/icon/icon.js.map +1 -1
- package/dist/collection/components/img/img.css +7 -17
- package/dist/collection/components/input/input.css +15 -36
- package/dist/collection/components/menu/menu.css +1 -1
- package/dist/collection/components/menu/menu.js +1 -1
- package/dist/collection/components/menu/menu.js.map +1 -1
- package/dist/collection/components/menu-drawer/menu-drawer.css +5 -14
- package/dist/collection/components/nav-item/nav-item.css +25 -46
- package/dist/collection/components/option/option.css +3 -5
- package/dist/collection/components/overflow-nav/overflow-nav.css +16 -27
- package/dist/collection/components/progress-bar/progress-bar.css +2 -2
- package/dist/collection/components/range/range.css +17 -19
- package/dist/collection/components/rating/rating.css +2 -8
- package/dist/collection/components/select/select.css +30 -53
- package/dist/collection/components/slides/lib/js/animate.js +29 -54
- package/dist/collection/components/slides/lib/js/animate.js.map +1 -0
- package/dist/collection/components/slides/lib/js/cell.js +12 -24
- package/dist/collection/components/slides/lib/js/cell.js.map +1 -0
- package/dist/collection/components/slides/lib/js/drag.js +65 -116
- package/dist/collection/components/slides/lib/js/drag.js.map +1 -0
- package/dist/collection/components/slides/lib/js/fade.js +52 -79
- package/dist/collection/components/slides/lib/js/fade.js.map +1 -0
- package/dist/collection/components/slides/lib/js/flickity.js +118 -206
- package/dist/collection/components/slides/lib/js/flickity.js.map +1 -0
- package/dist/collection/components/slides/lib/js/fullscreen.js +21 -40
- package/dist/collection/components/slides/lib/js/fullscreen.js.map +1 -0
- package/dist/collection/components/slides/lib/js/index.js +4 -6
- package/dist/collection/components/slides/lib/js/index.js.map +1 -0
- package/dist/collection/components/slides/lib/js/lazyload.js +21 -36
- package/dist/collection/components/slides/lib/js/lazyload.js.map +1 -0
- package/dist/collection/components/slides/lib/js/page-dots.js +21 -45
- package/dist/collection/components/slides/lib/js/page-dots.js.map +1 -0
- package/dist/collection/components/slides/lib/js/player.js +12 -40
- package/dist/collection/components/slides/lib/js/player.js.map +1 -0
- package/dist/collection/components/slides/lib/js/prev-next-button.js +24 -52
- package/dist/collection/components/slides/lib/js/prev-next-button.js.map +1 -0
- package/dist/collection/components/slides/lib/js/slide.js +10 -15
- package/dist/collection/components/slides/lib/js/slide.js.map +1 -0
- package/dist/collection/components/slides/lib/js/utils/event-emitter.js +75 -0
- package/dist/collection/components/slides/lib/js/utils/event-emitter.js.map +1 -0
- package/dist/collection/components/slides/lib/js/utils/gestures.js +436 -0
- package/dist/collection/components/slides/lib/js/utils/gestures.js.map +1 -0
- package/dist/collection/components/slides/lib/js/utils/get-size.js +160 -0
- package/dist/collection/components/slides/lib/js/utils/get-size.js.map +1 -0
- package/dist/collection/components/slides/lib/js/utils/utils.js +166 -0
- package/dist/collection/components/slides/lib/js/utils/utils.js.map +1 -0
- package/dist/collection/components/slides/slides.css +18 -19
- package/dist/collection/components/slides/slides.js +31 -5
- package/dist/collection/components/slides/slides.js.map +1 -1
- package/dist/collection/components/spinner/spinner.css +1 -2
- package/dist/collection/components/sticker/sticker.js +2 -1
- package/dist/collection/components/sticker/sticker.js.map +1 -1
- package/dist/collection/components/table/table.css +29 -48
- package/dist/collection/components/tabs/tab-group.css +10 -14
- package/dist/collection/components/tabs/tab.css +8 -18
- package/dist/collection/components/tooltip/tooltip.css +34 -31
- package/dist/collection/components/tooltip/tooltip.js +23 -3
- package/dist/collection/components/tooltip/tooltip.js.map +1 -1
- package/dist/collection/global/script/global.js +6 -6
- package/dist/collection/global/script/global.js.map +1 -1
- package/dist/collection/utils/scroll.js +7 -3
- package/dist/collection/utils/scroll.js.map +1 -1
- package/dist/components/algolia-data.js.map +1 -1
- package/dist/components/algolia.js +978 -23
- package/dist/components/algolia.js.map +1 -1
- package/dist/components/algoliasearch-lite.esm.browser.js +29 -4
- package/dist/components/algoliasearch-lite.esm.browser.js.map +1 -1
- package/dist/components/date-picker.js +1 -1
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/dropdown.js.map +1 -1
- package/dist/components/fade.js +208 -0
- package/dist/components/fade.js.map +1 -0
- package/dist/components/fullscreen.js +130 -0
- package/dist/components/fullscreen.js.map +1 -0
- package/dist/components/icon.js +3 -3
- 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.js +6 -6
- package/dist/components/index.js.map +1 -1
- package/dist/components/input.js +1 -1
- package/dist/components/input.js.map +1 -1
- package/dist/components/lazyload.js +92 -0
- package/dist/components/lazyload.js.map +1 -0
- package/dist/components/menu.js +2 -2
- package/dist/components/menu.js.map +1 -1
- package/dist/components/nano-alert.js +1 -1
- package/dist/components/nano-alert.js.map +1 -1
- package/dist/components/nano-algolia-filter.js.map +1 -1
- package/dist/components/nano-algolia-pagination.js +0 -5
- package/dist/components/nano-algolia-pagination.js.map +1 -1
- package/dist/components/nano-algolia-results.js.map +1 -1
- package/dist/components/nano-checkbox-group.js +10 -3
- package/dist/components/nano-checkbox-group.js.map +1 -1
- package/dist/components/nano-checkbox.js +3 -1
- package/dist/components/nano-checkbox.js.map +1 -1
- package/dist/components/nano-details.js +1 -1
- package/dist/components/nano-details.js.map +1 -1
- package/dist/components/nano-dialog.js +2 -2
- package/dist/components/nano-dialog.js.map +1 -1
- package/dist/components/nano-drawer.js +2 -2
- package/dist/components/nano-drawer.js.map +1 -1
- package/dist/components/nano-field-validator.js +5 -3
- package/dist/components/nano-field-validator.js.map +1 -1
- package/dist/components/nano-file-upload.js +1 -1
- package/dist/components/nano-file-upload.js.map +1 -1
- package/dist/components/nano-global-nav.js +119 -152
- package/dist/components/nano-global-nav.js.map +1 -1
- package/dist/components/nano-global-search-results.js +3 -3
- package/dist/components/nano-global-search-results.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-menu-drawer.js +1 -1
- package/dist/components/nano-menu-drawer.js.map +1 -1
- package/dist/components/nano-overflow-nav.js +1 -1
- package/dist/components/nano-overflow-nav.js.map +1 -1
- package/dist/components/nano-range.js +1 -1
- package/dist/components/nano-range.js.map +1 -1
- package/dist/components/nano-rating.js +1 -1
- package/dist/components/nano-rating.js.map +1 -1
- package/dist/components/nano-slides.js +760 -2090
- package/dist/components/nano-slides.js.map +1 -1
- package/dist/components/nano-tab-group.js +1 -1
- package/dist/components/nano-tab-group.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/option.js +1 -1
- package/dist/components/option.js.map +1 -1
- package/dist/components/page-dots.js +137 -0
- package/dist/components/page-dots.js.map +1 -0
- package/dist/components/progress-bar.js +1 -1
- package/dist/components/progress-bar.js.map +1 -1
- package/dist/components/scroll.js +7 -3
- package/dist/components/scroll.js.map +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/select.js.map +1 -1
- package/dist/components/spinner.js +1 -1
- package/dist/components/spinner.js.map +1 -1
- package/dist/components/sticker.js +2 -1
- package/dist/components/sticker.js.map +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/table.js.map +1 -1
- package/dist/components/tooltip.js +24 -4
- package/dist/components/tooltip.js.map +1 -1
- package/dist/esm/{algolia-data-ebf2a439.js → algolia-data-1b42827c.js} +2 -2
- package/dist/esm/{algolia-data-ebf2a439.js.map → algolia-data-1b42827c.js.map} +1 -1
- package/dist/esm/{algoliasearch-lite.esm.browser-04891fdc.js → algoliasearch-lite.esm.browser-d71a28dc.js} +30 -5
- package/dist/esm/algoliasearch-lite.esm.browser-d71a28dc.js.map +1 -0
- package/dist/esm/{component-store-54df2005.js → component-store-f7eb0a56.js} +2 -2
- package/dist/esm/{component-store-54df2005.js.map → component-store-f7eb0a56.js.map} +1 -1
- package/dist/esm/fade-1aa7a6db.js +209 -0
- package/dist/esm/fade-1aa7a6db.js.map +1 -0
- package/dist/esm/{form-control-eb06e009.js → form-control-881fa3af.js} +2 -2
- package/dist/esm/{form-control-eb06e009.js.map → form-control-881fa3af.js.map} +1 -1
- package/dist/esm/fullscreen-86fa276a.js +131 -0
- package/dist/esm/fullscreen-86fa276a.js.map +1 -0
- package/dist/esm/{global-f6e05656.js → global-be484e8c.js} +7 -7
- package/dist/esm/{global-f6e05656.js.map → global-be484e8c.js.map} +1 -1
- package/dist/esm/{index-e8891229.js → index-3003356f.js} +2 -2
- package/dist/esm/{index-e8891229.js.map → index-3003356f.js.map} +1 -1
- package/dist/esm/{index-06666022.js → index-9695db0a.js} +8 -6
- package/dist/esm/index-9695db0a.js.map +1 -0
- package/dist/esm/lazyload-994232a6.js +93 -0
- package/dist/esm/lazyload-994232a6.js.map +1 -0
- package/dist/esm/loader.js +5 -5
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/nano-accordion.entry.js +1 -1
- package/dist/esm/nano-alert.entry.js +3 -3
- package/dist/esm/nano-alert.entry.js.map +1 -1
- package/dist/esm/nano-algolia-filter.entry.js +3 -3
- package/dist/esm/nano-algolia-filter.entry.js.map +1 -1
- package/dist/esm/nano-algolia-pagination.entry.js +2 -7
- package/dist/esm/nano-algolia-pagination.entry.js.map +1 -1
- package/dist/esm/nano-algolia-results.entry.js +2 -2
- package/dist/esm/nano-algolia-results.entry.js.map +1 -1
- package/dist/esm/nano-algolia.entry.js +982 -26
- package/dist/esm/nano-algolia.entry.js.map +1 -1
- package/dist/esm/nano-aspect-ratio.entry.js +1 -1
- package/dist/esm/nano-checkbox-group.entry.js +10 -4
- package/dist/esm/nano-checkbox-group.entry.js.map +1 -1
- package/dist/esm/nano-checkbox.entry.js +4 -2
- package/dist/esm/nano-checkbox.entry.js.map +1 -1
- package/dist/esm/nano-components.js +5 -5
- package/dist/esm/nano-components.js.map +1 -1
- package/dist/esm/nano-datalist_3.entry.js +4 -4
- package/dist/esm/nano-datalist_3.entry.js.map +1 -1
- package/dist/esm/nano-date-input.entry.js +1 -1
- package/dist/esm/nano-date-picker.entry.js +2 -2
- package/dist/esm/nano-date-picker.entry.js.map +1 -1
- package/dist/esm/nano-demo.entry.js +1 -1
- package/dist/esm/nano-details.entry.js +2 -2
- package/dist/esm/nano-details.entry.js.map +1 -1
- package/dist/esm/nano-dialog.entry.js +5 -5
- package/dist/esm/nano-dialog.entry.js.map +1 -1
- package/dist/esm/nano-drawer.entry.js +5 -5
- package/dist/esm/nano-drawer.entry.js.map +1 -1
- package/dist/esm/nano-dropdown.entry.js +1 -1
- package/dist/esm/nano-dropdown.entry.js.map +1 -1
- package/dist/esm/nano-field-validator.entry.js +7 -5
- package/dist/esm/nano-field-validator.entry.js.map +1 -1
- package/dist/esm/nano-file-upload.entry.js +2 -2
- package/dist/esm/nano-file-upload.entry.js.map +1 -1
- package/dist/esm/nano-global-nav-user-profile_3.entry.js +4 -4
- package/dist/esm/nano-global-nav-user-profile_3.entry.js.map +1 -1
- package/dist/esm/nano-global-nav.entry.js +122 -153
- package/dist/esm/nano-global-nav.entry.js.map +1 -1
- package/dist/esm/nano-global-search-results.entry.js +4 -4
- package/dist/esm/nano-global-search-results.entry.js.map +1 -1
- package/dist/esm/nano-grid-item.entry.js +1 -1
- package/dist/esm/nano-grid_2.entry.js +2 -2
- package/dist/esm/nano-grid_2.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_2.entry.js +24 -4
- package/dist/esm/nano-icon-button_2.entry.js.map +1 -1
- package/dist/esm/nano-icon.entry.js +4 -4
- package/dist/esm/nano-icon.entry.js.map +1 -1
- package/dist/esm/nano-input.entry.js +3 -3
- package/dist/esm/nano-input.entry.js.map +1 -1
- package/dist/esm/nano-menu-drawer.entry.js +2 -2
- package/dist/esm/nano-menu-drawer.entry.js.map +1 -1
- package/dist/esm/nano-overflow-nav.entry.js +2 -2
- package/dist/esm/nano-overflow-nav.entry.js.map +1 -1
- package/dist/esm/nano-progress-bar.entry.js +2 -2
- package/dist/esm/nano-progress-bar.entry.js.map +1 -1
- package/dist/esm/nano-range.entry.js +2 -2
- package/dist/esm/nano-range.entry.js.map +1 -1
- package/dist/esm/nano-rating.entry.js +2 -2
- package/dist/esm/nano-rating.entry.js.map +1 -1
- package/dist/esm/nano-resize-observe_2.entry.js +1 -1
- package/dist/esm/nano-slide.entry.js +1 -1
- package/dist/esm/nano-slides-9908c44d.js +2970 -0
- package/dist/esm/nano-slides-9908c44d.js.map +1 -0
- package/dist/esm/nano-slides.entry.js +2 -4295
- package/dist/esm/nano-slides.entry.js.map +1 -1
- package/dist/esm/nano-sortable.entry.js +1 -1
- package/dist/esm/nano-spinner.entry.js +2 -2
- 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 +3 -2
- package/dist/esm/nano-sticker.entry.js.map +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-group.entry.js.map +1 -1
- package/dist/esm/nano-tab.entry.js +2 -2
- package/dist/esm/nano-tab.entry.js.map +1 -1
- package/dist/esm/{nano-table-5af42ba4.js → nano-table-3ab8cd85.js} +5 -5
- package/dist/esm/{nano-table-5af42ba4.js.map → nano-table-3ab8cd85.js.map} +1 -1
- package/dist/esm/nano-table.entry.js +3 -3
- package/dist/esm/page-dots-467ace2e.js +138 -0
- package/dist/esm/page-dots-467ace2e.js.map +1 -0
- package/dist/esm/{scroll-ec7ac257.js → scroll-ac332213.js} +8 -4
- package/dist/esm/scroll-ac332213.js.map +1 -0
- package/dist/esm/{table.worker-3cae908c.js → table.worker-75d6e1d2.js} +4 -4
- package/dist/esm/table.worker-75d6e1d2.js.map +1 -0
- package/dist/nano-components/{p-74a7fc4f.js → active-element-75b7c8a0.js} +1 -1
- package/dist/nano-components/algolia-data-1b42827c.js +5 -0
- package/dist/nano-components/{p-a26bdb65.js.map → algolia-data-1b42827c.js.map} +1 -1
- package/dist/nano-components/algoliasearch-lite.esm.browser-d71a28dc.js +5 -0
- package/dist/nano-components/algoliasearch-lite.esm.browser-d71a28dc.js.map +1 -0
- package/dist/nano-components/component-store-f7eb0a56.js +5 -0
- package/dist/nano-components/{p-dd5687db.js.map → component-store-f7eb0a56.js.map} +1 -1
- package/dist/nano-components/{p-cecb9af1.js → date-utils-6b7a6e1f.js} +1 -1
- package/dist/nano-components/{p-cdfc507e.js → dom-8599fac1.js} +1 -1
- package/dist/nano-components/{p-842cf127.js → drag-1723a4cc.js} +1 -1
- package/dist/nano-components/{p-9bfdee71.js → events-6a805b42.js} +1 -1
- package/dist/nano-components/fade-1aa7a6db.js +5 -0
- package/dist/nano-components/fade-1aa7a6db.js.map +1 -0
- package/dist/nano-components/{p-f8f89998.js → focus-visible-8b2c14da.js} +1 -1
- package/dist/nano-components/form-control-881fa3af.js +5 -0
- package/dist/nano-components/{p-dc805ecc.js.map → form-control-881fa3af.js.map} +1 -1
- package/dist/nano-components/fullscreen-86fa276a.js +5 -0
- package/dist/nano-components/fullscreen-86fa276a.js.map +1 -0
- package/dist/nano-components/{p-d4f6ec9f.js → global-be484e8c.js} +2 -2
- package/dist/nano-components/{p-d4f6ec9f.js.map → global-be484e8c.js.map} +1 -1
- package/dist/nano-components/index-3003356f.js +5 -0
- package/dist/nano-components/{p-70747f20.js.map → index-3003356f.js.map} +1 -1
- package/dist/nano-components/{p-d6a04b3a.js → index-9695db0a.js} +2 -2
- package/dist/nano-components/{p-d6a04b3a.js.map → index-9695db0a.js.map} +1 -1
- package/dist/nano-components/{p-bb07c3d0.js → index-f626f476.js} +1 -1
- package/dist/nano-components/index.esm.js +1 -1
- package/dist/nano-components/index.esm.js.map +1 -1
- package/dist/nano-components/lazyload-994232a6.js +5 -0
- package/dist/nano-components/lazyload-994232a6.js.map +1 -0
- package/dist/nano-components/{p-2155fc2c.js → local-my-account-6662da72.js} +1 -1
- package/dist/nano-components/{p-ee045579.js → math-c02ddfda.js} +1 -1
- package/dist/nano-components/modal-bd9638c0.js +5 -0
- package/dist/nano-components/{p-2234694a.js.map → modal-bd9638c0.js.map} +1 -1
- package/dist/nano-components/nano-accordion.entry.js +5 -0
- package/dist/nano-components/{p-9f60ff14.entry.js.map → nano-accordion.entry.js.map} +1 -1
- package/dist/nano-components/nano-alert.entry.js +5 -0
- package/dist/nano-components/{p-191352c4.entry.js.map → nano-alert.entry.js.map} +1 -1
- package/dist/nano-components/nano-algolia-filter.entry.js +5 -0
- package/dist/nano-components/nano-algolia-filter.entry.js.map +1 -0
- package/dist/nano-components/nano-algolia-pagination.entry.js +5 -0
- package/dist/nano-components/nano-algolia-pagination.entry.js.map +1 -0
- package/dist/nano-components/nano-algolia-results.entry.js +5 -0
- package/dist/nano-components/nano-algolia-results.entry.js.map +1 -0
- package/dist/nano-components/nano-algolia.entry.js +5 -0
- package/dist/nano-components/nano-algolia.entry.js.map +1 -0
- package/dist/nano-components/nano-aspect-ratio.entry.js +5 -0
- package/dist/nano-components/{p-87329424.entry.js.map → nano-aspect-ratio.entry.js.map} +1 -1
- package/dist/nano-components/nano-checkbox-group.entry.js +5 -0
- package/dist/nano-components/nano-checkbox-group.entry.js.map +1 -0
- package/dist/nano-components/nano-checkbox.entry.js +5 -0
- package/dist/nano-components/nano-checkbox.entry.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/nano-datalist_3.entry.js +5 -0
- package/dist/nano-components/nano-datalist_3.entry.js.map +1 -0
- package/dist/nano-components/nano-date-input.entry.js +5 -0
- package/dist/nano-components/{p-d4e44f93.entry.js.map → nano-date-input.entry.js.map} +1 -1
- package/dist/nano-components/nano-date-picker.entry.js +5 -0
- package/dist/nano-components/{p-efd3e121.entry.js.map → nano-date-picker.entry.js.map} +1 -1
- package/dist/nano-components/nano-demo.entry.js +5 -0
- package/dist/nano-components/{p-e98835e2.entry.js.map → nano-demo.entry.js.map} +1 -1
- package/dist/nano-components/nano-details.entry.js +5 -0
- package/dist/nano-components/nano-details.entry.js.map +1 -0
- package/dist/nano-components/nano-dialog.entry.js +5 -0
- package/dist/nano-components/{p-79fff4fd.entry.js.map → nano-dialog.entry.js.map} +1 -1
- package/dist/nano-components/nano-drawer.entry.js +5 -0
- package/dist/nano-components/nano-drawer.entry.js.map +1 -0
- package/dist/nano-components/nano-dropdown.entry.js +5 -0
- package/dist/nano-components/nano-dropdown.entry.js.map +1 -0
- package/dist/nano-components/nano-field-validator.entry.js +5 -0
- package/dist/nano-components/nano-field-validator.entry.js.map +1 -0
- package/dist/nano-components/nano-file-upload.entry.js +5 -0
- package/dist/nano-components/nano-file-upload.entry.js.map +1 -0
- package/dist/nano-components/nano-global-nav-user-profile_3.entry.js +5 -0
- package/dist/nano-components/nano-global-nav-user-profile_3.entry.js.map +1 -0
- package/dist/nano-components/nano-global-nav.entry.js +5 -0
- package/dist/nano-components/nano-global-nav.entry.js.map +1 -0
- package/dist/nano-components/nano-global-search-results.entry.js +5 -0
- package/dist/nano-components/nano-global-search-results.entry.js.map +1 -0
- package/dist/nano-components/nano-grid-item.entry.js +5 -0
- package/dist/nano-components/{p-9c290055.entry.js.map → nano-grid-item.entry.js.map} +1 -1
- package/dist/nano-components/nano-grid_2.entry.js +5 -0
- package/dist/nano-components/{p-7c82af28.entry.js.map → nano-grid_2.entry.js.map} +1 -1
- package/dist/nano-components/nano-hero.entry.js +5 -0
- package/dist/nano-components/{p-328ef9d3.entry.js.map → nano-hero.entry.js.map} +1 -1
- package/dist/nano-components/nano-icon-button_2.entry.js +5 -0
- package/dist/nano-components/nano-icon-button_2.entry.js.map +1 -0
- package/dist/nano-components/nano-icon.entry.js +5 -0
- package/dist/nano-components/nano-icon.entry.js.map +1 -0
- package/dist/nano-components/nano-input.entry.js +5 -0
- package/dist/nano-components/nano-input.entry.js.map +1 -0
- package/dist/nano-components/nano-menu-drawer.entry.js +5 -0
- package/dist/nano-components/nano-menu-drawer.entry.js.map +1 -0
- package/dist/nano-components/nano-overflow-nav.entry.js +5 -0
- package/dist/nano-components/nano-overflow-nav.entry.js.map +1 -0
- package/dist/nano-components/nano-progress-bar.entry.js +5 -0
- package/dist/nano-components/nano-progress-bar.entry.js.map +1 -0
- package/dist/nano-components/nano-range.entry.js +5 -0
- package/dist/nano-components/nano-range.entry.js.map +1 -0
- package/dist/nano-components/nano-rating.entry.js +5 -0
- package/dist/nano-components/nano-rating.entry.js.map +1 -0
- package/dist/nano-components/nano-resize-observe_2.entry.js +5 -0
- package/dist/nano-components/{p-e6a0675e.entry.js.map → nano-resize-observe_2.entry.js.map} +1 -1
- package/dist/nano-components/nano-slide.entry.js +5 -0
- package/dist/nano-components/{p-3d8fb8a1.entry.js.map → nano-slide.entry.js.map} +1 -1
- package/dist/nano-components/nano-slides-9908c44d.js +20 -0
- package/dist/nano-components/nano-slides-9908c44d.js.map +1 -0
- package/dist/nano-components/nano-slides.entry.js +5 -0
- package/dist/nano-components/nano-sortable.entry.js +5 -0
- package/dist/nano-components/{p-3ae362ae.entry.js.map → nano-sortable.entry.js.map} +1 -1
- package/dist/nano-components/nano-spinner.entry.js +5 -0
- package/dist/nano-components/{p-9925e504.entry.js.map → nano-spinner.entry.js.map} +1 -1
- package/dist/nano-components/nano-split-pane.entry.js +5 -0
- package/dist/nano-components/{p-6c4171fa.entry.js.map → nano-split-pane.entry.js.map} +1 -1
- package/dist/nano-components/nano-sticker.entry.js +5 -0
- package/dist/nano-components/nano-sticker.entry.js.map +1 -0
- package/dist/nano-components/nano-tab-content.entry.js +5 -0
- package/dist/nano-components/{p-3f40e370.entry.js.map → nano-tab-content.entry.js.map} +1 -1
- package/dist/nano-components/nano-tab-group.entry.js +5 -0
- package/dist/nano-components/nano-tab-group.entry.js.map +1 -0
- package/dist/nano-components/nano-tab.entry.js +5 -0
- package/dist/nano-components/{p-3cac5f6d.entry.js.map → nano-tab.entry.js.map} +1 -1
- package/dist/nano-components/nano-table-3ab8cd85.js +5 -0
- package/dist/nano-components/nano-table-3ab8cd85.js.map +1 -0
- package/dist/nano-components/nano-table.entry.js +5 -0
- package/dist/nano-components/page-dots-467ace2e.js +5 -0
- package/dist/nano-components/page-dots-467ace2e.js.map +1 -0
- package/dist/nano-components/{p-cd1fd454.js → popover-e5e7a641.js} +1 -1
- package/dist/nano-components/scroll-ac332213.js +5 -0
- package/dist/nano-components/scroll-ac332213.js.map +1 -0
- package/dist/nano-components/{p-dc565459.js → slot-8126e238.js} +1 -1
- package/dist/nano-components/{p-f88fa15c.js → tabbable-26a66a22.js} +1 -1
- package/dist/nano-components/table.worker-75d6e1d2.js +5 -0
- package/dist/nano-components/{p-411bb8f1.js → theme-82feb8cf.js} +1 -1
- package/dist/nano-components/{p-7bff5224.js → throttle-ac4fcefa.js} +1 -1
- package/dist/nano-components/{p-c3e8e3f9.js → transitions-fb09eb32.js} +1 -1
- package/dist/themes/nanopore.cn.css +1 -1
- package/dist/themes/nanopore.cn.css.map +1 -1
- package/dist/themes/nanopore.css +1 -1
- package/dist/themes/nanopore.css.map +1 -1
- package/dist/types/components/algolia/algolia-data.d.ts +1 -1
- package/dist/types/components/algolia/algolia-filter.d.ts +1 -1
- package/dist/types/components/algolia/algolia-pagination.d.ts +1 -1
- package/dist/types/components/algolia/algolia-results.d.ts +1 -1
- package/dist/types/components/algolia/algolia.d.ts +1 -7
- package/dist/types/components/algolia/lib/squirrelly/browser.d.ts +6 -0
- package/dist/types/components/algolia/lib/squirrelly/compile-string.d.ts +5 -0
- package/dist/types/components/algolia/lib/squirrelly/compile.d.ts +3 -0
- package/dist/types/components/algolia/lib/squirrelly/config.d.ts +48 -0
- package/dist/types/components/algolia/lib/squirrelly/container-utils.d.ts +8 -0
- package/dist/types/components/algolia/lib/squirrelly/containers.d.ts +18 -0
- package/dist/types/components/algolia/lib/squirrelly/err.d.ts +6 -0
- package/dist/types/components/algolia/lib/squirrelly/parse.d.ts +23 -0
- package/dist/types/components/algolia/lib/squirrelly/render.d.ts +3 -0
- package/dist/types/components/algolia/lib/squirrelly/storage.d.ts +13 -0
- package/dist/types/components/algolia/lib/squirrelly/utils.d.ts +8 -0
- package/dist/types/components/algolia/lib/template.d.ts +2 -0
- package/dist/types/components/checkbox/checkbox-group.d.ts +5 -0
- package/dist/types/components/global-nav/global-nav.d.ts +15 -20
- package/dist/types/components/slides/lib/js/animate.d.ts +2 -0
- package/dist/types/components/slides/lib/js/cell.d.ts +1 -0
- package/dist/types/components/slides/lib/js/drag.d.ts +1 -0
- package/dist/types/components/slides/lib/js/fade.d.ts +1 -0
- package/dist/types/components/slides/lib/js/flickity.d.ts +23 -0
- package/dist/types/components/slides/lib/js/fullscreen.d.ts +1 -0
- package/dist/types/components/slides/lib/js/index.d.ts +5 -0
- package/dist/types/components/slides/lib/js/lazyload.d.ts +1 -0
- package/dist/types/components/slides/lib/js/page-dots.d.ts +1 -0
- package/dist/types/components/slides/lib/js/player.d.ts +1 -0
- package/dist/types/components/slides/lib/js/prev-next-button.d.ts +1 -0
- package/dist/types/components/slides/lib/js/slide.d.ts +1 -0
- package/dist/types/components/slides/lib/js/utils/event-emitter.d.ts +1 -0
- package/dist/types/components/slides/lib/js/utils/gestures.d.ts +26 -0
- package/dist/types/components/slides/lib/js/utils/get-size.d.ts +6 -0
- package/dist/types/components/slides/lib/js/utils/utils.d.ts +5 -0
- package/dist/types/components/slides/slides-interface.d.ts +17 -7
- package/dist/types/components/slides/slides.d.ts +5 -0
- package/dist/types/components.d.ts +10 -10
- package/dist/types/utils/scroll.d.ts +5 -1
- package/docs-json.json +33 -24
- package/docs-vscode.json +4 -0
- package/hydrate/index.js +4147 -3953
- package/package.json +5 -8
- package/dist/cjs/_commonjsHelpers-29614748.js +0 -30
- package/dist/cjs/_commonjsHelpers-29614748.js.map +0 -1
- package/dist/cjs/algoliasearch-lite.esm.browser-992a2eff.js.map +0 -1
- package/dist/cjs/index-1d3ebe1a.js.map +0 -1
- package/dist/cjs/scroll-fc1b8387.js.map +0 -1
- package/dist/cjs/table.worker-3df34efe.js.map +0 -1
- package/dist/collection/components/slides/lib/js/add-remove-cell.js +0 -128
- package/dist/collection/components/slides/lib/js/images-loaded.js +0 -24
- package/dist/collection/components/slides/slides-interface.js +0 -2
- package/dist/collection/components/slides/slides-interface.js.map +0 -1
- package/dist/collection/utils/template.js.map +0 -1
- package/dist/components/_commonjsHelpers.js +0 -26
- package/dist/components/_commonjsHelpers.js.map +0 -1
- package/dist/esm/_commonjsHelpers-04a0e019.js +0 -26
- package/dist/esm/_commonjsHelpers-04a0e019.js.map +0 -1
- package/dist/esm/algoliasearch-lite.esm.browser-04891fdc.js.map +0 -1
- package/dist/esm/index-06666022.js.map +0 -1
- package/dist/esm/scroll-ec7ac257.js.map +0 -1
- package/dist/esm/table.worker-3cae908c.js.map +0 -1
- package/dist/nano-components/p-0563e812.entry.js +0 -5
- package/dist/nano-components/p-0563e812.entry.js.map +0 -1
- package/dist/nano-components/p-0bc40dd1.entry.js +0 -5
- package/dist/nano-components/p-0bc40dd1.entry.js.map +0 -1
- package/dist/nano-components/p-0e0f07f0.entry.js +0 -5
- package/dist/nano-components/p-0e0f07f0.entry.js.map +0 -1
- package/dist/nano-components/p-0e4da739.entry.js +0 -5
- package/dist/nano-components/p-0e4da739.entry.js.map +0 -1
- package/dist/nano-components/p-16e75af9.entry.js +0 -5
- package/dist/nano-components/p-16e75af9.entry.js.map +0 -1
- package/dist/nano-components/p-17eb456c.entry.js +0 -5
- package/dist/nano-components/p-17eb456c.entry.js.map +0 -1
- package/dist/nano-components/p-191352c4.entry.js +0 -5
- package/dist/nano-components/p-1987f7a9.js +0 -5
- package/dist/nano-components/p-1a55e282.entry.js +0 -5
- package/dist/nano-components/p-1a55e282.entry.js.map +0 -1
- package/dist/nano-components/p-2234694a.js +0 -5
- package/dist/nano-components/p-2a105609.entry.js +0 -5
- package/dist/nano-components/p-2a105609.entry.js.map +0 -1
- package/dist/nano-components/p-2c0218e6.entry.js +0 -5
- package/dist/nano-components/p-2c0218e6.entry.js.map +0 -1
- package/dist/nano-components/p-328ef9d3.entry.js +0 -5
- package/dist/nano-components/p-359b7cd2.entry.js +0 -5
- package/dist/nano-components/p-359b7cd2.entry.js.map +0 -1
- package/dist/nano-components/p-36c3ded8.entry.js +0 -5
- package/dist/nano-components/p-36c3ded8.entry.js.map +0 -1
- package/dist/nano-components/p-3ae362ae.entry.js +0 -5
- package/dist/nano-components/p-3cac5f6d.entry.js +0 -5
- package/dist/nano-components/p-3d8fb8a1.entry.js +0 -5
- package/dist/nano-components/p-3eeaba47.entry.js +0 -5
- package/dist/nano-components/p-3eeaba47.entry.js.map +0 -1
- package/dist/nano-components/p-3f40e370.entry.js +0 -5
- package/dist/nano-components/p-51133e62.entry.js +0 -5
- package/dist/nano-components/p-51133e62.entry.js.map +0 -1
- package/dist/nano-components/p-54c4a2f5.entry.js +0 -5
- package/dist/nano-components/p-54c4a2f5.entry.js.map +0 -1
- package/dist/nano-components/p-5fc3035d.entry.js +0 -5
- package/dist/nano-components/p-5fc3035d.entry.js.map +0 -1
- package/dist/nano-components/p-650aa197.entry.js +0 -5
- package/dist/nano-components/p-650aa197.entry.js.map +0 -1
- package/dist/nano-components/p-67ab5a5f.entry.js +0 -5
- package/dist/nano-components/p-67ab5a5f.entry.js.map +0 -1
- package/dist/nano-components/p-688f1a55.entry.js +0 -5
- package/dist/nano-components/p-688f1a55.entry.js.map +0 -1
- package/dist/nano-components/p-6c4171fa.entry.js +0 -5
- package/dist/nano-components/p-70747f20.js +0 -5
- package/dist/nano-components/p-7670058b.entry.js +0 -5
- package/dist/nano-components/p-7670058b.entry.js.map +0 -1
- package/dist/nano-components/p-79fff4fd.entry.js +0 -5
- package/dist/nano-components/p-7c82af28.entry.js +0 -5
- package/dist/nano-components/p-87329424.entry.js +0 -5
- package/dist/nano-components/p-8fe51abf.js +0 -5
- package/dist/nano-components/p-935968b8.entry.js +0 -23
- package/dist/nano-components/p-935968b8.entry.js.map +0 -1
- package/dist/nano-components/p-9925e504.entry.js +0 -5
- package/dist/nano-components/p-9c290055.entry.js +0 -5
- package/dist/nano-components/p-9f60ff14.entry.js +0 -5
- package/dist/nano-components/p-a225e976.entry.js +0 -5
- package/dist/nano-components/p-a225e976.entry.js.map +0 -1
- package/dist/nano-components/p-a26bdb65.js +0 -5
- package/dist/nano-components/p-abd11243.entry.js +0 -5
- package/dist/nano-components/p-abd11243.entry.js.map +0 -1
- package/dist/nano-components/p-b27b56d3.js +0 -5
- package/dist/nano-components/p-b27b56d3.js.map +0 -1
- package/dist/nano-components/p-c80336b2.entry.js +0 -5
- package/dist/nano-components/p-c80336b2.entry.js.map +0 -1
- package/dist/nano-components/p-cad86fb8.js +0 -5
- package/dist/nano-components/p-cad86fb8.js.map +0 -1
- package/dist/nano-components/p-d4e44f93.entry.js +0 -5
- package/dist/nano-components/p-dc4020f8.js +0 -5
- package/dist/nano-components/p-dc4020f8.js.map +0 -1
- package/dist/nano-components/p-dc6cb252.entry.js +0 -5
- package/dist/nano-components/p-dc6cb252.entry.js.map +0 -1
- package/dist/nano-components/p-dc805ecc.js +0 -5
- package/dist/nano-components/p-dd5687db.js +0 -5
- package/dist/nano-components/p-e6a0675e.entry.js +0 -5
- package/dist/nano-components/p-e98835e2.entry.js +0 -5
- package/dist/nano-components/p-efd3e121.entry.js +0 -5
- package/dist/nano-components/p-f73f52ed.entry.js +0 -5
- package/dist/nano-components/p-f73f52ed.entry.js.map +0 -1
- package/dist/nano-components/p-fbde7010.entry.js +0 -5
- package/dist/nano-components/p-fcbc9122.entry.js +0 -5
- package/dist/nano-components/p-fcbc9122.entry.js.map +0 -1
- package/dist/types/utils/template.d.ts +0 -2
- /package/dist/nano-components/{p-74a7fc4f.js.map → active-element-75b7c8a0.js.map} +0 -0
- /package/dist/nano-components/{p-cecb9af1.js.map → date-utils-6b7a6e1f.js.map} +0 -0
- /package/dist/nano-components/{p-cdfc507e.js.map → dom-8599fac1.js.map} +0 -0
- /package/dist/nano-components/{p-842cf127.js.map → drag-1723a4cc.js.map} +0 -0
- /package/dist/nano-components/{p-9bfdee71.js.map → events-6a805b42.js.map} +0 -0
- /package/dist/nano-components/{p-f8f89998.js.map → focus-visible-8b2c14da.js.map} +0 -0
- /package/dist/nano-components/{p-bb07c3d0.js.map → index-f626f476.js.map} +0 -0
- /package/dist/nano-components/{p-1987f7a9.js.map → local-my-account-6662da72.js.map} +0 -0
- /package/dist/nano-components/{p-ee045579.js.map → math-c02ddfda.js.map} +0 -0
- /package/dist/nano-components/{p-2155fc2c.js.map → nano-slides.entry.js.map} +0 -0
- /package/dist/nano-components/{p-8fe51abf.js.map → nano-table.entry.js.map} +0 -0
- /package/dist/nano-components/{p-cd1fd454.js.map → popover-e5e7a641.js.map} +0 -0
- /package/dist/nano-components/{p-dc565459.js.map → slot-8126e238.js.map} +0 -0
- /package/dist/nano-components/{p-f88fa15c.js.map → tabbable-26a66a22.js.map} +0 -0
- /package/dist/nano-components/{p-fbde7010.entry.js.map → table.worker-75d6e1d2.js.map} +0 -0
- /package/dist/nano-components/{p-f258383d.js → table.worker-f258383d.js} +0 -0
- /package/dist/nano-components/{p-411bb8f1.js.map → theme-82feb8cf.js.map} +0 -0
- /package/dist/nano-components/{p-7bff5224.js.map → throttle-ac4fcefa.js.map} +0 -0
- /package/dist/nano-components/{p-c3e8e3f9.js.map → transitions-fb09eb32.js.map} +0 -0
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["stickerCss","_getScrollTop","ele","Document","window","pageYOffset","scrollTop","_getOffset","parent","parentEle","document","documentElement","getOffset","Sticker","this","isRtl","scrollPosCache","scrollPosThresholdCache","cacheOffset","pauseResizeWatcher","listenForScrollParent","positions","pauseHide","hasBootstrapped","setupParentResizeListener","parentSizeObserver","disconnect","undefined","ResizeObserver","entries","entry","height","width","contentRect","quietMode","w","h","quietModeIsOn","breakPointMin","isSticky","breakPointMax","isRootSticker","sticker","autoResize","style","host","scrollWidth","toWatch","scrollParent","observe","onStickToDisplayEvent","e","detail","stickToEle","type","_offset","offset","isStuck","moveTrigger","requestAnimationFrame","minHeight","stickToEleInitSize","scrollHeight","v","setTriggerPos","getBoundingClientRect","onStickEvent","async","position","incomingTriggerPos","getTriggerPos","stickerIndex","hideOnNewStickers","includes","triggerPos","top","multiStickerHide","stuckCounter","onScroll","y","handleScrollTo","handleScrollAway","hide","shouldStick","pause","updateTriggerOffset","trigger","stickerResizeListener","content","contentSizeObserver","quietModeChange","setOffset","setAttribute","_v","_h","setPos","pos","u","match","setTriggetPos","setProperty","maxHeight","overflow","positionChange","split","children","slottedContent","Array","from","forEach","child","appendChild","order","nanoStuck","emit","scrollHide","nanoUnstuck","attachScrollListeners","addEventListener","passive","capture","removeEventListener","handleParentEvents","_","oldParent","manageListenersOnParent","stickToEleChange","oldEle","stickToChange","stickTo","querySelector","visibilityDecisionHandler","handleHideChange","nanoHide","nanoShow","setupIO","io","root","IntersectionObserver","slice","addEvents","console","error","scrollingTo","currScroll","Math","abs","toInitial","parentNode","insertBefore","nextSibling","getScrollParent","regex","parents","_node","ps","concat","prop","getComputedStyle","getPropertyValue","scroll","test","docHeight","find","data","scrollAmt","parentBounding","rootBounds","isIntersecting","bootstrapGurantor","createElement","innerHTML","classList","add","querySelectorAll","filter","findIndex","debounce","connectedCallback","dir","ownerDocument","setTimeout","disconnectedCallback","render","Host","sticky","siblings","index","stuck","class","ref","div"],"sources":["./src/components/sticker/sticker.scss?tag=nano-sticker&encapsulation=shadow","./src/components/sticker/sticker.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/layers';\n\n:host {\n /**\n * @prop --stuck-left: The left position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n * @prop --stuck-right: The right position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n * @prop --stuck-z-index: The z-index order to display your sticker. Can be useful when displaying multiple stickers simultaneously. Defaults to #{$layer-index-menubar};\n * @prop --top-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(-110%);\n * @prop --bottom-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(110%);\n */\n\n --stuck-left: initial;\n --stuck-right: initial;\n --stuck-z-index: #{$layer-index-menubar};\n --top-hide: translateY(-110%);\n --bottom-hide: translateY(110%);\n\n display: block;\n max-inline-size: 100%;\n}\n\n:host([sticky]) {\n position: sticky;\n transition: 0.3s ease transform;\n will-change: min-block-size;\n}\n\n:host([sticky][stuck]) {\n inset-inline: var(--stuck-left) var(--stuck-right);\n z-index: var(--stuck-z-index) !important;\n}\n\n:host([sticky][hide][placed-top]) {\n transform: var(--top-hide);\n}\n\n:host([sticky][hide][placed-bottom]) {\n transform: var(--bottom-hide);\n}\n\n:host([sticky][index='1']) {\n z-index: calc(var(--stuck-z-index) + 1);\n}\n\n:host([sticky][index='2']) {\n z-index: calc(var(--stuck-z-index) + 2);\n}\n\n:host([sticky][index='3']) {\n z-index: calc(var(--stuck-z-index) + 3);\n}\n\n:host([sticky][index='4']) {\n z-index: calc(var(--stuck-z-index) + 4);\n}\n\n:host([sticky][index='5']) {\n z-index: calc(var(--stuck-z-index) + 5);\n}\n\n.sticker {\n display: inherit;\n max-inline-size: inherit;\n inline-size: 100%;\n\n &:not(.stuck) {\n inline-size: auto !important;\n }\n\n &.sticky {\n transition: 0.3s ease all;\n position: relative;\n\n :host([index='1']) & {\n z-index: calc(var(--stuck-z-index) + 1);\n }\n\n :host([index='2']) & {\n z-index: calc(var(--stuck-z-index) + 2);\n }\n\n :host([index='3']) & {\n z-index: calc(var(--stuck-z-index) + 3);\n }\n\n :host([index='4']) & {\n z-index: calc(var(--stuck-z-index) + 4);\n }\n\n :host([index='5']) & {\n z-index: calc(var(--stuck-z-index) + 5);\n }\n }\n\n &.stuck {\n position: fixed;\n inset-inline: var(--stuck-left) var(--stuck-right);\n z-index: var(--stuck-z-index);\n transform: translateY(0);\n\n :host([placed-top]) & {\n inset-block-start: 0;\n }\n\n :host([placed-bottom]) & {\n inset-block-end: 0;\n }\n\n &.hide {\n :host([placed-top]) & {\n transform: var(--top-hide);\n }\n\n :host([placed-bottom]) & {\n transform: var(--bottom-hide);\n }\n }\n }\n}\n\n.sticker-content {\n display: flex;\n flex-wrap: wrap;\n}\n","import {\n Component,\n ComponentInterface,\n h,\n Host,\n Prop,\n State,\n Watch,\n Element,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport { getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\nfunction _getScrollTop(ele: HTMLElement | Document) {\n return ele instanceof Document ? window.pageYOffset : ele.scrollTop;\n}\n\nfunction _getOffset(ele: HTMLElement, parent: HTMLElement | Document) {\n const parentEle =\n parent instanceof Document ? document.documentElement : parent;\n return getOffset(ele, parentEle);\n}\n\ntype Positions = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * The Sticker component is a toolbox for 'sticking' items to scrolling containers.\n *\n */\n@Component({\n tag: 'nano-sticker',\n styleUrl: 'sticker.scss',\n shadow: true,\n})\nexport class Sticker implements ComponentInterface {\n private isRtl: boolean = false;\n private io: IntersectionObserver;\n private contentSizeObserver: ResizeObserver;\n private parentSizeObserver: ResizeObserver;\n private sticker: HTMLDivElement;\n private content: HTMLDivElement;\n private scrollPosCache = 0;\n private scrollPosThresholdCache = 0;\n private cacheOffset: number | { v: number; h: number } = 0;\n private slottedContent: Element[];\n private pauseResizeWatcher = false;\n private listenForScrollParent = false;\n private stickToEleInitSize?: DOMRect;\n private positions: Positions[] = [];\n private pauseHide: boolean = false;\n private hasBootstrapped = false;\n\n @Element() host: HTMLNanoStickerElement;\n\n // Internal State\n\n @State() isStuck = false;\n @State() isRootSticker = true;\n @State() hide = false;\n @State() scrollHide = false;\n @State() multiStickerHide = false;\n @State() scrollingTo = false;\n @State() quietModeIsOn = false;\n @State() stuckCounter = 0;\n @State() stickerIndex = 0;\n @State() stickToEle?: HTMLNanoStickerElement;\n @State() triggerPos: { top: number; left: number };\n @State() trigger: HTMLDivElement;\n @State() _offset: number | { v: number; h: number } = 0;\n\n // Public API\n\n /** Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size */\n @Prop() autoResize = true;\n\n /** Manually enable / disabled sticky behaviour */\n @Prop({ mutable: true }) isSticky = true;\n\n /** Distance the item should be stuck from the sticky edge. */\n @Prop({ mutable: true }) offset: number | { v: number; h: number } = 0;\n\n /** The edge of the scroll-parent to stick to */\n @Prop() position: 'top' | 'bottom' = 'top';\n // other opts I'd like one day. 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'\n\n /** When applied, the sticker will hide when the scroll-parent\n * is scrolling away from the sticker's stuck position and show when scrolling toward it.\n * By default this will apply when the parent is below either the h or w dimensions */\n @Prop() quietMode: 'on' | 'off' | { h: number; w: number } = {\n h: 600,\n w: 600,\n };\n\n /** When applied stickers will hide upon new stickers being stuck to the same position */\n @Prop() hideOnNewStickers = true;\n\n /** The max width of the item to implement sticky behaviour. */\n @Prop() breakPointMax: null | number = null;\n\n /** The min width of the item to implement sticky behaviour. */\n @Prop() breakPointMin: null | number = null;\n\n /** Define which scroll element to listen & stick to.\n * By default, it will find traverse the DOM to find the closest. */\n @Prop({ mutable: true }) scrollParent?: HTMLElement | Document;\n\n /** Upon being stuck, attach the sticker to another sticker element.\n * JS query selector string or DOM element pointing to a `<nano-sticker>` */\n @Prop() stickTo: string | HTMLNanoStickerElement;\n\n // Broadcasted Events\n\n /** Emitted when a sticker is stuck */\n @Event() nanoStuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n /** Emitted when a sticker is unstuck */\n @Event() nanoUnstuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n /** Emitted when a sticker is hidden */\n @Event() nanoHide!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n /** Emitted when a sticker is showing */\n @Event() nanoShow!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n // Public methods\n\n /**\n * Method to return the visibility status of the sticker\n * @returns boolean\n */\n @Method()\n async isHiding() {\n return this.hide;\n }\n\n /**\n * Method to return the stuck status of the sticker\n * @returns boolean\n */\n @Method()\n async isSticking() {\n this.shouldStick();\n return this.isStuck;\n }\n\n /** @internal */\n @Method()\n async setTriggerPos(offset: number | { v: number; h: number }) {\n return (this._offset = offset);\n }\n\n /** @internal */\n @Method()\n async getTriggerPos() {\n return this.triggerPos;\n }\n\n /** @internal */\n @Method()\n async pauseHiding(pause: boolean) {\n return (this.pauseHide = pause);\n }\n\n // Watchers\n\n /** Keep a note of trigger position. Need this to track sticker order in the DOM */\n @Watch('trigger')\n @Watch('scrollParent')\n updateTriggerOffset() {\n if (!this.trigger || !this.scrollParent || !this.listenForScrollParent)\n return;\n this.triggerPos = _getOffset(this.trigger, this.scrollParent);\n }\n\n /** A root sticker is a fixed element Or this sticker is sticking to another.\n * We need a content resize watcher to make sure we maintain a correct placeholder size in the body */\n @Watch('position')\n stickerResizeListener() {\n if (!this.content || !window['ResizeObserver']) return;\n\n if (this.contentSizeObserver) {\n this.contentSizeObserver.disconnect();\n this.contentSizeObserver = undefined;\n }\n\n this.contentSizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (this.pauseResizeWatcher) return;\n\n if (entry.contentRect.height) {\n if (this.position === 'top')\n this.host.style.height = entry.contentRect.height + 'px';\n if (this.position === 'bottom')\n this.host.style.minHeight = entry.contentRect.height + 'px';\n }\n }\n });\n this.contentSizeObserver.observe(this.content);\n }\n\n @Watch('quietMode')\n quietModeChange() {\n if (this.quietMode === 'on')\n requestAnimationFrame(() => (this.quietModeIsOn = true));\n else if (this.quietMode === 'off')\n requestAnimationFrame(() => (this.quietModeIsOn = false));\n }\n\n /** offset is part of the public API but we also use it to manipulate trigger points */\n @Watch('offset')\n @Watch('_offset')\n setOffset() {\n if (this.trigger) this.trigger.setAttribute('style', '');\n let v: number, h: number, _v: number, _h: number;\n const sticker: HTMLElement =\n this.isRootSticker || this.stickToEle ? this.sticker : this.host;\n\n if (!sticker) return;\n\n if (typeof this.offset === 'object') ({ v, h } = this.offset);\n else v = h = this.offset;\n\n if (typeof this._offset === 'object') ({ v = _v, h = _h } = this._offset);\n else _v = _h = this._offset;\n\n const setPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n const u = pos.match(/(top|bottom)/) ? v : h;\n setTriggetPos(pos);\n sticker.style[pos] = u + 'px';\n if (u)\n this.host.style.setProperty(\n '--hide-transform-amount',\n `(110% + ${u}px)`\n );\n else this.host.style.setProperty('--hide-transform-amount', null);\n };\n\n const setTriggetPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n const u = pos.match(/(top|bottom)/) ? v + _v : h + _h;\n this.trigger.style[pos] = u * -1 + 'px';\n this.trigger.style.position = 'relative';\n this.trigger.style.minHeight = '1px';\n this.trigger.style.maxHeight = '1px';\n this.trigger.style.overflow = 'hidden';\n };\n\n if (\n (this.positions.includes('start') && this.isRtl) ||\n (this.positions.includes('end') && !this.isRtl)\n )\n setPos('right');\n\n if (\n (this.positions.includes('end') && this.isRtl) ||\n (this.positions.includes('start') && !this.isRtl)\n )\n setPos('left');\n\n if (this.positions.includes('top')) setPos('top');\n if (this.positions.includes('bottom')) setPos('bottom');\n }\n\n @Watch('position')\n positionChange() {\n this.positions = this.position.split('-') as Positions[];\n this.setOffset();\n }\n\n /** If this sticker is attached to a 'master' sticker (stickToEle),\n * here we move the content of this sticker in and out accordingly */\n @Watch('isStuck')\n async stuckChange() {\n if (this.isStuck) {\n if (this.stickToEle) {\n const content = this.host.children;\n this.slottedContent = Array.from(content);\n\n this.slottedContent.forEach((child: HTMLElement) => {\n this.stickToEle.appendChild(child);\n child.style.order = this.stickerIndex + '';\n });\n\n this.nanoStuck.emit({ sticker: this.stickToEle });\n } else this.nanoStuck.emit({ sticker: this.host });\n } else {\n this.scrollHide = false;\n\n if (this.stickToEle) {\n this.slottedContent.forEach((child: HTMLElement) => {\n this.host.appendChild(child);\n child.style.order = '';\n });\n this.nanoUnstuck.emit({ sticker: this.stickToEle });\n } else this.nanoUnstuck.emit({ sticker: this.host });\n }\n }\n\n /** attach scroll listener. 'hides' stickers when scrolling away from trigger and 'shows' when scrolling toward */\n @Watch('quietModeIsOn')\n attachScrollListeners() {\n if (this.quietModeIsOn)\n this.scrollParent.addEventListener('scroll', this.onScroll, {\n passive: true,\n capture: false,\n });\n else if (this.scrollParent) {\n this.scrollParent.removeEventListener('scroll', this.onScroll);\n this.moveTrigger(true);\n }\n }\n\n /** Add / remove parent scrolling listeners. If there's stickToEle we need to remove them */\n @Watch('scrollParent')\n @Watch('stickToEle')\n handleParentEvents(_, oldParent: null | HTMLElement = null) {\n if (!this.listenForScrollParent) return;\n if (oldParent) this.manageListenersOnParent(false, oldParent);\n if (this.scrollParent) this.manageListenersOnParent(!this.stickToEle);\n }\n\n /** Add remove specific listeners if we're sticking to a sticker.\n * We need to adjust triggers according to the status of the 'master' */\n @Watch('stickToEle')\n stickToEleChange(_, oldEle: null | HTMLNanoStickerElement) {\n if (this.stickToEle) {\n this.stickToEle.addEventListener('nanoHide', this.onStickToDisplayEvent);\n this.stickToEle.addEventListener('nanoShow', this.onStickToDisplayEvent);\n this.stickToEle.addEventListener('nanoStuck', this.onStickToDisplayEvent);\n this.stickToEle.addEventListener(\n 'nanoUnstuck',\n this.onStickToDisplayEvent\n );\n }\n if (oldEle) {\n oldEle.removeEventListener('nanoHide', this.onStickToDisplayEvent);\n oldEle.removeEventListener('nanoShow', this.onStickToDisplayEvent);\n oldEle.removeEventListener('nanoStuck', this.onStickToDisplayEvent);\n oldEle.removeEventListener('nanoUnstuck', this.onStickToDisplayEvent);\n }\n }\n\n /** Find and set the stickToEle from the public, selector string */\n @Watch('stickTo')\n stickToChange() {\n if (typeof this.stickTo === 'string')\n this.stickToEle = this.scrollParent.querySelector(this.stickTo);\n else if (!!this.stickTo) this.stickToEle = this.stickTo;\n else this.stickToEle = undefined;\n }\n\n /** 2 potential criteria for hiding. Multi-stickers or quiet mode. */\n @Watch('multiStickerHide')\n @Watch('scrollHide')\n visibilityDecisionHandler() {\n if (this.multiStickerHide || this.scrollHide) this.hide = true;\n else this.hide = false;\n }\n\n @Watch('hide')\n handleHideChange() {\n if (this.hide) this.nanoHide.emit({ sticker: this.host });\n else this.nanoShow.emit({ sticker: this.host });\n }\n\n @Watch('scrollParent')\n setupIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n if (!this.scrollParent || !this.hasBootstrapped || !this.trigger) return;\n\n this.isRootSticker = this.scrollParent instanceof Document;\n let root = this.scrollParent;\n if (this.scrollParent instanceof Document) root = null;\n\n this.io = new window.IntersectionObserver(\n (_) => {\n if (this.pauseResizeWatcher || !this.isSticky) return;\n this.shouldStick(_.slice(-1)[0]);\n },\n { root: root as HTMLElement }\n );\n\n this.io.observe(this.trigger);\n }\n\n // Private methods / handlers\n\n /** Assesses the public API quitemode and works out if it should be applied atm.\n * If 'small screen', or there is a breakpointmax / min it will add a resizeobserver to conditionally add behaviour */\n private setupParentResizeListener = () => {\n if (!window['ResizeObserver']) return;\n\n if (this.parentSizeObserver) {\n this.parentSizeObserver.disconnect();\n this.parentSizeObserver = undefined;\n }\n\n this.parentSizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n let height: number, width: number;\n if (entry.contentRect.height) height = entry.contentRect.height;\n if (entry.contentRect.width) width = entry.contentRect.width;\n\n if (typeof this.quietMode === 'object') {\n if (width < this.quietMode.w || height < this.quietMode.h)\n this.quietModeIsOn = true;\n else this.quietModeIsOn = false;\n }\n\n if (this.breakPointMin) {\n if (width > this.breakPointMin) this.isSticky = true;\n else this.isSticky = false;\n }\n\n if (this.breakPointMax) {\n if (width < this.breakPointMax) this.isSticky = true;\n else this.isSticky = false;\n }\n\n if (this.isRootSticker && this.sticker && this.autoResize)\n this.sticker.style.width = this.host.scrollWidth + 'px';\n }\n });\n\n const toWatch =\n this.scrollParent instanceof Document\n ? this.scrollParent.documentElement\n : this.scrollParent;\n if (toWatch) this.parentSizeObserver.observe(toWatch);\n };\n\n /** For stickTo stickers. We listen to the events from the 'master' sticker to amend the hide/show trigger\n * Main diffs from root-stickers / non is height being on 'master' */\n private onStickToDisplayEvent = (\n e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n ) => {\n if (e.detail.sticker !== this.stickToEle) return;\n\n switch (e.type) {\n case 'nanoHide':\n this._offset = 0;\n this.cacheOffset = this.offset;\n this.offset = 0;\n /** trigger moves down, underneath sticker if the main sticker hides */\n if (!this.isStuck) this.moveTrigger(false);\n\n /** If it's an actual 'position: sticky' element, we need to give the sticker an appropriate height.\n * This minimises content jumping around as items are added */\n if (!this.isRootSticker && this.quietModeIsOn) {\n requestAnimationFrame(() => {\n this.stickToEle.style.minHeight =\n this.stickToEleInitSize.height +\n (this.host.scrollHeight +\n (typeof this.cacheOffset === 'object'\n ? this.cacheOffset.v\n : this.cacheOffset)) +\n 'px';\n this.stickToEle.setTriggerPos(this.stickToEleInitSize.height * -1);\n });\n }\n break;\n case 'nanoShow':\n this._offset = this.stickToEleInitSize.height;\n this.offset = this.cacheOffset;\n this.moveTrigger(true);\n\n /** reset master sticker size */\n if (!this.isRootSticker && this.quietModeIsOn) {\n requestAnimationFrame(() => {\n this.stickToEle.style.minHeight = '';\n this.stickToEle.setTriggerPos(0);\n });\n }\n break;\n case 'nanoStuck':\n this.stickToEleInitSize = this.stickToEle.getBoundingClientRect();\n this._offset = this.stickToEleInitSize.height;\n break;\n }\n };\n\n /** Add or removes event listeners / observers on scrolling parent\n * for when the scrolling parent changes, or, this sticker is sticking to another */\n private manageListenersOnParent(\n addEvents: boolean,\n ele?: HTMLElement | Document\n ) {\n const scrollParent = ele || this.scrollParent;\n\n if (!scrollParent) return;\n\n if (!addEvents) {\n try {\n if (this.quietModeIsOn)\n scrollParent.removeEventListener('scroll', this.onScroll);\n scrollParent.removeEventListener('nanoStuck', this.onStickEvent);\n scrollParent.removeEventListener('nanoUnstuck', this.onStickEvent);\n } catch (e) {\n console.error('Events haven`t been added');\n }\n } else {\n scrollParent.addEventListener('nanoStuck', this.onStickEvent);\n scrollParent.addEventListener('nanoUnstuck', this.onStickEvent);\n\n if (this.quietModeIsOn) this.attachScrollListeners();\n }\n this.setupParentResizeListener();\n }\n\n /** Handler applied to scrolling parent. When 'hideOnNewStickers' is true, hide this sticker on subsequent stuck stickers. */\n private onStickEvent = async (\n e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n ) => {\n const sticker = e.detail ? e.detail.sticker : null;\n if (!sticker || sticker.position !== this.position) return;\n\n const incomingTriggerPos = await sticker.getTriggerPos();\n\n if (\n e.type === 'nanoStuck' &&\n sticker !== this.host &&\n sticker.scrollParent === this.host.scrollParent\n ) {\n this.stickerIndex++;\n\n if (!this.hideOnNewStickers) return;\n\n if (\n (this.positions.includes('top') &&\n this.triggerPos.top < incomingTriggerPos.top) ||\n (this.positions.includes('bottom') &&\n this.triggerPos.top > incomingTriggerPos.top)\n ) {\n this.multiStickerHide = true;\n this.stuckCounter++;\n }\n }\n\n if (\n e.type === 'nanoUnstuck' &&\n sticker !== this.host &&\n sticker.scrollParent === this.host.scrollParent\n ) {\n this.stickerIndex--;\n\n if (!this.hideOnNewStickers) return;\n\n if (\n (this.positions.includes('top') &&\n this.triggerPos.top < incomingTriggerPos.top) ||\n (this.positions.includes('bottom') &&\n this.triggerPos.top > incomingTriggerPos.top)\n ) {\n this.stuckCounter--;\n if (this.stuckCounter < 1) this.multiStickerHide = false;\n }\n }\n };\n\n /** Scroll handler applied to scrolling parent. Only applied when quietmode is on.\n * 'hides' stickers when scrolling over 100px away from trigger and 'shows' when scrolling toward */\n private onScroll = () => {\n const y: number = _getScrollTop(this.scrollParent);\n\n // scrolling up\n if (y < this.scrollPosCache) {\n if (!this.positions.includes('bottom')) this.handleScrollTo();\n else this.handleScrollAway(y);\n }\n\n // scrolling down\n if (y > this.scrollPosCache) {\n if (!this.positions.includes('bottom')) this.handleScrollAway(y);\n else this.handleScrollTo();\n }\n this.scrollPosCache = y;\n };\n\n /** Watch for scroll direction. Only applies when quietmode is on.\n * We need to addjust the position of the trigger when the sticker is hidden */\n private handleScrollTo() {\n this.scrollPosThresholdCache = null;\n if (!this.scrollHide) return;\n\n if (this.scrollingTo !== true) {\n this._offset = this.cacheOffset || this._offset;\n }\n this.scrollingTo = true;\n this.scrollHide = false;\n }\n\n private handleScrollAway(currScroll: number) {\n if (this.scrollHide) return;\n\n if (!this.isStuck) return;\n\n if (this.scrollingTo !== false) {\n this.cacheOffset = this._offset;\n this._offset = 0;\n }\n this.scrollingTo = false;\n\n if (!this.scrollPosThresholdCache)\n this.scrollPosThresholdCache = currScroll;\n else if (\n !this.pauseHide &&\n Math.abs(currScroll - this.scrollPosThresholdCache) > 100\n )\n this.scrollHide = true;\n }\n\n private moveTrigger(toInitial?: boolean) {\n if (\n (this.positions.includes('bottom') && !toInitial) ||\n (!this.positions.includes('bottom') && toInitial)\n ) {\n this.host.parentNode.insertBefore(this.trigger, this.host);\n } else\n this.host.parentNode.insertBefore(this.trigger, this.host.nextSibling);\n }\n\n /**\n * Gets the 'closest' scrolling parent\n * @returns either an element with `overflow: scroll | auto` or the parent Document\n */\n private getScrollParent(): HTMLElement | Document {\n const regex = /(auto|scroll)/;\n const parents = (_node: Node, ps: Node[]) => {\n if (_node.parentNode === null) {\n return ps;\n }\n return parents(_node.parentNode, ps.concat([_node]));\n };\n const style = (_node, prop) =>\n getComputedStyle(_node, null).getPropertyValue(prop);\n const overflow = (_node) =>\n style(_node, 'overflow') +\n style(_node, 'overflow-y') +\n style(_node, 'overflow-x');\n const scroll = (_node) => regex.test(overflow(_node));\n const docHeight = document.documentElement.getBoundingClientRect().height;\n\n const scrollParent = (_node: HTMLElement) => {\n if (!(typeof _node === 'object')) return;\n\n const ps = parents(_node, []);\n return (\n ps.find(\n (ele) =>\n scroll(ele) && ele.getBoundingClientRect().height !== docHeight\n ) || document\n );\n };\n\n return scrollParent(this.host);\n }\n\n private shouldStick(data?: IntersectionObserverEntry) {\n let scrollAmt: number;\n\n if (this.positions.includes('top')) {\n if (!this.isRootSticker) {\n scrollAmt = _getOffset(this.trigger, this.scrollParent).top;\n } else {\n scrollAmt = this.trigger.getBoundingClientRect().top;\n }\n this.isStuck = scrollAmt < -1;\n } else if (this.positions.includes('bottom')) {\n scrollAmt = this.trigger.getBoundingClientRect().top;\n const parentBounding =\n data && data.rootBounds\n ? data.rootBounds\n : (this.scrollParent instanceof Document\n ? document.documentElement\n : this.scrollParent\n ).getBoundingClientRect();\n this.isStuck =\n !data.isIntersecting ||\n scrollAmt > parentBounding.height + parentBounding.top;\n }\n }\n\n private bootstrapGurantor() {\n this.hasBootstrapped = true;\n\n this.scrollParent = this.scrollParent || this.getScrollParent();\n this.isRootSticker = this.scrollParent instanceof Document;\n\n this.trigger = this.trigger || document.createElement('div');\n this.trigger.innerHTML = ' ';\n this.trigger.classList.add('sticker-trigger');\n\n this.positionChange();\n this.moveTrigger(true);\n this.quietModeChange();\n\n this.listenForScrollParent = true;\n this.handleParentEvents(true);\n\n this.stickerIndex = Array.from(\n this.scrollParent.querySelectorAll('nano-sticker')\n )\n .filter(\n (sticker: HTMLNanoStickerElement) => sticker.position === this.position\n )\n .findIndex((sticker) => sticker === this.host);\n\n this.setOffset();\n this.stickerResizeListener();\n this.setupParentResizeListener();\n\n // bit of a hack ... add default 'order'. Required for 'stickTo' elements.\n this.slottedContent = Array.from(this.host.children);\n this.slottedContent.forEach((child: HTMLElement) => {\n child.style.order = this.stickerIndex + '';\n });\n\n this.updateTriggerOffset();\n this.stickToChange();\n this.setupIO();\n this.onStickToDisplayEvent = debounce(this.onStickToDisplayEvent, 50);\n }\n\n // Stencil methods\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' ||\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n // this is all horrible.... shrug\n document.documentElement.addEventListener('nanoComponentsReady', () => {\n setTimeout((_) => this.bootstrapGurantor(), 200);\n });\n setTimeout((_) => {\n if (!this.hasBootstrapped) this.bootstrapGurantor();\n }, 1000);\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n\n if (this.parentSizeObserver) {\n this.parentSizeObserver.disconnect();\n this.parentSizeObserver = undefined;\n }\n\n this.scrollParent = null;\n this.hasBootstrapped = false;\n }\n\n render() {\n return (\n <Host\n sticky={!this.isRootSticker && !this.stickToEle && this.isSticky}\n hide={this.hide && this.isStuck}\n siblings={this.stuckCounter}\n index={this.stickerIndex}\n stuck={this.isStuck && this.isSticky}\n placed-bottom={this.positions.includes('bottom')}\n placed-top={this.positions.includes('top')}\n placed-end={this.positions.includes('end')}\n placed-start={this.positions.includes('start')}\n >\n <div\n class={{\n sticker: true,\n sticky: this.isRootSticker && this.isSticky,\n stuck: this.isStuck && this.isRootSticker && this.isSticky,\n hide: this.isRootSticker && this.hide && this.isStuck,\n }}\n ref={(div) => (this.sticker = div)}\n >\n <div class=\"sticker-content\" ref={(div) => (this.content = div)}>\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/*!
|
2
|
+
* Web Components for Nanopore digital Web Apps
|
3
|
+
*/
|
4
|
+
import{r as t,h as a,a as n,g as e}from"./index-9695db0a.js";const s=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block;transform:translate3d(0, 0, 0);opacity:1;animation:opacity 0.3s ease-in-out forwards;animation-duration:0s !important}:host(.ready){animation-duration:0.3s !important}@media only screen and (max-width: 768px){:host([animation-dir=left]){animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@keyframes opacity{0%{opacity:0}100%{opacity:1}}@keyframes slide-left{0%{transform:translate3d(-100%, 0, 0)}50%{transform:translate3d(0%) translate3d(-0.9em)}100%{transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{transform:translate3d(100%, 0, 0)}50%{transform:translateX(0%) translate3d(0.9em)}100%{transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{animation:none !important}}";let i=0;const o=class{constructor(a){t(this,a);this.tabContentId=`nano-tab-content-${++i}`;this.ready=false;this.name="";this.active=false}componentDidLoad(){requestAnimationFrame((()=>this.ready=true))}render(){return a(n,{id:this.host.id||this.tabContentId,style:{display:this.active?"block":"none"},role:"tabpanel","aria-hidden":this.active?"false":"true",class:{ready:this.ready}},a("div",{part:"base",class:"nano-tab-content"},a("slot",null)))}get host(){return e(this)}};o.style=s;export{o as nano_tab_content};
|
5
|
+
//# sourceMappingURL=nano-tab-content.entry.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["tabContentCss","id","TabPanel","this","tabContentId","componentDidLoad","requestAnimationFrame","ready","render","h","Host","host","style","display","active","role","class","part"],"sources":["./src/components/tabs/tab-content.scss?tag=nano-tab-content&encapsulation=shadow","./src/components/tabs/tab-content.tsx"],"sourcesContent":[":host {\n display: block;\n transform: translate3d(0, 0, 0);\n opacity: 1;\n animation: opacity 0.3s ease-in-out forwards;\n animation-duration: 0s !important;\n}\n\n:host(.ready) {\n animation-duration: 0.3s !important;\n}\n\n@media only screen and (max-width: 768px) {\n :host([animation-dir='left']) {\n animation: slide-right 0.3s ease-in-out;\n opacity: 1;\n }\n\n :host([animation-dir='right']) {\n animation: slide-left 0.3s ease-in-out;\n opacity: 1;\n }\n}\n\n.nano-tab-content {\n position: relative;\n}\n\n@keyframes opacity {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes slide-left {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n\n 50% {\n transform: translate3d(0%) translate3d(-0.9em);\n }\n\n 100% {\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes slide-right {\n 0% {\n transform: translate3d(100%, 0, 0);\n }\n\n 50% {\n transform: translateX(0%) translate3d(0.9em);\n }\n\n 100% {\n transform: translate3d(0, 0, 0);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n * {\n animation: none !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n ComponentInterface,\n State,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab panel's content.\n */\n@Component({\n tag: 'nano-tab-content',\n styleUrl: 'tab-content.scss',\n shadow: true,\n})\nexport class TabPanel implements ComponentInterface {\n private tabContentId = `nano-tab-content-${++id}`;\n @State() ready = false;\n\n @Element() host: HTMLNanoTabContentElement;\n\n /** The tab panel's name. */\n @Prop({ reflect: true }) name = '';\n\n /** When true, the tab content will be shown. */\n @Prop({ reflect: true }) active = false;\n\n componentDidLoad(): void {\n requestAnimationFrame(() => (this.ready = true));\n }\n\n render() {\n return (\n <Host\n id={this.host.id || this.tabContentId}\n style={{ display: this.active ? 'block' : 'none' }}\n role=\"tabpanel\"\n aria-hidden={this.active ? 'false' : 'true'}\n class={{\n ready: this.ready,\n }}\n >\n <div part=\"base\" class=\"nano-tab-content\">\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":";;;
|
1
|
+
{"version":3,"names":["tabContentCss","id","TabPanel","this","tabContentId","componentDidLoad","requestAnimationFrame","ready","render","h","Host","host","style","display","active","role","class","part"],"sources":["./src/components/tabs/tab-content.scss?tag=nano-tab-content&encapsulation=shadow","./src/components/tabs/tab-content.tsx"],"sourcesContent":[":host {\n display: block;\n transform: translate3d(0, 0, 0);\n opacity: 1;\n animation: opacity 0.3s ease-in-out forwards;\n animation-duration: 0s !important;\n}\n\n:host(.ready) {\n animation-duration: 0.3s !important;\n}\n\n@media only screen and (max-width: 768px) {\n :host([animation-dir='left']) {\n animation: slide-right 0.3s ease-in-out;\n opacity: 1;\n }\n\n :host([animation-dir='right']) {\n animation: slide-left 0.3s ease-in-out;\n opacity: 1;\n }\n}\n\n.nano-tab-content {\n position: relative;\n}\n\n@keyframes opacity {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes slide-left {\n 0% {\n transform: translate3d(-100%, 0, 0);\n }\n\n 50% {\n transform: translate3d(0%) translate3d(-0.9em);\n }\n\n 100% {\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes slide-right {\n 0% {\n transform: translate3d(100%, 0, 0);\n }\n\n 50% {\n transform: translateX(0%) translate3d(0.9em);\n }\n\n 100% {\n transform: translate3d(0, 0, 0);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n * {\n animation: none !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n ComponentInterface,\n State,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab panel's content.\n */\n@Component({\n tag: 'nano-tab-content',\n styleUrl: 'tab-content.scss',\n shadow: true,\n})\nexport class TabPanel implements ComponentInterface {\n private tabContentId = `nano-tab-content-${++id}`;\n @State() ready = false;\n\n @Element() host: HTMLNanoTabContentElement;\n\n /** The tab panel's name. */\n @Prop({ reflect: true }) name = '';\n\n /** When true, the tab content will be shown. */\n @Prop({ reflect: true }) active = false;\n\n componentDidLoad(): void {\n requestAnimationFrame(() => (this.ready = true));\n }\n\n render() {\n return (\n <Host\n id={this.host.id || this.tabContentId}\n style={{ display: this.active ? 'block' : 'none' }}\n role=\"tabpanel\"\n aria-hidden={this.active ? 'false' : 'true'}\n class={{\n ready: this.ready,\n }}\n >\n <div part=\"base\" class=\"nano-tab-content\">\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":";;;6DAAA,MAAMA,EAAgB,w6BCUtB,IAAIC,EAAK,E,MAUIC,EAAQ,M,yBACXC,KAAAC,aAAe,sBAAsBH,I,WAC5B,M,UAKe,G,YAGE,K,CAElCI,mBACEC,uBAAsB,IAAOH,KAAKI,MAAQ,M,CAG5CC,SACE,OACEC,EAACC,EAAI,CACHT,GAAIE,KAAKQ,KAAKV,IAAME,KAAKC,aACzBQ,MAAO,CAAEC,QAASV,KAAKW,OAAS,QAAU,QAC1CC,KAAK,WAAU,cACFZ,KAAKW,OAAS,QAAU,OACrCE,MAAO,CACLT,MAAOJ,KAAKI,QAGdE,EAAA,OAAKQ,KAAK,OAAOD,MAAM,oBACrBP,EAAA,c"}
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/*!
|
2
|
+
* Web Components for Nanopore digital Web Apps
|
3
|
+
*/
|
4
|
+
import{r as t,c as a,h as n,a as i,g as o}from"./index-9695db0a.js";import{g as s,a as r}from"./dom-8599fac1.js";import{s as e}from"./scroll-ac332213.js";import{C as l}from"./component-store-f7eb0a56.js";import{c as h}from"./theme-82feb8cf.js";import{d as c}from"./transitions-fb09eb32.js";import"./throttle-ac4fcefa.js";const d=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255 255 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius) var(--border-radius) 0 0;--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;inline-size:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;inline-size:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";inline-size:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));block-size:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow:auto hidden;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);inline-size:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;inline-size:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-radius:var(--content-border-radius)}';let b=0;const p=class{constructor(n){t(this,n);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.baseId=`nano-tab-group-${++b}`;this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const n=a.closest("nano-tab");if(n)this.setActiveTab(n)};this.handleKeyDown=t=>{const a=document.activeElement;if(!a||a.tagName.toLowerCase()!=="nano-tab")return;if(["Enter"," "].includes(t.key)){const a=t.target;const n=a.closest("nano-tab");if(n){this.setActiveTab(n);t.preventDefault();t.stopPropagation()}}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const n=this.getAllActiveTabs;let i=n.indexOf(a);if(t.key==="Home")i=0;if(t.key==="End")i=n.length-1;if(this.placement==="top"){if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){i=Math.min(n.length-1,i+1)}}if(this.placement==="start"){if(t.key==="ArrowUp")i=Math.max(0,i-1);if(t.key==="ArrowDown")i=Math.min(n.length-1,i+1)}n[i].setFocus();if(this.placement==="top"){e(n[i],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let n;if(t)n=this.nav.scrollLeft+a-20;else n=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:n,behavior:"smooth"})}catch(t){this.nav.scrollLeft=n}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const n=a.pageX-this.initialTouchX;const i=a.pageY-this.initialTouchY;const o=70;const s=this.initialTouchX-a.clientX;const r=this.initialTouchY-a.clientY;const e=Math.abs(n)>=o&&Math.abs(i)<=o;const l=this.getAllActiveTabs;const h=l.findIndex((t=>t.active));if(e){const t=n<0&&this.placement==="top"||n>0&&this.placement!=="top"?1:-1;if(l[h+t]){this.setActiveTab(l[h+t]);if(Math.abs(s)>Math.abs(r)){if(s>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedElements({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.tab=undefined;this.placement="top";this.noScrollControls=false;this.color=undefined;this.storeId=undefined;this.storeMethod="session";this.disableSwipe=undefined}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;c(this.rightBtn,{className:"is-shown",show:!this.hideControlRight})}hideLeftBtn(){if(!this.leftBtn)return;c(this.leftBtn,{className:"is-shown",show:!this.hideControlLeft})}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return s(this.host,"nano-tab")}get getAllPanels(){return s(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const n=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(this.nav&&["top"].includes(this.placement)){e(this.activeTab,this.nav,"horizontal","center")}if(a){if(n){this.nanoTabHide.emit({name:n.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map(((t,n)=>{const i=a.find((a=>a.name===t.panel));if(i){if(!i.id)i.id=`${this.baseId}-panel-${n}`;if(!t.id)t.id=`${this.baseId}-tab-${n}`;t.setAttribute("aria-controls",i.id);i.setAttribute("aria-labelledby",t.id)}}))}syncActiveTabIndicator(){var t;this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const a=this.getActiveTab;if(!a)return;const n=((t=a.shadowRoot.querySelector(".nanotab"))===null||t===void 0?void 0:t.clientWidth)||0;const i=a.clientHeight;const o=r(a,this.tabs);if(!this.activeTabIndicator)return;const s=o.top+this.nav.scrollTop;const e=o.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${n}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${e}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${i}px`;this.activeTabIndicator.style.transform=`translateY(${s}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){var a;let n=this.getAllActiveTabs.indexOf(t.target);const i=t.target;if(n<0)return;const o=this.getAllPanels.find((t=>t.name===i.panel));if(!o)return;t.stopImmediatePropagation();const s=this.nanoTabWillClose.emit({name:i.panel});if(s.defaultPrevented)return;if(i.active){n=n===0?1:n-1;const t=(a=this.getAllActiveTabs[n])===null||a===void 0?void 0:a.panel;if(t)this.host.show(t)}i.remove();o.remove();this.nanoTabClose.emit({name:i.panel})}componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)l.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);requestAnimationFrame((()=>this.updateScrollControls()));if(!window["ResizeObserver"])return;this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();e(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return n(i,{class:Object.assign({},h(this.color)),dir:this.isRtl?"rtl":null},n("div",{part:"base",class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&n("button",{disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},n("nano-icon",{name:"light/chevron-left"})),n("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},n("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist","aria-orientation":this.placement==="start"?"vertical":"horizontal"},n("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),n("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&n("button",{disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},n("nano-icon",{name:"light/chevron-right"}))),n("slot",{name:"tab-content-header"}),n("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},n("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return o(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};p.style=d;export{p as nano_tab_group};
|
5
|
+
//# sourceMappingURL=nano-tab-group.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["tabGroupCss","id","TabGroup","this","baseId","initialTouchX","initialTouchY","mutationObservers","WeakMap","updateScrollControls","noScrollControls","hasScrollControls","includes","placement","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","activeEl","document","activeElement","tagName","toLowerCase","key","preventDefault","stopPropagation","getAllActiveTabs","index","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","handleTabScroll","hideControlLeft","hideControlRight","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","disableSwipe","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","handleContentSlotChange","setTimeout","setAriaLabels","getActiveTab","handleTabSlotChange","ev","nodes","assignedElements","flatten","forEach","node","get","mo","MutationObserver","syncActiveTabIndicator","set","observe","characterData","childList","subtree","handleTabNameChange","activeTab","panel","find","handlePlacementChange","handleNoScrollControlsChange","hideRightBtn","rightBtn","displayTransition","className","show","hideLeftBtn","leftBtn","watchScrollControls","_","async","getAllTabs","filter","disabled","getDirectChildren","host","getAllPanels","emitEvents","previousTab","map","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","i","width","_a","shadowRoot","querySelector","height","clientHeight","offset","getOffset","activeTabIndicator","offsetTop","top","scrollTop","offsetLeft","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","handleTabClose","tabIndex","stopImmediatePropagation","closeEv","nanoTabWillClose","defaultPrevented","prevTab","remove","nanoTabClose","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","storeMethod","unobserve","requestAnimationFrame","window","resizeObserver","ResizeObserver","connectedCallback","dir","ownerDocument","disconnectedCallback","render","h","Host","class","Object","assign","createColorClasses","color","part","onClick","onKeyDown","ref","btn","onScroll","role","onSlotchange","onTouchStart","onTouchEnd"],"sources":["./src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","./src/components/tabs/tab-group.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 --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n * @prop --scroll-btn-color: defaults to 'currentcolor';\n\n * @prop --content-padding: defaults to 2rem 2.5rem;\n * @prop --content-bg: defaults to rgb(var(--background-rgb));\n * @prop --content-border-radius: defaults to `var(--border-radius)` `position=\"top\"`. `0 var(--border-radius) var(--border-radius) 0` `position=\"start\"`;\n\n * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n * @prop --tabs-padding-top: defaults to 0;\n * @prop --tabs-padding-bottom: defaults to 0;\n * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n * @prop --tab-border-radius: defaults to `var(--border-radius) var(--border-radius) 0 0` `position=\"top\"`. `0` `position=\"start\"`. ;\n * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($colors, darkgrey)} on placement 'start';\n * @prop --fade-transparency: controls the strength of the fade on overflowing tabs, defaults to 0;\n */\n\n:host {\n --indicator-transition: #{$transition-fast};\n --indicator-color: #{map.get($colors, lightblue)};\n --indicator-track-color: #{map.get($colors, lightgrey)};\n --indicator-size: 0;\n --border-radius: #{$layer-border-radius};\n --background-rgb: #{$layer-bg-color-rgb};\n --scroll-btn-color: 'currentColor';\n --content-padding: 2rem 2.5rem;\n --content-bg: rgb(var(--background-rgb));\n --content-border-radius: var(--border-radius);\n --tabs-padding-start: 2.5rem;\n --tabs-padding-end: 2.5rem;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tabs-container-bg: 'transparent';\n --tabs-bg-rgb: var(--background-rgb);\n --tab-border-radius: var(--border-radius) var(--border-radius) 0 0;\n --tab-text-color: #{map.get($colors, blue)};\n --shadow-opacity: 0.1;\n --fade-transparency: 0;\n\n display: block;\n position: relative;\n z-index: #{$layer-index-raised};\n\n @media only screen and (max-width: 768px) {\n --tabs-padding-start: 1.5rem;\n --tabs-padding-end: 1.5rem;\n }\n\n ::slotted(nano-tab) {\n --tab-indicator-color: var(--indicator-color);\n --bg-rgb: var(--tabs-bg-rgb);\n --border-radius: var(--tab-border-radius);\n --grab-offset-x: var(--tabs-padding-start);\n }\n}\n\n:host([placement='start']) {\n --content-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n --content-padding: 1rem;\n --tab-border-radius: 0;\n --tabs-padding-start: 0;\n --tabs-padding-end: 0;\n --tabs-padding-top: 0;\n --tabs-padding-bottom: 0;\n --tab-text-color: #{map.get($colors, darkgrey)};\n --indicator-color: #{map.get($colors, blue)};\n --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n --tab-text-color: rgb(var(--nano-color-base-rgb) / 70%);\n\n ::slotted(nano-tab) {\n --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n }\n}\n\n.nano-tab-group {\n display: flex;\n border-radius: 0;\n inline-size: 100%;\n flex: inherit;\n\n &__tabs {\n display: flex;\n position: relative;\n inline-size: 100%;\n }\n\n &__active-tab-indicator {\n position: absolute;\n transition:\n var(--indicator-transition) transform ease,\n var(--indicator-transition) width ease;\n }\n\n &__body {\n background: var(--content-bg);\n }\n\n .nano-tab-group__nav-container {\n position: relative;\n display: flex;\n background: var(--tabs-container-bg);\n }\n\n button {\n appearance: none;\n background-color: transparent;\n }\n\n &__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset-block: 0;\n border: unset;\n z-index: 2;\n transition: #{$transition-fast} ease opacity;\n opacity: 0;\n color: var(--scroll-btn-color);\n\n &:focus {\n outline: none;\n }\n\n &.is-shown {\n opacity: 1;\n }\n\n &:focus-visible {\n box-shadow: #{$control-focus-style} inset;\n }\n\n &--left {\n inset-inline-start: 0;\n }\n\n &--right {\n inset-inline-end: 0;\n }\n\n nano-icon {\n font-size: 16px;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Top\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--top {\n flex-direction: column;\n\n .nano-tab-group__nav-container {\n &::after {\n content: '';\n inline-size: 86%;\n box-shadow: 0 10px 40px 10px rgb(0 0 0 / var(--shadow-opacity));\n block-size: 10px;\n position: absolute;\n inset-inline-start: 7%;\n inset-block-end: -10px;\n border-radius: 10px;\n z-index: -1;\n }\n }\n\n .nano-tab-group__nav {\n @include hide-scrollbar();\n\n padding-inline: var(--tabs-padding-start) var(--tabs-padding-end);\n padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n display: flex;\n overflow: auto hidden;\n transition: #{$transition-medium} ease;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n mask-repeat: no-repeat;\n mask-image:\n linear-gradient(\n to left,\n rgb(0 0 0 / var(--fade-transparency)) 0,\n rgb(0 0 0 / var(--fade-transparency)) var(--tabs-padding-start),\n rgb(0 0 0 / 100%) calc(var(--tabs-padding-start) * 2),\n rgb(0 0 0 / 100%) calc(100% - (var(--tabs-padding-end) * 2)),\n rgb(0 0 0 / var(--fade-transparency))\n calc(100% - var(--tabs-padding-end)),\n rgb(0 0 0 / var(--fade-transparency))\n );\n mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n mask-position: calc(var(--tabs-padding-end) * -2);\n\n &::after {\n content: ' ';\n padding-inline: 0 var(--tabs-padding-end);\n padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n line-height: 1;\n flex: 0 0 auto;\n }\n }\n\n &.nano-tab-group--has-scroll-controls-left {\n .nano-tab-group__nav {\n mask-position: 0;\n mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n }\n }\n\n &.nano-tab-group--has-scroll-controls-right {\n .nano-tab-group__nav {\n mask-position: calc(var(--tabs-padding-end) * -1);\n mask-size: calc(100% + var(--tabs-padding-end));\n }\n }\n\n &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n .nano-tab-group__nav {\n mask-size: 100%;\n mask-position: 0;\n }\n }\n\n .nano-tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n text-align: center;\n color: var(--tab-text-color);\n inline-size: auto;\n }\n\n .nano-tab-group__active-tab-indicator {\n inset-block-end: -2px;\n border-block-end: solid var(--indicator-size) var(--indicator-color);\n }\n\n .nano-tab-group__body {\n order: 2;\n background: var(--content-bg);\n position: relative;\n overflow: hidden;\n inline-size: auto;\n display: flex;\n justify-content: center;\n padding: var(--content-padding);\n border-radius: var(--content-border-radius);\n flex: 1 1 auto;\n }\n }\n\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n // Start\n ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n &--start {\n flex-direction: row;\n\n .nano-tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n color: var(--tab-text-color);\n background: rgb(var(--tabs-bg-rgb));\n border-inline-start:\n solid var(--indicator-size)\n var(--indicator-track-color);\n text-align: start;\n }\n\n .nano-tab-group__active-tab-indicator {\n inset-inline-start: calc(-1 * 2px);\n border-inline-start: solid var(--indicator-size) var(--indicator-color);\n }\n\n .nano-tab-group__body {\n flex: 1 1 auto;\n order: 2;\n padding: var(--content-padding);\n overflow: hidden;\n border-radius: var(--content-border-radius);\n }\n }\n}\n","import {\n Component,\n Element,\n ComponentInterface,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n Listen,\n Build,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { scrollIntoView } from '../../utils/scroll';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\nlet id = 0;\n\n/**\n * A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizontal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n *\n * @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n */\n\n@Component({\n tag: 'nano-tab-group',\n styleUrl: 'tab-group.scss',\n shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n private baseId = `nano-tab-group-${++id}`;\n private activeTab: HTMLNanoTabElement;\n private activePanel: HTMLNanoTabContentElement;\n private activeTabIndicator: HTMLElement;\n private nav: HTMLElement;\n private tabs: HTMLElement;\n private rightBtn: HTMLButtonElement;\n private leftBtn: HTMLButtonElement;\n\n private isRtl: boolean;\n private initialTouchX: number = null;\n private initialTouchY: number = null;\n\n private resizeObserver: ResizeObserver;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n @Element() host: HTMLNanoTabGroupElement;\n\n @State() hasScrollControls = false;\n @State() hideControlRight = true;\n @State() hideControlLeft = true;\n @State() tab: string;\n\n /**\n * The placement of the tabs.\n */\n @Prop({ reflect: true }) placement: 'top' | 'start' = 'top';\n\n /**\n * Disables the scroll arrows that appear when tabs overflow.\n */\n @Prop() noScrollControls = false;\n\n /**\n * The color to use from the application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * Store the currently open tab (against this ID) in the component store.\n * Use in conjunction with storeMethod\n */\n @Prop() storeId?: string;\n\n /**\n * The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n */\n @Prop() storeMethod: StorageMethods = 'session';\n\n /**\n * Disable 'swipe to change tab' on devices with touch\n */\n @Prop() disableSwipe: boolean;\n\n @Watch('tab')\n handleTabNameChange() {\n if (this.activeTab && this.activeTab.panel === this.tab) return;\n const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n this.setActiveTab(tab);\n }\n\n @Watch('placement')\n handlePlacementChange() {\n this.syncActiveTabIndicator();\n }\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n @Watch('hideControlRight')\n hideRightBtn() {\n if (!this.rightBtn) return;\n displayTransition(this.rightBtn, {\n className: 'is-shown',\n show: !this.hideControlRight,\n });\n }\n\n @Watch('hideControlLeft')\n hideLeftBtn() {\n if (!this.leftBtn) return;\n displayTransition(this.leftBtn, {\n className: 'is-shown',\n show: !this.hideControlLeft,\n });\n }\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n else\n setTimeout((_) => {\n this.hideControlLeft = this.hideControlRight = true;\n }, 20);\n }\n\n /** Emitted when a tab is shown. */\n @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n /** Emitted when a tab is hidden. */\n @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n /** Emitted when a closable tab is removed. */\n @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n /** Shows the specified tab panel. */\n @Method()\n async show(panel: string) {\n if (this.activeTab && this.activeTab.panel === panel) return;\n\n const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n if (tab) this.setActiveTab(tab);\n }\n\n // Internal Methods\n\n get getAllActiveTabs() {\n return this.getAllTabs.filter((el: any) => !el.disabled);\n }\n\n get getAllTabs() {\n return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n }\n\n get getAllPanels() {\n return getDirectChildren<HTMLNanoTabContentElement>(\n this.host,\n 'nano-tab-content'\n );\n }\n\n get getActiveTab() {\n return this.getAllActiveTabs.find((el) => el.active);\n }\n\n private updateScrollControls = () => {\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n this.hasScrollControls =\n ['top'].includes(this.placement) &&\n this.nav.scrollWidth > this.nav.clientWidth &&\n this.nav.scrollWidth > this.tabs.clientWidth;\n }\n };\n\n private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n if (\n tab &&\n tab !== this.activeTab &&\n !tab.disabled &&\n this.getAllActiveTabs.includes(tab)\n ) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n this.tab = tab.panel;\n\n // Sync tabs and panels\n this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n this.getAllPanels.map((el) => {\n if (el.name === this.activeTab.panel) {\n el.active = true;\n this.activePanel = el;\n } else el.active = false;\n el.removeAttribute('animation-dir');\n });\n\n this.syncActiveTabIndicator();\n\n // active tab can be changed on init - this won't be ready. No big thing\n if (this.nav && ['top'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }\n\n // Emit events\n if (emitEvents) {\n if (previousTab) {\n this.nanoTabHide.emit({ name: previousTab.panel });\n }\n\n this.nanoTabShow.emit({ name: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n const tabs = this.getAllActiveTabs;\n const panels = this.getAllPanels;\n\n // Link each tab with its corresponding panel\n tabs.map((tab, i) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel) {\n if (!panel.id) panel.id = `${this.baseId}-panel-${i}`;\n if (!tab.id) tab.id = `${this.baseId}-tab-${i}`;\n\n tab.setAttribute('aria-controls', panel.id);\n panel.setAttribute('aria-labelledby', tab.id);\n }\n });\n }\n\n private syncActiveTabIndicator() {\n this.getAllTabs.forEach((tab) =>\n tab.setAttribute(\n 'direction',\n this.placement === 'top' ? 'horizontal' : 'vertical'\n )\n );\n\n const tab = this.getActiveTab;\n if (!tab) return;\n\n const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n const height = tab.clientHeight;\n const offset = getOffset(tab, this.tabs);\n\n if (!this.activeTabIndicator) return;\n\n const offsetTop = offset.top + this.nav.scrollTop;\n const offsetLeft = offset.left;\n\n switch (this.placement) {\n case 'top':\n this.activeTabIndicator.style.width = `${width}px`;\n this.activeTabIndicator.style.height = null;\n this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'start':\n this.activeTabIndicator.style.width = null;\n this.activeTabIndicator.style.height = `${height}px`;\n this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n }\n\n private getNavWidth() {\n if (!this.nav) return 0;\n const computedStyle = getComputedStyle(this.nav);\n let clientWidth = this.nav.clientWidth;\n return (clientWidth -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n }\n\n // Event handlers\n\n @Listen('nanoTabClose')\n handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n const tab = ev.target;\n if (tabIndex < 0) return;\n\n const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n if (!panel) return;\n\n ev.stopImmediatePropagation();\n\n const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n if (closeEv.defaultPrevented) return;\n\n // Show the previous tab if the tab is currently active\n if (tab.active) {\n tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n if (prevTab) this.host.show(prevTab);\n }\n\n tab.remove();\n panel.remove();\n this.nanoTabClose.emit({ name: tab.panel });\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) this.setActiveTab(tab);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const activeEl = document.activeElement as any;\n if (!activeEl || activeEl.tagName.toLowerCase() !== 'nano-tab') return;\n\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) {\n this.setActiveTab(tab);\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n // Move focus left or right\n if (\n ![\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n )\n return;\n\n const tabs = this.getAllActiveTabs;\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') index = 0;\n if (event.key === 'End') index = tabs.length - 1;\n\n if (this.placement === 'top') {\n if (\n (this.isRtl && event.key === 'ArrowRight') ||\n (!this.isRtl && event.key === 'ArrowLeft')\n ) {\n index = Math.max(0, index - 1);\n }\n if (\n (this.isRtl && event.key === 'ArrowLeft') ||\n (!this.isRtl && event.key === 'ArrowRight')\n ) {\n index = Math.min(tabs.length - 1, index + 1);\n }\n }\n\n if (this.placement === 'start') {\n if (event.key === 'ArrowUp') index = Math.max(0, index - 1);\n if (event.key === 'ArrowDown')\n index = Math.min(tabs.length - 1, index + 1);\n }\n\n tabs[index].setFocus();\n\n if (this.placement === 'top') {\n scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n }\n // need to stop bubbling otherwise it will focus on parent tabs if nested\n event.stopPropagation();\n // stop the browser moving about\n event.preventDefault();\n };\n\n private handleTabScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlLeft = this.hideControlRight = true;\n return;\n }\n const endRight = this.isRtl\n ? this.nav.scrollLeft === 0\n : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n const endLeft = this.isRtl\n ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n : this.nav.scrollLeft === 0;\n\n if (endLeft) {\n this.hideControlLeft = true;\n this.hideControlRight = false;\n } else if (endRight) {\n this.hideControlLeft = false;\n this.hideControlRight = true;\n } else {\n this.hideControlRight = false;\n this.hideControlLeft = false;\n }\n };\n\n private handleBtnClick = (goRight: boolean = false) => {\n const navWidth = this.getNavWidth();\n let leftAmt;\n if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n try {\n this.nav.scroll({\n left: leftAmt,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav.scrollLeft = leftAmt;\n }\n };\n\n private handleTouchStart = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n this.initialTouchX = touch.pageX;\n this.initialTouchY = touch.pageY;\n };\n\n private handleTouchEnd = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n const threshold = 70;\n\n const xDiff = this.initialTouchX - touch.clientX;\n const yDiff = this.initialTouchY - touch.clientY;\n\n const isHorizontalSwipe =\n Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n const tabs = this.getAllActiveTabs;\n const currIndex = tabs.findIndex((el) => el.active);\n\n if (isHorizontalSwipe) {\n const toGo =\n (distX < 0 && this.placement === 'top') ||\n (distX > 0 && this.placement !== 'top')\n ? 1\n : -1;\n\n if (tabs[currIndex + toGo]) {\n this.setActiveTab(tabs[currIndex + toGo]);\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n else this.activePanel.setAttribute('animation-dir', 'right');\n }\n }\n }\n this.initialTouchX = null;\n this.initialTouchY = null;\n };\n\n private handleContentSlotChange = () => {\n setTimeout(() => {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n });\n };\n\n private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n setTimeout(() => {\n this.setAriaLabels();\n this.handleTabScroll();\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n this.updateScrollControls();\n }, 500);\n\n /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n const nodes = ev.target.assignedElements({ flatten: true });\n nodes.forEach((node) => {\n if (!this.mutationObservers.get(node)) {\n const mo = new MutationObserver(() => {\n setTimeout(() => {\n this.syncActiveTabIndicator();\n this.handleTabScroll();\n this.updateScrollControls();\n }, 500);\n });\n this.mutationObservers.set(node, mo);\n\n mo.observe(node, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n // Initial IO - watching for all content to be loaded\n const observer = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n\n if (this.storeId)\n ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n observer.unobserve(entries[0].target);\n }\n });\n observer.observe(this.host);\n\n requestAnimationFrame(() => this.updateScrollControls());\n\n if (!window['ResizeObserver']) return;\n\n this.resizeObserver = new ResizeObserver(() => {\n setTimeout(() => {\n this.updateScrollControls();\n this.syncActiveTabIndicator();\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }, 500);\n });\n this.resizeObserver.observe(this.nav);\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' ||\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n if (Build.isServer) {\n this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n this.setAriaLabels();\n }\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n }\n\n render() {\n this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n dir={this.isRtl ? 'rtl' : null}\n >\n <div\n part=\"base\"\n class={{\n 'nano-tab-group': true,\n 'nano-tab-group--top': this.placement === 'top',\n 'nano-tab-group--start': this.placement === 'start',\n 'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n 'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n 'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n {this.placement === 'top' && (\n <button\n disabled={!this.hasScrollControls}\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--left': true,\n }}\n ref={(btn) => (this.leftBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n >\n <nano-icon name=\"light/chevron-left\"></nano-icon>\n </button>\n )}\n <div\n ref={(el) => (this.nav = el)}\n class=\"nano-tab-group__nav\"\n onScroll={this.handleTabScroll}\n >\n <div\n ref={(el) => (this.tabs = el)}\n part=\"tabs\"\n class=\"nano-tab-group__tabs\"\n role=\"tablist\"\n aria-orientation={\n this.placement === 'start' ? 'vertical' : 'horizontal'\n }\n >\n <div\n ref={(el) => (this.activeTabIndicator = el)}\n part=\"active-tab-indicator\"\n class=\"nano-tab-group__active-tab-indicator\"\n />\n <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n </div>\n </div>\n {this.placement === 'top' && (\n <button\n disabled={!this.hasScrollControls}\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--right': true,\n }}\n ref={(btn) => (this.rightBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n >\n <nano-icon name=\"light/chevron-right\"></nano-icon>\n </button>\n )}\n </div>\n <slot name=\"tab-content-header\" />\n <div\n part=\"body\"\n class=\"nano-tab-group__body\"\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <slot onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/*!
|
2
|
+
* Web Components for Nanopore digital Web Apps
|
3
|
+
*/
|
4
|
+
import{r as a,c as t,h as n,a as o,g as i}from"./index-9695db0a.js";const e=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding-v:0.75rem;--padding-h:1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255 255 255);--active-bg:rgb(var(--bg-rgb) / 100%);--inactive-bg:rgb(var(--bg-rgb) / 70%);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;--tab-indicator-size:5px;--border-radius:inherit;display:inline-block;cursor:pointer;border-radius:var(--border-radius)}:host([direction=vertical]){--padding-v:1rem;--padding-h:1rem}:host([direction=vertical]) .nanotab{font-size:var(--v-font-size)}:host([direction=vertical]) .nanotab.nanotab--active{font-weight:600;color:var(--active-text-color)}:host(.nano-sortable__dragged){box-shadow:none}:host(.nano-sortable__dragged) .nanotab{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}:host([direction=horizontal]) .nanotab{font-size:var(--h-font-size);margin-block-start:var(--tab-indicator-size);border-inline-end:solid var(--tab-divider-size) var(--tab-divider-color)}:host([direction=horizontal]) .nanotab.nanotab--active{margin-block-start:0;border-block-start:solid var(--tab-indicator-size) var(--tab-indicator-color);background:var(--active-bg);color:var(--active-text-color)}.nanotab{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);margin-inline-end:var(--tab-spacing);padding-block:var(--padding-v);padding-inline:var(--padding-h);display:flex;block-size:100%;inline-size:auto;background:var(--inactive-bg);-webkit-user-select:none;user-select:none;overflow:visible;white-space:nowrap;align-items:center;position:relative}.nanotab ::slotted(*){display:flex;align-items:center}.nanotab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;background:var(--inactive-bg);z-index:1}:host(:last-of-type) .nanotab{margin-inline-end:0}.nanotab--disabled{background:rgb(var(--disabled-bg-rgb)/100%);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}.nanotab--closable{padding-inline-end:0}.nanotab__tab{display:flex;border-radius:inherit}.nanotab__tab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}.nanotab__tab:focus{outline:none;outline-style:none;box-shadow:none;border-color:transparent}.nanotab__tab::before{content:"";position:absolute;inset:0;border-radius:inherit}.nanotab__tab:focus-visible:not(.nanotab--disabled)::before{box-shadow:var(--focus-shadow) inset}.nanotab--active .nanotab__tab:focus-visible:not(.nanotab--disabled)::before{box-shadow:var(--focus-shadow)}.nanotab__close-button{margin-inline:var(--nano-spacing-small, 8px) calc(var(--padding-h) / 2);-webkit-appearance:none !important;appearance:none !important;--padding:var(--nano-spacing-xsmall, 4px) !important}';let r=0;const s=class{constructor(n){a(this,n);this.nanoTabClose=t(this,"nanoTabClose",7);this.tabId=`nano-tab-${++r}`;this.handleCloseClick=()=>{this.nanoTabClose.emit()};this.handleCloseKeydown=a=>{if(a.key===" ")this.handleCloseClick()};this.panel="";this.active=false;this.disabled=false;this.closable=false}async setFocus(){this.tab.focus({preventScroll:true})}async removeFocus(){this.tab.blur()}render(){return n(o,{id:this.host.id||this.tabId,role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false"},n("div",{part:"base",class:{nanotab:true,"nanotab--active":this.active,"nanotab--disabled":this.disabled,"nanotab--closable":this.closable}},n("slot",{name:"start"}),n("div",{part:"tab",ref:a=>this.tab=a,tabindex:this.disabled||!this.active?"-1":"0",class:"nanotab__tab"},n("slot",null)),this.closable&&!this.disabled&&n("nano-icon-button",{label:"Close this tab",iconName:"light/times",class:"nanotab__close-button",onClick:this.handleCloseClick,onKeyDown:this.handleCloseKeydown,part:"close-btn"}),n("slot",{name:"end"})))}get host(){return i(this)}};s.style=e;export{s as nano_tab};
|
5
|
+
//# sourceMappingURL=nano-tab.entry.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["tabCss","id","Tab","this","tabId","handleCloseClick","nanoTabClose","emit","handleCloseKeydown","e","key","async","tab","focus","preventScroll","blur","render","h","Host","host","role","disabled","active","part","class","nanotab","closable","name","ref","el","tabindex","label","iconName","onClick","onKeyDown"],"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 rgb(var(--bg-rgb) / 10%);\n * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n * @prop --inactive-bg: Defaults to rgb(var(--bg-rgb) / 70%);\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 * @prop --border-radius: inherit;\n */\n\n:host {\n --focus-shadow: #{$control-focus-style};\n --padding-v: 0.75rem;\n --padding-h: 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 --border-radius: inherit;\n\n display: inline-block;\n cursor: pointer;\n border-radius: var(--border-radius);\n}\n\n:host([direction='vertical']) {\n --padding-v: 1rem;\n --padding-h: 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(.nano-sortable__dragged) {\n box-shadow: none;\n\n .nanotab {\n box-shadow: $layer-shadow-large;\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 border-radius: var(--border-radius);\n margin-inline-end: var(--tab-spacing);\n padding-block: var(--padding-v);\n padding-inline: var(--padding-h);\n display: flex;\n block-size: 100%;\n inline-size: auto;\n background: var(--inactive-bg);\n user-select: none;\n overflow: visible;\n white-space: nowrap;\n align-items: center;\n position: relative;\n\n & ::slotted(*) {\n display: flex;\n align-items: center;\n }\n\n & ::slotted(.nano-sortable__keyboard-handle) {\n position: absolute;\n inset-inline-end: -1em;\n background: var(--inactive-bg);\n z-index: 1;\n }\n\n :host(:last-of-type) & {\n margin-inline-end: 0;\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 &--closable {\n padding-inline-end: 0;\n }\n\n &__tab {\n display: flex;\n border-radius: inherit;\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 &::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n }\n\n &:focus-visible:not(.nanotab--disabled)::before {\n box-shadow: var(--focus-shadow) inset;\n\n .nanotab--active & {\n box-shadow: var(--focus-shadow);\n }\n }\n }\n\n &__close-button {\n margin-inline
|
1
|
+
{"version":3,"names":["tabCss","id","Tab","this","tabId","handleCloseClick","nanoTabClose","emit","handleCloseKeydown","e","key","async","tab","focus","preventScroll","blur","render","h","Host","host","role","disabled","active","part","class","nanotab","closable","name","ref","el","tabindex","label","iconName","onClick","onKeyDown"],"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 rgb(var(--bg-rgb) / 10%);\n * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n * @prop --inactive-bg: Defaults to rgb(var(--bg-rgb) / 70%);\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 * @prop --border-radius: inherit;\n */\n\n:host {\n --focus-shadow: #{$control-focus-style};\n --padding-v: 0.75rem;\n --padding-h: 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 --border-radius: inherit;\n\n display: inline-block;\n cursor: pointer;\n border-radius: var(--border-radius);\n}\n\n:host([direction='vertical']) {\n --padding-v: 1rem;\n --padding-h: 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(.nano-sortable__dragged) {\n box-shadow: none;\n\n .nanotab {\n box-shadow: $layer-shadow-large;\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 border-radius: var(--border-radius);\n margin-inline-end: var(--tab-spacing);\n padding-block: var(--padding-v);\n padding-inline: var(--padding-h);\n display: flex;\n block-size: 100%;\n inline-size: auto;\n background: var(--inactive-bg);\n user-select: none;\n overflow: visible;\n white-space: nowrap;\n align-items: center;\n position: relative;\n\n & ::slotted(*) {\n display: flex;\n align-items: center;\n }\n\n & ::slotted(.nano-sortable__keyboard-handle) {\n position: absolute;\n inset-inline-end: -1em;\n background: var(--inactive-bg);\n z-index: 1;\n }\n\n :host(:last-of-type) & {\n margin-inline-end: 0;\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 &--closable {\n padding-inline-end: 0;\n }\n\n &__tab {\n display: flex;\n border-radius: inherit;\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 &::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n }\n\n &:focus-visible:not(.nanotab--disabled)::before {\n box-shadow: var(--focus-shadow) inset;\n\n .nanotab--active & {\n box-shadow: var(--focus-shadow);\n }\n }\n }\n\n &__close-button {\n margin-inline: #{$spacing-small} calc(var(--padding-h) / 2);\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 start - start of the tab, content. Outside of the focusable element\n * @slot end - end of the tab, content. Outside of the focusable element\n * @slot - The tab's label.\n *\n * @part base - the wrapper around the whole control\n * @part tab - the main tab control that controls the active state\n * @part close-btn - the close button of the tab (if `closable=true`)\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\n id={this.host.id || this.tabId}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n >\n <div\n part=\"base\"\n class={{\n nanotab: true,\n 'nanotab--active': this.active,\n 'nanotab--disabled': this.disabled,\n 'nanotab--closable': this.closable,\n }}\n >\n <slot name=\"start\" />\n <div\n part=\"tab\"\n ref={(el) => (this.tab = el)}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n class=\"nanotab__tab\"\n >\n <slot />\n </div>\n {this.closable && !this.disabled && (\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 part=\"close-btn\"\n />\n )}\n <slot name=\"end\" />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":";;;oEAAA,MAAMA,EAAS,4pGCYf,IAAIC,EAAK,E,MAiBIC,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,CACHjB,GAAIE,KAAKgB,KAAKlB,IAAME,KAAKC,MACzBgB,KAAK,MAAK,gBACKjB,KAAKkB,SAAW,OAAS,QAAO,gBAChClB,KAAKmB,OAAS,OAAS,SAEtCL,EAAA,OACEM,KAAK,OACLC,MAAO,CACLC,QAAS,KACT,kBAAmBtB,KAAKmB,OACxB,oBAAqBnB,KAAKkB,SAC1B,oBAAqBlB,KAAKuB,WAG5BT,EAAA,QAAMU,KAAK,UACXV,EAAA,OACEM,KAAK,MACLK,IAAMC,GAAQ1B,KAAKS,IAAMiB,EACzBC,SAAU3B,KAAKkB,WAAalB,KAAKmB,OAAS,KAAO,IACjDE,MAAM,gBAENP,EAAA,cAEDd,KAAKuB,WAAavB,KAAKkB,UACtBJ,EAAA,oBACEc,MAAM,iBACNC,SAAS,cACTR,MAAM,wBACNS,QAAS9B,KAAKE,iBACd6B,UAAW/B,KAAKK,mBAChBe,KAAK,cAGTN,EAAA,QAAMU,KAAK,S"}
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/*!
|
2
|
+
* Web Components for Nanopore digital Web Apps
|
3
|
+
*/
|
4
|
+
import{j as t,h as n,F as e,g as i,e as o,w as s,d as r,r as a,c as l,a as d}from"./index-9695db0a.js";import{a as c}from"./math-c02ddfda.js";import{d as h}from"./throttle-ac4fcefa.js";import{c as b}from"./index-3003356f.js";const p="nano-tbl";const f=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const u=t=>{if(t!=null){if(f(t,"ArrayBuffer")||f(t,"MessagePort")||f(t,"ImageBitmap")||f(t,"OffscreenCanvas")){return[t]}if(typeof t==="object"){if(t.constructor===Object){t=Object.values(t)}if(Array.isArray(t)){return t.flatMap(u)}return u(t.buffer)}}return[]};let _=0;let m=0;const g=new Map;const v=new Map;const w=(n,e,i)=>{const o=new Worker(n,{name:e});o.addEventListener("message",(({data:n})=>{if(n){const e=n[0];const o=n[1];const s=n[2];if(e===i){const e=n[3];const[i,r,a]=g.get(o);g.delete(o);if(e){const n=e.isError?Object.assign(new Error(e.value.message),e.value):e.value;t(n);r(n)}else{if(a){a.forEach((t=>v.delete(t)))}i(s)}}else if(e===i+".cb"){try{v.get(o)(...s)}catch(n){t(n)}}}}));return o};const y=(t,n,e)=>(...i)=>new Promise(((o,s)=>{let r=_++;let a=0;let l=i.length;let d=[o,s];g.set(r,d);for(;a<l;a++){if(typeof i[a]==="function"){const t=m++;v.set(t,i[a]);i[a]=[n+".cb",t];(d[2]=d[2]||[]).push(t)}}const c=t=>t.postMessage([n,r,e,i],u(i));if(t.then){t.then(c)}else{c(t)}}));const x=import("./table.worker-75d6e1d2.js").then((t=>t.worker));const k=y(x,"stencil.table.worker","createWorkerStore");const $=y(x,"stencil.table.worker","syncConfigToWorker");const z=y(x,"stencil.table.worker","syncDataToWorker");const j=y(x,"stencil.table.worker","workerFilter");const O=y(x,"stencil.table.worker","workerSearch");const C=y(x,"stencil.table.worker","workerSort");function S(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(!!(t===null||t===void 0?void 0:t.sortCompareFn)){const e=n.find((n=>n.prop===t.prop));e.sortCompareFn=t.sortCompareFn.toString()}}));return n}const I=new WeakMap;async function R(t,n,e,i){const o={data:b({rows:[]}),config:b({columns:n}),general:b({workerId:null,scrollParent:e,host:t,isReady:i})};const s=await k(o.data.state.rows,S(o.config.state.columns));o.general.state.workerId=s;I.set(t,o);o.data.use({reset:()=>{if(o.general.state.workerId)z(o.general.state.workerId,null)},dispose:()=>{if(o.general.state.workerId)z(o.general.state.workerId,null)}});o.config.use({reset:()=>{if(o.general.state.workerId)$(o.general.state.workerId,null)},dispose:()=>{if(o.general.state.workerId)$(o.general.state.workerId,null)}});return o}function P(t){return I.get(t)}function T(t){if(t instanceof Date){return"date"}if(["number","string","boolean"].includes(typeof t)){return typeof t}return"unknown"}function A(t,n){const e=I.get(t);if(!e)return;const i=e.config.state.columns;const o=i.filter((t=>t.type==="date")).reduce(((t,n)=>[...t,n.prop]),[]);const s=i.filter((t=>!t.type));n=n.map(((t,n)=>{if(s.length&&n===0){e.config.state.columns=i.map((n=>{if(s.includes(n)&&t[n.prop]&&!n.type){n.type=T(t[n.prop]);if(n.type==="date")o.push(n.prop)}return n}))}o.forEach((n=>{var e;const i=(e=new Date(t[n]))!==null&&e!==void 0?e:null;if(!!i&&Number(i))t[n]=Number(i)}));t["__index"]=n;t["__uuid"]=c(i.map((n=>t[n.prop])).join());return t}));e.data.state.rows=n;if(e.general.state.workerId)return z(e.general.state.workerId,n)}function M(t,n){const e=I.get(t);if(!e)return;e.config.state.columns=n;if(e.general.state.workerId)return $(e.general.state.workerId,S(n))}async function B(t,n){const e=I.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await O(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function F(t,n){const e=I.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await j(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function N(t,n,e){const i=I.get(t);if(!i||!i.general.state.workerId)return;try{i.data.state.rows=await C(i.general.state.workerId,n,e)}catch(t){console.warn(t)}}function D(t,n){const e=H();const i=e.config.state.columns;const o=e.data.state.rows;const s=i[n];const r=s===null||s===void 0?void 0:s.prop;const a=o[t];const l=a?a[i[n].prop]:"";return{prop:r,cellModel:l,column:s,rowIndex:t,rowModel:a}}function E(t){const n=H();const e=n.data.state.rows;const i=e[t];return{rowModel:i,rowIndex:t}}function W(t,n){if(!n)return t;const e=Object.assign(Object.assign({},n),t);if(n.class){if(typeof n.class==="object"&&typeof e.class==="object"){e.class=Object.assign(Object.assign({},n.class),e.class)}else if(typeof n.class==="string"&&typeof e.class==="object"){e.class[n.class]=true}else if(typeof e.class==="string"){e.class+=" "+n.class}}if(n.style){e.style=Object.assign(Object.assign({},n.style),e.style)}return e}function H(){return P(i(o()))}function L(t,n,e){var i;const o=Object.assign({},e);const s=(i=H().config.state.columns[n])===null||i===void 0?void 0:i.cellProperties;if(!s)return o;const r=D(t,n);const a=s(r);if(!a)return o;return W(o,a)}function J(t){const i=t===null||t===void 0?void 0:t.columnTemplate;return i?i(n,t):n(e,null,t.title)}function Y(t,n,e=false){const i={[`${p}__${t}`]:true,[`${p}__pin`]:!!n,[`${p}__pin--top`]:n==="top",[`${p}__pin--bottom`]:n==="bottom"};if(e)return q(i);return i}function q(t){let n="";Object.entries(t).forEach((([t,e])=>{if(e)n+=t+" "}));return n}function K(t){let n=getComputedStyle(t);const e=n.position==="absolute";const i=/(auto|scroll)/;if(n.position==="fixed")return document.documentElement;for(let o=t;o=o.parentElement;){n=getComputedStyle(o);if(e&&n.position==="static"){continue}if(i.test(n.overflow+n.overflowY+n.overflowX))return o}return document.documentElement}function X(t,n=100){const e=t.getBoundingClientRect();const i=window.innerHeight||document.documentElement.clientHeight;if(!e.bottom&&!e.top&&!e.left&&!e.right&&!e.height&&!e.width&&!e.x&&!e.y)return false;return!(Math.floor(100-(e.top>=0?0:e.top)/+-e.height*100)<n||Math.floor(100-(e.bottom-i)/e.height*100)<n)}const U=({column:t,onColumnSortClick:i,defaults:o})=>{function s(n){let e;switch(t.order){case"asc":e="desc";break;case"desc":e=null;break;default:e="asc"}i(e,t.prop,n.target.closest("th"))}function r(){return!!o.sortable&&t.sortable!==false||!o.sortable&&t.sortable===true}let a={};if(t.columnProperties){a=t.columnProperties(t)||a}const l={class:Object.assign(Object.assign({},Y("th",t.pinned)),{[`${p}__pin--start`]:t.pinned==="start",[`${p}__pin--end`]:t.pinned==="end",[`${p}__ordered`]:!!t.order,[`${p}__filtered`]:t.filter!==undefined&&t.filter!==null})};let d=a?W(l,a):l;const c=J(t);if(!c)return n(e,null);d=Number(d.colSpan)>1?Object.assign(Object.assign({},d),{scope:"colgroup"}):Object.assign(Object.assign({},d),{scope:"col"});if(r()){const n=t.order?t.order==="asc"?"ascending":"descending":"none";d=Object.assign(Object.assign({},d),{"aria-sort":n})}return n("th",Object.assign({},d,{key:t.prop}),r()?n("button",{class:{[`${p}__order-btn`]:true,[`${p}__cell-content`]:true},onClick:s},J(t),t.filter!==undefined&&t.filter!==null&&n("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?n("nano-icon",{name:"solid/long-arrow-down"}):n("nano-icon",{name:"solid/long-arrow-up"})),n("div",{class:`${p}__status-icons`},n("nano-icon",{name:"light/chevron-down"}))):n("div",{class:`${p}__cell-content`},J(t),t.filter!==undefined&&t.filter!==null&&n("nano-icon",{name:"light/bars-filter"})))};function G(t,i){var s,r;const a=H();const l=a.config.state.columns;const d=(s=l[i])===null||s===void 0?void 0:s.cellTemplate;const c=D(t,i);const h=o();if(!!c.cellModel&&l[i].type==="date"){const t=new Date(c.cellModel);if(t instanceof Date&&!isNaN(t)){c.cellModel=!d?`${new Date(c.cellModel).toLocaleDateString()} ${new Date(c.cellModel).toLocaleTimeString()}`:t}}let b=false;const p=(...t)=>{b=true;return n(...t)};let f=d?d(p,c):undefined;if(f&&h.customRenderer&&f["t"]===undefined&&!(f instanceof Element)&&typeof f!=="string"&&!b){const t=document.createElement("template");const n=h.customRenderer(f,t.content);f=n&&n["then"]?n:t}return f?f:c.cellModel!==undefined&&c.cellModel!==null?n(e,null,(r=c.cellModel)===null||r===void 0?void 0:r.toString()):""}const Q=(t,n=false)=>{const e=H();const i=e.config.state.columns[t];const o={[`${p}__td`]:true,[`${p}__ordered`]:!!i.order,[`${p}__pin`]:!!i.pinned,[`${p}__pin--start`]:i.pinned==="start",[`${p}__pin--end`]:i.pinned==="end"};if(n)return q(o);return o};const V=({rowIndex:t,colIndex:e,nestedContent:i})=>{const s=()=>i?i():G(t,e)||n("span",{class:"placeholder"}," ");let r="td";const a=o();const l=H();const d=l.config.state.columns[e];let c=L(t,e,{class:Q(e)});if(d.rowHeader){c=Number(c.rowSpan)>1?Object.assign(Object.assign({},c),{scope:"rowgroup"}):Object.assign(Object.assign({},c),{scope:"row"});r="th"}const h=t=>{const e=s();return n("div",Object.assign({ref:t=>{if(!t)return;if(e instanceof Element){t.replaceChildren();t.append(e["content"]||e)}else if(e["then"]){e.then((n=>t.innerHTML=n))}}},t,{class:{[`${p}__cell-content`]:true,[`${p}__cell-content--wrap`]:!!d.wrap},innerHTML:typeof e==="string"&&e.includes("<")?e:undefined}),(typeof e!=="string"||!e.includes("<"))&&!e["then"]&&!(e instanceof Element)&&e)};return n(r,Object.assign({role:a.type==="grid"?"gridcell":undefined},c),d.autoTooltip&&!d.wrap?n("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},n("nano-tooltip",{disabled:true,placement:"top",onNanoShow:t=>t.target.closest(r).style.zIndex="100",onNanoHide:t=>t.target.closest(r).style.zIndex=""},n(h,null),n("span",{slot:"content"},n(s,null)))):n(h,null))};const Z=(t,e,i)=>{const o=n("div",Object.assign({},t.wrapperProps,{class:{[`${p}__cell-content`]:true,[`${p}__cell-content--wrap`]:t.wrap}}),e);return t.header?n("th",Object.assign({scope:i},t.cellProps),o):n("td",Object.assign({},t.cellProps),o)};const tt=({rowRenderer:t,rowIndex:e,rowModel:i},o,s)=>{const r=({header:t,wrap:n,cellProps:e,wrapperProps:i},o)=>Z({header:t,wrap:n,cellProps:e,wrapperProps:i},o,"row");let a={};if(!i){const t=E(e);i=t.rowModel}if(t===null||t===void 0?void 0:t.rowProperties){a=t.rowProperties({rowModel:i,rowIndex:e})||a}let l;if((t===null||t===void 0?void 0:t.pinned)&&typeof t.pinned==="function"){l=t.pinned({rowModel:i,rowIndex:e})}const d=W({class:Y("tr",l,true)},a);const c=t===null||t===void 0?void 0:t.template;const h=t=>s.map(t,((t,n)=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=W({class:Q(n,true)},t.vattrs)}return t}));if(c){let t=c(n,{renderedRow:n("tr",Object.assign({},d,{key:i.__uuid}),o),rowModel:i,rowIndex:e},r);if(Array.isArray(t)){t=s.map(t,((t,n)=>{if(t.vtag==="tr"){if(!t.vkey)t.vkey=`${i.__uuid}_${n}`;t.vattrs=W({class:Y("tr",l,true)},t.vattrs);if(!!t.vchildren){t.vchildren=h(t.vchildren)}}return t}))}return t}return n("tr",Object.assign({},d,{key:i.__uuid}),h(o))};const nt=({rowRenderer:t},e,i)=>{let o={};if(t.rowProperties){o=t.rowProperties()||{}}const s=({header:t,wrap:n,cellProps:e,wrapperProps:i},o)=>Z({header:t,wrap:n,cellProps:e,wrapperProps:i},o,"col");const r=t.pinned||null;const a={class:Y("tr",r)};const l=o?W(a,o):a;const d=t===null||t===void 0?void 0:t.template;if(d){let t=d(n,{renderedRow:n("tr",Object.assign({},l),e)},s);if(Array.isArray(t)){t=i.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=W({class:Y("tr",r,true)},t.vattrs);if(!!t.vchildren){t.vchildren=i.map(t.vchildren,(t=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=W({class:Y(t.vtag.toString(),r,true)},t.vattrs)}return t}))}}return t}))}return t}return n("tr",Object.assign({},l),e)};function et(t,n){const e=document.getElementById(t)||document.createElement("style");e.id=t;e.innerHTML=n;if(!e.isConnected)document.head.append(e)}class it{constructor(t,n){this.cachedColMeta=new WeakMap;this._pinnedStart=[];this._pinnedEnd=[];this._cssColDimensionCacheKey="";this.cacheX=0;this.cacheY=0;this.tableEle=t;this.tableId=this.tableEle.id;this.scrollElement=n;this.startColumns=t.querySelector("thead").getElementsByClassName(`${p}__pin--start`);this.endColumns=t.querySelector("thead").getElementsByClassName(`${p}__pin--end`);this.topRows=t.getElementsByClassName(`${p}__pin--top`);this.bottomRows=t.getElementsByClassName(`${p}__pin--bottom`);this.onResize()}get pinnedStart(){return this._pinnedStart}set pinnedStart(t){this._pinnedStart=t;this.handlePinnedStartChange()}handlePinnedStartChange(){s((()=>{if(this.pinnedStart.length){this.tableEle.classList.add(`${p}__pinned--start`);const t=this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length-1]);et(`${this.tableId}-col-start-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) {\n --pin-start-active: 1;\n }\n `)}else{this.tableEle.classList.remove(`${p}__pinned--start`);et(`${this.tableId}-col-start-active-style`,``)}}))}get pinnedEnd(){return this._pinnedEnd}set pinnedEnd(t){this._pinnedEnd=t;this.handlePinnedEndChange()}handlePinnedEndChange(){s((()=>{if(this.pinnedEnd.length){this.tableEle.classList.add(`${p}__pinned--end`);const t=this.cachedColMeta.get(this.pinnedEnd[0]);et(`${this.tableId}-col-end-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) { --pin-end-active: 1; }\n `)}else{this.tableEle.classList.remove(`${p}__pinned--end`);et(`${this.tableId}-col-end-active-style`,``)}}))}get cssColDimensionCacheKey(){return this._cssColDimensionCacheKey}set cssColDimensionCacheKey(t){if(t===this._cssColDimensionCacheKey)return;this._cssColDimensionCacheKey=t;this.createPinnedColDimensionStyles()}generateCssCacheKey(){let t="";for(const n of this.startColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}for(const n of this.endColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}this.cssColDimensionCacheKey=t}createPinnedColDimensionStyles(){let t=0;let n=0;const e=Array.from(this.startColumns);const i=Array.from(this.endColumns).reverse();const o=`\n ${e.map((n=>{const e=this.cachedColMeta.get(n);t+=e.width-1||-1;return`\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ td,\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ th {\n --pin-start: ${t-1}px;\n }\n `})).join("")}\n ${i.map((t=>{const e=this.cachedColMeta.get(t);n+=e.width-1||-1;return`\n #${this.tableId} tr > td:has(~ :nth-child(${e.idx+1})),\n #${this.tableId} tr > th:has(~ :nth-child(${e.idx+1})) {\n --pin-end: ${n-1}px;\n }\n `})).join("")}\n `;et(`${this.tableId}-dimension-style`,o)}getParentOffsets(){const{x:t,y:n}=this.scrollElement.getBoundingClientRect();let e=t;let i=n;if(this.scrollElement===document.documentElement){e=this.scrollElement.offsetLeft;i=this.scrollElement.offsetTop}return{offsetX:e,offsetY:i}}assessRows(){if(!this.topRows.length&&!this.bottomRows.length)return;if(this.topRows.length){r((async()=>{let t=0;let n;const{offsetY:e}=this.getParentOffsets();for(const i of this.topRows){const{y:o,height:r}=i.getBoundingClientRect();const a=i.parentElement;const l=getComputedStyle(i).getPropertyValue("--pin-top");const d=l!==""?parseFloat(l):t;await new Promise((l=>s((()=>{if(o-e<=d){i.classList.add(`${p}__pinned`,`${p}__pinned--top`)}else{i.classList.remove(`${p}__pinned`,`${p}__pinned--top`)}if(n!==a){a.style.setProperty("--pin-top",`${t-1}px`);t+=r-1;n=a}l()}))))}}))}if(this.bottomRows.length){const t=Array.from(this.bottomRows).reverse();r((async()=>{let n;let e=0;const{offsetY:i}=this.getParentOffsets();for(const o of t){if(!o.isConnected)continue;const{y:t,height:r}=o.getBoundingClientRect();const a=o.parentElement;const l=getComputedStyle(o).getPropertyValue("--pin-bottom");const d=l!==""?parseFloat(l):e;await new Promise((l=>s((()=>{if(this.tableDims.height+i-(t+r)<=d){o.classList.add(`${p}__pinned`,`${p}__pinned--bottom`)}else{o.classList.remove(`${p}__pinned`,`${p}__pinned--bottom`)}if(n!==a){a.style.setProperty("--pin-bottom",`${e-1}px`);e+=r-1;n=a}l()}))))}}))}}async assessCols(){if(!this.startColumns.length&&!this.endColumns.length)return;let t;let n;let e;const i=new Promise((i=>{if(this.startColumns.length){r((()=>{const{offsetX:o}=this.getParentOffsets();let s=o;e=Array.from(this.startColumns[0].parentElement.children);for(const i of this.startColumns){t=i.getBoundingClientRect();this.cachedColMeta.set(i,{width:t.width,idx:e.indexOf(i)});n=this.pinnedStart.find((t=>t===i));if(t.x<s){if(!n)this.pinnedStart=[...this.pinnedStart,i]}else if(n){this.pinnedStart=this.pinnedStart.filter((t=>t!==i))}s+=t.width}if(!this.endColumns.length)i()}))}if(this.endColumns.length){r((()=>{const o=Array.from(this.endColumns).reverse();e=Array.from(this.endColumns[0].parentElement.children);const{offsetX:s}=this.getParentOffsets();let r=0;for(const i of o){t=i.getBoundingClientRect();this.cachedColMeta.set(i,{width:t.width,idx:e.indexOf(i)});n=this.pinnedEnd.find((t=>t===i));if(this.tableDims.width+s-t.right<=r){if(!n)this.pinnedEnd=[i,...this.pinnedEnd]}else if(n){this.pinnedEnd=this.pinnedEnd.filter((t=>t!==i))}r+=t.width}i()}))}}));await i;this.generateCssCacheKey()}onScroll(t){if(this.cacheX!==t.x){this.cacheX=t.x;this.assessCols()}if(this.cacheY!==t.y){this.cacheY=t.y;this.assessRows()}}onResize(){const t=this.scrollElement.clientWidth;const n=this.scrollElement.clientHeight;this.tableDims={width:t,height:n};this.assessCols();this.assessRows()}}const ot=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}nano-table{display:block;inline-size:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;inline-size:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-inline-size:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;inline-size:100%}.nano-tbl__order-btn:focus-visible{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);inline-size:100%;block-size:0}.nano-tbl__progress-bar--show{transform:scale(1);block-size:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-inline-size:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/100%);font-size:var(--thead-font-size);border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgb(var(--foot-bg-rgb)/100%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__tr{--base-z:0}.nano-tbl__pin{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin .nano-tbl__th,.nano-tbl__pin .nano-tbl__td{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:"";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{--z:calc(var(--base-z) + 3) !important}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-inline-size:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:"";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{--z:calc(var(--base-z) + 2) !important}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top .nano-tbl__pin--end,.nano-tbl__pin--top .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--top.nano-tbl__pinned--top{--base-z:4}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom .nano-tbl__pin--end,.nano-tbl__pin--bottom .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom{--base-z:5}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(~.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin{--base-z:6}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-start:var(--border-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-inline-size:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}';const st=false;function rt(t,n=false){if(!performance||!st)return;if(n){performance===null||performance===void 0?void 0:performance.mark("end"+t);performance===null||performance===void 0?void 0:performance.measure(t,"start"+t,"end"+t);const n=performance===null||performance===void 0?void 0:performance.getEntriesByName(t);console.info(n[n.length?n.length-1:0])}else{performance===null||performance===void 0?void 0:performance.mark("start"+t)}}let at=0;const lt=class{constructor(t){a(this,t);this.nanoTblReady=l(this,"nanoTblReady",7);this.nanoTblBlockRendered=l(this,"nanoTblBlockRendered",7);this.nanoTblBeforeSort=l(this,"nanoTblBeforeSort",7);this.nanoTblAfterSort=l(this,"nanoTblAfterSort",7);this.nanoTblBeforeFilter=l(this,"nanoTblBeforeFilter",7);this.nanoTblAfterFilter=l(this,"nanoTblAfterFilter",7);this.nanoTblBeforeSearch=l(this,"nanoTblBeforeSearch",7);this.nanoTblAfterSearch=l(this,"nanoTblAfterSearch",7);this.nanoTblBeforeEdit=l(this,"nanoTblBeforeEdit",7);this.renderId="tbl-"+at++;this.filters=[];this.currentFilters="[]";this.currentSort="";this.measureHeight=0;this.blockHeights=[];this.unitHeight=0;this._isReady=false;this.sortStart=async(t,n,e)=>{if(this.currentSort===t+":"+n)return;this._loading=true;const i=this.nanoTblBeforeSort.emit({column:n,order:t});if(i.defaultPrevented)return;rt("sort");this.currentSort=t+":"+n;this.scrollToTop(e);if(this.customSortFn){try{const e=await this.customSortFn(n,t);if(e===true){this.sortComplete(t,n);this._loading=false;return}}catch(t){console.warn("custom sort failed",t);this.currentSort="";this._loading=false;return}}try{await N(this.host,n,t);this.sortComplete(t,n)}catch(t){console.warn("sort failed",t);this.currentSort=""}finally{if(this.blocks.length)this._loading=false}};this.scrollHandler=()=>{var t;let n=0;rt("scrollHandler");if(!((t=this.store)===null||t===void 0?void 0:t.general.state.isActive)||!this.rows)return;if(this.primaryBlockIndex===undefined)this.primaryBlockIndex=0;r((()=>{n=typeof this.scrollParent.scrollTop!=="undefined"?this.scrollParent.scrollTop:window.scrollY;n+=this.host.offsetTop;if(this.tablePinnedService){this.tablePinnedService.onScroll({x:typeof this.scrollParent.scrollLeft!=="undefined"?this.scrollParent.scrollLeft:window.scrollX,y:n})}let t=this.host.offsetTop;let e=0;const i=this.blocks.length;while(e<i&&n>=t){t+=this.getBlockHeight(e);if(n<t){const t=[e,e+1];if(t.toString()!==this.activeBlocks.toString()){this.activeBlocks=t}this.primaryBlockIndex=e}e++}rt("scrollHandler",true)}))};this.handleResizeChange=t=>{var n;this.tableWrapperEle.className="";let e=[`${p}__wrap`];if((n=t.target)===null||n===void 0?void 0:n.className)e=[...t.target.className.split(" "),...e];this.tableWrapperEle.classList.add(...e.filter((t=>!!t)))};this.customRenderer=undefined;this.type="table";this.caption=undefined;this.showCaption=false;this.loading=undefined;this.internalLoading=true;this.placeholderSize=5;this.rows=undefined;this.columns=[];this.headRender={pinned:"top"};this.rowRender=undefined;this.footRender={pinned:"bottom"};this.showFooter=false;this.perBlock=50;this.searchTerm=undefined;this.customFilterFn=undefined;this.customSortFn=undefined;this.defaultSort=true;this.virtualTotalItems=0;this.blocks=[];this.activeBlocks=[0,1];this.debounceSetLoading=h(this.debounceSetLoading.bind(this),50)}get _loading(){return this.loading!==undefined?this.loading:this.internalLoading}set _loading(t){if(this.loading!==undefined)return;this.debounceSetLoading(t)}debounceSetLoading(t){this.internalLoading=t}handleRowsChange(){if(!this.rows){this._loading=true;return}this._loading=true;Promise.resolve(this.rows).then((async t=>{await A(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady)requestAnimationFrame((()=>this.setInitialBlockDimension()));this._loading=false;if(this.tablePinnedService)this.tablePinnedService.assessRows()}))}async handleColsChange(){await M(this.host,this.columns);if(this.isReady)this.columnInit()}get blocksLength(){return this.blocks.length}handleSearchTermChange(){this.searchStart()}virtualTotalItemsChangeHandler(){this.setBlocks()}get appliedFilters(){return this.filters}async resetSorting(){const t=this.columns.find((t=>!!t.order));if(!t)return;return this.sortStart(null,t.prop)}async addSort(t,n){const e=this.columns.find((n=>n.prop===t));if(!e)throw"Cannot find column with "+t;return this.sortStart(n,e.prop)}async resetFilters(){this.filters=[];return this.filterStart()}async addFilters(t,n=true){if(!n)this.filters=[];return this.filterStart(t,n)}async removeFilters(t){this.filters=this.filters.filter((n=>!t.includes(n.prop)));return this.filterStart()}async updateRow(t,n){this.rows.splice(n,1,t);this.handleRowsChange()}set measureEle(t){var n;if(!t)return;const e=t.getBoundingClientRect().height;this.measureHeight=Math.abs(this.measureHeight-e)<5?this.measureHeight:e;this.unitHeight=((n=t.querySelector("tr"))===null||n===void 0?void 0:n.getBoundingClientRect().height)||this.unitHeight}get scrollParent(){return this._scrollParent}set scrollParent(t){if(t===this._scrollParent)return;if(this._scrollParent){(this._scrollParent===document.documentElement?document:this._scrollParent).removeEventListener("scroll",this.scrollHandler)}(t===document.documentElement?document:t).addEventListener("scroll",this.scrollHandler);this._scrollParent=t}get primaryBlockIndex(){return this._primaryBlockIndex}set primaryBlockIndex(t){if(this._primaryBlockIndex===t)return;this._primaryBlockIndex=t;this.nanoTblBlockRendered.emit({block:t,totalBlocks:this.blockElements.length})}get isReady(){return this._isReady}set isReady(t){if(t===this._isReady)return;this._isReady=t;if(this.isReady)requestAnimationFrame((()=>this.handleReady()))}handleReady(){const t=window.location.hash;if(t.length>1){try{const n=document.querySelector(t);if(n)n.scrollIntoView()}catch(t){}}this.nanoTblReady.emit()}sortComplete(t,n){this.columns=this.columns.map((e=>{if(e.prop===n)return Object.assign(Object.assign({},e),{order:t});return Object.assign(Object.assign({},e),{order:null})}));this.nanoTblAfterSort.emit({column:n,order:t});rt("sort",true)}async searchStart(){this._loading=true;const t=this.nanoTblBeforeSearch.emit({term:this.searchTerm});if(t.defaultPrevented)return;rt("search");this.scrollToTop();try{await B(this.host,this.searchTerm);this.nanoTblAfterSearch.emit({term:this.searchTerm});rt("search",true)}catch(t){console.warn("search failed",t)}finally{this._loading=false}}async filterStart(t,n=true){if(t){if(n){this.filters=[...this.filters.filter((n=>!t.find((t=>t.prop===n.prop)))),...t]}else{this.filters=t}}if(this.currentFilters===JSON.stringify(this.filters))return;this._loading=true;const e=this.nanoTblBeforeFilter.emit({filters:this.filters});if(e.defaultPrevented)return;rt("filter");this.currentFilters=JSON.stringify(this.filters);this.scrollToTop();if(this.customFilterFn){try{const t=await this.customFilterFn(this.filters);if(t===true){this.filterComplete();this._loading=false;return}}catch(t){console.warn("custom filter failed",t);this.currentFilters="";this._loading=false;return}}try{await F(this.host,this.filters);this.filterComplete()}catch(t){console.warn("filter failed",t)}finally{this._loading=false}}filterComplete(){this.columns=this.columns.map((t=>{const n=this.filters.find((n=>n.prop===t.prop));if(n&&(typeof n.filter!=="boolean"&&n.filter.length||typeof n.filter==="boolean"))t.filter=n.filter;else if(t.filter!==null&&t.filter!==undefined||!!t.filter&&typeof t.filter!=="boolean"&&!t.filter.length)t.filter=undefined;return t}));this.nanoTblAfterFilter.emit({filters:this.filters});rt("filter",true)}scrollToTop(t){var n;const e=(n=this.scrollParent.style)===null||n===void 0?void 0:n.scrollBehavior;const i=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto";if(this.topAnchorEle&&!X(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!X(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(i)this.scrollParent.scrollLeft=i;if(e)this.scrollParent.style.scrollBehavior=e;this.scrollHandler()}setMeasureElement(){return new Promise((t=>{r((()=>{this.measureEle=this.blockElements.find((t=>{var n;return!((n=t===null||t===void 0?void 0:t.classList)===null||n===void 0?void 0:n.contains(`${p}__inactive`))}));t()}))}))}setInitialBlockDimension(){var t;if(!((t=this.blockElements)===null||t===void 0?void 0:t.length))return;rt("blockDims");const n=async()=>{await this.setMeasureElement();if(this.unitHeight)return true;return false};const e=new Promise((async t=>{if(await n())t();else{const e=new IntersectionObserver((async()=>{if(await n()){t();e.disconnect()}}),{root:this.scrollParent});e.observe(this.tableEle)}}));e.then((()=>{rt("blockDims",true);rt("init",true);requestAnimationFrame((()=>this.isReady=true))}))}async columnInit(){this.filters=this.columns.filter((t=>t.filter!==undefined&&t.filter!==null)).map((t=>{const{filter:n,prop:e}=t;return{filter:n,prop:e}}));if(this.searchTerm){await this.searchStart()}if(this.filters.length){await this.filterStart()}const t=this.columns.find((t=>!!t.order));if(!!t){await this.sortStart(t.order,t.prop)}if(this.tablePinnedService)this.tablePinnedService.assessCols()}setBlocks(){const t=this.store.data.state.rows;if(!t.length){this.blocks=[];return}rt("setBlocks");let n=1;const e=this.virtualTotalItems>t.length?this.virtualTotalItems:t.length;let i=[];const o=[];for(n;n<=e;n++){i.push(this.store.data.state.rows[n-1]||{__uuid:""});if(n%this.perBlock===0){o.push({rows:i,__uuid:c(i.map((t=>t.__uuid)).join())});i=[]}}if(i.length){o.push({rows:i,__uuid:c(i.map((t=>t.__uuid)).join())})}this.blocks=o;rt("setBlocks",true)}getBlockHeight(t){if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n&&n.height)return n.height}const n=this.blocks[t].rows.length;if(n===this.perBlock&&this.measureHeight){return this.measureHeight}return this.unitHeight?this.unitHeight*n:100}setBlockHeight(){this.activeBlocks.forEach((t=>{const n=this.blockElements[t];if(!n)return;r((()=>{if(n.classList.contains(`${p}__inactive`))return;const e=n.getBoundingClientRect().height;const i=this.blockHeights.findIndex((n=>n.blockIndex===t));if(i>-1){this.blockHeights[i]={height:e,blockIndex:t}}else this.blockHeights.push({height:e,blockIndex:t})}))}))}processSlots(){if(!this.caption&&!this.host.querySelector('[slot="caption"]')){console.error("For accessibility you must set a `caption` prop or use the `caption` slot")}}setupActiveWatcher(){if(!this.host||!this.scrollParent||!this.store)return;if(this.activeWatcherIo){this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined}const t=this.activeWatcherIo=new IntersectionObserver((async([t])=>{if(t.isIntersecting)this.store.general.state.isActive=true;else this.store.general.state.isActive=false}),{root:this.scrollParent,threshold:0});t.observe(this.host)}async componentWillLoad(){rt("init");this.store=await R(this.host,this.columns,this.scrollParent,this.isReady);await this.handleRowsChange();this.store.general.onChange("isActive",(()=>{this.scrollHandler()}));this.store.data.onChange("rows",(()=>this.setBlocks()));this.processSlots();this.setBlocks();this.scrollParent=K(this.host);this.setupActiveWatcher()}connectedCallback(){this.scrollParent=K(this.host);this.setupActiveWatcher()}componentDidLoad(){this.setInitialBlockDimension();if(!this.tablePinnedService){this.tablePinnedService=new it(this.tableEle,this.scrollParent)}}componentShouldUpdate(t,n,e){if(["rows","columns"].includes(e))return false}componentWillRender(){rt("render")}componentDidRender(){this.setMeasureElement().then((()=>this.setBlockHeight()));rt("render",true)}disconnectedCallback(){if(!this.activeWatcherIo)return;this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined;(this.scrollParent===document.documentElement?document:this.scrollParent).removeEventListener("scroll",this.scrollHandler)}render(){this.blockElements=[];return n(d,null,n("div",{class:`${p}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),n("nano-resize-observe",{states:"576w sm, 768w md",class:"sm md",onNanoResizeStateChange:this.handleResizeChange,onNanoResize:()=>{if(this.tablePinnedService)this.tablePinnedService.onResize()}}),n("div",{class:`${p}__wrap sm md`,ref:t=>this.tableWrapperEle=t,"aria-labelledby":"nano-table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined},n("nano-progress-bar",{indeterminate:true,class:{[`${p}__progress-bar`]:true,[`${p}__progress-bar--show`]:this._loading}}),n("table",{role:this.type==="grid"?"grid":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${p}`,ref:t=>this.tableEle=t,id:"nano-table-"+this.renderId},n("caption",{class:{[`${p}__caption`]:true,[`${p}__caption--hide`]:!this.showCaption},id:"nano-table-caption-"+this.renderId},n("slot",{name:"caption"},this.caption)),n("thead",null,n(nt,{rowRenderer:this.headRender},this.store.config.state.columns.map((t=>[n(U,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})])))),this._loading&&!this.blocks.length&&n("tbody",{class:`${p}__active ${p}__loading`},[...Array(10).keys()].map((t=>n("tr",null,this.store.config.state.columns.map(((e,i)=>n(V,{rowIndex:t,colIndex:i,nestedContent:()=>n("nano-skeleton",null)}))))))),n("tr",{hidden:!!this._loading||!!this.blocks.length},n("th",{class:`${p}__th`,colSpan:this.store.config.state.columns.length},n("div",{class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},n("slot",{name:"no-results"},"No results found")))),this.blocks.map(((t,e)=>n("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${e}`,ref:t=>{this.blockElements.push(t)},class:{[`${p}__inactive`]:!this.activeBlocks.includes(e),[`${p}__active`]:this.activeBlocks.includes(e)}},this.activeBlocks.includes(e)?t.rows.map(((t,i)=>{const o=e>0?e*this.perBlock+i:i;return n(tt,{rowRenderer:this.rowRender,rowModel:t,rowIndex:o},this.store.config.state.columns.map(((t,e)=>n(V,{rowIndex:o,colIndex:e}))))})):n("tr",{class:`${p}__tr--placeholder`},n("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(e)+"px"}}))))),this.showFooter&&n("tfoot",null,n(nt,{rowRenderer:this.footRender},this.store.config.state.columns.map((t=>[n(U,{column:t,headRenderer:this.footRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})]))))),!!this.blocks.length&&n("nano-spinner",{type:"circle",class:{[`${p}__spinner`]:true,[`${p}__spinner--show`]:this._loading}})))}get host(){return i(this)}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};lt.style=ot;export{lt as T,w as c};
|
5
|
+
//# sourceMappingURL=nano-table-3ab8cd85.js.map
|