@nanoporetech-digital/components 3.7.1 → 3.8.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 +37 -0
- package/dist/cjs/{algolia-data-9152d0ef.js → algolia-data-fb13160a.js} +2 -2
- package/dist/cjs/{algolia-data-9152d0ef.js.map → algolia-data-fb13160a.js.map} +1 -1
- package/dist/cjs/{algoliasearch.umd-7ee60729.js → algoliasearch.umd-689c1560.js} +3 -3
- package/dist/cjs/{algoliasearch.umd-7ee60729.js.map → algoliasearch.umd-689c1560.js.map} +1 -1
- package/dist/cjs/{component-store-d7c8c326.js → component-store-b80bdb26.js} +25 -12
- package/dist/cjs/component-store-b80bdb26.js.map +1 -0
- package/dist/cjs/{dom-d7c33f11.js → dom-7acf7afd.js} +15 -15
- package/dist/cjs/dom-7acf7afd.js.map +1 -0
- package/dist/cjs/{form-control-57c71246.js → form-control-845951ac.js} +4 -4
- package/dist/cjs/form-control-845951ac.js.map +1 -0
- package/dist/{esm/global-8047b4ff.js → cjs/global-3a6a7873.js} +5 -14
- package/dist/cjs/global-3a6a7873.js.map +1 -0
- package/dist/cjs/{index-bb2a6ab8.js → index-5e11be36.js} +2 -2
- package/dist/cjs/{index-bb2a6ab8.js.map → index-5e11be36.js.map} +1 -1
- package/dist/cjs/{index-ece1cb9e.js → index-72ee0363.js} +2 -10
- package/dist/cjs/index-72ee0363.js.map +1 -0
- package/dist/cjs/{index-41582c2a.js → index-e1b5c3ea.js} +1438 -516
- package/dist/cjs/index-e1b5c3ea.js.map +1 -0
- package/dist/cjs/index.cjs.js +18 -35
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +5 -4
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/{modal-e4defcc3.js → modal-5884a6de.js} +3 -2
- package/dist/cjs/modal-5884a6de.js.map +1 -0
- package/dist/cjs/nano-accordion.cjs.entry.js +4 -7
- package/dist/cjs/nano-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-alert.cjs.entry.js +25 -19
- package/dist/cjs/nano-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-algolia-filter.cjs.entry.js +5 -5
- package/dist/cjs/nano-algolia-filter.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-algolia-input.cjs.entry.js +4 -4
- package/dist/cjs/nano-algolia-input.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-algolia-pagination.cjs.entry.js +2 -2
- package/dist/cjs/nano-algolia-results.cjs.entry.js +2 -2
- package/dist/cjs/nano-algolia.cjs.entry.js +8 -8
- 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 +52 -9
- package/dist/cjs/nano-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-checkbox.cjs.entry.js +8 -8
- package/dist/cjs/nano-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-components.cjs.js +8 -4
- package/dist/cjs/nano-components.cjs.js.map +1 -1
- package/dist/cjs/nano-datalist_3.cjs.entry.js +46 -36
- package/dist/cjs/nano-datalist_3.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-date-input.cjs.entry.js +6 -6
- package/dist/cjs/nano-date-input.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-date-picker.cjs.entry.js +4 -4
- package/dist/cjs/nano-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-demo.cjs.entry.js +13 -9
- package/dist/cjs/nano-demo.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-details.cjs.entry.js +4 -4
- package/dist/cjs/nano-details.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-dialog.cjs.entry.js +6 -6
- 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 +9 -4
- package/dist/cjs/nano-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-field-validator.cjs.entry.js +4 -3
- package/dist/cjs/nano-field-validator.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-file-upload.cjs.entry.js +5 -5
- package/dist/cjs/nano-file-upload.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +54 -67
- package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-global-nav.cjs.entry.js +54 -26
- package/dist/cjs/nano-global-nav.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-global-search-results.cjs.entry.js +6 -4
- package/dist/cjs/nano-global-search-results.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-grid_3.cjs.entry.js +8 -7
- package/dist/cjs/nano-grid_3.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-hero.cjs.entry.js +4 -2
- package/dist/cjs/nano-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-icon-button.cjs.entry.js +2 -2
- package/dist/cjs/nano-icon-button.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-icon.cjs.entry.js +7 -14
- package/dist/cjs/nano-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-input.cjs.entry.js +19 -33
- package/dist/cjs/nano-input.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-menu-drawer.cjs.entry.js +3 -3
- package/dist/cjs/nano-menu-drawer.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-progress-bar_2.cjs.entry.js +4 -4
- package/dist/cjs/nano-progress-bar_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-range.cjs.entry.js +4 -4
- 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 +18 -10
- package/dist/cjs/nano-resize-observe_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-slide.cjs.entry.js +1 -1
- package/dist/cjs/nano-slides.cjs.entry.js +11 -21
- package/dist/cjs/nano-slides.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-spinner.cjs.entry.js +3 -3
- package/dist/cjs/nano-spinner.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-split-pane.cjs.entry.js +15 -13
- package/dist/cjs/nano-split-pane.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-sticker.cjs.entry.js +6 -4
- package/dist/cjs/nano-sticker.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-tab-content.cjs.entry.js +9 -3
- package/dist/cjs/nano-tab-content.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-tab-group.cjs.entry.js +18 -12
- 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-820b04d5.js → nano-table-e76a8dde.js} +115 -150
- package/dist/cjs/nano-table-e76a8dde.js.map +1 -0
- package/dist/cjs/nano-table.cjs.entry.js +3 -3
- package/dist/cjs/{popover-508bcedb.js → popover-088646b2.js} +61 -50
- package/dist/cjs/popover-088646b2.js.map +1 -0
- package/dist/cjs/{scroll-9bb5e060.js → scroll-a197d9c4.js} +2 -2
- package/dist/cjs/{scroll-9bb5e060.js.map → scroll-a197d9c4.js.map} +1 -1
- package/dist/cjs/{table.worker-9e238d16.js → table.worker-988d87da.js} +4 -4
- package/dist/cjs/table.worker-988d87da.js.map +1 -0
- package/dist/cjs/{theme-50275e1a.js → theme-9cbe28c5.js} +2 -7
- package/dist/cjs/theme-9cbe28c5.js.map +1 -0
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/accordion/accordion.js +1 -4
- package/dist/collection/components/accordion/accordion.js.map +1 -1
- package/dist/collection/components/alert/alert.css +4 -3
- package/dist/collection/components/alert/alert.helpers.js +6 -24
- package/dist/collection/components/alert/alert.helpers.js.map +1 -1
- package/dist/collection/components/alert/alert.js +19 -13
- package/dist/collection/components/alert/alert.js.map +1 -1
- package/dist/collection/components/algolia/algolia-filter.js +2 -2
- package/dist/collection/components/algolia/algolia-filter.js.map +1 -1
- package/dist/collection/components/algolia/algolia-input.js.map +1 -1
- package/dist/collection/components/algolia/algolia.css +2 -1
- package/dist/collection/components/algolia/algolia.js +3 -3
- package/dist/collection/components/algolia/algolia.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox-group.css +16 -10
- package/dist/collection/components/checkbox/checkbox-group.js +91 -7
- package/dist/collection/components/checkbox/checkbox-group.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox.css +14 -12
- package/dist/collection/components/checkbox/checkbox.js +5 -5
- package/dist/collection/components/checkbox/checkbox.js.map +1 -1
- package/dist/collection/components/datalist/datalist.js +39 -31
- package/dist/collection/components/datalist/datalist.js.map +1 -1
- package/dist/collection/components/date-input/date-input.css +3 -3
- package/dist/collection/components/date-input/date-input.js +3 -3
- package/dist/collection/components/date-input/date-input.js.map +1 -1
- package/dist/collection/components/date-picker/date-picker.css +15 -11
- package/dist/collection/components/date-picker/date-picker.js +1 -1
- package/dist/collection/components/date-picker/date-picker.js.map +1 -1
- package/dist/collection/components/demo/demo.js +12 -8
- package/dist/collection/components/demo/demo.js.map +1 -1
- package/dist/collection/components/details/details.css +2 -1
- package/dist/collection/components/details/details.js +1 -1
- package/dist/collection/components/details/details.js.map +1 -1
- package/dist/collection/components/dialog/dialog.css +8 -5
- package/dist/collection/components/dialog/dialog.helpers.js +3 -11
- package/dist/collection/components/dialog/dialog.helpers.js.map +1 -1
- package/dist/collection/components/drawer/drawer.css +2 -2
- package/dist/collection/components/dropdown/dropdown.css +1 -1
- package/dist/collection/components/dropdown/dropdown.js +6 -1
- package/dist/collection/components/dropdown/dropdown.js.map +1 -1
- package/dist/collection/components/field-validator/field-validator.js +2 -1
- package/dist/collection/components/field-validator/field-validator.js.map +1 -1
- package/dist/collection/components/file-upload/file-upload.css +35 -25
- package/dist/collection/components/file-upload/file-upload.js +4 -4
- package/dist/collection/components/file-upload/file-upload.js.map +1 -1
- package/dist/collection/components/form-control/form-control.js +2 -2
- package/dist/collection/components/form-control/form-control.js.map +1 -1
- package/dist/collection/components/global-nav/global-nav-user-profile.js +6 -7
- package/dist/collection/components/global-nav/global-nav-user-profile.js.map +1 -1
- package/dist/collection/components/global-nav/global-nav.js +61 -11
- package/dist/collection/components/global-nav/global-nav.js.map +1 -1
- package/dist/collection/components/global-nav/style/global-nav.css +92 -48
- package/dist/collection/components/global-search-results/global-search-results.css +83 -44
- package/dist/collection/components/global-search-results/global-search-results.js +4 -2
- package/dist/collection/components/global-search-results/global-search-results.js.map +1 -1
- package/dist/collection/components/grid/grid-item.css +1 -1
- package/dist/collection/components/grid/grid.css +1 -0
- package/dist/collection/components/grid/grid.js +2 -0
- package/dist/collection/components/grid/grid.js.map +1 -1
- package/dist/collection/components/hero/hero.css +110 -18
- package/dist/collection/components/hero/hero.js +2 -0
- package/dist/collection/components/hero/hero.js.map +1 -1
- package/dist/collection/components/icon/icon.css +2 -2
- package/dist/collection/components/icon/icon.js +3 -10
- package/dist/collection/components/icon/icon.js.map +1 -1
- package/dist/collection/components/icon-button/icon-button.css +1 -1
- package/dist/collection/components/img/img.css +0 -1
- package/dist/collection/components/img/img.js +3 -4
- package/dist/collection/components/img/img.js.map +1 -1
- package/dist/collection/components/input/input.css +54 -32
- package/dist/collection/components/input/input.js +14 -28
- package/dist/collection/components/input/input.js.map +1 -1
- package/dist/collection/components/menu/menu.js +4 -2
- package/dist/collection/components/menu/menu.js.map +1 -1
- package/dist/collection/components/menu-drawer/menu-drawer.css +20 -13
- package/dist/collection/components/menu-drawer/menu-drawer.js +1 -1
- package/dist/collection/components/menu-drawer/menu-drawer.js.map +1 -1
- package/dist/collection/components/nav-item/nav-item.css +31 -16
- package/dist/collection/components/nav-item/nav-item.js +4 -4
- package/dist/collection/components/nav-item/nav-item.js.map +1 -1
- package/dist/collection/components/option/option.css +4 -2
- package/dist/collection/components/progress-bar/progress-bar.css +4 -4
- package/dist/collection/components/range/range.css +11 -9
- package/dist/collection/components/rating/rating.css +9 -5
- package/dist/collection/components/resize-observe/resize-observe.js +17 -6
- package/dist/collection/components/resize-observe/resize-observe.js.map +1 -1
- package/dist/collection/components/select/select.css +59 -34
- package/dist/collection/components/select/select.js +42 -55
- package/dist/collection/components/select/select.js.map +1 -1
- package/dist/collection/components/skeleton/skeleton.css +5 -5
- package/dist/collection/components/slides/slides.css +4 -2
- package/dist/collection/components/slides/slides.js +9 -19
- package/dist/collection/components/slides/slides.js.map +1 -1
- package/dist/collection/components/spinner/spinner.css +13 -8
- package/dist/collection/components/spinner/spinner.js +1 -1
- package/dist/collection/components/spinner/spinner.js.map +1 -1
- package/dist/collection/components/split-pane/split-pane.css +1 -1
- package/dist/collection/components/split-pane/split-pane.js +13 -11
- package/dist/collection/components/split-pane/split-pane.js.map +1 -1
- package/dist/collection/components/sticker/sticker.js +4 -2
- package/dist/collection/components/sticker/sticker.js.map +1 -1
- package/dist/collection/components/table/table.cell.js +8 -8
- package/dist/collection/components/table/table.cell.js.map +1 -1
- package/dist/collection/components/table/table.css +46 -25
- package/dist/collection/components/table/table.header.js +6 -19
- package/dist/collection/components/table/table.header.js.map +1 -1
- package/dist/collection/components/table/table.js +85 -93
- package/dist/collection/components/table/table.js.map +1 -1
- package/dist/collection/components/table/table.row.js +8 -8
- package/dist/collection/components/table/table.row.js.map +1 -1
- package/dist/collection/components/table/table.store.js +2 -1
- package/dist/collection/components/table/table.store.js.map +1 -1
- package/dist/collection/components/table/table.utils.js +8 -7
- package/dist/collection/components/table/table.utils.js.map +1 -1
- package/dist/collection/components/tabs/tab-content.css +7 -2
- package/dist/collection/components/tabs/tab-content.js +12 -1
- package/dist/collection/components/tabs/tab-content.js.map +1 -1
- package/dist/collection/components/tabs/tab-group.css +13 -10
- package/dist/collection/components/tabs/tab-group.js +17 -7
- package/dist/collection/components/tabs/tab-group.js.map +1 -1
- package/dist/collection/components/tabs/tab.css +21 -12
- package/dist/collection/components/tooltip/tooltip.css +25 -16
- package/dist/collection/global/script/global.js +2 -13
- package/dist/collection/global/script/global.js.map +1 -1
- package/dist/collection/index.js +17 -0
- package/dist/collection/index.js.map +1 -1
- package/dist/collection/utils/dom.js +16 -15
- package/dist/collection/utils/dom.js.map +1 -1
- package/dist/collection/utils/fetch.js +15 -12
- package/dist/collection/utils/fetch.js.map +1 -1
- package/dist/collection/utils/gesture/index.js +1 -9
- package/dist/collection/utils/gesture/index.js.map +1 -1
- package/dist/collection/utils/modal.js +2 -1
- package/dist/collection/utils/modal.js.map +1 -1
- package/dist/collection/utils/store/get-set.js +1 -1
- package/dist/collection/utils/store/get-set.js.map +1 -1
- package/dist/collection/utils/testing/index.js +1 -0
- package/dist/collection/utils/testing/index.js.map +1 -1
- package/dist/collection/utils/theme.js +1 -6
- package/dist/collection/utils/theme.js.map +1 -1
- package/dist/components/algolia.js +3 -3
- package/dist/components/algolia.js.map +1 -1
- package/dist/components/algoliasearch.umd.js +2 -2
- package/dist/components/algoliasearch.umd.js.map +1 -1
- package/dist/components/component-store.js +23 -10
- package/dist/components/component-store.js.map +1 -1
- package/dist/components/datalist.js +39 -31
- package/dist/components/datalist.js.map +1 -1
- package/dist/components/date-picker.js +2 -2
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/dom.js +17 -15
- package/dist/components/dom.js.map +1 -1
- package/dist/components/dropdown.js +7 -2
- package/dist/components/dropdown.js.map +1 -1
- package/dist/components/form-control.js +2 -2
- package/dist/components/form-control.js.map +1 -1
- package/dist/components/global-nav-user-profile.js +4 -3
- package/dist/components/global-nav-user-profile.js.map +1 -1
- package/dist/components/grid-item.js +1 -1
- package/dist/components/grid-item.js.map +1 -1
- package/dist/components/grid.js +3 -1
- package/dist/components/grid.js.map +1 -1
- package/dist/components/icon-button.js +1 -1
- package/dist/components/icon-button.js.map +1 -1
- package/dist/components/icon.js +4 -11
- package/dist/components/icon.js.map +1 -1
- package/dist/components/img.js +4 -5
- package/dist/components/img.js.map +1 -1
- package/dist/components/index.d.ts +9 -0
- package/dist/components/index.js +23 -52
- package/dist/components/index.js.map +1 -1
- package/dist/components/index3.js +635 -1069
- package/dist/components/index3.js.map +1 -1
- package/dist/components/input.js +15 -29
- package/dist/components/input.js.map +1 -1
- package/dist/components/menu.js +4 -2
- package/dist/components/menu.js.map +1 -1
- package/dist/components/modal.js +2 -1
- package/dist/components/modal.js.map +1 -1
- package/dist/components/nano-accordion.js +1 -4
- package/dist/components/nano-accordion.js.map +1 -1
- package/dist/components/nano-alert.js +20 -14
- package/dist/components/nano-alert.js.map +1 -1
- package/dist/components/nano-algolia-filter.js +2 -2
- package/dist/components/nano-algolia-filter.js.map +1 -1
- package/dist/components/nano-algolia-input.js.map +1 -1
- package/dist/components/nano-checkbox-group.js +53 -9
- package/dist/components/nano-checkbox-group.js.map +1 -1
- package/dist/components/nano-checkbox.js +6 -6
- package/dist/components/nano-checkbox.js.map +1 -1
- package/dist/components/nano-date-input.js +4 -4
- package/dist/components/nano-date-input.js.map +1 -1
- package/dist/components/nano-demo.js +12 -8
- package/dist/components/nano-demo.js.map +1 -1
- package/dist/components/nano-details.js +2 -2
- package/dist/components/nano-details.js.map +1 -1
- package/dist/components/nano-dialog.js +1 -1
- package/dist/components/nano-dialog.js.map +1 -1
- package/dist/components/nano-drawer.js +1 -1
- package/dist/components/nano-drawer.js.map +1 -1
- package/dist/components/nano-field-validator.js +2 -1
- package/dist/components/nano-field-validator.js.map +1 -1
- package/dist/components/nano-file-upload.js +4 -4
- package/dist/components/nano-file-upload.js.map +1 -1
- package/dist/components/nano-global-nav.js +51 -22
- package/dist/components/nano-global-nav.js.map +1 -1
- package/dist/components/nano-global-search-results.js +5 -3
- package/dist/components/nano-global-search-results.js.map +1 -1
- package/dist/components/nano-hero.js +3 -1
- package/dist/components/nano-hero.js.map +1 -1
- package/dist/components/nano-menu-drawer.js +2 -2
- package/dist/components/nano-menu-drawer.js.map +1 -1
- package/dist/components/nano-range.js +2 -2
- 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 +10 -20
- package/dist/components/nano-slides.js.map +1 -1
- package/dist/components/nano-split-pane.js +14 -12
- package/dist/components/nano-split-pane.js.map +1 -1
- package/dist/components/nano-tab-content.js +10 -3
- package/dist/components/nano-tab-content.js.map +1 -1
- package/dist/components/nano-tab-group.js +18 -8
- 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 +5 -5
- 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/popover.js +60 -49
- package/dist/components/popover.js.map +1 -1
- package/dist/components/progress-bar.js +1 -1
- package/dist/components/progress-bar.js.map +1 -1
- package/dist/components/resize-observe.js +16 -8
- package/dist/components/resize-observe.js.map +1 -1
- package/dist/components/select.js +43 -56
- package/dist/components/select.js.map +1 -1
- package/dist/components/skeleton.js +1 -1
- package/dist/components/skeleton.js.map +1 -1
- package/dist/components/spinner.js +2 -2
- package/dist/components/spinner.js.map +1 -1
- package/dist/components/sticker.js +4 -2
- package/dist/components/sticker.js.map +1 -1
- package/dist/components/table.js +117 -152
- package/dist/components/table.js.map +1 -1
- package/dist/components/theme.js +1 -6
- package/dist/components/theme.js.map +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/components/tooltip.js.map +1 -1
- package/dist/esm/{algolia-data-b5cd0c58.js → algolia-data-c4ed188c.js} +2 -2
- package/dist/esm/{algolia-data-b5cd0c58.js.map → algolia-data-c4ed188c.js.map} +1 -1
- package/dist/esm/{algoliasearch.umd-86359963.js → algoliasearch.umd-4f7efa84.js} +3 -3
- package/dist/esm/{algoliasearch.umd-86359963.js.map → algoliasearch.umd-4f7efa84.js.map} +1 -1
- package/dist/esm/{component-store-ec512820.js → component-store-6eccd724.js} +25 -12
- package/dist/esm/component-store-6eccd724.js.map +1 -0
- package/dist/esm/{dom-d3ad49e2.js → dom-311c9e1e.js} +15 -15
- package/dist/esm/dom-311c9e1e.js.map +1 -0
- package/dist/esm/{form-control-84bac7a2.js → form-control-3284c2c9.js} +4 -4
- package/dist/esm/form-control-3284c2c9.js.map +1 -0
- package/dist/{cjs/global-989678ec.js → esm/global-f6e05656.js} +3 -16
- package/dist/esm/global-f6e05656.js.map +1 -0
- package/dist/esm/{index-c752dae1.js → index-38484737.js} +2 -2
- package/dist/esm/{index-c752dae1.js.map → index-38484737.js.map} +1 -1
- package/dist/esm/{index-3c280603.js → index-b4e277ad.js} +1438 -517
- package/dist/esm/index-b4e277ad.js.map +1 -0
- package/dist/{components/index4.js → esm/index-f626f476.js} +2 -10
- package/dist/esm/index-f626f476.js.map +1 -0
- package/dist/esm/index.js +18 -36
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +5 -4
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/{modal-5c9ce466.js → modal-1f3223cd.js} +3 -2
- package/dist/esm/modal-1f3223cd.js.map +1 -0
- package/dist/esm/nano-accordion.entry.js +4 -7
- package/dist/esm/nano-accordion.entry.js.map +1 -1
- package/dist/esm/nano-alert.entry.js +25 -19
- package/dist/esm/nano-alert.entry.js.map +1 -1
- package/dist/esm/nano-algolia-filter.entry.js +5 -5
- package/dist/esm/nano-algolia-filter.entry.js.map +1 -1
- package/dist/esm/nano-algolia-input.entry.js +4 -4
- package/dist/esm/nano-algolia-input.entry.js.map +1 -1
- package/dist/esm/nano-algolia-pagination.entry.js +2 -2
- package/dist/esm/nano-algolia-results.entry.js +2 -2
- package/dist/esm/nano-algolia.entry.js +8 -8
- 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 +52 -9
- package/dist/esm/nano-checkbox-group.entry.js.map +1 -1
- package/dist/esm/nano-checkbox.entry.js +8 -8
- package/dist/esm/nano-checkbox.entry.js.map +1 -1
- package/dist/esm/nano-components.js +5 -4
- package/dist/esm/nano-components.js.map +1 -1
- package/dist/esm/nano-datalist_3.entry.js +46 -36
- package/dist/esm/nano-datalist_3.entry.js.map +1 -1
- package/dist/esm/nano-date-input.entry.js +6 -6
- package/dist/esm/nano-date-input.entry.js.map +1 -1
- package/dist/esm/nano-date-picker.entry.js +4 -4
- package/dist/esm/nano-date-picker.entry.js.map +1 -1
- package/dist/esm/nano-demo.entry.js +13 -9
- package/dist/esm/nano-demo.entry.js.map +1 -1
- package/dist/esm/nano-details.entry.js +4 -4
- package/dist/esm/nano-details.entry.js.map +1 -1
- package/dist/esm/nano-dialog.entry.js +6 -6
- 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 +9 -4
- package/dist/esm/nano-dropdown.entry.js.map +1 -1
- package/dist/esm/nano-field-validator.entry.js +4 -3
- package/dist/esm/nano-field-validator.entry.js.map +1 -1
- package/dist/esm/nano-file-upload.entry.js +5 -5
- package/dist/esm/nano-file-upload.entry.js.map +1 -1
- package/dist/esm/nano-global-nav-user-profile_3.entry.js +54 -67
- package/dist/esm/nano-global-nav-user-profile_3.entry.js.map +1 -1
- package/dist/esm/nano-global-nav.entry.js +54 -26
- package/dist/esm/nano-global-nav.entry.js.map +1 -1
- package/dist/esm/nano-global-search-results.entry.js +6 -4
- package/dist/esm/nano-global-search-results.entry.js.map +1 -1
- package/dist/esm/nano-grid_3.entry.js +8 -7
- package/dist/esm/nano-grid_3.entry.js.map +1 -1
- package/dist/esm/nano-hero.entry.js +4 -2
- package/dist/esm/nano-hero.entry.js.map +1 -1
- package/dist/esm/nano-icon-button.entry.js +2 -2
- package/dist/esm/nano-icon-button.entry.js.map +1 -1
- package/dist/esm/nano-icon.entry.js +7 -14
- package/dist/esm/nano-icon.entry.js.map +1 -1
- package/dist/esm/nano-input.entry.js +19 -33
- package/dist/esm/nano-input.entry.js.map +1 -1
- package/dist/esm/nano-menu-drawer.entry.js +3 -3
- package/dist/esm/nano-menu-drawer.entry.js.map +1 -1
- package/dist/esm/nano-progress-bar_2.entry.js +4 -4
- package/dist/esm/nano-progress-bar_2.entry.js.map +1 -1
- package/dist/esm/nano-range.entry.js +4 -4
- 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 +18 -10
- package/dist/esm/nano-resize-observe_2.entry.js.map +1 -1
- package/dist/esm/nano-slide.entry.js +1 -1
- package/dist/esm/nano-slides.entry.js +11 -21
- package/dist/esm/nano-slides.entry.js.map +1 -1
- package/dist/esm/nano-spinner.entry.js +3 -3
- package/dist/esm/nano-spinner.entry.js.map +1 -1
- package/dist/esm/nano-split-pane.entry.js +15 -13
- package/dist/esm/nano-split-pane.entry.js.map +1 -1
- package/dist/esm/nano-sticker.entry.js +6 -4
- package/dist/esm/nano-sticker.entry.js.map +1 -1
- package/dist/esm/nano-tab-content.entry.js +9 -3
- package/dist/esm/nano-tab-content.entry.js.map +1 -1
- package/dist/esm/nano-tab-group.entry.js +18 -12
- 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-1f4fe4ad.js → nano-table-5ff91f0f.js} +115 -150
- package/dist/esm/nano-table-5ff91f0f.js.map +1 -0
- package/dist/esm/nano-table.entry.js +3 -3
- package/dist/esm/polyfills/css-shim.js +1 -1
- package/dist/esm/{popover-e748bb61.js → popover-02e6714d.js} +61 -50
- package/dist/esm/popover-02e6714d.js.map +1 -0
- package/dist/esm/{scroll-a1e59d8c.js → scroll-e5825d8d.js} +2 -2
- package/dist/esm/{scroll-a1e59d8c.js.map → scroll-e5825d8d.js.map} +1 -1
- package/dist/esm/{table.worker-ddbd23c3.js → table.worker-5c1bb1ce.js} +4 -4
- package/dist/esm/table.worker-5c1bb1ce.js.map +1 -0
- package/dist/esm/{theme-931bd452.js → theme-82feb8cf.js} +2 -7
- package/dist/esm/theme-82feb8cf.js.map +1 -0
- package/dist/nano-components/index.esm.js +1 -1
- package/dist/nano-components/index.esm.js.map +1 -1
- package/dist/nano-components/nano-components.esm.js +1 -1
- package/dist/nano-components/nano-components.esm.js.map +1 -1
- package/dist/nano-components/{p-1a8e60c4.entry.js → p-0411f019.entry.js} +2 -2
- package/dist/nano-components/p-0411f019.entry.js.map +1 -0
- package/dist/nano-components/p-13b2d70c.entry.js +5 -0
- package/dist/nano-components/p-13b2d70c.entry.js.map +1 -0
- package/dist/nano-components/p-167b9165.js.map +1 -1
- package/dist/nano-components/p-1d21b2ce.entry.js +5 -0
- package/dist/nano-components/p-1d21b2ce.entry.js.map +1 -0
- package/dist/nano-components/p-2155fc2c.js.map +1 -1
- package/dist/nano-components/p-257432ff.js +5 -0
- package/dist/nano-components/p-257432ff.js.map +1 -0
- package/dist/nano-components/p-264903b5.entry.js +5 -0
- package/dist/nano-components/p-264903b5.entry.js.map +1 -0
- package/dist/nano-components/p-320366a2.entry.js +5 -0
- package/dist/nano-components/p-320366a2.entry.js.map +1 -0
- package/dist/nano-components/p-364434b4.entry.js +5 -0
- package/dist/nano-components/p-364434b4.entry.js.map +1 -0
- package/dist/nano-components/{p-3f25fc76.entry.js → p-36d5a41d.entry.js} +2 -2
- package/dist/nano-components/p-36d5a41d.entry.js.map +1 -0
- package/dist/nano-components/{p-1e709f87.entry.js → p-371fe61d.entry.js} +2 -2
- package/dist/nano-components/p-371fe61d.entry.js.map +1 -0
- package/dist/nano-components/p-3d658ce2.entry.js +5 -0
- package/dist/nano-components/p-3d658ce2.entry.js.map +1 -0
- package/dist/nano-components/p-3e95778d.entry.js +5 -0
- package/dist/nano-components/p-3e95778d.entry.js.map +1 -0
- package/dist/nano-components/p-400d698f.entry.js +5 -0
- package/dist/nano-components/p-400d698f.entry.js.map +1 -0
- package/dist/nano-components/p-411bb8f1.js +5 -0
- package/dist/nano-components/p-411bb8f1.js.map +1 -0
- package/dist/nano-components/p-41811365.js +5 -0
- package/dist/nano-components/p-41811365.js.map +1 -0
- package/dist/nano-components/p-45abbbdd.js.map +1 -1
- package/dist/nano-components/{p-885b6950.js → p-45b7682a.js} +2 -2
- package/dist/nano-components/p-45b7682a.js.map +1 -0
- package/dist/nano-components/p-4b1d73e9.entry.js +5 -0
- package/dist/nano-components/p-4b1d73e9.entry.js.map +1 -0
- package/dist/nano-components/{p-69e5a37d.entry.js → p-4e104cb1.entry.js} +2 -2
- package/dist/nano-components/p-4e104cb1.entry.js.map +1 -0
- package/dist/nano-components/p-51bc8b59.js +5 -0
- package/dist/nano-components/p-51bc8b59.js.map +1 -0
- package/dist/nano-components/p-5a466c9f.entry.js +5 -0
- package/dist/nano-components/p-5a466c9f.entry.js.map +1 -0
- package/dist/nano-components/{p-bd05b3aa.entry.js → p-5f1b94f0.entry.js} +2 -2
- package/dist/nano-components/{p-bd05b3aa.entry.js.map → p-5f1b94f0.entry.js.map} +1 -1
- package/dist/nano-components/p-60823325.entry.js +5 -0
- package/dist/nano-components/p-60823325.entry.js.map +1 -0
- package/dist/nano-components/p-6760e54a.entry.js +5 -0
- package/dist/nano-components/p-6760e54a.entry.js.map +1 -0
- package/dist/nano-components/p-69774e99.entry.js +5 -0
- package/dist/nano-components/p-69774e99.entry.js.map +1 -0
- package/dist/nano-components/p-69a3e911.js.map +1 -1
- package/dist/nano-components/p-6bca2d00.entry.js +5 -0
- package/dist/nano-components/p-6bca2d00.entry.js.map +1 -0
- package/dist/nano-components/p-74a7fc4f.js.map +1 -1
- package/dist/nano-components/{p-dba8a88d.entry.js → p-78169835.entry.js} +2 -2
- package/dist/nano-components/p-78169835.entry.js.map +1 -0
- package/dist/nano-components/p-817eda34.entry.js +5 -0
- package/dist/nano-components/p-817eda34.entry.js.map +1 -0
- package/dist/nano-components/p-866c73c0.entry.js +5 -0
- package/dist/nano-components/p-866c73c0.entry.js.map +1 -0
- package/dist/nano-components/p-87a76a81.entry.js +5 -0
- package/dist/nano-components/{p-41addb3a.entry.js.map → p-87a76a81.entry.js.map} +1 -1
- package/dist/nano-components/p-8907dd24.entry.js +5 -0
- package/dist/nano-components/p-8907dd24.entry.js.map +1 -0
- package/dist/nano-components/p-90365d7b.entry.js +5 -0
- package/dist/nano-components/p-90365d7b.entry.js.map +1 -0
- package/dist/nano-components/p-909a424c.js +5 -0
- package/dist/nano-components/p-909a424c.js.map +1 -0
- package/dist/nano-components/p-9746b0a5.js.map +1 -1
- package/dist/nano-components/p-9cf5fda3.entry.js +5 -0
- package/dist/nano-components/p-9cf5fda3.entry.js.map +1 -0
- package/dist/nano-components/p-9fcd383f.entry.js +5 -0
- package/dist/nano-components/p-9fcd383f.entry.js.map +1 -0
- package/dist/nano-components/p-9fda481b.entry.js +5 -0
- package/dist/nano-components/p-9fda481b.entry.js.map +1 -0
- package/dist/nano-components/p-abd6b774.entry.js +5 -0
- package/dist/nano-components/p-abd6b774.entry.js.map +1 -0
- package/dist/nano-components/p-b933f3c8.js.map +1 -1
- package/dist/nano-components/{p-2828788c.js → p-bb07c3d0.js} +2 -2
- package/dist/nano-components/p-bb07c3d0.js.map +1 -0
- package/dist/nano-components/p-bb6f7c39.js +5 -0
- package/dist/nano-components/p-bb6f7c39.js.map +1 -0
- package/dist/nano-components/p-bf91c50e.js +6 -0
- package/dist/nano-components/p-bf91c50e.js.map +1 -0
- package/dist/nano-components/{p-b40eedcb.entry.js → p-bfbfec85.entry.js} +2 -2
- package/dist/nano-components/p-bfbfec85.entry.js.map +1 -0
- package/dist/nano-components/{p-447a5910.entry.js → p-c0681b2b.entry.js} +2 -2
- package/dist/nano-components/p-c0681b2b.entry.js.map +1 -0
- package/dist/nano-components/p-c0ca353b.entry.js +5 -0
- package/dist/nano-components/p-c0ca353b.entry.js.map +1 -0
- package/dist/nano-components/p-c4e8d584.entry.js +5 -0
- package/dist/nano-components/p-c4e8d584.entry.js.map +1 -0
- package/dist/nano-components/p-cecb9af1.js.map +1 -1
- package/dist/nano-components/p-d4f6ec9f.js +5 -0
- package/dist/nano-components/p-d4f6ec9f.js.map +1 -0
- package/dist/nano-components/p-d753f35a.entry.js +5 -0
- package/dist/nano-components/p-d753f35a.entry.js.map +1 -0
- package/dist/nano-components/{p-651b3264.js → p-d7ff8f12.js} +2 -2
- package/dist/nano-components/p-d7ff8f12.js.map +1 -0
- package/dist/nano-components/{p-0582afcc.js → p-d92b762b.js} +2 -2
- package/dist/nano-components/p-d92b762b.js.map +1 -0
- package/dist/nano-components/p-de25ba80.entry.js +5 -0
- package/dist/nano-components/p-de25ba80.entry.js.map +1 -0
- package/dist/nano-components/{p-c9a7c7ea.js → p-e04f2333.js} +2 -2
- package/dist/nano-components/p-e04f2333.js.map +1 -0
- package/dist/nano-components/p-e19d6a92.entry.js +5 -0
- package/dist/nano-components/p-e19d6a92.entry.js.map +1 -0
- package/dist/nano-components/{p-63834d50.js → p-ed2e6f32.js} +2 -2
- package/dist/nano-components/p-ed2e6f32.js.map +1 -0
- package/dist/nano-components/p-ed69b27b.entry.js +5 -0
- package/dist/nano-components/p-ed69b27b.entry.js.map +1 -0
- package/dist/nano-components/{p-a0b93616.js → p-ed6adde2.js} +3 -3
- package/dist/nano-components/p-ed6adde2.js.map +1 -0
- package/dist/nano-components/p-ee045579.js.map +1 -1
- package/dist/nano-components/{p-151aad1e.entry.js → p-f2875bf0.entry.js} +4 -4
- package/dist/nano-components/p-f2875bf0.entry.js.map +1 -0
- package/dist/nano-components/p-f28c802d.entry.js +5 -0
- package/dist/nano-components/p-f28c802d.entry.js.map +1 -0
- package/dist/nano-components/{p-a2d0d7b9.entry.js → p-f47776fd.entry.js} +2 -2
- package/dist/nano-components/p-f47776fd.entry.js.map +1 -0
- package/dist/nano-components/p-f8f89998.js.map +1 -1
- package/dist/nano-components/p-fccd59e4.entry.js +5 -0
- package/dist/nano-components/p-fccd59e4.entry.js.map +1 -0
- package/dist/nano-components/p-fe1446cd.entry.js +5 -0
- package/dist/nano-components/p-fe1446cd.entry.js.map +1 -0
- package/dist/themes/london-calling.css +1 -1
- package/dist/themes/london-calling.css.map +1 -1
- package/dist/themes/nanopore.css +1 -1
- package/dist/themes/nanopore.css.map +1 -1
- package/dist/types/components/alert/alert-interface.d.ts +1 -1
- package/dist/types/components/algolia/algolia-input.d.ts +1 -1
- package/dist/types/components/algolia/algolia.d.ts +2 -2
- package/dist/types/components/checkbox/checkbox-group.d.ts +11 -0
- package/dist/types/components/date-picker/date-picker-interface.d.ts +2 -2
- package/dist/types/components/date-picker/duet-date-picker/date-adapter.d.ts +3 -3
- package/dist/types/components/date-picker/duet-date-picker/date-localization.d.ts +3 -3
- package/dist/types/components/date-picker/duet-date-picker/date-picker-day.d.ts +1 -1
- package/dist/types/components/date-picker/duet-date-picker/date-picker-month.d.ts +1 -1
- package/dist/types/components/field-validator/field-validator-interface.d.ts +4 -4
- package/dist/types/components/file-upload/file-upload.d.ts +1 -1
- package/dist/types/components/global-nav/global-nav.d.ts +12 -6
- package/dist/types/components/icon/icon.d.ts +3 -3
- package/dist/types/components/menu/menu.d.ts +1 -1
- package/dist/types/components/nav-item/nav-item.d.ts +1 -1
- package/dist/types/components/range/range-interface.d.ts +2 -2
- package/dist/types/components/resize-observe/resize-observe.d.ts +1 -0
- package/dist/types/components/slides/slides-interface.d.ts +2 -2
- package/dist/types/components/slides/slides.d.ts +0 -2
- package/dist/types/components/table/table.cell.d.ts +1 -1
- package/dist/types/components/table/table.d.ts +9 -14
- package/dist/types/components/table/table.header.d.ts +1 -1
- package/dist/types/components/table/table.row.d.ts +2 -2
- package/dist/types/components/table/table.utils.d.ts +2 -1
- package/dist/types/components/tabs/tab-content.d.ts +2 -0
- package/dist/types/components.d.ts +829 -9
- package/dist/types/index.d.ts +5 -0
- package/dist/types/stencil-public-runtime.d.ts +48 -3
- package/dist/types/utils/dom.d.ts +9 -0
- package/dist/types/utils/gesture/index.d.ts +1 -1
- package/dist/types/utils/popover.d.ts +1 -1
- package/dist/types/utils/store/component-store.d.ts +2 -2
- package/dist/types/utils/testing/index.d.ts +1 -1
- package/docs-json.json +89 -50
- package/docs-vscode.json +8 -4
- package/hydrate/index.d.ts +853 -0
- package/{dist/custom-elements → hydrate}/index.js +11476 -7950
- package/hydrate/package.json +6 -0
- package/loader/index.d.ts +9 -0
- package/package.json +24 -16
- package/dist/cjs/component-store-d7c8c326.js.map +0 -1
- package/dist/cjs/dom-d7c33f11.js.map +0 -1
- package/dist/cjs/form-control-57c71246.js.map +0 -1
- package/dist/cjs/global-989678ec.js.map +0 -1
- package/dist/cjs/index-41582c2a.js.map +0 -1
- package/dist/cjs/index-75b61776.js +0 -1077
- package/dist/cjs/index-75b61776.js.map +0 -1
- package/dist/cjs/index-ece1cb9e.js.map +0 -1
- package/dist/cjs/modal-e4defcc3.js.map +0 -1
- package/dist/cjs/nano-table-820b04d5.js.map +0 -1
- package/dist/cjs/popover-508bcedb.js.map +0 -1
- package/dist/cjs/table.worker-9e238d16.js.map +0 -1
- package/dist/cjs/theme-50275e1a.js.map +0 -1
- package/dist/components/index4.js.map +0 -1
- package/dist/custom-elements/index.d.ts +0 -339
- package/dist/custom-elements/index.js.map +0 -1
- package/dist/esm/component-store-ec512820.js.map +0 -1
- package/dist/esm/dom-d3ad49e2.js.map +0 -1
- package/dist/esm/form-control-84bac7a2.js.map +0 -1
- package/dist/esm/global-8047b4ff.js.map +0 -1
- package/dist/esm/index-3bbaffe4.js +0 -1075
- package/dist/esm/index-3bbaffe4.js.map +0 -1
- package/dist/esm/index-3c280603.js.map +0 -1
- package/dist/esm/index-dc076ea6.js +0 -649
- package/dist/esm/index-dc076ea6.js.map +0 -1
- package/dist/esm/modal-5c9ce466.js.map +0 -1
- package/dist/esm/nano-table-1f4fe4ad.js.map +0 -1
- package/dist/esm/popover-e748bb61.js.map +0 -1
- package/dist/esm/table.worker-ddbd23c3.js.map +0 -1
- package/dist/esm/theme-931bd452.js.map +0 -1
- package/dist/nano-components/p-0582afcc.js.map +0 -1
- package/dist/nano-components/p-135fed16.entry.js +0 -5
- package/dist/nano-components/p-135fed16.entry.js.map +0 -1
- package/dist/nano-components/p-151aad1e.entry.js.map +0 -1
- package/dist/nano-components/p-15543295.entry.js +0 -5
- package/dist/nano-components/p-15543295.entry.js.map +0 -1
- package/dist/nano-components/p-1a8e60c4.entry.js.map +0 -1
- package/dist/nano-components/p-1e709f87.entry.js.map +0 -1
- package/dist/nano-components/p-1f347342.entry.js +0 -5
- package/dist/nano-components/p-1f347342.entry.js.map +0 -1
- package/dist/nano-components/p-1fe12320.js +0 -6
- package/dist/nano-components/p-1fe12320.js.map +0 -1
- package/dist/nano-components/p-23575705.entry.js +0 -5
- package/dist/nano-components/p-23575705.entry.js.map +0 -1
- package/dist/nano-components/p-2828788c.js.map +0 -1
- package/dist/nano-components/p-284dd9a2.entry.js +0 -5
- package/dist/nano-components/p-284dd9a2.entry.js.map +0 -1
- package/dist/nano-components/p-2a97ef51.entry.js +0 -5
- package/dist/nano-components/p-2a97ef51.entry.js.map +0 -1
- package/dist/nano-components/p-36842a50.entry.js +0 -5
- package/dist/nano-components/p-36842a50.entry.js.map +0 -1
- package/dist/nano-components/p-3a1026d1.entry.js +0 -5
- package/dist/nano-components/p-3a1026d1.entry.js.map +0 -1
- package/dist/nano-components/p-3f25fc76.entry.js.map +0 -1
- package/dist/nano-components/p-41addb3a.entry.js +0 -5
- package/dist/nano-components/p-447a5910.entry.js.map +0 -1
- package/dist/nano-components/p-4b69178e.entry.js +0 -5
- package/dist/nano-components/p-4b69178e.entry.js.map +0 -1
- package/dist/nano-components/p-559a6492.entry.js +0 -5
- package/dist/nano-components/p-559a6492.entry.js.map +0 -1
- package/dist/nano-components/p-5d149792.entry.js +0 -5
- package/dist/nano-components/p-5d149792.entry.js.map +0 -1
- package/dist/nano-components/p-63834d50.js.map +0 -1
- package/dist/nano-components/p-651b3264.js.map +0 -1
- package/dist/nano-components/p-69e5a37d.entry.js.map +0 -1
- package/dist/nano-components/p-6ad194e4.entry.js +0 -5
- package/dist/nano-components/p-6ad194e4.entry.js.map +0 -1
- package/dist/nano-components/p-6cb77d5c.entry.js +0 -5
- package/dist/nano-components/p-6cb77d5c.entry.js.map +0 -1
- package/dist/nano-components/p-73860775.js +0 -5
- package/dist/nano-components/p-73860775.js.map +0 -1
- package/dist/nano-components/p-77cad8d1.js +0 -5
- package/dist/nano-components/p-77cad8d1.js.map +0 -1
- package/dist/nano-components/p-793588d1.js +0 -5
- package/dist/nano-components/p-793588d1.js.map +0 -1
- package/dist/nano-components/p-7b3638b7.js +0 -5
- package/dist/nano-components/p-7b3638b7.js.map +0 -1
- package/dist/nano-components/p-845ae77e.js +0 -5
- package/dist/nano-components/p-845ae77e.js.map +0 -1
- package/dist/nano-components/p-885b6950.js.map +0 -1
- package/dist/nano-components/p-8d747891.js +0 -5
- package/dist/nano-components/p-8d747891.js.map +0 -1
- package/dist/nano-components/p-9059c8c1.entry.js +0 -5
- package/dist/nano-components/p-9059c8c1.entry.js.map +0 -1
- package/dist/nano-components/p-92504f7f.entry.js +0 -5
- package/dist/nano-components/p-92504f7f.entry.js.map +0 -1
- package/dist/nano-components/p-99fbae74.entry.js +0 -5
- package/dist/nano-components/p-99fbae74.entry.js.map +0 -1
- package/dist/nano-components/p-9a4297e1.entry.js +0 -5
- package/dist/nano-components/p-9a4297e1.entry.js.map +0 -1
- package/dist/nano-components/p-9eeed8f5.entry.js +0 -5
- package/dist/nano-components/p-9eeed8f5.entry.js.map +0 -1
- package/dist/nano-components/p-a0b93616.js.map +0 -1
- package/dist/nano-components/p-a183e3c7.entry.js +0 -5
- package/dist/nano-components/p-a183e3c7.entry.js.map +0 -1
- package/dist/nano-components/p-a2d0d7b9.entry.js.map +0 -1
- package/dist/nano-components/p-a5abfed9.entry.js +0 -5
- package/dist/nano-components/p-a5abfed9.entry.js.map +0 -1
- package/dist/nano-components/p-b25e79b8.entry.js +0 -5
- package/dist/nano-components/p-b25e79b8.entry.js.map +0 -1
- package/dist/nano-components/p-b40eedcb.entry.js.map +0 -1
- package/dist/nano-components/p-b55ffa92.entry.js +0 -5
- package/dist/nano-components/p-b55ffa92.entry.js.map +0 -1
- package/dist/nano-components/p-b87539f0.entry.js +0 -5
- package/dist/nano-components/p-b87539f0.entry.js.map +0 -1
- package/dist/nano-components/p-c9a7c7ea.js.map +0 -1
- package/dist/nano-components/p-ca567f01.entry.js +0 -5
- package/dist/nano-components/p-ca567f01.entry.js.map +0 -1
- package/dist/nano-components/p-cc5e7acb.entry.js +0 -5
- package/dist/nano-components/p-cc5e7acb.entry.js.map +0 -1
- package/dist/nano-components/p-d5303933.entry.js +0 -5
- package/dist/nano-components/p-d5303933.entry.js.map +0 -1
- package/dist/nano-components/p-d565991d.entry.js +0 -5
- package/dist/nano-components/p-d565991d.entry.js.map +0 -1
- package/dist/nano-components/p-dba8a88d.entry.js.map +0 -1
- package/dist/nano-components/p-dc50b93c.entry.js +0 -5
- package/dist/nano-components/p-dc50b93c.entry.js.map +0 -1
- package/dist/nano-components/p-e3860f00.js +0 -5
- package/dist/nano-components/p-e3860f00.js.map +0 -1
- package/dist/nano-components/p-e5408bc8.entry.js +0 -5
- package/dist/nano-components/p-e5408bc8.entry.js.map +0 -1
- package/dist/nano-components/p-ea2de992.js +0 -19
- package/dist/nano-components/p-ea2de992.js.map +0 -1
- package/dist/nano-components/p-f7471cca.entry.js +0 -5
- package/dist/nano-components/p-f7471cca.entry.js.map +0 -1
- package/dist/nano-components/p-fe94eeff.entry.js +0 -5
- package/dist/nano-components/p-fe94eeff.entry.js.map +0 -1
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["checkboxGroupCss","CheckboxGroup","this","grpId","grpIds","ignoreValueSet","handleInvalid","ev","_invalid","validateOn","showErrorMsg","customValidate","showInlineError","preventDefault","showInlineValidation","nativeCbs","length","forEach","cb","_i","validity","valid","errorMessage","validationMessage","nanoValidate","emit","isValid","invalid","originalEvent","validityMessage","handleValuePropChange","nanoChange","value","setCbValue","async","validateFirst","Promise","resolve","setTimeout","message","optVal","checkboxes","find","c","setError","handleValueChange","target","host","setInteralValue","handleCbChange","onlyRadios","filter","type","required","checked","rd","reportValidity","onlyCbs","i","nativeCb","setCustomValidity","min","max","handleComponentChange","checkboxTypes","getClassMap","map","handleDisabledChange","disabled","radios","_a","flatMap","requestAnimationFrame","Array","isArray","includes","attachSlotObserver","mo","window","MutationObserver","handleSlotChange","observe","childList","from","querySelectorAll","hasHelperSlot","querySelector","all","reduce","acc","push","getInputElement","addEventListener","componentWillLoad","debounce","bind","connectedCallback","disconnectedCallback","disconnect","componentDidLoad","render","legendId","moreId","h","Host","Object","assign","class","nanogroupcb","id","legend","role","name"],"sources":["./src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","./src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /**\n * @prop --control-margin-top: Margin between controls. Default depends on control type;\n * @prop --control-margin-end: Margin between controls. Default depends on control type;\n * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n * @prop --label-color: Default #{$label-color};\n * @prop --label-color--invalid: Default #{$label-color-invalid};\n * @prop --label-font-size: Default #{$label-font-size};\n * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n */\n\n --control-margin-top: 0;\n --control-margin-end: 0;\n --control-margin-bottom: 0;\n --control-margin-start: 0;\n --invalid-msg-color: #{nano-color(danger, base)};\n --invalid-msg-font-size: #{$input-help-font-size};\n --help-msg-color: #{$input-help-color};\n --label-color: #{$label-color};\n --label-color--invalid: #{$label-color-invalid};\n --label-font-size: #{$label-font-size};\n --label-padding: #{$input-padding-bottom};\n\n display: block;\n\n * {\n box-sizing: inherit;\n }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n --control-margin-top: 0;\n --control-margin-end: 8px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n --control-margin-top: 0;\n --control-margin-end: 10px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n.nanogroupcb {\n border: none;\n margin: 0;\n padding: 0;\n\n &__error,\n &__help,\n &__more {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__legend {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1.5;\n white-space: normal;\n display: block;\n width: 100%;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n }\n\n &__more {\n height: 1em;\n margin-block-start:\n calc(\n var(--label-padding) - var(--control-margin-bottom)\n );\n margin-inline-end: 0;\n margin-block-end: var(--label-padding);\n margin-inline-start: 3px;\n position: relative;\n }\n\n &__error,\n &__help {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n opacity: 0;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .show-error & {\n opacity: 0;\n }\n }\n\n &__cbs {\n margin: 0;\n padding: 0;\n line-height: 1;\n display: flex;\n flex-wrap: wrap;\n\n ::slotted(*:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n --check-base-size: 1.2em;\n\n font-size: 0.85em;\n }\n\n ::slotted(*) {\n margin-inline: var(--control-margin-start) var(--control-margin-end);\n margin-block: var(--control-margin-top) var(--control-margin-bottom);\n }\n }\n}\n\n/* autoprefixer: ignore next */\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n .nanogroupcb__cbs {\n &::slotted(*),\n ::slotted(*) {\n margin-inline-start: var(--control-margin-start);\n margin-inline-end: var(--control-margin-end);\n }\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n ComponentInterface,\n State,\n Listen,\n Watch,\n Host,\n Method,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport type {\n CssClassMap,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../interface';\n\n/**\n * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n *\n * @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n tag: 'nano-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n private mo?: MutationObserver;\n private checkboxTypes: CssClassMap;\n private grpId = `nano-checkbox-group-${grpIds++}`;\n private ignoreValueSet = false;\n\n @Element() host: HTMLNanoCheckboxGroupElement;\n\n // internal state\n\n @State() checkboxes: HTMLNanoCheckboxElement[];\n @State() nativeCbs: HTMLInputElement[];\n @State() errorMessage: string = '';\n @State() showErrorMsg = false;\n @State() hasHelperSlot = false;\n\n // public properties\n\n /**\n * When should the field perform validation\n */\n @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n 'submitThenDirty';\n\n /**\n * Whether to show validation errors underneath input\n */\n @Prop() showInlineError = true;\n\n /**\n * The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n * A validation error will be thrown if not enough controls are checked.\n */\n @Prop() min: number = 0;\n\n /**\n * The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n * Other controls will automatically be disabled upon reaching this number.\n */\n @Prop() max: number = null;\n\n /**\n * Disable all the nested form controls\n */\n @Prop({ reflect: true }) disabled: boolean | null = null;\n\n /**\n * A common label for children controls\n */\n @Prop() legend: string = '';\n\n /**\n * This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n */\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /**\n * Current validation message - if any. @readonly\n */\n @Prop()\n get validityMessage() {\n return this.errorMessage;\n }\n\n /** The current, collective checkbox value */\n @Prop({ mutable: true }) value: string[] | string;\n\n @Watch('value')\n handleValuePropChange() {\n this.nanoChange.emit(this.value);\n\n // this change is coming from a checkbox being checked\n // so don't then change the checkbox state\n // (would cause an infinite loop)\n if (this.ignoreValueSet) return;\n\n // value has changed via prop directly, so update the checkbox's state\n this.setCbValue();\n }\n\n // Public methods\n\n /**\n * Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n */\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n return new Promise((resolve) => {\n if (validateFirst) {\n this.customValidate();\n this.showInlineValidation();\n }\n setTimeout(() => {\n resolve({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n });\n }, 50);\n });\n }\n\n /**\n * Invalidate the field and show a custom error message.\n * To clear the error you will need to re-call this method with an empty string.\n * @param message - the error message to show\n * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)\n */\n @Method()\n async showError(message: string, optVal?: string) {\n let cb: HTMLNanoCheckboxElement;\n if (optVal) cb = this.checkboxes.find((c) => c.value === optVal);\n if (!cb) cb = this.checkboxes[0];\n if (!cb) return;\n\n this.errorMessage = message;\n await cb.setError(message);\n if (!!this.showInlineError) this.showInlineValidation();\n }\n\n // Events\n\n /**\n * Called when a nested checkbox changes\n */\n @Event() nanoChange: EventEmitter<string | string[]>;\n\n /**\n * Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n */\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // listeners & watchers\n\n @Listen('nanoChange')\n handleValueChange(ev: CustomEvent) {\n if (ev.target === this.host) return;\n this.setInteralValue();\n }\n\n /**\n * Notes on validation... custom validation messages should be set\n * no matter whether we show inline messages or native html5.\n * this will mean forms cannot submit when there are pending validation issues.\n */\n @Listen('nanoChange')\n @Watch('min')\n @Watch('max')\n handleCbChange() {\n if (this.invalid) this.showErrorMsg = this._invalid = false;\n this.customValidate();\n\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n @Watch('nativeCbs')\n customValidate() {\n if (!this.nativeCbs || !this.nativeCbs.length || !this.checkboxes) return;\n\n const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n\n if (\n onlyRadios &&\n onlyRadios.length &&\n (this.showErrorMsg || this.validateOn === 'dirty')\n ) {\n const required = onlyRadios.find((cb) => cb.required);\n const checked = onlyRadios.filter((cb) => cb.checked);\n\n if (required && checked) {\n this.checkboxes.forEach((rd) => rd.reportValidity(false));\n return false;\n } else if (required && !checked) return true;\n }\n\n // we only care about checkbox controls.\n const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');\n if (!onlyCbs || !onlyCbs.length) return;\n\n const checked = onlyCbs.filter((cb) => cb.checked);\n const required = onlyCbs.find((cb) => cb.required);\n let invalid = false;\n\n if (required && !checked.find((cb) => cb === required)) return true;\n\n this.checkboxes.forEach((cb, i) => {\n const nativeCb = this.nativeCbs[i];\n cb.setError('');\n nativeCb.setCustomValidity('');\n\n if (this.min && checked.length < this.min) {\n this.errorMessage = `You must select a minimum of ${this.min} values.`;\n invalid = true;\n }\n if (this.max && checked.length > this.max) {\n this.errorMessage = `Only up to ${this.max} values are allowed.`;\n invalid = true;\n }\n\n if (invalid) {\n cb.setError(this.errorMessage, this.showErrorMsg);\n // bit fugly. We're just doing this 'cos stencil\n // methods are async and we want the validity message\n // asap to keep things in sync\n nativeCb.setCustomValidity(this.errorMessage);\n }\n });\n return invalid;\n }\n\n @Watch('checkboxes')\n handleComponentChange() {\n if (!this.checkboxes.length) return;\n\n this.checkboxTypes = getClassMap(\n this.checkboxes.map((cb) => 'types-' + cb.type)\n );\n }\n\n @Watch('disabled')\n @Watch('checkboxes')\n handleDisabledChange() {\n if (this.disabled === null) return;\n this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n }\n\n // private methods\n\n private setInteralValue() {\n this.ignoreValueSet = true;\n const radios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n if (radios?.length) {\n this.value = radios.find((cb) => cb.checked)?.value || null;\n return;\n }\n this.value = this.checkboxes.flatMap((cb) =>\n cb.checked ? [cb.value] : []\n );\n requestAnimationFrame(() => (this.ignoreValueSet = false));\n }\n\n private setCbValue() {\n this.checkboxes.forEach((cb) => {\n if (\n cb.value === this.value ||\n (Array.isArray(this.value) && this.value.includes(cb.value))\n ) {\n cb.checked = true;\n }\n });\n }\n\n private attachSlotObserver() {\n if (!!this.mo || !window['MutationObserver']) return;\n const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n mo.observe(this.host, { childList: true });\n }\n\n private async handleSlotChange() {\n this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n this.nativeCbs = await Promise.all(\n this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n acc.push(cb.getInputElement());\n return acc;\n }, [])\n );\n\n this.nativeCbs.forEach((cb) => {\n if (cb) cb.addEventListener('invalid', this.handleInvalid);\n });\n }\n\n private handleInvalid = (ev: Event) => {\n this._invalid = true;\n\n if (this.validateOn === 'submit') {\n this._invalid = this.showErrorMsg = this.customValidate();\n }\n if (!!this.showInlineError) ev.preventDefault();\n\n this.showInlineValidation(ev);\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (!this.nativeCbs || !this.nativeCbs.length) return;\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.showErrorMsg = false;\n this._invalid = false;\n\n this.nativeCbs.forEach((cb, _i) => {\n if (!cb.validity.valid) {\n this.errorMessage = cb.validationMessage;\n this.showErrorMsg = true;\n this._invalid = true;\n }\n });\n\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n // stencil hooks\n\n componentWillLoad() {\n this.showInlineValidation = debounce(this.showInlineValidation, 50);\n this.customValidate = this.customValidate.bind(this);\n this.handleDisabledChange();\n this.handleSlotChange();\n }\n\n connectedCallback() {\n this.attachSlotObserver();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.handleComponentChange();\n }\n\n render() {\n const legendId = this.grpId + '-lbl';\n const moreId =\n this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';\n\n return (\n <Host {...this.checkboxTypes}>\n <fieldset\n disabled={this.disabled}\n class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n >\n <legend class=\"nanogroupcb__legend\" id={legendId}>\n {this.legend}\n </legend>\n <div\n class=\"nanogroupcb__cbs\"\n role=\"group\"\n aria-labelledby={legendId + ' ' + moreId}\n >\n <slot />\n </div>\n {(this.showInlineError || this.hasHelperSlot) && (\n <div class=\"nanogroupcb__more\" id={moreId}>\n {!!this.showInlineError ? (\n <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"nanogroupcb__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n )}\n </fieldset>\n </Host>\n );\n }\n}\n\nlet grpIds = 0;\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,c as i,w as s,h as e,a as n,g as o}from"./p-bf91c50e.js";import{g as a}from"./p-74a7fc4f.js";import{d as h}from"./p-9746b0a5.js";import{g as r}from"./p-257432ff.js";import{g as l}from"./p-b933f3c8.js";const c=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{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}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";function d(t){let i;if(t.id){i=document.querySelector(`label[for='${t.id}']`)}if(!i){i=t.closest("label")}return i}let p=0;const u=class{get allOptEles(){return this._allOptEles}set allOptEles(t){var i;this._allOptEles=t;if((i=this.connectedInput)===null||i===void 0?void 0:i.value)return;t.forEach((t=>{if(t.selected&&!this.selected.includes(t.value)){this.changeInputValue(t)}}))}constructor(s){t(this,s);this.nanoSelect=i(this,"nanoSelect",7);this.nanoDeselect=i(this,"nanoDeselect",7);this.nanoOptionsUpdated=i(this,"nanoOptionsUpdated",7);this.isNanoInput=false;this.typeToSelect="";this.listId=`nano-datalist-${p++}`;this.isFiltered=false;this.shouldFocus=false;this._allOptEles=[];this._dropDownConfig={skidding:-1};this.optSelected=t=>{t.stopPropagation();this.changeInputValue(t.detail);requestAnimationFrame((()=>this.inputChange()));if(this.type!=="selctMulti")this.shouldOpen=false};this.handleShow=async()=>{if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement()};this.handleHide=()=>{this.open=false;const t=a();if(t.closest(this.host.tagName.toLowerCase())){this.connectedInput.select()}};this.inputClick=()=>{this.shouldOpen=true;this.manageDropdownDisplay()};this.inputKeydown=t=>{const i=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(i.includes(t.key)){if(t.key==="Tab")this.shouldOpen=false;return}if(this.type==="select"&&!["ArrowDown","ArrowUp"].includes(t.key)&&(t.key!==" "||this.typeToSelectTimeout)){if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="";this.typeToSelectTimeout=0}),750);this.typeToSelect+=t.key;this.setOptStartsWith()}return}this.shouldOpen=true;this.manageDropdownDisplay();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();this.shouldFocus=true}};this.optionKeyDown=t=>{const i=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(i.includes(t.key)){if(t.key==="Escape")this.connectedInput.focus();return}const s=["Delete","Backspace"];if(this.type!=="select"&&(!this.exactMatch||s.includes(t.key))){this.connectedInput.focus()}};this.actvOptEles=[];this.connectedInput=undefined;this.inputLabel=undefined;this.hasNoResult=undefined;this.shouldOpen=undefined;this.canOpen=true;this.optionIds=[];this.selected=[];this.options=[];this.input=undefined;this.type="input";this.open=false;this.disableFilter=false;this.disabled=false;this.inputChange=h(this.inputChange.bind(this),50)}get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig=Object.assign(Object.assign({},this._dropDownConfig),t)}get activeOptions(){return this.allOptEles}openWatcher(){s((()=>{this.nanoDropdown.open=this.open;if(this.connectedInput)this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}async watchInputChange(){let t;if(t=this.host.closest("nano-input")){this.isNanoInput=true;this.connectedInput=await t.getInputElement()}else if(this.input&&typeof this.input==="string"&&(t=document.querySelector(this.input))){this.isNanoInput=false;this.connectedInput=t}else if(typeof this.input==="object"){this.connectedInput=this.input}}manageSlotChangeListener(){var t;if(!this.host)return;if((!this.options||!this.options.length)&&!this.mo){{const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.host,{childList:true,subtree:true})}this.processSlottedContent();return}if((t=this.options)===null||t===void 0?void 0:t.length){if(!!this.mo){this.mo.disconnect();this.mo=undefined}const t=this.host.querySelectorAll('[slot="internal-opts"]');s((()=>{var i;if(t===null||t===void 0?void 0:t.length)t.forEach((t=>t.remove()));this.allOptEles=this.options.flatMap(((t,i)=>{if(t.value||t.label){const s=Object.assign(document.createElement("nano-option"),{label:t.label,value:t.value,ariaPosinset:i,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+i,textContent:t.label?t.label:t.value,slot:"internal-opts"});this.host.append(s);return s}}));if(((i=this.connectedInput)===null||i===void 0?void 0:i.value.length)&&this.type!=="select"){this.inputChange()}else{this.actvOptEles=[...this.allOptEles]}}))}}watchTypeChange(){if(!this.connectedInput)return;let t={closeOnSelect:false};let i="both";let s=false;switch(this.type){case"input":t={closeOnSelect:true};break;case"select":i="list";s=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig=Object.assign(Object.assign({},this.dropDownConfig),t);this.connectedInput.setAttribute("aria-autocomplete",i);this.connectedInput.readOnly=s}manageInputEvents(t,i){var e;if(!!i){const t=i.closest("nano-input");if(t){t.removeEventListener("nanoChange",this.inputChange)}i.removeEventListener("change",this.inputChange);i.removeEventListener("click",this.inputClick);i.removeEventListener("keydown",this.inputKeydown);i.removeEventListener("input",this.inputChange);this.inputLabel=null;s((()=>{i.removeAttribute("role");i.removeAttribute("aria-expanded");i.removeAttribute("aria-controls");i.removeAttribute("aria-owns");i.removeAttribute("aria-haspopup");i.removeAttribute("aria-autocomplete");i.removeAttribute("autocomplete")}))}if(!!t){const i=t.closest("nano-input");if(i){i.addEventListener("nanoChange",this.inputChange)}t.addEventListener("change",this.inputChange);t.addEventListener("click",this.inputClick);t.addEventListener("keydown",this.inputKeydown);t.addEventListener("input",this.inputChange);this.listId=this.host.id||this.listId;this.inputLabel=((e=t===null||t===void 0?void 0:t.labels)===null||e===void 0?void 0:e.item(0))||d(t);s((()=>{this.host.id=this.listId;t.setAttribute("role","combobox");t.setAttribute("aria-expanded","false");t.setAttribute("aria-controls",this.listId);t.setAttribute("aria-owns",this.listId);t.setAttribute("aria-haspopup","listbox");t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){var t;let i=0;const e=((t=this.connectedInput)===null||t===void 0?void 0:t.value)||"";const n=[];s((()=>{this.allOptEles.forEach(((t,s)=>{if(this.actvOptEles.includes(t)){i++;t.setAttribute("aria-posinset",i+"");t.setAttribute("aria-setsize",this.actvOptEles.length+"");t.hidden=false;this.isSelected(t,e)}else{t.removeAttribute("aria-posinset");t.removeAttribute("aria-setsize");t.hidden=true;t.selected=false}t.id=this.listId+"-option-"+s;n.push(t.id)}));this.optionIds=n}))}manageCanOpen(){if(this.actvOptEles.length||this.hasNoResult)this.canOpen=true;else this.canOpen=false}manageDropdownDisplay(){if(this.shouldOpen&&this.canOpen&&!this.disabled)this.open=true;if(!this.shouldOpen||!this.canOpen)this.open=false;this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}isSelected(t,i){if(i===t.value||this.selected.includes(t.value)){t.selected=true}else t.selected=false}get dropwdownOpen(){if(!this.nanoDropdown||!this.open)return false;return true}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){var i;let s;if(this.selected.includes(t.value)){this.selected=this.selected.filter((i=>i!==t.value));s=this.nanoDeselect.emit(t)}else{this.selected=[...this.selected];s=this.nanoSelect.emit(t)}if(!s.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;const s=new window.Event("change");(i=this.connectedInput)===null||i===void 0?void 0:i.dispatchEvent(s)}}setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect;const i=this.allOptEles.find((i=>i.value.trim().length>0&&!i.disabled&&(t(i.textContent)||t(i.value)||t(i.label)||t(i.filterMeta))));if(i)this.changeInputValue(i)}processSlottedContent(){requestAnimationFrame((()=>{var t;this.allOptEles=Array.from(this.host.querySelectorAll("nano-option"));this.hasNoResult=!!this.host.querySelector('[slot="no-result"]');if(((t=this.connectedInput)===null||t===void 0?void 0:t.value.length)&&this.type!=="select"){this.inputChange()}else this.actvOptEles=this.allOptEles}))}inputChange(){if(this.disableFilter){this.actvOptEles=this.allOptEles;return}const t=this.connectedInput.value;const i=t.trim().toLowerCase();let s=false;const e=[];const n=t=>t.toLowerCase().indexOf(i)>-1;this.allOptEles.forEach((i=>{if((t===i.value||t===i.label)&&this.type!=="selctMulti"){i.selected=true;s=true}else this.isSelected(i,t)}));this.allOptEles.forEach((t=>{if(!i.length||s){e.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(n(t.textContent)||n(t.value)||n(t.label)||n(t.filterMeta))){e.push(t)}}));this.isFiltered=i.length&&!s;this.actvOptEles=e}connectedCallback(){this.watchInputChange()}componentDidLoad(){this.manageSlotChangeListener();this.openWatcher()}componentDidRender(){setTimeout((()=>{if(!this.connectedInput)console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}render(){return e(n,{role:this.actvOptEles.length?"listbox":undefined,"aria-owns":this.optionIds.length?this.optionIds.join(" "):undefined,"aria-label":this.optionIds.length?"Select options from the list below":undefined},e("nano-dropdown",Object.assign({},this.dropDownConfig,{ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:true,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"}),e("nano-menu",{hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:undefined,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown,ref:t=>this.listBox=t,role:"list"},e("slot",{name:"list-top"}),!this.options.length&&e("slot",null),!!this.options.length&&e("slot",{name:"internal-opts"}),e("slot",{name:"list-bottom"})),e("nano-menu",{type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},e("slot",{name:"no-result"})),!!this.actvOptEles&&e("div",{class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}get host(){return o(this)}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["manageSlotChangeListener"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};u.style=c;const f=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-width:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";const g=class{constructor(s){t(this,s);this.nanoFocus=i(this,"nanoFocus",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoSelect=i(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this._hasFocus=false;this.handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]);this._hasFocus=true;this.nanoFocus.emit()};this.handleClick=t=>{const i=t.target;const s=i.closest("nano-nav-item");if(s&&!s.disabled){this.nanoSelect.emit(s)}};this.handleKeyDown=t=>{clearTimeout(this.ignoreMouseTimeout);this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=false),500);this.ignoreMouseEvents=true;switch(t.key){case" ":if(this.activeItem)this.activeItem.click();break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":const i=this.getItems;const s=this.activeItem;let e=i.indexOf(s);if(i.length){t.preventDefault();if(t.key==="ArrowDown"){e++}else if(t.key==="ArrowUp"){e--}else if(t.key==="Home"||t.key==="PageUp"){e=0}else if(t.key==="End"||t.key==="PageDown"){e=i.length-1}if(e<0)e=i.length-1;if(e>i.length-1)e=0;this.setActiveFocusItem(i[e]);if(i[e])i[e].scrollIntoView({block:"nearest"});return}break}if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750);this.typeToSelect+=t.key;const i=this.getItems;for(const t of i){const i=t.shadowRoot.querySelector("slot:not([name])");const s=l(i).toLowerCase().trim();if(s.substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}}};this.handleMouseOver=t=>{const i=t.target;const s=i.closest("nano-nav-item")||i.closest("nano-option");if(s&&!this.ignoreMouseEvents){this.setActiveFocusItem(s)}};this.type="menu";this.label=undefined}get hasFocus(){return this._hasFocus}async setFocus(){var t;if((t=this.menu)===null||t===void 0?void 0:t.focus)this.menu.focus({preventScroll:true})}async removeFocus(){var t;if((t=this.menu)===null||t===void 0?void 0:t.blur)this.menu.blur()}async showActiveElement(){if(this.selectedItem)this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;const i=this.el.querySelectorAll("nano-nav-item.secondary-open");if(i.length){const s=i[i.length-1];t=Array.from(s.querySelectorAll("nano-nav-item, nano-option"))}else{t=r(this.el,"nano-nav-item, nano-option","slot")}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=a();return this.getItems.find((i=>i.getAttribute("tabindex")==="0"||i===t||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=true){const s=this.getItems;const e=!t||t.disabled?s.find((t=>t.selected))||s[0]:t;s.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex",t===e?"0":"-1")));if(!i)return;if(e){e.setFocus?e.setFocus():e.focus()}else this.menu.focus()}handleBlur(t){if(!this.hasFocus)return;const i=t;let s;if(i.key){if(i.key!=="Tab")return;s=a()&&a().closest(this.el.tagName.toLowerCase())===this.el}else s=!!t.composedPath().find((t=>t===this.el));if(!s){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}}componentDidLoad(){{r(this.el,":not(nano-nav-item):not(nano-option):not([role])",true).forEach((t=>t.setAttribute("role","none")))}}render(){return e(n,{role:this.type==="menu"?"menu":"group"},e("div",{onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,ref:t=>this.menu=t,part:"base",class:{menu:true,["menu--"+this.type]:true,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},e("slot",null)))}get el(){return o(this)}};g.style=f;const m=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;width:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){-webkit-margin-end:0.5em;margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){-webkit-margin-start:0.5em;margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";let b=0;const v=class{constructor(s){t(this,s);this.nanoSelect=i(this,"nanoSelect",7);this.optId=`nano-option-${b++}`;this.hasFocus=false;this.value="";this.label="";this.selected=false;this.disabled=false;this.filterMeta="";this.handleClick=h(this.handleClick.bind(this),5)}valueChanged(){if(!this.value||!this.value.length)this.value=this.labelContent}labelChanged(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value}handleKeyDown(t){if(t.key!==" "&&t.key!=="Enter")return;t.preventDefault();this.nanoSelect.emit(this.host)}handleClick(){if(this.disabled)return;this.nanoSelect.emit(this.host)}get labelContent(){return r(this.host,"*:not([slot])",false).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged();this.labelChanged()}render(){return e(n,{role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},e("div",{onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},e("div",{part:"check-icon",class:"option__check"},e("slot",{name:"check-icon"},e("nano-icon",{name:"light/check","aria-hidden":"true"}))),e("div",{part:"start",class:"option__start"},e("slot",{name:"start"})),e("div",{part:"label",class:"option__label"},e("slot",null,this.label||this.value)),e("div",{part:"end",class:"option__end"},e("slot",{name:"end"}))))}get host(){return o(this)}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};v.style=m;export{u as nano_datalist,g as nano_menu,v as nano_option};
|
5
|
+
//# sourceMappingURL=p-69774e99.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["datalistCss","findLabel","formCtrl","foundLabel","id","document","querySelector","closest","listIds","DataList","allOptEles","this","_allOptEles","opts","_a","connectedInput","value","forEach","opt","selected","includes","changeInputValue","constructor","hostRef","isNanoInput","typeToSelect","listId","isFiltered","shouldFocus","_dropDownConfig","skidding","optSelected","e","stopPropagation","detail","requestAnimationFrame","inputChange","type","shouldOpen","handleShow","async","listBox","setFocus","showActiveElement","handleHide","open","activeElement","getActiveElement","host","tagName","toLowerCase","select","inputClick","manageDropdownDisplay","inputKeydown","ignoreKeys","key","typeToSelectTimeout","test","clearTimeout","window","setTimeout","setOptStartsWith","preventDefault","optionKeyDown","focus","deleteKeys","exactMatch","debounce","bind","dropDownConfig","ddc","Object","assign","activeOptions","openWatcher","writeTask","nanoDropdown","setAttribute","toString","nanoInput","getInputElement","input","manageSlotChangeListener","options","length","mo","MutationObserver","processSlottedContent","observe","childList","subtree","disconnect","undefined","previousOptions","querySelectorAll","internalOpt","remove","flatMap","option","i","label","createElement","ariaPosinset","ariaSetsize","textContent","slot","append","actvOptEles","watchTypeChange","dwConfig","closeOnSelect","autocompleteType","readonly","placement","tetherTo","readOnly","manageInputEvents","newInput","oldInput","removeEventListener","inputLabel","removeAttribute","addEventListener","labels","item","watchActvOptChange","c","val","optIds","hidden","isSelected","push","optionIds","manageCanOpen","hasNoResult","canOpen","disabled","fireActiveOptsEvent","nanoOptionsUpdated","emit","dropwdownOpen","find","nanoSelected","filter","nanoDeselect","nanoSelect","defaultPrevented","event","Event","dispatchEvent","attrFind","toFind","substring","foundEle","trim","filterMeta","Array","from","disableFilter","valStr","activeEles","indexOf","connectedCallback","watchInputChange","componentDidLoad","componentDidRender","console","warn","render","h","Host","role","join","ref","el","dialogTitle","class","dlist__dropdown","onNanoAfterShow","onNanoAfterHide","dlist__menu","tabIndex","onNanoSelect","onKeyDown","name","menuCss","Menu","ignoreMouseEvents","_hasFocus","handleFocus","setActiveFocusItem","selectedItem","getItems","nanoFocus","handleClick","target","handleKeyDown","ignoreMouseTimeout","activeItem","click","items","index","scrollIntoView","block","shadowRoot","getTextContent","handleMouseOver","hasFocus","menu","preventScroll","blur","map","opened","ctx","getDirectChildren","getAttribute","classList","contains","handleBlur","kev","found","composedPath","resetActiveItem","nanoBlur","onClick","onMouseOver","onFocus","part","optionCss","Option","optId","valueChanged","labelContent","labelChanged","componentWillLoad","onMouseDown"],"sources":["./src/components/datalist/datalist.scss?tag=nano-datalist&encapsulation=shadow","./src/components/datalist/datalist.tsx","./src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","./src/components/menu/menu.tsx","./src/components/option/option.scss?tag=nano-option&encapsulation=shadow","./src/components/option/option.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:host {\n /**\n * @prop --padding-top: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n * @prop --padding-bottom: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n * @prop --padding-start: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n * @prop --padding-end: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n * @prop --font-size: for all nested `nano-option` elements. Defaults to .8em;\n * @prop --color: default text color of content other than `nano-option`. Defaults to #{map.get($colors, palegrey)};\n */\n\n --padding-top: #{$spacing-small};\n --padding-bottom: #{$spacing-small};\n --padding-start: #{$spacing-xlarge};\n --padding-end: #{$spacing-xlarge};\n --font-size: 0.8em;\n --color: #{map.get($colors, palegrey)};\n\n color: var(--color);\n}\n\n.dlist {\n &--isfiltered {\n ::slotted(*:not(nano-option):not([slot='no-result']):not([slot='list-top']):not([slot='list-bottom'])) {\n display: none !important;\n }\n }\n\n &__dropdown {\n --min-width: 100%;\n --overflow: auto;\n }\n\n &__status {\n @include visually-hide();\n }\n\n &__menu {\n --padding-top: inherit;\n --padding-bottom: inherit;\n --padding-start: inherit;\n --padding-end: inherit;\n --font-size: inherit;\n }\n}\n","import {\n Component,\n ComponentInterface,\n h,\n Host,\n Element,\n State,\n Watch,\n Prop,\n Event,\n writeTask,\n Build,\n EventEmitter,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport { debounce } from '../../utils/throttle';\nimport type { NanoMenuCustomEvent, OptionInterface } from '../../interface';\nimport type { Dropdown } from '../dropdown/dropdown';\n\nfunction findLabel(formCtrl: Element) {\n let foundLabel: HTMLLabelElement;\n\n if (formCtrl.id) {\n foundLabel = document.querySelector(`label[for='${formCtrl.id}']`);\n }\n if (!foundLabel) {\n foundLabel = formCtrl.closest('label');\n }\n return foundLabel;\n}\n\nlet listIds = 0;\n\n/**\n * `nano-datalist` a visually consistent and more flexible replacement for a native\n * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\n * or linked to any input control via the `input` prop. Is used internally within `nano-select`.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop\n *\n * @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop\n * @slot list-top - shows at the top of the list when there are options present\n * @slot list-bottom - shows at the bottom of the list when there are options present\n * @slot no-result - shown when there are no results otherwise nothing will be shown\n */\n@Component({\n tag: 'nano-datalist',\n styleUrl: 'datalist.scss',\n shadow: true,\n})\nexport class DataList implements ComponentInterface {\n // Private State\n\n private isNanoInput = false;\n private typeToSelect = '';\n private typeToSelectTimeout: number;\n private nanoDropdown: HTMLNanoDropdownElement;\n private listBox: HTMLNanoMenuElement;\n private mo?: MutationObserver;\n private listId = `nano-datalist-${listIds++}`;\n private isFiltered = false;\n private shouldFocus = false;\n // all potential option eles. Set via slot or `options` prop.\n // Some may get hidden due to filtering\n private get allOptEles() {\n return this._allOptEles;\n }\n private set allOptEles(opts) {\n // when allOptEles are initially set (on slot change / options) -\n // add options to 'selected' and fire selected event *if*\n // value isn't set on the input\n this._allOptEles = opts;\n if (this.connectedInput?.value) return;\n\n opts.forEach((opt) => {\n if (opt.selected && !this.selected.includes(opt.value)) {\n this.changeInputValue(opt);\n }\n });\n }\n private _allOptEles: HTMLNanoOptionElement[] = [];\n\n @Element() host: HTMLNanoDatalistElement;\n\n // active option eles that are not hidden.\n @State() actvOptEles: HTMLNanoOptionElement[] = [];\n @State() connectedInput: HTMLInputElement | HTMLTextAreaElement;\n @State() inputLabel: HTMLLabelElement;\n @State() hasNoResult: boolean;\n @State() shouldOpen: boolean;\n @State() canOpen: boolean = true;\n @State() optionIds: string[] = [];\n\n constructor() {\n this.inputChange = debounce(this.inputChange.bind(this), 50);\n }\n\n // Public API\n\n /** By default, items in the list will appear 'selected' when the value in the linked input control matches.\n * However you can add other selected options via the the selected prop. */\n @Prop({ mutable: true }) selected: string[] = [];\n\n /** nano-dropdown config options you can pass to the nested dropdown component */\n @Prop()\n get dropDownConfig() {\n return this._dropDownConfig;\n }\n set dropDownConfig(ddc: Partial<Dropdown>) {\n this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n }\n private _dropDownConfig: Partial<Dropdown> = {\n skidding: -1,\n };\n\n /** Provide an option list.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */\n @Prop() options?: OptionInterface[] = [];\n\n /** A selector to a HTMLInputElement */\n @Prop() input?: string | HTMLInputElement;\n\n /** Tweaks the datalist behaviour and linked control semantics and behaviour.\n * e.g. 'select' will make the linked input control `readonly`.\n */\n @Prop() type: 'select' | 'selctMulti' | 'input' = 'input';\n\n /** return all the active options currently within the datalist. Can be useful for validation */\n @Prop()\n get activeOptions() {\n return this.allOptEles;\n }\n\n /** Force datalist open */\n @Prop({ mutable: true }) open: boolean = false;\n\n @Watch('open')\n openWatcher() {\n writeTask(() => {\n this.nanoDropdown.open = this.open;\n if (this.connectedInput)\n this.connectedInput.setAttribute('aria-expanded', this.open.toString());\n });\n }\n\n /** Use this option to disable to default filtering. This is useful if filtering happens\n * externally via another method (e.g. via ajax)\n */\n @Prop() disableFilter = false;\n\n /** Activate / deactivate the datalist control */\n @Prop() disabled = false;\n\n // State change watchers\n\n @Watch('input')\n async watchInputChange() {\n let nanoInput;\n if ((nanoInput = this.host.closest('nano-input'))) {\n this.isNanoInput = true;\n this.connectedInput = await nanoInput.getInputElement();\n } else if (\n this.input &&\n typeof this.input === 'string' &&\n (nanoInput = document.querySelector(this.input))\n ) {\n this.isNanoInput = false;\n this.connectedInput = nanoInput;\n } else if (typeof this.input === 'object') {\n this.connectedInput = this.input;\n }\n }\n\n @Watch('options')\n manageSlotChangeListener() {\n if (!this.host) return;\n\n // we're not using `options` - setup new MO\n if ((!this.options || !this.options.length) && !this.mo) {\n if (Build.isBrowser) {\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true, subtree: true });\n }\n this.processSlottedContent();\n return;\n }\n\n // we're using `options` - trash current MO\n if (this.options?.length) {\n if (!!this.mo) {\n this.mo.disconnect();\n this.mo = undefined;\n }\n\n const previousOptions = this.host.querySelectorAll(\n '[slot=\"internal-opts\"]'\n );\n\n // add imperative `options`\n writeTask(() => {\n // clear all previous\n if (previousOptions?.length)\n previousOptions.forEach((internalOpt) => internalOpt.remove());\n\n this.allOptEles = this.options.flatMap((option, i) => {\n if (option.value || option.label) {\n const opt = Object.assign(document.createElement('nano-option'), {\n label: option.label,\n value: option.value,\n ariaPosinset: i,\n ariaSetsize: this.options.length,\n selected: option.selected,\n id: this.listId + '-option-' + i,\n textContent: option.label ? option.label : option.value,\n slot: 'internal-opts',\n });\n this.host.append(opt);\n return opt;\n }\n });\n\n if (this.connectedInput?.value.length && this.type !== 'select') {\n this.inputChange();\n } else {\n this.actvOptEles = [...this.allOptEles];\n }\n });\n }\n // forceUpdate(this.host);\n }\n\n @Watch('type')\n @Watch('connectedInput')\n watchTypeChange() {\n if (!this.connectedInput) return;\n\n let dwConfig: Partial<Dropdown> = { closeOnSelect: false };\n let autocompleteType: 'list' | 'both' = 'both';\n let readonly = false;\n\n switch (this.type) {\n case 'input':\n dwConfig = { closeOnSelect: true };\n break;\n case 'select':\n autocompleteType = 'list';\n readonly = true;\n dwConfig = { closeOnSelect: true, placement: 'center' };\n break;\n }\n\n if (!this.isNanoInput) {\n dwConfig.tetherTo = this.connectedInput;\n }\n\n this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };\n this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);\n this.connectedInput.readOnly = readonly;\n }\n\n @Watch('connectedInput')\n manageInputEvents(newInput?: HTMLInputElement, oldInput?: HTMLInputElement) {\n if (!!oldInput) {\n const nanoInput = oldInput.closest('nano-input');\n if (nanoInput) {\n nanoInput.removeEventListener('nanoChange', this.inputChange);\n }\n oldInput.removeEventListener('change', this.inputChange);\n oldInput.removeEventListener('click', this.inputClick);\n oldInput.removeEventListener('keydown', this.inputKeydown);\n oldInput.removeEventListener('input', this.inputChange);\n\n this.inputLabel = null;\n\n writeTask(() => {\n oldInput.removeAttribute('role');\n oldInput.removeAttribute('aria-expanded');\n oldInput.removeAttribute('aria-controls');\n oldInput.removeAttribute('aria-owns');\n oldInput.removeAttribute('aria-haspopup');\n oldInput.removeAttribute('aria-autocomplete');\n oldInput.removeAttribute('autocomplete');\n });\n }\n if (!!newInput) {\n const nanoInput = newInput.closest('nano-input');\n if (nanoInput) {\n nanoInput.addEventListener('nanoChange', this.inputChange);\n }\n newInput.addEventListener('change', this.inputChange);\n newInput.addEventListener('click', this.inputClick);\n newInput.addEventListener('keydown', this.inputKeydown);\n newInput.addEventListener('input', this.inputChange);\n this.listId = this.host.id || this.listId;\n\n this.inputLabel = newInput?.labels?.item(0) || findLabel(newInput);\n\n writeTask(() => {\n this.host.id = this.listId;\n newInput.setAttribute('role', 'combobox');\n newInput.setAttribute('aria-expanded', 'false');\n newInput.setAttribute('aria-controls', this.listId);\n newInput.setAttribute('aria-owns', this.listId);\n newInput.setAttribute('aria-haspopup', 'listbox');\n newInput.setAttribute('autocomplete', 'off');\n });\n }\n }\n\n @Watch('selected')\n @Watch('actvOptEles')\n watchActvOptChange() {\n let c = 0;\n const val = this.connectedInput?.value || '';\n const optIds = [];\n\n writeTask(() => {\n this.allOptEles.forEach((opt, i) => {\n if (this.actvOptEles.includes(opt)) {\n c++;\n opt.setAttribute('aria-posinset', c + '');\n opt.setAttribute('aria-setsize', this.actvOptEles.length + '');\n opt.hidden = false;\n this.isSelected(opt, val);\n } else {\n opt.removeAttribute('aria-posinset');\n opt.removeAttribute('aria-setsize');\n opt.hidden = true;\n opt.selected = false;\n }\n opt.id = this.listId + '-option-' + i;\n optIds.push(opt.id);\n });\n this.optionIds = optIds;\n });\n }\n\n @Watch('actvOptEles')\n @Watch('hasNoResult')\n manageCanOpen() {\n if (this.actvOptEles.length || this.hasNoResult) this.canOpen = true;\n else this.canOpen = false;\n }\n\n /**\n * Opens the dropdown if it can, it should and there are items to display.\n */\n @Watch('shouldOpen')\n @Watch('canOpen')\n manageDropdownDisplay() {\n if (this.shouldOpen && this.canOpen && !this.disabled) this.open = true;\n if (!this.shouldOpen || !this.canOpen) this.open = false;\n this.openWatcher();\n }\n\n @Watch('actvOptEles')\n fireActiveOptsEvent() {\n this.nanoOptionsUpdated.emit(this.actvOptEles);\n }\n\n // Events\n\n /** Fired when an item is selected. */\n @Event() nanoSelect: EventEmitter<HTMLNanoOptionElement>;\n\n /** Fired when a currently selected item is reselected. */\n @Event() nanoDeselect: EventEmitter<HTMLNanoOptionElement>;\n\n /** Fired when active options change */\n @Event() nanoOptionsUpdated: EventEmitter<HTMLNanoOptionElement[]>;\n\n // Private logic\n\n private isSelected(opt: HTMLNanoOptionElement, val: string) {\n if (val === opt.value || this.selected.includes(opt.value)) {\n opt.selected = true;\n } else opt.selected = false;\n }\n\n private get dropwdownOpen() {\n if (!this.nanoDropdown || !this.open) return false;\n return true;\n }\n\n private get exactMatch() {\n return this.allOptEles.find(\n (opt) => this.connectedInput.value === opt.value\n );\n }\n\n /** reflect value back to the connected input unless the event is cancelled */\n private changeInputValue(opt: HTMLNanoOptionElement) {\n let nanoSelected;\n\n if (this.selected.includes(opt.value)) {\n // deselect option\n this.selected = this.selected.filter((val) => val !== opt.value);\n nanoSelected = this.nanoDeselect.emit(opt);\n } else {\n // select new option\n this.selected = [...this.selected];\n nanoSelected = this.nanoSelect.emit(opt);\n }\n\n if (!nanoSelected.defaultPrevented) {\n if (this.connectedInput) this.connectedInput.value = opt.value;\n\n const event = new window.Event('change');\n this.connectedInput?.dispatchEvent(event);\n }\n }\n\n // a new option has been picked\n private optSelected = (e: NanoMenuCustomEvent<HTMLNanoOptionElement>) => {\n e.stopPropagation();\n this.changeInputValue(e.detail);\n requestAnimationFrame(() => this.inputChange());\n\n if (this.type !== 'selctMulti') this.shouldOpen = false;\n };\n\n // this is for type=\"select\" only.\n // Filter options that start with text - aggregates letters (as opposed to getting the value from input)\n private setOptStartsWith() {\n const attrFind = (toFind: string) =>\n toFind.toLowerCase().substring(0, this.typeToSelect.length) ===\n this.typeToSelect;\n\n const foundEle = this.allOptEles.find(\n (opt) =>\n opt.value.trim().length > 0 &&\n !opt.disabled &&\n (attrFind(opt.textContent) ||\n attrFind(opt.value) ||\n attrFind(opt.label) ||\n attrFind(opt.filterMeta))\n );\n if (foundEle) this.changeInputValue(foundEle);\n }\n\n // Event handlers\n\n private processSlottedContent() {\n requestAnimationFrame(() => {\n this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));\n this.hasNoResult = !!this.host.querySelector('[slot=\"no-result\"]');\n\n if (this.connectedInput?.value.length && this.type !== 'select') {\n this.inputChange();\n } else this.actvOptEles = this.allOptEles;\n });\n }\n\n // sets focus immediately on open when 'select' - mirroring native behaviour\n private handleShow = async () => {\n if (this.shouldFocus) {\n this.shouldFocus = false;\n this.listBox.setFocus();\n } else if (this.type === 'select') this.listBox.showActiveElement();\n };\n\n private handleHide = () => {\n this.open = false;\n const activeElement = getActiveElement();\n if (activeElement.closest(this.host.tagName.toLowerCase())) {\n this.connectedInput.select();\n }\n };\n\n // any changes to the connected input value will filter the list of active options\n private inputChange() {\n if (this.disableFilter) {\n this.actvOptEles = this.allOptEles;\n return;\n }\n\n const val = this.connectedInput.value;\n const valStr = val.trim().toLowerCase();\n\n let exactMatch = false;\n const activeEles = [];\n const attrFind = (toFind: string) =>\n toFind.toLowerCase().indexOf(valStr) > -1;\n\n this.allOptEles.forEach((opt) => {\n if (\n (val === opt.value || val === opt.label) &&\n this.type !== 'selctMulti'\n ) {\n opt.selected = true;\n exactMatch = true;\n } else this.isSelected(opt, val);\n });\n\n this.allOptEles.forEach((opt) => {\n if (!valStr.length || exactMatch) {\n activeEles.push(opt);\n } else if (\n opt.value.trim().length > 0 &&\n !opt.disabled &&\n (attrFind(opt.textContent) ||\n attrFind(opt.value) ||\n attrFind(opt.label) ||\n attrFind(opt.filterMeta))\n ) {\n activeEles.push(opt);\n }\n });\n\n this.isFiltered = valStr.length && !exactMatch;\n this.actvOptEles = activeEles;\n }\n\n private inputClick = () => {\n this.shouldOpen = true;\n // open dropdown if possible\n this.manageDropdownDisplay();\n };\n\n private inputKeydown = (e: KeyboardEvent) => {\n const ignoreKeys = [\n 'Shift',\n 'ArrowRight',\n 'ArrowLeft',\n 'Escape',\n 'Enter',\n 'Tab',\n ];\n if (ignoreKeys.includes(e.key)) {\n if (e.key === 'Tab') this.shouldOpen = false;\n return;\n }\n\n // When select, mirror native select behaviour. Search on closed list\n if (\n this.type === 'select' &&\n !['ArrowDown', 'ArrowUp'].includes(e.key) &&\n (e.key !== ' ' || this.typeToSelectTimeout)\n ) {\n if (e.key === ' ' || /^[a-z0-9]+$/i.test(e.key)) {\n clearTimeout(this.typeToSelectTimeout);\n this.typeToSelectTimeout = window.setTimeout(() => {\n this.typeToSelect = '';\n this.typeToSelectTimeout = 0;\n }, 750);\n this.typeToSelect += e.key;\n this.setOptStartsWith();\n }\n return;\n }\n\n this.shouldOpen = true;\n // open dropdown if possible\n this.manageDropdownDisplay();\n if (['ArrowDown', 'ArrowUp'].includes(e.key)) {\n e.preventDefault();\n this.shouldFocus = true;\n }\n };\n\n // handles key down on options. Either 'picks'\n // an option or passes event back to input for search / filter\n private optionKeyDown = (\n e: KeyboardEvent & { target: HTMLNanoOptionElement }\n ) => {\n const ignoreKeys = [\n 'Shift',\n 'ArrowUp',\n 'ArrowDown',\n 'Escape',\n 'Enter',\n 'Tab',\n 'Space',\n 'PageUp',\n 'PageDown',\n 'Home',\n 'End',\n ' ',\n ];\n if (ignoreKeys.includes(e.key)) {\n if (e.key === 'Escape') this.connectedInput.focus();\n return;\n }\n\n const deleteKeys = ['Delete', 'Backspace'];\n // this passes whatever's typed back to our input control\n if (\n this.type !== 'select' &&\n (!this.exactMatch || deleteKeys.includes(e.key))\n ) {\n this.connectedInput.focus();\n }\n };\n\n // Component lifecycle\n\n connectedCallback() {\n this.watchInputChange();\n }\n\n componentDidLoad() {\n this.manageSlotChangeListener();\n this.openWatcher();\n }\n\n componentDidRender(): void {\n setTimeout(() => {\n if (!this.connectedInput)\n console.warn(\n 'no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop',\n this.host\n );\n }, 500);\n }\n\n render() {\n return (\n <Host\n role={this.actvOptEles.length ? 'listbox' : undefined}\n aria-owns={this.optionIds.length ? this.optionIds.join(' ') : undefined}\n aria-label={\n this.optionIds.length\n ? 'Select options from the list below'\n : undefined\n }\n >\n <nano-dropdown\n {...this.dropDownConfig}\n ref={(el) => (this.nanoDropdown = el)}\n dialogTitle=\"Select options from the list below\"\n class={{\n dlist__dropdown: true,\n 'dlist--isfiltered': this.isFiltered,\n }}\n onNanoAfterShow={this.handleShow}\n onNanoAfterHide={this.handleHide}\n role=\"group\"\n >\n <nano-menu\n hidden={!this.actvOptEles.length}\n type=\"listbox\"\n label={this.inputLabel ? this.inputLabel.textContent : undefined}\n class={{\n dlist__menu: true,\n 'dlist__menu--open': this.dropwdownOpen,\n }}\n tabIndex={-1}\n onNanoSelect={this.optSelected}\n onKeyDown={this.optionKeyDown}\n ref={(el) => (this.listBox = el)}\n role=\"list\"\n >\n <slot name=\"list-top\" />\n {!this.options.length && <slot />}\n {!!this.options.length && <slot name=\"internal-opts\" />}\n <slot name=\"list-bottom\" />\n </nano-menu>\n <nano-menu\n type=\"listbox\"\n label=\"No results found\"\n hidden={!!this.actvOptEles.length}\n class={{\n dlist__menu: true,\n 'dlist__menu--open': this.dropwdownOpen,\n }}\n >\n <slot name=\"no-result\" />\n </nano-menu>\n {!!this.actvOptEles && (\n <div class=\"dlist__status\">\n {this.actvOptEles.length} result\n {this.actvOptEles.length > 1 ? 's' : ''} available.\n </div>\n )}\n </nano-dropdown>\n </Host>\n );\n }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /**\n * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n\n * @prop --color-hover: text hover color of nav-items. Defaults to #{map.get($colors, blue)}\n * @prop --color-selected: text selected color of nav-items. Defaults to #{map.get($colors, blue)}\n * @prop --color-focus: text focus color of nav-items. Defaults to #{map.get($colors, blue)}\n\n * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n * @prop --font-size: default font-size for all items. Defaults .9em;\n */\n\n --padding-start: #{$spacing-medium};\n --padding-end: #{$spacing-medium};\n --padding-top: #{$spacing-small};\n --padding-bottom: #{$spacing-small};\n --secondary-padding-top: 0;\n --secondary-padding-bottom: 0;\n --bg-color-hover: #{map.get($colors, blue--faded)};\n --bg-color-focus: #{map.get($colors, blue--faded)};\n --bg-color-selected: #{map.get($colors, blue--faded)};\n --color-hover: #{map.get($colors, blue)};\n --color-selected: #{map.get($colors, blue)};\n --color-focus: #{map.get($colors, blue)};\n --focus-outline: none;\n --font-size: 0.9em;\n\n display: block;\n}\n\n.menu {\n font-size: var(--font-size, 0.9em);\n overscroll-behavior: none;\n min-width: var(--width);\n position: relative;\n\n &:focus {\n outline: none;\n }\n}\n\n::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-top) var(--padding-bottom);\n display: block;\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Method,\n h,\n Host,\n Element,\n Prop,\n Listen,\n Build,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport { getDirectChildren } from '../../utils/dom';\nimport { getTextContent } from '../../utils/slot';\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n tag: 'nano-menu',\n styleUrl: 'menu.scss',\n shadow: true,\n})\nexport class Menu {\n private ignoreMouseEvents = false;\n private ignoreMouseTimeout: any;\n private menu: HTMLElement;\n private typeToSelect = '';\n private typeToSelectTimeout: any;\n\n @Element() private el: HTMLNanoMenuElement;\n\n // Public API\n\n /** get the focus state of the menu @readonly */\n @Prop()\n get hasFocus() {\n return this._hasFocus;\n }\n private _hasFocus = false;\n\n /** changes the role of the underlying control - sometimes required for semantics */\n @Prop() type: 'menu' | 'listbox' = 'menu';\n\n /** an accessible label */\n @Prop() label: string;\n\n // Events\n\n /** Emitted when the menu gains focus. */\n @Event() nanoFocus: EventEmitter;\n\n /** Emitted when the menu loses focus. */\n @Event() nanoBlur: EventEmitter;\n\n /** Emitted when a menu item is selected. */\n @Event() nanoSelect: EventEmitter<\n HTMLNanoOptionElement | HTMLNanoNavItemElement\n >;\n\n // Public Methods\n\n /** Sets focus on the menu. */\n @Method()\n async setFocus() {\n if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n }\n\n /** Removes focus from the menu. */\n @Method()\n async removeFocus() {\n if (this.menu?.blur) this.menu.blur();\n }\n\n /** Sets the current active item */\n @Method()\n async showActiveElement() {\n if (this.selectedItem)\n this.selectedItem.scrollIntoView({ block: 'nearest' });\n }\n\n /** Removes any active item's state */\n @Method()\n async resetActiveItem() {\n this.getItems\n .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n .map((i) => i.setAttribute('tabindex', '-1'));\n }\n\n // Private methods\n\n get getItems() {\n let items: ValidElement[];\n const opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n if (opened.length) {\n const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n } else {\n items = getDirectChildren(\n this.el,\n 'nano-nav-item, nano-option',\n 'slot'\n ) as ValidElement[];\n }\n return items.filter((el) => !el.disabled && !el.hidden);\n }\n\n get activeItem() {\n const activeElement = getActiveElement();\n return this.getItems.find(\n (i) =>\n i.getAttribute('tabindex') === '0' ||\n i === activeElement ||\n i.classList.contains('has-focus')\n );\n }\n\n get selectedItem() {\n return this.getItems.find((i) => i.selected);\n }\n\n private async setActiveFocusItem(item?: ValidElement, focus = true) {\n const items = this.getItems;\n const activeItem =\n !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;\n\n items\n .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n .map((i: HTMLNanoOptionElement) =>\n i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n );\n\n if (!focus) return;\n\n if (activeItem) {\n (activeItem as NNI).setFocus\n ? (activeItem as NNI).setFocus()\n : activeItem.focus();\n } else this.menu.focus();\n }\n\n // Event Handlers\n\n @Listen('mousedown', { target: 'body' })\n @Listen('keydown')\n handleBlur(e: KeyboardEvent | MouseEvent) {\n if (!this.hasFocus) return;\n\n const kev = e as KeyboardEvent;\n let found: boolean;\n\n if (kev.key) {\n if (kev.key !== 'Tab') return;\n found =\n getActiveElement() &&\n getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n } else found = !!e.composedPath().find((el) => el === this.el);\n\n if (!found) {\n this.resetActiveItem();\n this._hasFocus = false;\n this.nanoBlur.emit();\n }\n }\n\n private handleFocus = () => {\n this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n this._hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const item = target.closest('nano-nav-item');\n\n if (item && !item.disabled) {\n this.nanoSelect.emit(item);\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n clearTimeout(this.ignoreMouseTimeout);\n this.ignoreMouseTimeout = setTimeout(\n () => (this.ignoreMouseEvents = false),\n 500\n );\n this.ignoreMouseEvents = true;\n\n // Make a selection when pressing enter\n switch (event.key) {\n case ' ':\n if (this.activeItem) this.activeItem.click();\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n case 'PageDown':\n case 'PageUp':\n case 'Home':\n case 'End':\n const items = this.getItems;\n const selectedItem = this.activeItem;\n let index = items.indexOf(selectedItem);\n\n if (items.length) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home' || event.key === 'PageUp') {\n index = 0;\n } else if (event.key === 'End' || event.key === 'PageDown') {\n index = items.length - 1;\n }\n\n if (index < 0) index = items.length - 1;\n if (index > items.length - 1) index = 0;\n\n this.setActiveFocusItem(items[index]);\n if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n return;\n }\n break;\n }\n\n // Handle type-to-search behavior when non-control characters are entered\n if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n clearTimeout(this.typeToSelectTimeout);\n this.typeToSelectTimeout = setTimeout(\n () => (this.typeToSelect = ''),\n 750\n );\n this.typeToSelect += event.key;\n\n const items = this.getItems;\n for (const item of items) {\n const slot = item.shadowRoot.querySelector(\n 'slot:not([name])'\n ) as HTMLSlotElement;\n const label = getTextContent(slot).toLowerCase().trim();\n if (\n label.substring(0, this.typeToSelect.length) === this.typeToSelect\n ) {\n this.setActiveFocusItem(item);\n break;\n }\n }\n }\n };\n\n private handleMouseOver = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const item =\n target.closest('nano-nav-item') || target.closest('nano-option');\n\n if (item && !this.ignoreMouseEvents) {\n this.setActiveFocusItem(item);\n }\n };\n\n // Component Lifecycle\n\n componentDidLoad() {\n if (Build.isBrowser) {\n getDirectChildren(\n this.el,\n ':not(nano-nav-item):not(nano-option):not([role])',\n true\n ).forEach((el) => el.setAttribute('role', 'none'));\n }\n }\n\n render() {\n return (\n <Host role={this.type === 'menu' ? 'menu' : 'group'}>\n <div\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onFocus={this.handleFocus}\n aria-label={this.label ? this.label : undefined}\n ref={(el) => (this.menu = el)}\n part=\"base\"\n class={{\n menu: true,\n ['menu--' + this.type]: true,\n 'menu--has-focus': this.hasFocus,\n }}\n tabIndex={-1}\n role=\"group\"\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n","@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:host {\n /**\n * @prop --padding-top: Defaults to #{$spacing-small};\n * @prop --padding-bottom: Defaults to #{$spacing-small};\n * @prop --padding-start: Defaults to #{$spacing-small};\n * @prop --padding-end: Defaults to #{$spacing-small};\n\n * @prop --bg: default background. Defaults to none;\n * @prop --bg-selected: background when selected. Defaults to #{$select-opt-selected};\n * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n * @prop --bg-disabled: background when disabled. Defaults to none;\n\n * @prop --color: default text color. Defaults to var(--input-text-color, #{$input-text-color});\n * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n * @prop --color-disabled: text color when disabled. Defaults to #{map.get($colors, palegrey)};\n\n * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n */\n\n --bg: none;\n --bg-selected: #{$select-opt-selected};\n --bg-focus: var(--nano-color-base, #{nano-color(primary, tint)});\n --bg-disabled: none;\n --color: var(--input-text-color, #{$input-text-color});\n --color-selected: var(--nano-color-base, #{nano-color(primary, base)});\n --color-focus: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n --color-disabled: #{map.get($colors, palegrey)};\n --opt-icon-size: 1.6em;\n\n display: block;\n color: var(--color);\n overflow: hidden;\n font-size: 14px;\n font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n outline: none;\n}\n\n.option {\n $self: &;\n\n position: relative;\n user-select: none;\n cursor: pointer;\n display: flex;\n align-items: stretch;\n width: 100%;\n background: var(--bg);\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-top) var(--padding-bottom);\n\n // focus\n :host(:focus) &:not(.option--disabled),\n :host &.option--selected {\n outline: none;\n background: var(--bg-selected);\n color: var(--color-selected);\n }\n\n :host(:focus) &:not(.option--disabled) {\n background: var(--bg-focus);\n color: var(--color-focus);\n }\n\n // disabled\n &.option--disabled {\n outline: none;\n color: var(--color-disabled);\n cursor: not-allowed;\n background: var(--bg-disabled);\n }\n\n // no value\n &.option--novalue {\n font-style: italic;\n opacity: 0.7;\n }\n\n &__label {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n }\n\n &__start {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n\n ::slotted(nano-icon) {\n font-size: var(--opt-icon-size);\n }\n\n ::slotted(:last-child) {\n margin-inline-end: 0.5em;\n }\n }\n\n &__end {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n\n ::slotted(nano-icon) {\n font-size: var(--opt-icon-size);\n }\n\n ::slotted(:first-child) {\n margin-inline-start: 0.5em;\n }\n }\n\n &__check {\n visibility: hidden;\n display: flex;\n position: absolute;\n inset-inline-start: 0.6em;\n inset-block-start: calc(50% - 0.6em);\n align-items: center;\n font-size: 0.9em;\n\n #{$self}--selected:not(#{$self}--novalue) & {\n visibility: visible;\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n Host,\n State,\n Watch,\n Element,\n Listen,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { getDirectChildren } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\nimport type { OptionInterface } from '../../interface';\n\nlet optIds = 0;\n\n/**\n * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n *\n * @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n */\n@Component({\n tag: 'nano-option',\n styleUrl: 'option.scss',\n shadow: true,\n})\nexport class Option implements OptionInterface {\n private optId = `nano-option-${optIds++}`;\n @Element() host: HTMLNanoOptionElement;\n @State() hasFocus = false;\n\n constructor() {\n this.handleClick = debounce(this.handleClick.bind(this), 5);\n }\n\n // Public API\n\n /**\n * Value of the option\n */\n @Prop({ mutable: true, reflect: true }) value: string = '';\n\n @Watch('value')\n valueChanged() {\n if (!this.value || !this.value.length) this.value = this.labelContent;\n }\n\n /**\n * Label of the option\n */\n @Prop({ mutable: true, reflect: true }) label: string = '';\n\n @Watch('label')\n labelChanged() {\n if (!this.label || !this.label.length)\n this.label = this.labelContent.length ? this.labelContent : this.value;\n }\n\n /**\n * Whether this option is selected\n */\n @Prop({ reflect: true }) selected: boolean = false;\n\n /**\n * Whether this option should be disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** You can add extra meta for this option. When displayed in a list, users\n * search / filter via extra related terms. Another usecase is 'endonyms'\n */\n @Prop() filterMeta: string = '';\n\n /** Fired when an option is selected */\n @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n // Event handlers\n\n // stop scrolling on select\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (e.key !== ' ' && e.key !== 'Enter') return;\n e.preventDefault();\n this.nanoSelect.emit(this.host);\n }\n\n private handleClick() {\n if (this.disabled) return;\n this.nanoSelect.emit(this.host);\n }\n\n // Private logic\n\n private get labelContent() {\n return getDirectChildren(this.host, '*:not([slot])', false)\n .map((el) => el.textContent)\n .join(' ')\n .trim();\n }\n\n // Component lifecycle\n\n componentWillLoad() {\n this.valueChanged();\n this.labelChanged();\n }\n\n render() {\n return (\n <Host\n role=\"option\"\n aria-selected={this.selected ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <div\n onMouseDown={this.handleClick}\n id={this.optId}\n class={{\n option: true,\n 'option--selected': this.selected,\n 'option--disabled': this.disabled,\n 'option--novalue': !this.value,\n }}\n >\n <div part=\"check-icon\" class=\"option__check\">\n <slot name=\"check-icon\">\n <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n </slot>\n </div>\n <div part=\"start\" class=\"option__start\">\n <slot name=\"start\"></slot>\n </div>\n <div part=\"label\" class=\"option__label\">\n <slot>{this.label || this.value}</slot>\n </div>\n <div part=\"end\" class=\"option__end\">\n <slot name=\"end\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":[],"sources":[],"mappings":""}
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/*!
|
2
|
+
* Web Components for Nanopore digital Web Apps
|
3
|
+
*/
|
4
|
+
import{r as n,h as a,g as e}from"./p-bf91c50e.js";const i=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:inline-block;--base-color-rgb:var(--nano-indicator-rgb, 84 140 175);--indicator-color:var(\n --nano-indicator-color,\n rgb(var(--base-color-rgb) / 100%)\n );--track-color:var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));--overlay-color:var(--nano-layer-overlay-light, rgb(255 255 255 / 70%))}.spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}:host([overlay]:not([overlay=false])) .spinner{position:absolute;inset:0}:host([overlay]:not([overlay=false])) .spinner .spinner__loader,:host([overlay]:not([overlay=false])) .spinner .spinner__text{z-index:1}.spinner__overlay{background:var(--overlay-color);position:absolute;inset:0;z-index:0;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.spinner__loader{font-size:var(--spinner-scale, 1em)}.spinner__spin{display:block;margin:auto;inline-size:1em;block-size:1em;border-radius:50%;border:solid 0.1em var(--track-color);border-block-start-color:var(--indicator-color);border-inline-end-color:var(--indicator-color);border-inline-start-color:var(--indicator-color);animation:1s linear infinite spin}.spinner__dna{font-size:0.2286em;display:flex}.spinner__dnatrack{position:relative;padding-block:0;padding-inline:0.625em;block-size:4.375em;inline-size:0.625em;overflow:hidden}.spinner__dnatrack::before{content:"";position:absolute;inset-block-start:1.875em;inset-inline-start:50%;transform:translateX(-50%) translateZ(0);inline-size:0.0625em;inline-size:max(.0625em, 1px);block-size:0.625em;background:var(--track-color);animation:flex 1.5s linear infinite;transform-origin:center center}.spinner__dnatrack--2::before{animation:flex 1.5s -1.3s linear infinite}.spinner__dnatrack--3::before{animation:flex 1.5s -1.1s linear infinite}.spinner__dnatrack--4::before{animation:flex 1.5s -0.9s linear infinite}.spinner__dnatrack--5::before{animation:flex 1.5s -0.75s linear infinite}.spinner__dnadot{position:absolute;inline-size:0.5em;block-size:0.5em;border-radius:50%;background:var(--indicator-color);animation:rotate 1.5s linear infinite;transform-origin:center center;inset-inline-start:50%;transform:translateX(-50%) translateZ(0) translateY(0)}.spinner__dnadot--2{animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--3{animation:rotate 1.5s -1.3s linear infinite}.spinner__dnadot--4{animation:rotate 1.5s -0.55s linear infinite}.spinner__dnadot--5{animation:rotate 1.5s -1.1s linear infinite}.spinner__dnadot--6{animation:rotate 1.5s -0.35s linear infinite}.spinner__dnadot--7{animation:rotate 1.5s -0.9s linear infinite}.spinner__dnadot--8{animation:rotate 1.5s -0.15s linear infinite}.spinner__dnadot--9{animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--10{animation:rotate 1.5s 0s linear infinite}.spinner__text{text-align:center;position:relative;-webkit-margin-before:0.5em;margin-block-start:0.5em}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes rotate{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}25%{transform:translateX(-50%) translateY(1.875em) scale(2)}50%{transform:translateX(-50%) translateY(3.75em) scale(1)}75%{transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@keyframes flex{0%,100%{transform:translateX(-50%) scaleY(5)}25%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(5)}75%{transform:translateX(-50%) scaleY(1)}}';const r=class{constructor(a){n(this,a);this.hasText=false;this.type="dna";this.overlay=false}componentWillLoad(){this.hasText=!!this.el.childNodes.length}render(){return a("div",{class:"spinner","aria-busy":"true","aria-live":"polite"},a("div",{class:"spinner__loader"},this.type==="dna"&&a("div",{class:"spinner__dna"},a("div",{class:"spinner__dnatrack spinner__dnatrack--1"},a("div",{class:"spinner__dnadot spinner__dnadot--1"}),a("div",{class:"spinner__dnadot spinner__dnadot--2"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--2"},a("div",{class:"spinner__dnadot spinner__dnadot--3"}),a("div",{class:"spinner__dnadot spinner__dnadot--4"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--3"},a("div",{class:"spinner__dnadot spinner__dnadot--5"}),a("div",{class:"spinner__dnadot spinner__dnadot--6"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--4"},a("div",{class:"spinner__dnadot spinner__dnadot--7"}),a("div",{class:"spinner__dnadot spinner__dnadot--8"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--5"},a("div",{class:"spinner__dnadot spinner__dnadot--9"}),a("div",{class:"spinner__dnadot spinner__dnadot--10"}))),this.type==="circle"&&a("span",{class:"spinner__spin"})),this.hasText&&a("div",{class:"spinner__text",key:"spinner-text"},a("slot",null)),this.overlay&&a("div",{class:"spinner__overlay",key:"spinner-overlay"}))}get el(){return e(this)}};r.style=i;export{r as nano_spinner};
|
5
|
+
//# sourceMappingURL=p-6bca2d00.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["spinnerCss","Spinner","componentWillLoad","this","hasText","el","childNodes","length","render","h","class","type","key","overlay"],"sources":["./src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /**\n * @prop --base-color-rgb: default #{$progress-indicator-color-rgb}\n * @prop --indicator-color: default var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));\n * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n * @prop --overlay-color: #{$layer-overlay-light};\n */\n\n display: inline-block;\n\n // --spinner-scale: 5em;\n --base-color-rgb: #{$progress-indicator-color-rgb};\n --indicator-color:\n var(\n --nano-indicator-color,\n rgb(var(--base-color-rgb) / 100%)\n );\n --track-color: var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));\n --overlay-color: #{$layer-overlay-light};\n}\n\n.spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n :host([overlay]:not([overlay='false'])) & {\n position: absolute;\n inset: 0;\n\n .spinner__loader,\n .spinner__text {\n z-index: 1;\n }\n }\n\n &__overlay {\n background: var(--overlay-color);\n position: absolute;\n inset: 0;\n z-index: 0;\n backdrop-filter: blur(#{$layer-overlay-blur});\n }\n\n &__loader {\n font-size: var(--spinner-scale, 1em);\n }\n\n &__spin {\n display: block;\n margin: auto;\n inline-size: 1em;\n block-size: 1em;\n border-radius: 50%;\n border: solid 0.1em var(--track-color);\n border-block-start-color: var(--indicator-color);\n border-inline-end-color: var(--indicator-color);\n border-inline-start-color: var(--indicator-color);\n animation: 1s linear infinite spin;\n }\n\n &__dna {\n font-size: 0.2286em;\n display: flex;\n }\n\n &__dnatrack {\n position: relative;\n padding-block: 0;\n padding-inline: 0.625em;\n block-size: 4.375em;\n inline-size: 0.625em;\n overflow: hidden;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 1.875em;\n inset-inline-start: 50%;\n transform: translateX(-50%) translateZ(0);\n inline-size: 0.0625em;\n inline-size: #{'max(.0625em, 1px)'};\n block-size: 0.625em;\n background: var(--track-color);\n animation: flex 1.5s linear infinite;\n transform-origin: center center;\n }\n\n &--2::before {\n animation: flex 1.5s -1.3s linear infinite;\n }\n\n &--3::before {\n animation: flex 1.5s -1.1s linear infinite;\n }\n\n &--4::before {\n animation: flex 1.5s -0.9s linear infinite;\n }\n\n &--5::before {\n animation: flex 1.5s -0.75s linear infinite;\n }\n }\n\n &__dnadot {\n position: absolute;\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: 50%;\n background: var(--indicator-color);\n animation: rotate 1.5s linear infinite;\n transform-origin: center center;\n inset-inline-start: 50%;\n transform: translateX(-50%) translateZ(0) translateY(0);\n\n &--2 {\n animation: rotate 1.5s -0.75s linear infinite;\n }\n\n &--3 {\n animation: rotate 1.5s -1.3s linear infinite;\n }\n\n &--4 {\n animation: rotate 1.5s -0.55s linear infinite;\n }\n\n &--5 {\n animation: rotate 1.5s -1.1s linear infinite;\n }\n\n &--6 {\n animation: rotate 1.5s -0.35s linear infinite;\n }\n\n &--7 {\n animation: rotate 1.5s -0.9s linear infinite;\n }\n\n &--8 {\n animation: rotate 1.5s -0.15s linear infinite;\n }\n\n &--9 {\n animation: rotate 1.5s -0.75s linear infinite;\n }\n\n &--10 {\n animation: rotate 1.5s 0s linear infinite;\n }\n }\n\n &__text {\n text-align: center;\n position: relative;\n margin-block-start: 0.5em;\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes rotate {\n 0%,\n 100% {\n transform: translateX(-50%) translateY(0) scale(1);\n }\n\n 25% {\n transform: translateX(-50%) translateY(1.875em) scale(2);\n }\n\n 50% {\n transform: translateX(-50%) translateY(3.75em) scale(1);\n }\n\n 75% {\n transform: translateX(-50%) translateY(1.875em) scale(0.3);\n }\n }\n\n @keyframes flex {\n 0%,\n 100% {\n transform: translateX(-50%) scaleY(5);\n }\n\n 25% {\n transform: translateX(-50%) scaleY(1);\n }\n\n 50% {\n transform: translateX(-50%) scaleY(5);\n }\n\n 75% {\n transform: translateX(-50%) scaleY(1);\n }\n }\n}\n","import {\n Component,\n h,\n ComponentInterface,\n Prop,\n Element,\n State,\n} from '@stencil/core';\n\n/**\n * Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n */\n@Component({\n tag: 'nano-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner implements ComponentInterface {\n @Element() el: HTMLNanoSpinnerElement;\n @State() hasText: boolean = false;\n\n /** The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders. */\n @Prop() type: 'dna' | 'circle' = 'dna';\n\n /** Displays absolutely with an overlay */\n @Prop({ reflect: true }) overlay: boolean = false;\n\n componentWillLoad() {\n this.hasText = !!this.el.childNodes.length;\n }\n\n render() {\n return (\n <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n <div class=\"spinner__loader\">\n {this.type === 'dna' && (\n <div class=\"spinner__dna\">\n <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n </div>\n </div>\n )}\n {this.type === 'circle' && <span class=\"spinner__spin\"></span>}\n </div>\n {this.hasText && (\n <div class=\"spinner__text\" key=\"spinner-text\">\n <slot />\n </div>\n )}\n {this.overlay && (\n <div class=\"spinner__overlay\" key=\"spinner-overlay\"></div>\n )}\n </div>\n );\n }\n}\n"],"mappings":";;;kDAAA,MAAMA,EAAa,09G,MCkBNC,EAAO,M,sCAEU,M,UAGK,M,aAGW,K,CAE5CC,oBACEC,KAAKC,UAAYD,KAAKE,GAAGC,WAAWC,M,CAGtCC,SACE,OACEC,EAAA,OAAKC,MAAM,UAAS,YAAW,OAAM,YAAW,UAC9CD,EAAA,OAAKC,MAAM,mBACRP,KAAKQ,OAAS,OACbF,EAAA,OAAKC,MAAM,gBACTD,EAAA,OAAKC,MAAM,0CACTD,EAAA,OAAKC,MAAM,uCACXD,EAAA,OAAKC,MAAM,wCAEbD,EAAA,OAAKC,MAAM,0CACTD,EAAA,OAAKC,MAAM,uCACXD,EAAA,OAAKC,MAAM,wCAEbD,EAAA,OAAKC,MAAM,0CACTD,EAAA,OAAKC,MAAM,uCACXD,EAAA,OAAKC,MAAM,wCAEbD,EAAA,OAAKC,MAAM,0CACTD,EAAA,OAAKC,MAAM,uCACXD,EAAA,OAAKC,MAAM,wCAEbD,EAAA,OAAKC,MAAM,0CACTD,EAAA,OAAKC,MAAM,uCACXD,EAAA,OAAKC,MAAM,0CAIhBP,KAAKQ,OAAS,UAAYF,EAAA,QAAMC,MAAM,mBAExCP,KAAKC,SACJK,EAAA,OAAKC,MAAM,gBAAgBE,IAAI,gBAC7BH,EAAA,cAGHN,KAAKU,SACJJ,EAAA,OAAKC,MAAM,mBAAmBE,IAAI,oB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["getActiveElement","root","document","activeEl","activeElement","shadowRoot"],"sources":["./src/utils/active-element.ts"],"sourcesContent":["export function getActiveElement(\n root: Document | ShadowRoot = document\n): Element | null {\n const activeEl = root.activeElement;\n\n if (!activeEl) {\n return null;\n }\n\n if (activeEl.shadowRoot && activeEl.shadowRoot.activeElement) {\n return getActiveElement(activeEl.shadowRoot);\n } else {\n return activeEl;\n }\n}\n"],"mappings":";;;SAAgBA,EACdC,EAA8BC,UAE9B,MAAMC,EAAWF,EAAKG,cAEtB,IAAKD,EAAU,CACb,OAAO,I,CAGT,GAAIA,EAASE,YAAcF,EAASE,WAAWD,cAAe,CAC5D,OAAOJ,EAAiBG,EAASE,W,KAC5B,CACL,OAAOF,C,CAEX,Q"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
2
|
* Web Components for Nanopore digital Web Apps
|
3
3
|
*/
|
4
|
-
import{r as t,h as o}from"./p-
|
5
|
-
//# sourceMappingURL=p-
|
4
|
+
import{r as t,h as o}from"./p-bf91c50e.js";const e=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block}.aspect-ratio{position:relative}.aspect-ratio ::slotted(*){position:absolute !important;inset-block-start:0 !important;inset-inline-start:0 !important;inline-size:100% !important;block-size:100% !important}.aspect-ratio--cover ::slotted(embed),.aspect-ratio--cover ::slotted(iframe),.aspect-ratio--cover ::slotted(img),.aspect-ratio--cover ::slotted(video){object-fit:cover !important}.aspect-ratio--contain ::slotted(embed),.aspect-ratio--contain ::slotted(iframe),.aspect-ratio--contain ::slotted(img),.aspect-ratio--contain ::slotted(video){object-fit:contain !important}";const i=class{constructor(o){t(this,o);this.handleSlotChange=()=>{this.setAspectRatio()};this.aspectRatio="16:9";this.fit="cover"}handleAspectRatioChange(){this.setAspectRatio()}setAspectRatio(){if(typeof this.aspectRatio!=="string"){console.warn("aspectRatio should be a string.");return}else if(!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)){console.warn('aspectRatio is an incorrect format. Should be e.g. "16:9"');return}const t=this.aspectRatio.split(":");const o=parseInt(t[0]);const e=parseInt(t[1]);this.base.style.paddingBottom=o&&e?`${e/o*100}%`:null}render(){return o("div",{ref:t=>this.base=t,part:"base",class:{"aspect-ratio":true,"aspect-ratio--cover":this.fit==="cover","aspect-ratio--contain":this.fit==="contain"}},o("slot",{onSlotchange:this.handleSlotChange}))}static get watchers(){return{aspectRatio:["handleAspectRatioChange"]}}};i.style=e;export{i as nano_aspect_ratio};
|
5
|
+
//# sourceMappingURL=p-78169835.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["aspectRatioCss","AspectRatio","this","handleSlotChange","setAspectRatio","handleAspectRatioChange","aspectRatio","console","warn","match","split","x","parseInt","y","base","style","paddingBottom","render","h","ref","el","part","class","fit","onSlotchange"],"sources":["./src/components/aspect-ratio/aspect-ratio.scss?tag=nano-aspect-ratio&encapsulation=shadow","./src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.aspect-ratio {\n position: relative;\n\n ::slotted(*) {\n position: absolute !important;\n inset-block-start: 0 !important;\n inset-inline-start: 0 !important;\n inline-size: 100% !important;\n block-size: 100% !important;\n }\n\n &--cover {\n ::slotted(embed),\n ::slotted(iframe),\n ::slotted(img),\n ::slotted(video) {\n object-fit: cover !important;\n }\n }\n\n &--contain {\n ::slotted(embed),\n ::slotted(iframe),\n ::slotted(img),\n ::slotted(video) {\n object-fit: contain !important;\n }\n }\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Displays media in the desired aspect ratio.\n * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.\n * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.\n * The default aspect ratio is 16:9.\n */\n@Component({\n tag: 'nano-aspect-ratio',\n styleUrl: 'aspect-ratio.scss',\n shadow: true,\n})\nexport class AspectRatio implements ComponentInterface {\n private base: HTMLElement;\n\n /** The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`.\n * Ratios not in this format will be ignored. */\n @Prop() aspectRatio = '16:9';\n\n /** Determines how content will be resized to fit its container. */\n @Prop() fit: 'cover' | 'contain' = 'cover';\n\n @Watch('aspectRatio')\n handleAspectRatioChange() {\n this.setAspectRatio();\n }\n\n private handleSlotChange = () => {\n this.setAspectRatio();\n };\n\n private setAspectRatio() {\n if (typeof this.aspectRatio !== 'string') {\n console.warn('aspectRatio should be a string.');\n return;\n } else if (!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)) {\n console.warn('aspectRatio is an incorrect format. Should be e.g. \"16:9\"');\n return;\n }\n const split = this.aspectRatio.split(':');\n const x = parseInt(split[0]);\n const y = parseInt(split[1]);\n this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : null;\n }\n\n render() {\n return (\n <div\n ref={(el) => (this.base = el)}\n part=\"base\"\n class={{\n 'aspect-ratio': true,\n 'aspect-ratio--cover': this.fit === 'cover',\n 'aspect-ratio--contain': this.fit === 'contain',\n }}\n >\n <slot onSlotchange={this.handleSlotChange} />\n </div>\n );\n }\n}\n"],"mappings":";;;2CAAA,MAAMA,EAAiB,6rB,MCaVC,EAAW,M,yBAedC,KAAAC,iBAAmB,KACzBD,KAAKE,gBAAgB,E,iBAXD,O,SAGa,O,CAGnCC,0BACEH,KAAKE,gB,CAOCA,iBACN,UAAWF,KAAKI,cAAgB,SAAU,CACxCC,QAAQC,KAAK,mCACb,M,MACK,IAAKN,KAAKI,YAAYG,MAAM,qBAAsB,CACvDF,QAAQC,KAAK,6DACb,M,CAEF,MAAME,EAAQR,KAAKI,YAAYI,MAAM,KACrC,MAAMC,EAAIC,SAASF,EAAM,IACzB,MAAMG,EAAID,SAASF,EAAM,IACzBR,KAAKY,KAAKC,MAAMC,cAAgBL,GAAKE,EAAI,GAAIA,EAAIF,EAAK,OAAS,I,CAGjEM,SACE,OACEC,EAAA,OACEC,IAAMC,GAAQlB,KAAKY,KAAOM,EAC1BC,KAAK,OACLC,MAAO,CACL,eAAgB,KAChB,sBAAuBpB,KAAKqB,MAAQ,QACpC,wBAAyBrB,KAAKqB,MAAQ,YAGxCL,EAAA,QAAMM,aAActB,KAAKC,mB"}
|
@@ -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"./p-bf91c50e.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=p-817eda34.entry.js.map
|
@@ -0,0 +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":";;;yDAAA,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 i,c as t,h as s,g as e}from"./p-bf91c50e.js";import{g as n}from"./p-74a7fc4f.js";import{P as o}from"./p-51bc8b59.js";import{a as r}from"./p-45abbbdd.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-block-size:50vh}.dropdown__accessible-title{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}";let a=0;const d=class{constructor(s){i(this,s);this.nanoShow=t(this,"nanoShow",7);this.nanoAfterShow=t(this,"nanoAfterShow",7);this.nanoHide=t(this,"nanoHide",7);this.nanoAfterHide=t(this,"nanoAfterHide",7);this.dropdownId=`dropdown-${a++}`;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.togglePanel=()=>{if(!this.autoOpen)return;this.open?this.hide():this.show()};this.handleTriggerKeyDown=i=>{if(["ArrowDown","ArrowUp"," "].includes(i.key)){this.show();i.preventDefault();i.stopPropagation();if(this.menu)this.menu.setFocus()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.containingElement=undefined;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.dialogTitle=undefined;this.eventType=undefined}get menu(){return this.host.querySelector("nano-menu")}handleOpenChange(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()}handleTetherToChange(){this.createPopover();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){if(!this.popover)return;this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}secondaryOpen(i){if(!i.detail.secondaryMenu)return;i.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=i.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(i){if(!i.detail.secondaryMenu)return;i.stopPropagation();if(!i.target.parentElement)return;this.panel.style.minHeight=i.target.parentElement.scrollHeight+"px"}handlePanelSelect(i){const t=i.target;if(this.closeOnSelect&&t.tagName.toLowerCase()==="nano-menu")this.hide()}async show(){this.ignoreOpenWatcher=true;this.open=true;const i=this.nanoShow.emit();if(i.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return}this.popover.show();this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){this.ignoreOpenWatcher=true;this.open=false;const i=this.nanoHide.emit();if(i.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}}focusEleInDropDwn(i){var t;const s=n();if(i&&((t=i.composedPath())===null||t===void 0?void 0:t.length)){const t=i.composedPath().includes(this.containingElement);return!i.composedPath().includes(this.accessibleTrigger)&&t}return s&&s.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&s!==this.accessibleTrigger}updateAccessibleTrigger(){if(!this.didLoad)return;let i;this.accessibleTrigger=null;if(!this.tetherTo){const t=Array.from(this.host.querySelectorAll('[slot="trigger"]'));i=t.map(r)[0]}else{i=r(this.tetherTo)}if(i){i.setAttribute("aria-haspopup","true");i.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=i}}handleDocumentKeyDown(i){if(i.key==="Escape"){this.hide();return}if(i.key==="Tab"){setTimeout((()=>{if(document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(i.key)){if(!this.open||this.focusEleInDropDwn(i))return;i.preventDefault();this.menu.setFocus();return}const t=i.composedPath();if(this.menu&&t.length&&!t.find((i=>i!==this.menu))){this.menu.dispatchEvent(new KeyboardEvent(i.type,i));return}}handleDocumentMouseDown(i){if(!this.focusEleInDropDwn(i)){this.hide();return}}createPopover(){if(!this.tetherTo&&!this.trigger||!this.positioner)return;if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new o(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit(),onTransitionEnd:()=>{if(!this.open){this.panel.scrollTop=0}else if(this.menu){this.menu.showActiveElement()}}});if(this.open){this.show()}}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host}componentDidLoad(){this.didLoad=true;this.createPopover();setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){if(this.host.isConnected)this.hide();if(this.popover)this.popover.destroy()}render(){return s("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{part:"trigger",class:"dropdown__trigger",ref:i=>this.trigger=i,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:i=>this.positioner=i,class:"dropdown__positioner"},s("div",{ref:i=>this.panel=i,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:this.host.getAttribute("role")==="group"?"group":"dialog","aria-modal":this.host.getAttribute("role")==="group"?undefined:"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&s("span",{id:this.labelId,class:"dropdown__accessible-title","aria-live":this.host.getAttribute("role")==="group"?undefined:"polite"},this.dialogTitle),s("slot",null))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};d.style=h;export{d as nano_dropdown};
|
5
|
+
//# sourceMappingURL=p-866c73c0.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["dropdownCss","dropDownIds","Dropdown","this","dropdownId","labelId","ignoreOpenWatcher","didLoad","togglePanel","autoOpen","open","hide","show","handleTriggerKeyDown","event","includes","key","preventDefault","stopPropagation","menu","setFocus","handleTriggerSlotChange","updateAccessibleTrigger","host","querySelector","handleOpenChange","accessibleTrigger","setAttribute","toString","handleTetherToChange","createPopover","handlePopoverOptionsChange","popover","setOptions","strategy","hoist","placement","skidding","distance","secondaryOpen","ev","detail","secondaryMenu","panel","classList","add","addEventListener","remove","once","style","minHeight","scrollHeight","secondaryClose","target","parentElement","handlePanelSelect","closeOnSelect","tagName","toLowerCase","async","nanoShow","emit","defaultPrevented","document","handleDocumentMouseDown","handleDocumentKeyDown","nanoHide","removeEventListener","focusEleInDropDwn","focus","e","activeElement","getActiveElement","_a","composedPath","length","ddInPath","containingElement","closest","tetherTo","assignedElements","Array","from","querySelectorAll","map","getNearestTabbableElement","setTimeout","ePath","find","el","dispatchEvent","KeyboardEvent","type","trigger","positioner","destroy","Popover","transitionElement","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","onTransitionEnd","scrollTop","showActiveElement","connectedCallback","bind","componentDidLoad","disconnectedCallback","isConnected","render","h","part","id","class","dropdown","ref","onKeyDown","onClick","name","onSlotchange","split","join","role","getAttribute","undefined","dialogTitle"],"sources":["./src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /**\n * @prop --width: width of the dropdown. Defaults to 'auto'\n * @prop --border: Defaults to #{$layer-border-style}\n * @prop --border-radius: Defaults to #{$layer-bg-color};\n * @prop --background: Defaults to #{$layer-bg-color};\n * @prop --padding: padding of the drop down. Default to '10px 0';\n * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n * @prop --dropdown-z-index: Defaults to #{$layer-index-dropdown};\n * @prop --min-width: Defaults to 0;\n * @prop --box-shadow: #{$layer-shadow-large};\n */\n\n --width: auto;\n --border: #{$layer-border-style};\n --border-radius: #{$layer-border-radius};\n --background: #{$layer-bg-color};\n --padding: 10px 0;\n --overflow: hidden;\n --dropdown-z-index: #{$layer-index-dropdown};\n --min-width: 0;\n --box-shadow: #{$layer-shadow-large};\n\n display: flex;\n}\n\n.dropdown {\n position: relative;\n\n &__trigger {\n display: block;\n }\n\n &__positioner {\n position: absolute;\n z-index: var(--dropdown-z-index);\n min-inline-size: var(--min-width);\n\n @media (max-width: 35.9375em) {\n z-index: 100;\n }\n }\n\n &__panel {\n padding: var(--padding);\n background: var(--background);\n min-inline-size: var(--min-width);\n inline-size: var(--width);\n border: var(--border);\n border-radius: var(--border-radius);\n color: currentcolor;\n box-shadow: var(--box-shadow);\n opacity: 0;\n transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;\n min-block-size: 20px;\n overflow: var(--overflow);\n box-sizing: content-box !important;\n\n &.loading {\n overflow-y: hidden;\n }\n\n &.top {\n transform: translateY(-20px) translateZ(0);\n }\n\n &.bottom {\n transform: translateY(20px) translateZ(0);\n }\n\n .dropdown__positioner.popover-visible & {\n opacity: 1;\n transform: translateY(0) translateZ(0);\n }\n\n ::slotted(nano-menu) {\n max-block-size: 50vh;\n }\n }\n\n &__accessible-title {\n @include visually-hide();\n }\n}\n","import {\n Component,\n Element,\n Event,\n Method,\n Prop,\n Watch,\n h,\n Listen,\n ComponentInterface,\n EventEmitter,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n tag: 'nano-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n private dropdownId = `dropdown-${dropDownIds++}`;\n private labelId = this.dropdownId + '-title';\n private ignoreOpenWatcher = false;\n private panel: HTMLElement;\n private popover: Popover;\n private trigger: HTMLElement;\n private positioner: HTMLElement;\n private accessibleTrigger: HTMLElement;\n private didLoad = false;\n private get menu() {\n return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n }\n\n @Element() host: HTMLNanoDropdownElement;\n\n /** Determines if the dropdown should open automatically when the trigger is clicked */\n @Prop() autoOpen = true;\n\n /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n if (this.ignoreOpenWatcher) return;\n\n this.open ? this.show() : this.hide();\n\n if (this.accessibleTrigger) {\n this.accessibleTrigger.setAttribute(\n 'aria-expanded',\n this.open.toString()\n );\n return;\n }\n\n this.updateAccessibleTrigger();\n }\n\n /**\n * Determines whether the dropdown should hide when a menu item is selected.\n */\n @Prop() closeOnSelect = true;\n\n /**\n * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n */\n @Prop({ mutable: true }) containingElement: HTMLElement;\n\n /**\n * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n */\n @Prop() tetherTo: HTMLElement = null;\n\n @Watch('tetherTo')\n handleTetherToChange() {\n this.createPopover();\n this.updateAccessibleTrigger();\n }\n\n /**\n * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n * inside of the viewport.\n */\n @Prop() placement: PopoverPlacement = 'bottom-start';\n\n /**\n * The distance in pixels from which to offset the panel away from its trigger.\n */\n @Prop() distance = 2;\n\n /**\n * The distance in pixels from which to offset the panel along its trigger.\n */\n @Prop() skidding = 0;\n\n /**\n * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`.\n */\n @Prop() hoist = false;\n\n @Watch('placement')\n @Watch('distance')\n @Watch('skidding')\n @Watch('hoist')\n handlePopoverOptionsChange() {\n if (!this.popover) return;\n\n this.popover.setOptions({\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n skidding: this.skidding,\n distance: this.distance,\n });\n }\n\n /**\n * Title used to describe the dropdown content for accessibility\n */\n @Prop() dialogTitle!: string;\n\n // Events\n\n /**\n * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n */\n @Event() nanoShow: EventEmitter;\n\n /**\n * Emitted after the dropdown opens and all transitions are complete.\n */\n @Event() nanoAfterShow: EventEmitter;\n\n /**\n * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n */\n @Event() nanoHide: EventEmitter;\n\n /**\n * Emitted after the dropdown closes and all transitions are complete.\n */\n @Event() nanoAfterHide: EventEmitter;\n\n // this is a massive hack to make stencil expose the `EventEmitter` type in the final build\n // because the `Dropdown` class is used as a type in `nano-datalist`\n /** @internal */\n @Prop() eventType: EventEmitter;\n\n // Listeners\n\n @Listen('nanoOpen')\n secondaryOpen(ev: CustomEvent) {\n if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n ev.stopPropagation();\n\n this.panel.classList.add('loading');\n this.panel.addEventListener(\n 'transitionend',\n () => {\n this.panel.classList.remove('loading');\n },\n { once: true }\n );\n\n this.panel.style.minHeight =\n (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n }\n\n @Listen('nanoClose')\n secondaryClose(ev: CustomEvent) {\n if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n ev.stopPropagation();\n if (!(ev.target as HTMLElement).parentElement) return;\n this.panel.style.minHeight =\n (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n }\n\n @Listen('nanoSelect')\n handlePanelSelect(event: CustomEvent) {\n const target = event.target as HTMLElement;\n\n // Hide the dropdown when a menu item is selected\n if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n this.hide();\n }\n\n // Methods\n\n /** Shows the dropdown panel */\n @Method()\n async show() {\n this.ignoreOpenWatcher = true;\n this.open = true;\n\n const nanoShow = this.nanoShow.emit();\n\n if (nanoShow.defaultPrevented) {\n this.open = false;\n this.ignoreOpenWatcher = false;\n return;\n }\n\n this.popover.show();\n this.ignoreOpenWatcher = false;\n\n document.addEventListener('mousedown', this.handleDocumentMouseDown);\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n /** Hides the dropdown panel */\n @Method()\n async hide() {\n this.ignoreOpenWatcher = true;\n this.open = false;\n\n const nanoHide = this.nanoHide.emit();\n\n if (nanoHide.defaultPrevented) {\n this.open = true;\n this.ignoreOpenWatcher = false;\n return;\n }\n\n if (this.popover) this.popover.hide();\n this.ignoreOpenWatcher = false;\n\n document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n this.accessibleTrigger.focus();\n }\n }\n\n // Private methods\n\n /**\n * Decides if the current active element or element\n * connected to the current event is connected to the Dropdown\n * @param e\n * @returns whether the current focus is within the dropdown\n */\n private focusEleInDropDwn(e?: Event) {\n const activeElement = getActiveElement();\n\n if (e && e.composedPath()?.length) {\n const ddInPath = e.composedPath().includes(this.containingElement);\n return !e.composedPath().includes(this.accessibleTrigger) && ddInPath;\n }\n\n return (\n activeElement &&\n activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n this.containingElement &&\n activeElement !== this.accessibleTrigger\n );\n }\n\n private togglePanel = () => {\n if (!this.autoOpen) return;\n this.open ? this.hide() : this.show();\n };\n\n // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n private updateAccessibleTrigger() {\n if (!this.didLoad) return;\n\n let accessibleTrigger: HTMLElement;\n this.accessibleTrigger = null;\n\n if (!this.tetherTo) {\n const assignedElements = Array.from(\n this.host.querySelectorAll('[slot=\"trigger\"]')\n );\n accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n } else {\n accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n }\n\n if (accessibleTrigger) {\n accessibleTrigger.setAttribute('aria-haspopup', 'true');\n accessibleTrigger.setAttribute(\n 'aria-expanded',\n this.open ? 'true' : 'false'\n );\n this.accessibleTrigger = accessibleTrigger;\n }\n }\n\n // Handlers\n\n private handleDocumentKeyDown(event: KeyboardEvent) {\n // Close when escape is pressed\n if (event.key === 'Escape') {\n this.hide();\n return;\n }\n\n // Close when tabbing results in the focus leaving the close element\n if (event.key === 'Tab') {\n setTimeout(() => {\n if (\n document.activeElement &&\n document.activeElement.closest(\n this.containingElement.tagName.toLowerCase()\n ) !== this.containingElement\n ) {\n this.hide();\n return;\n }\n });\n }\n\n // If a menu is present, focus on it when certain keys are pressed\n if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n // must have menu item, must have pressed down, must be open and must not have focus within dd\n if (!this.open || this.focusEleInDropDwn(event)) return;\n event.preventDefault();\n this.menu.setFocus();\n return;\n }\n\n // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n const ePath = event.composedPath();\n if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n return;\n }\n }\n\n private handleDocumentMouseDown(event: MouseEvent) {\n // Close when clicking outside of the close element\n\n if (!this.focusEleInDropDwn(event)) {\n this.hide();\n return;\n }\n }\n\n private handleTriggerKeyDown = (event: KeyboardEvent) => {\n // Open the panel when pressing down or up while focused on the trigger\n if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n this.show();\n event.preventDefault();\n event.stopPropagation();\n\n if (this.menu) this.menu.setFocus();\n }\n };\n\n private handleTriggerSlotChange = () => {\n this.updateAccessibleTrigger();\n };\n\n private createPopover() {\n if ((!this.tetherTo && !this.trigger) || !this.positioner) return;\n\n if (this.popover) {\n if (this.open) this.hide();\n this.popover.destroy();\n this.popover = null;\n }\n\n this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.panel,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n onTransitionEnd: () => {\n if (!this.open) {\n this.panel.scrollTop = 0;\n } else if (this.menu) {\n this.menu.showActiveElement();\n }\n },\n });\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n // Stencil hooks\n\n connectedCallback() {\n this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n if (!this.containingElement) this.containingElement = this.host;\n }\n\n componentDidLoad() {\n this.didLoad = true;\n this.createPopover();\n setTimeout(() => this.updateAccessibleTrigger(), 100);\n }\n\n disconnectedCallback() {\n if (this.host.isConnected) this.hide();\n if (this.popover) this.popover.destroy();\n }\n\n render() {\n return (\n <div\n part=\"base\"\n id={this.dropdownId}\n class={{\n dropdown: true,\n 'dropdown--open': this.open,\n }}\n >\n <span\n part=\"trigger\"\n class=\"dropdown__trigger\"\n ref={(el) => (this.trigger = el)}\n onKeyDown={this.handleTriggerKeyDown}\n onClick={this.togglePanel}\n >\n <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n </span>\n\n <div ref={(el) => (this.positioner = el)} class=\"dropdown__positioner\">\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n aria-hidden={!this.open}\n role={\n this.host.getAttribute('role') === 'group' ? 'group' : 'dialog'\n }\n aria-modal={\n this.host.getAttribute('role') === 'group' ? undefined : 'true'\n }\n aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n >\n {this.dialogTitle && (\n <span\n id={this.labelId}\n class=\"dropdown__accessible-title\"\n aria-live={\n this.host.getAttribute('role') === 'group'\n ? undefined\n : 'polite'\n }\n >\n {this.dialogTitle}\n </span>\n )}\n <slot />\n </div>\n </div>\n </div>\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,c as e,h as i,a as r,g as s}from"./p-bf91c50e.js";import{M as a}from"./p-e04f2333.js";import{u as n,l as o}from"./p-45b7682a.js";import"./p-45abbbdd.js";import"./p-257432ff.js";const l=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{position:relative;display:block;--size:25rem;--panel-background-color:white;--panel-shadow:0 4px 16px rgb(0 0 0 / 10%);--overlay-color:hsl(203deg 10% 20% / 50%)}.drawer{inset-block-start:0;inset-inline-start:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:2000}.drawer__panel{position:absolute;display:flex;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--panel-background-color);box-shadow:var(--panel-shadow);transition:250ms transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--start .drawer__panel{transform:translate3d(-100%, 0, 0);inset-block:0 auto;width:var(--size);height:100%}.drawer--start .drawer__panel[dir=rtl]{transform:translate3d(calc(-1 * -100%), 0, 0)}.drawer--end .drawer__panel{transform:translate3d(100%, 0, 0);inset-block:0 auto;width:var(--size);height:100%}.drawer--end .drawer__panel[dir=rtl]{transform:translate3d(calc(-1 * 100%), 0, 0)}.drawer--top .drawer__panel{inset-inline:auto 0;inset-block:0 auto;width:100%;height:var(--size);transform:translate(0, -100%)}.drawer--bottom .drawer__panel{inset-inline:auto 0;inset-block:auto 0;width:100%;height:var(--size);transform:translate(0, 100%)}.drawer--open .drawer__panel{transform:translate(0, 0)}.drawer__header{display:flex}.drawer__title{flex:1 1 auto;padding:20px}.drawer__close{flex:0 0 auto;display:flex;align-items:center}.drawer__body{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:end}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--overlay-color);opacity:0;transition:250ms opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:1}";let h=0;const d=class{constructor(i){t(this,i);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7);this.nanoOverlayDismiss=e(this,"nanoOverlayDismiss",7);this.componentId=`drawer-${++h}`;this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.placement="end";this.contained=false;this.noHeader=false;this.type="overlay";this.contentSelector=undefined}handleOpenChange(){this.open?this.show():this.hide()}handleTypeChange(){if(this.type!=="push"&&this.type!=="reveal")return;if(!this.contentEle){this.type="overlay";console.warn("a valid contentSelector must be set");return}}handleContentSelector(){if(!this.contentSelector)this.contentEle=null;else this.contentEle=this.host.ownerDocument.querySelector(this.contentSelector)}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this);this.handleTransitionEnd=this.handleTransitionEnd.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.handleOverlayClick=this.handleOverlayClick.bind(this);this.handleSlotChange=this.handleSlotChange.bind(this);this.modal=new a(this.host)}componentWillLoad(){if(this.open){this.show()}this.handleContentSelector()}disconnectedCallback(){n(this.host)}async show(){if(this.isVisible){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;if(!this.contained){this.modal.activate();o(this.host)}if(!this.contentEle||this.type!=="push"&&this.type!=="reveal")return;this.contentEle.style.right="0";this.contentEle.style.transition="all ease 250ms";this.contentEle.style.position="relative";this.contentEle.style.overflow="hidden";setTimeout((t=>this.contentEle.style.right="25rem"),0)}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.open=false;this.modal.deactivate();n(this.host);if(!this.contentEle)return;this.contentEle.style.transition="";this.contentEle.style.position="";this.contentEle.style.overflow="";this.contentEle.style.right=""}handleCloseClick(){this.hide()}handleKeyDown(t){if(t.key==="Escape"){this.hide()}}handleOverlayClick(){const t=this.nanoOverlayDismiss.emit();if(!t.defaultPrevented){this.hide()}}handleSlotChange(){this.hasFooter=!!this.host.querySelector('[slot="footer"]')}handleTransitionEnd(t){const e=t.target;if(t.propertyName==="transform"&&e.classList.contains("drawer__panel")){this.isVisible=this.open;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit();if(this.open){this.panel.focus()}}}render(){const t="drawer--"+this.placement;const e="drawer--"+this.type;return i(r,null,i("div",{part:"base",class:{drawer:true,"drawer--open":this.open,"drawer--visible":this.isVisible,[e]:true,[t]:true,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},i("div",{part:"overlay",class:"drawer__overlay",onClick:this.handleOverlayClick}),i("div",{ref:t=>this.panel=t,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},!this.noHeader&&i("header",{part:"header",class:"drawer__header"},i("span",{part:"title",class:"drawer__title",id:`${this.componentId}-title`},i("slot",{name:"label"},this.label||String.fromCharCode(65279)))),i("div",{part:"body",class:"drawer__body"},i("slot",null)),i("footer",{part:"footer",class:"drawer__footer"},i("slot",{name:"footer",onSlotchange:this.handleSlotChange})))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],type:["handleTypeChange"],contentSelector:["handleContentSelector"]}}};d.style=l;export{d as nano_drawer};
|
5
|
+
//# sourceMappingURL=p-87a76a81.entry.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"names":["drawerCss","id","Drawer","this","componentId","[object Object]","open","show","hide","type","contentEle","console","warn","contentSelector","host","ownerDocument","querySelector","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","handleContentSelector","unlockBodyScrolling","isVisible","nanoShow","emit","defaultPrevented","contained","activate","lockBodyScrolling","style","right","transition","position","overflow","setTimeout","_","nanoHide","deactivate","event","key","slOverlayDismiss","nanoOverlayDismiss","hasFooter","target","propertyName","classList","contains","nanoAfterShow","nanoAfterHide","panel","focus","placementClass","placement","typeClass","h","Host","part","class","drawer","drawer--open","drawer--visible","drawer--contained","drawer--fixed","drawer--has-footer","onKeyDown","onTransitionEnd","onClick","ref","el","role","aria-modal","aria-hidden","aria-label","noHeader","label","aria-labelledby","tabIndex","name","String","fromCharCode","onSlotchange"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/utilities/css-patterns/visually_hidden';\n\n:host {\n /**\n * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n * @prop --panel-background-color: background color of panel. Default to 'white'\n * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';\n * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';\n */\n\n position: relative;\n display: block;\n\n --size: 25rem;\n --panel-background-color: white;\n --panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n --overlay-color: hsla(203, 10%, 20%, 0.5);\n}\n\n.drawer {\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n\n &:not(.drawer--visible) {\n @include hidden;\n }\n}\n\n.drawer--contained {\n position: absolute;\n z-index: initial;\n}\n\n.drawer--fixed {\n position: fixed;\n z-index: 2000;\n}\n\n.drawer__panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n z-index: 2;\n max-width: 100%;\n max-height: 100%;\n background-color: var(--panel-background-color);\n box-shadow: var(--panel-shadow);\n transition: 250ms transform;\n overflow: auto;\n pointer-events: all;\n\n &:focus {\n outline: none;\n }\n}\n\n.drawer--start .drawer__panel {\n @include transform(translate3d(-100%, 0, 0));\n\n inset-block: 0 auto;\n width: var(--size);\n height: 100%;\n}\n\n.drawer--end .drawer__panel {\n @include transform(translate3d(100%, 0, 0));\n\n inset-block: 0 auto;\n width: var(--size);\n height: 100%;\n}\n\n.drawer--top .drawer__panel {\n inset-inline: auto 0;\n inset-block: 0 auto;\n width: 100%;\n height: var(--size);\n transform: translate(0, -100%);\n}\n\n.drawer--bottom .drawer__panel {\n inset-inline: auto 0;\n inset-block: auto 0;\n width: 100%;\n height: var(--size);\n transform: translate(0, 100%);\n}\n\n.drawer--open .drawer__panel {\n transform: translate(0, 0);\n}\n\n.drawer__header {\n display: flex;\n}\n\n.drawer__title {\n flex: 1 1 auto;\n // font-size: var(--sl-font-size-large);\n // line-height: var(--sl-line-height-dense);\n padding: 20px;\n}\n\n.drawer__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n // font-size: var(--sl-font-size-x-large);\n // padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n flex: 1 1 auto;\n // padding: var(--sl-spacing-large);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n text-align: end;\n // padding: var(--sl-spacing-large);\n\n // ::slotted(sl-button:not(:last-of-type)) {\n // margin-right: var(--sl-spacing-x-small);\n // }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n display: none;\n}\n\n.drawer__overlay {\n display: block;\n position: fixed;\n inset: 0;\n background-color: var(--overlay-color);\n opacity: 0;\n transition: 250ms opacity;\n pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n opacity: 1;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\n\nlet id = 0;\n\n/**\n * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24\n * @slot - The drawer's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n */\n@Component({\n tag: 'nano-drawer',\n styleUrl: 'drawer.scss',\n shadow: true,\n})\nexport class Drawer {\n private componentId = `drawer-${++id}`;\n private modal: Modal;\n private panel: HTMLElement;\n private contentEle: HTMLElement;\n\n @Element() host: HTMLNanoDrawerElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /**\n * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.\n */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /**\n * The drawer's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility.\n */\n @Prop() label = '';\n\n /** The direction from which the drawer will open. */\n @Prop() placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n /**\n * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this prop and add `position: relative` to the parent.\n */\n @Prop() contained = false;\n\n /**\n * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n * accessible way for users to dismiss the drawer.\n */\n @Prop() noHeader = false;\n\n /**\n * The display type of the drawer\n */\n @Prop() type: 'overlay' | 'reveal' | 'push' = 'overlay';\n\n /**\n * Required for 'reveal' and 'push' types\n * A valid DOM selector of the content element that this drawer will push or reveal underneath\n * Please remember - elements wrapping the content element must be 'overflow: hidden'\n * otherwise menus will be shown when closed\n */\n @Prop() contentSelector: string;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n @Watch('type')\n handleTypeChange() {\n if (this.type !== 'push' && this.type !== 'reveal') return;\n if (!this.contentEle) {\n this.type = 'overlay';\n console.warn('a valid contentSelector must be set');\n return;\n }\n }\n\n @Watch('contentSelector')\n handleContentSelector() {\n if (!this.contentSelector) this.contentEle = null;\n else\n this.contentEle = (this.host.ownerDocument as Document).querySelector(\n this.contentSelector\n );\n }\n\n /**\n * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.\n */\n @Event() nanoShow: EventEmitter;\n\n /**\n * Emitted after the drawer opens and all transitions are complete.\n */\n @Event() nanoAfterShow: EventEmitter;\n\n /**\n * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.\n */\n @Event() nanoHide: EventEmitter;\n\n /**\n * Emitted after the drawer closes and all transitions are complete.\n */\n @Event() nanoAfterHide: EventEmitter;\n\n /**\n * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.\n */\n @Event() nanoOverlayDismiss: EventEmitter;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleOverlayClick = this.handleOverlayClick.bind(this);\n this.handleSlotChange = this.handleSlotChange.bind(this);\n\n this.modal = new Modal(this.host);\n }\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n this.handleContentSelector();\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /** Shows the drawer */\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n\n if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))\n return;\n this.contentEle.style.right = '0';\n this.contentEle.style.transition = 'all ease 250ms';\n this.contentEle.style.position = 'relative';\n this.contentEle.style.overflow = 'hidden';\n setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);\n }\n\n /** Hides the drawer */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.open = false;\n this.modal.deactivate();\n\n unlockBodyScrolling(this.host);\n\n if (!this.contentEle) return;\n this.contentEle.style.transition = '';\n this.contentEle.style.position = '';\n this.contentEle.style.overflow = '';\n this.contentEle.style.right = '';\n }\n\n private handleCloseClick() {\n this.hide();\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n this.hide();\n }\n }\n\n private handleOverlayClick() {\n const slOverlayDismiss = this.nanoOverlayDismiss.emit();\n\n if (!slOverlayDismiss.defaultPrevented) {\n this.hide();\n }\n }\n\n private handleSlotChange() {\n this.hasFooter = !!this.host.querySelector('[slot=\"footer\"]');\n }\n\n private handleTransitionEnd(event: TransitionEvent) {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (\n event.propertyName === 'transform' &&\n target.classList.contains('drawer__panel')\n ) {\n this.isVisible = this.open;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n\n if (this.open) {\n this.panel.focus();\n }\n }\n }\n\n render() {\n const placementClass = 'drawer--' + this.placement;\n const typeClass = 'drawer--' + this.type;\n\n return (\n <Host>\n <div\n part=\"base\"\n class={{\n drawer: true,\n 'drawer--open': this.open,\n 'drawer--visible': this.isVisible,\n [typeClass]: true,\n [placementClass]: true,\n 'drawer--contained': this.contained,\n 'drawer--fixed': !this.contained,\n 'drawer--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div\n part=\"overlay\"\n class=\"drawer__overlay\"\n onClick={this.handleOverlayClick}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"drawer__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"drawer__header\">\n <span\n part=\"title\"\n class=\"drawer__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label || String.fromCharCode(65279)}\n </slot>\n </span>\n {/* <sl-icon-button part=\"close-button\" class=\"drawer__close\" name=\"x\" onClick={this.handleCloseClick} /> */}\n </header>\n )}\n\n <div part=\"body\" class=\"drawer__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"drawer__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
1
|
+
{"version":3,"names":["drawerCss","id","Drawer","this","componentId","handleOpenChange","open","show","hide","handleTypeChange","type","contentEle","console","warn","handleContentSelector","contentSelector","host","ownerDocument","querySelector","connectedCallback","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","componentWillLoad","disconnectedCallback","unlockBodyScrolling","async","isVisible","nanoShow","emit","defaultPrevented","contained","activate","lockBodyScrolling","style","right","transition","position","overflow","setTimeout","_","nanoHide","deactivate","event","key","slOverlayDismiss","nanoOverlayDismiss","hasFooter","target","propertyName","classList","contains","nanoAfterShow","nanoAfterHide","panel","focus","render","placementClass","placement","typeClass","h","Host","part","class","drawer","onKeyDown","onTransitionEnd","onClick","ref","el","role","noHeader","label","tabIndex","name","String","fromCharCode","onSlotchange"],"sources":["./src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","./src/components/drawer/drawer.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/utilities/css-patterns/visually_hidden';\n\n:host {\n /**\n * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n * @prop --panel-background-color: background color of panel. Default to 'white'\n * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';\n * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';\n */\n\n position: relative;\n display: block;\n\n --size: 25rem;\n --panel-background-color: white;\n --panel-shadow: 0 4px 16px rgb(0 0 0 / 10%);\n --overlay-color: hsl(203deg 10% 20% / 50%);\n}\n\n.drawer {\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n\n &:not(.drawer--visible) {\n @include hidden;\n }\n}\n\n.drawer--contained {\n position: absolute;\n z-index: initial;\n}\n\n.drawer--fixed {\n position: fixed;\n z-index: 2000;\n}\n\n.drawer__panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n z-index: 2;\n max-width: 100%;\n max-height: 100%;\n background-color: var(--panel-background-color);\n box-shadow: var(--panel-shadow);\n transition: 250ms transform;\n overflow: auto;\n pointer-events: all;\n\n &:focus {\n outline: none;\n }\n}\n\n.drawer--start .drawer__panel {\n @include transform(translate3d(-100%, 0, 0));\n\n inset-block: 0 auto;\n width: var(--size);\n height: 100%;\n}\n\n.drawer--end .drawer__panel {\n @include transform(translate3d(100%, 0, 0));\n\n inset-block: 0 auto;\n width: var(--size);\n height: 100%;\n}\n\n.drawer--top .drawer__panel {\n inset-inline: auto 0;\n inset-block: 0 auto;\n width: 100%;\n height: var(--size);\n transform: translate(0, -100%);\n}\n\n.drawer--bottom .drawer__panel {\n inset-inline: auto 0;\n inset-block: auto 0;\n width: 100%;\n height: var(--size);\n transform: translate(0, 100%);\n}\n\n.drawer--open .drawer__panel {\n transform: translate(0, 0);\n}\n\n.drawer__header {\n display: flex;\n}\n\n.drawer__title {\n flex: 1 1 auto;\n // font-size: var(--sl-font-size-large);\n // line-height: var(--sl-line-height-dense);\n padding: 20px;\n}\n\n.drawer__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n // font-size: var(--sl-font-size-x-large);\n // padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n flex: 1 1 auto;\n // padding: var(--sl-spacing-large);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n text-align: end;\n // padding: var(--sl-spacing-large);\n\n // ::slotted(sl-button:not(:last-of-type)) {\n // margin-right: var(--sl-spacing-x-small);\n // }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n display: none;\n}\n\n.drawer__overlay {\n display: block;\n position: fixed;\n inset: 0;\n background-color: var(--overlay-color);\n opacity: 0;\n transition: 250ms opacity;\n pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n opacity: 1;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\n\nlet id = 0;\n\n/**\n * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24\n * @slot - The drawer's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n */\n@Component({\n tag: 'nano-drawer',\n styleUrl: 'drawer.scss',\n shadow: true,\n})\nexport class Drawer {\n private componentId = `drawer-${++id}`;\n private modal: Modal;\n private panel: HTMLElement;\n private contentEle: HTMLElement;\n\n @Element() host: HTMLNanoDrawerElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /**\n * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.\n */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /**\n * The drawer's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility.\n */\n @Prop() label = '';\n\n /** The direction from which the drawer will open. */\n @Prop() placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n /**\n * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this prop and add `position: relative` to the parent.\n */\n @Prop() contained = false;\n\n /**\n * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n * accessible way for users to dismiss the drawer.\n */\n @Prop() noHeader = false;\n\n /**\n * The display type of the drawer\n */\n @Prop() type: 'overlay' | 'reveal' | 'push' = 'overlay';\n\n /**\n * Required for 'reveal' and 'push' types\n * A valid DOM selector of the content element that this drawer will push or reveal underneath\n * Please remember - elements wrapping the content element must be 'overflow: hidden'\n * otherwise menus will be shown when closed\n */\n @Prop() contentSelector: string;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n @Watch('type')\n handleTypeChange() {\n if (this.type !== 'push' && this.type !== 'reveal') return;\n if (!this.contentEle) {\n this.type = 'overlay';\n console.warn('a valid contentSelector must be set');\n return;\n }\n }\n\n @Watch('contentSelector')\n handleContentSelector() {\n if (!this.contentSelector) this.contentEle = null;\n else\n this.contentEle = (this.host.ownerDocument as Document).querySelector(\n this.contentSelector\n );\n }\n\n /**\n * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.\n */\n @Event() nanoShow: EventEmitter;\n\n /**\n * Emitted after the drawer opens and all transitions are complete.\n */\n @Event() nanoAfterShow: EventEmitter;\n\n /**\n * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.\n */\n @Event() nanoHide: EventEmitter;\n\n /**\n * Emitted after the drawer closes and all transitions are complete.\n */\n @Event() nanoAfterHide: EventEmitter;\n\n /**\n * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.\n */\n @Event() nanoOverlayDismiss: EventEmitter;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleOverlayClick = this.handleOverlayClick.bind(this);\n this.handleSlotChange = this.handleSlotChange.bind(this);\n\n this.modal = new Modal(this.host);\n }\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n this.handleContentSelector();\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /** Shows the drawer */\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n\n if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))\n return;\n this.contentEle.style.right = '0';\n this.contentEle.style.transition = 'all ease 250ms';\n this.contentEle.style.position = 'relative';\n this.contentEle.style.overflow = 'hidden';\n setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);\n }\n\n /** Hides the drawer */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const nanoHide = this.nanoHide.emit();\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.open = false;\n this.modal.deactivate();\n\n unlockBodyScrolling(this.host);\n\n if (!this.contentEle) return;\n this.contentEle.style.transition = '';\n this.contentEle.style.position = '';\n this.contentEle.style.overflow = '';\n this.contentEle.style.right = '';\n }\n\n private handleCloseClick() {\n this.hide();\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n this.hide();\n }\n }\n\n private handleOverlayClick() {\n const slOverlayDismiss = this.nanoOverlayDismiss.emit();\n\n if (!slOverlayDismiss.defaultPrevented) {\n this.hide();\n }\n }\n\n private handleSlotChange() {\n this.hasFooter = !!this.host.querySelector('[slot=\"footer\"]');\n }\n\n private handleTransitionEnd(event: TransitionEvent) {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (\n event.propertyName === 'transform' &&\n target.classList.contains('drawer__panel')\n ) {\n this.isVisible = this.open;\n this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n\n if (this.open) {\n this.panel.focus();\n }\n }\n }\n\n render() {\n const placementClass = 'drawer--' + this.placement;\n const typeClass = 'drawer--' + this.type;\n\n return (\n <Host>\n <div\n part=\"base\"\n class={{\n drawer: true,\n 'drawer--open': this.open,\n 'drawer--visible': this.isVisible,\n [typeClass]: true,\n [placementClass]: true,\n 'drawer--contained': this.contained,\n 'drawer--fixed': !this.contained,\n 'drawer--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div\n part=\"overlay\"\n class=\"drawer__overlay\"\n onClick={this.handleOverlayClick}\n />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"drawer__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={\n !this.noHeader ? `${this.componentId}-title` : null\n }\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"drawer__header\">\n <span\n part=\"title\"\n class=\"drawer__title\"\n id={`${this.componentId}-title`}\n >\n <slot name=\"label\">\n {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label || String.fromCharCode(65279)}\n </slot>\n </span>\n {/* <sl-icon-button part=\"close-button\" class=\"drawer__close\" name=\"x\" onClick={this.handleCloseClick} /> */}\n </header>\n )}\n\n <div part=\"body\" class=\"drawer__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"drawer__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|