@six-group/ui-library 4.1.2 → 4.2.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/dist/cjs/app-globals-3a1e7e63.js +7 -0
- package/dist/cjs/app-globals-3a1e7e63.js.map +1 -0
- package/dist/cjs/{form-control-8d64e974.js → form-control-73ff961d.js} +2 -2
- package/dist/cjs/{form-control-8d64e974.js.map → form-control-73ff961d.js.map} +1 -1
- package/dist/cjs/{index-d7748d51.js → index-b288f7d9.js} +70 -28
- package/dist/cjs/index-b288f7d9.js.map +1 -0
- package/dist/cjs/loader.cjs.js +5 -3
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/{modal-3ce015be.js → modal-bd7fc5bc.js} +1 -18
- package/dist/cjs/modal-bd7fc5bc.js.map +1 -0
- package/dist/cjs/six-alert.cjs.entry.js +5 -4
- package/dist/cjs/six-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/six-avatar.cjs.entry.js +4 -3
- package/dist/cjs/six-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/six-badge.cjs.entry.js +5 -4
- package/dist/cjs/six-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/six-button.cjs.entry.js +5 -4
- package/dist/cjs/six-button.cjs.entry.js.map +1 -1
- package/dist/cjs/six-card.cjs.entry.js +4 -3
- package/dist/cjs/six-card.cjs.entry.js.map +1 -1
- package/dist/cjs/six-checkbox_2.cjs.entry.js +10 -8
- package/dist/cjs/six-checkbox_2.cjs.entry.js.map +1 -1
- package/dist/cjs/six-datepicker.cjs.entry.js +4 -3
- package/dist/cjs/six-datepicker.cjs.entry.js.map +1 -1
- package/dist/cjs/six-details.cjs.entry.js +6 -5
- package/dist/cjs/six-details.cjs.entry.js.map +1 -1
- package/dist/cjs/six-dialog.cjs.entry.js +12 -30
- package/dist/cjs/six-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/six-drawer.cjs.entry.js +13 -30
- package/dist/cjs/six-drawer.cjs.entry.js.map +1 -1
- package/dist/cjs/six-dropdown_2.cjs.entry.js +12 -10
- package/dist/cjs/six-dropdown_2.cjs.entry.js.map +1 -1
- package/dist/cjs/six-error-page.cjs.entry.js +4 -3
- package/dist/cjs/six-error-page.cjs.entry.js.map +1 -1
- package/dist/cjs/six-error.cjs.entry.js +4 -3
- package/dist/cjs/six-error.cjs.entry.js.map +1 -1
- package/dist/cjs/six-file-list-item.cjs.entry.js +5 -4
- package/dist/cjs/six-file-list-item.cjs.entry.js.map +1 -1
- package/dist/cjs/six-file-list.cjs.entry.js +4 -3
- package/dist/cjs/six-file-list.cjs.entry.js.map +1 -1
- package/dist/cjs/six-file-upload.cjs.entry.js +11 -9
- package/dist/cjs/six-file-upload.cjs.entry.js.map +1 -1
- package/dist/cjs/six-footer.cjs.entry.js +4 -3
- package/dist/cjs/six-footer.cjs.entry.js.map +1 -1
- package/dist/cjs/six-group-label.cjs.entry.js +5 -4
- package/dist/cjs/six-group-label.cjs.entry.js.map +1 -1
- package/dist/cjs/six-header.cjs.entry.js +13 -12
- package/dist/cjs/six-header.cjs.entry.js.map +1 -1
- package/dist/cjs/six-icon-button.cjs.entry.js +6 -5
- package/dist/cjs/six-icon-button.cjs.entry.js.map +1 -1
- package/dist/cjs/six-icon.cjs.entry.js +5 -4
- package/dist/cjs/six-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/six-input.cjs.entry.js +7 -6
- package/dist/cjs/six-input.cjs.entry.js.map +1 -1
- package/dist/cjs/six-item-picker.cjs.entry.js +6 -5
- package/dist/cjs/six-item-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/six-language-switcher.cjs.entry.js +6 -5
- package/dist/cjs/six-language-switcher.cjs.entry.js.map +1 -1
- package/dist/cjs/six-layout-grid.cjs.entry.js +4 -3
- package/dist/cjs/six-layout-grid.cjs.entry.js.map +1 -1
- package/dist/cjs/six-main-container.cjs.entry.js +4 -3
- package/dist/cjs/six-main-container.cjs.entry.js.map +1 -1
- package/dist/cjs/six-menu-divider.cjs.entry.js +4 -3
- package/dist/cjs/six-menu-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/six-menu-label.cjs.entry.js +4 -3
- package/dist/cjs/six-menu-label.cjs.entry.js.map +1 -1
- package/dist/cjs/six-picto.cjs.entry.js +4 -3
- package/dist/cjs/six-picto.cjs.entry.js.map +1 -1
- package/dist/cjs/six-progress-bar.cjs.entry.js +5 -4
- package/dist/cjs/six-progress-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/six-progress-ring.cjs.entry.js +4 -3
- package/dist/cjs/six-progress-ring.cjs.entry.js.map +1 -1
- package/dist/cjs/six-radio.cjs.entry.js +5 -4
- package/dist/cjs/six-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/six-range.cjs.entry.js +17 -6
- package/dist/cjs/six-range.cjs.entry.js.map +1 -1
- package/dist/cjs/six-root.cjs.entry.js +4 -3
- package/dist/cjs/six-root.cjs.entry.js.map +1 -1
- package/dist/cjs/six-search-field.cjs.entry.js +4 -3
- package/dist/cjs/six-search-field.cjs.entry.js.map +1 -1
- package/dist/cjs/six-select.cjs.entry.js +10 -9
- package/dist/cjs/six-select.cjs.entry.js.map +1 -1
- package/dist/cjs/six-sidebar-item-group.cjs.entry.js +3 -2
- package/dist/cjs/six-sidebar-item-group.cjs.entry.js.map +1 -1
- package/dist/cjs/six-sidebar-item.cjs.entry.js +5 -4
- package/dist/cjs/six-sidebar-item.cjs.entry.js.map +1 -1
- package/dist/cjs/six-sidebar.cjs.entry.js +5 -4
- package/dist/cjs/six-sidebar.cjs.entry.js.map +1 -1
- package/dist/cjs/six-spinner.cjs.entry.js +3 -2
- package/dist/cjs/six-spinner.cjs.entry.js.map +1 -1
- package/dist/cjs/six-stage-indicator.cjs.entry.js +3 -2
- package/dist/cjs/six-stage-indicator.cjs.entry.js.map +1 -1
- package/dist/cjs/six-switch.cjs.entry.js +6 -5
- package/dist/cjs/six-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/six-tab-group.cjs.entry.js +34 -8
- package/dist/cjs/six-tab-group.cjs.entry.js.map +1 -1
- package/dist/cjs/six-tab-panel.cjs.entry.js +4 -3
- package/dist/cjs/six-tab-panel.cjs.entry.js.map +1 -1
- package/dist/cjs/six-tab.cjs.entry.js +5 -4
- package/dist/cjs/six-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/six-tag.cjs.entry.js +5 -4
- package/dist/cjs/six-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/six-textarea.cjs.entry.js +6 -5
- package/dist/cjs/six-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/six-tile.cjs.entry.js +6 -5
- package/dist/cjs/six-tile.cjs.entry.js.map +1 -1
- package/dist/cjs/six-timepicker.cjs.entry.js +4 -3
- package/dist/cjs/six-timepicker.cjs.entry.js.map +1 -1
- package/dist/cjs/six-tooltip.cjs.entry.js +5 -4
- package/dist/cjs/six-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/ui-library.cjs.js +6 -4
- package/dist/cjs/ui-library.cjs.js.map +1 -1
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/six-alert/six-alert.js +2 -2
- package/dist/collection/components/six-alert/six-alert.js.map +1 -1
- package/dist/collection/components/six-avatar/six-avatar.js +1 -1
- package/dist/collection/components/six-avatar/six-avatar.js.map +1 -1
- package/dist/collection/components/six-badge/six-badge.js +2 -2
- package/dist/collection/components/six-badge/six-badge.js.map +1 -1
- package/dist/collection/components/six-button/six-button.js +2 -2
- package/dist/collection/components/six-button/six-button.js.map +1 -1
- package/dist/collection/components/six-button/test/six-button.spec.js.map +1 -1
- package/dist/collection/components/six-card/six-card.js +1 -1
- package/dist/collection/components/six-card/six-card.js.map +1 -1
- package/dist/collection/components/six-checkbox/six-checkbox.js +2 -2
- package/dist/collection/components/six-checkbox/six-checkbox.js.map +1 -1
- package/dist/collection/components/six-datepicker/six-datepicker.js +1 -1
- package/dist/collection/components/six-datepicker/six-datepicker.js.map +1 -1
- package/dist/collection/components/six-details/six-details.js +3 -3
- package/dist/collection/components/six-details/six-details.js.map +1 -1
- package/dist/collection/components/six-dialog/six-dialog.js +8 -28
- package/dist/collection/components/six-dialog/six-dialog.js.map +1 -1
- package/dist/collection/components/six-drawer/six-drawer.js +9 -28
- package/dist/collection/components/six-drawer/six-drawer.js.map +1 -1
- package/dist/collection/components/six-dropdown/six-dropdown.js +5 -5
- package/dist/collection/components/six-dropdown/six-dropdown.js.map +1 -1
- package/dist/collection/components/six-error/six-error.js +1 -1
- package/dist/collection/components/six-error/six-error.js.map +1 -1
- package/dist/collection/components/six-error-page/six-error-page.js +1 -1
- package/dist/collection/components/six-error-page/six-error-page.js.map +1 -1
- package/dist/collection/components/six-file-list/six-file-list.js +1 -1
- package/dist/collection/components/six-file-list/six-file-list.js.map +1 -1
- package/dist/collection/components/six-file-list-item/six-file-list-item.js +2 -2
- package/dist/collection/components/six-file-list-item/six-file-list-item.js.map +1 -1
- package/dist/collection/components/six-file-upload/six-file-upload.css +8 -0
- package/dist/collection/components/six-file-upload/six-file-upload.js +25 -6
- package/dist/collection/components/six-file-upload/six-file-upload.js.map +1 -1
- package/dist/collection/components/six-file-upload/test/six-file-upload.spec.js +76 -21
- package/dist/collection/components/six-file-upload/test/six-file-upload.spec.js.map +1 -1
- package/dist/collection/components/six-footer/six-footer.js +1 -1
- package/dist/collection/components/six-footer/six-footer.js.map +1 -1
- package/dist/collection/components/six-group-label/six-group-label.js +1 -1
- package/dist/collection/components/six-group-label/six-group-label.js.map +1 -1
- package/dist/collection/components/six-header/six-header.js +10 -10
- package/dist/collection/components/six-header/six-header.js.map +1 -1
- package/dist/collection/components/six-icon/six-icon.js +2 -2
- package/dist/collection/components/six-icon/six-icon.js.map +1 -1
- package/dist/collection/components/six-icon-button/six-icon-button.js +3 -3
- package/dist/collection/components/six-icon-button/six-icon-button.js.map +1 -1
- package/dist/collection/components/six-input/six-input.js +3 -3
- package/dist/collection/components/six-input/six-input.js.map +1 -1
- package/dist/collection/components/six-item-picker/six-item-picker.js +3 -3
- package/dist/collection/components/six-item-picker/six-item-picker.js.map +1 -1
- package/dist/collection/components/six-language-switcher/six-language-switcher.css +3 -2
- package/dist/collection/components/six-language-switcher/six-language-switcher.js +2 -2
- package/dist/collection/components/six-language-switcher/six-language-switcher.js.map +1 -1
- package/dist/collection/components/six-language-switcher/test/six-language-switcher.spec.js +8 -8
- package/dist/collection/components/six-language-switcher/test/six-language-switcher.spec.js.map +1 -1
- package/dist/collection/components/six-layout-grid/six-layout-grid.js +1 -1
- package/dist/collection/components/six-layout-grid/six-layout-grid.js.map +1 -1
- package/dist/collection/components/six-main-container/six-main-container.js +1 -1
- package/dist/collection/components/six-main-container/six-main-container.js.map +1 -1
- package/dist/collection/components/six-menu/six-menu.js +2 -2
- package/dist/collection/components/six-menu/six-menu.js.map +1 -1
- package/dist/collection/components/six-menu/test/six-menu.spec.js.map +1 -1
- package/dist/collection/components/six-menu-divider/six-menu-divider.js +1 -1
- package/dist/collection/components/six-menu-divider/six-menu-divider.js.map +1 -1
- package/dist/collection/components/six-menu-item/six-menu-item.js +2 -2
- package/dist/collection/components/six-menu-item/six-menu-item.js.map +1 -1
- package/dist/collection/components/six-menu-label/six-menu-label.js +1 -1
- package/dist/collection/components/six-menu-label/six-menu-label.js.map +1 -1
- package/dist/collection/components/six-picto/six-picto.js +1 -1
- package/dist/collection/components/six-picto/six-picto.js.map +1 -1
- package/dist/collection/components/six-progress-bar/six-progress-bar.js +2 -2
- package/dist/collection/components/six-progress-bar/six-progress-bar.js.map +1 -1
- package/dist/collection/components/six-progress-ring/six-progress-ring.js +1 -1
- package/dist/collection/components/six-progress-ring/six-progress-ring.js.map +1 -1
- package/dist/collection/components/six-radio/six-radio.js +2 -2
- package/dist/collection/components/six-radio/six-radio.js.map +1 -1
- package/dist/collection/components/six-range/six-range.css +1 -1
- package/dist/collection/components/six-range/six-range.js +12 -2
- package/dist/collection/components/six-range/six-range.js.map +1 -1
- package/dist/collection/components/six-root/six-root.js +1 -1
- package/dist/collection/components/six-root/six-root.js.map +1 -1
- package/dist/collection/components/six-search-field/six-search-field.js +1 -1
- package/dist/collection/components/six-search-field/six-search-field.js.map +1 -1
- package/dist/collection/components/six-select/six-select.js +6 -6
- package/dist/collection/components/six-select/six-select.js.map +1 -1
- package/dist/collection/components/six-select/util.js.map +1 -1
- package/dist/collection/components/six-sidebar/six-sidebar.js +2 -2
- package/dist/collection/components/six-sidebar/six-sidebar.js.map +1 -1
- package/dist/collection/components/six-sidebar-item/six-sidebar-item.js +2 -2
- package/dist/collection/components/six-sidebar-item/six-sidebar-item.js.map +1 -1
- package/dist/collection/components/six-sidebar-item-group/six-sidebar-item-group.js.map +1 -1
- package/dist/collection/components/six-switch/six-switch.js +2 -2
- package/dist/collection/components/six-switch/six-switch.js.map +1 -1
- package/dist/collection/components/six-tab/six-tab.js +2 -2
- package/dist/collection/components/six-tab/six-tab.js.map +1 -1
- package/dist/collection/components/six-tab-group/six-tab-group.js +33 -7
- package/dist/collection/components/six-tab-group/six-tab-group.js.map +1 -1
- package/dist/collection/components/six-tab-panel/six-tab-panel.js +1 -1
- package/dist/collection/components/six-tab-panel/six-tab-panel.js.map +1 -1
- package/dist/collection/components/six-tag/six-tag.js +2 -2
- package/dist/collection/components/six-tag/six-tag.js.map +1 -1
- package/dist/collection/components/six-textarea/six-textarea.js +2 -2
- package/dist/collection/components/six-textarea/six-textarea.js.map +1 -1
- package/dist/collection/components/six-textarea/test/six-textarea.spec.js.map +1 -1
- package/dist/collection/components/six-tile/six-tile.js +3 -3
- package/dist/collection/components/six-tile/six-tile.js.map +1 -1
- package/dist/collection/components/six-timepicker/six-timepicker.js +1 -1
- package/dist/collection/components/six-timepicker/six-timepicker.js.map +1 -1
- package/dist/collection/components/six-timepicker/test/six-timepicker.spec.js.map +1 -1
- package/dist/collection/components/six-tooltip/six-tooltip.js +2 -2
- package/dist/collection/components/six-tooltip/six-tooltip.js.map +1 -1
- package/dist/collection/utils/alert.js.map +1 -1
- package/dist/collection/utils/date-util.js.map +1 -1
- package/dist/collection/utils/date-util.spec.js.map +1 -1
- package/dist/collection/utils/error-messages.js.map +1 -1
- package/dist/collection/utils/event-listeners.js.map +1 -1
- package/dist/collection/utils/focus-visible.js.map +1 -1
- package/dist/collection/utils/form.js.map +1 -1
- package/dist/collection/utils/modal.js.map +1 -1
- package/dist/collection/utils/popover.js.map +1 -1
- package/dist/collection/utils/popup.js.map +1 -1
- package/dist/collection/utils/scroll.js.map +1 -1
- package/dist/collection/utils/slot.js.map +1 -1
- package/dist/collection/utils/tabbable.js.map +1 -1
- package/dist/collection/utils/time.util.js.map +1 -1
- package/dist/collection/utils/time.util.spec.js.map +1 -1
- package/dist/components/modal.js +1 -17
- package/dist/components/modal.js.map +1 -1
- package/dist/components/six-alert.js +4 -3
- package/dist/components/six-alert.js.map +1 -1
- package/dist/components/six-avatar.js +3 -2
- package/dist/components/six-avatar.js.map +1 -1
- package/dist/components/six-badge.js +4 -3
- package/dist/components/six-badge.js.map +1 -1
- package/dist/components/six-button2.js +4 -3
- package/dist/components/six-button2.js.map +1 -1
- package/dist/components/six-card.js +3 -2
- package/dist/components/six-card.js.map +1 -1
- package/dist/components/six-checkbox2.js +4 -3
- package/dist/components/six-checkbox2.js.map +1 -1
- package/dist/components/six-datepicker.js +3 -2
- package/dist/components/six-datepicker.js.map +1 -1
- package/dist/components/six-details2.js +5 -4
- package/dist/components/six-details2.js.map +1 -1
- package/dist/components/six-dialog.js +11 -29
- package/dist/components/six-dialog.js.map +1 -1
- package/dist/components/six-drawer.js +12 -29
- package/dist/components/six-drawer.js.map +1 -1
- package/dist/components/six-dropdown2.js +7 -6
- package/dist/components/six-dropdown2.js.map +1 -1
- package/dist/components/six-error-page.js +3 -2
- package/dist/components/six-error-page.js.map +1 -1
- package/dist/components/six-error2.js +3 -2
- package/dist/components/six-error2.js.map +1 -1
- package/dist/components/six-file-list-item.js +4 -3
- package/dist/components/six-file-list-item.js.map +1 -1
- package/dist/components/six-file-list.js +3 -2
- package/dist/components/six-file-list.js.map +1 -1
- package/dist/components/six-file-upload.js +19 -10
- package/dist/components/six-file-upload.js.map +1 -1
- package/dist/components/six-footer.js +3 -2
- package/dist/components/six-footer.js.map +1 -1
- package/dist/components/six-group-label.js +3 -2
- package/dist/components/six-group-label.js.map +1 -1
- package/dist/components/six-header.js +12 -11
- package/dist/components/six-header.js.map +1 -1
- package/dist/components/six-icon-button2.js +5 -4
- package/dist/components/six-icon-button2.js.map +1 -1
- package/dist/components/six-icon2.js +4 -3
- package/dist/components/six-icon2.js.map +1 -1
- package/dist/components/six-input2.js +5 -4
- package/dist/components/six-input2.js.map +1 -1
- package/dist/components/six-item-picker2.js +5 -4
- package/dist/components/six-item-picker2.js.map +1 -1
- package/dist/components/six-language-switcher.js +5 -4
- package/dist/components/six-language-switcher.js.map +1 -1
- package/dist/components/six-layout-grid.js +3 -2
- package/dist/components/six-layout-grid.js.map +1 -1
- package/dist/components/six-main-container.js +3 -2
- package/dist/components/six-main-container.js.map +1 -1
- package/dist/components/six-menu-divider.js +3 -2
- package/dist/components/six-menu-divider.js.map +1 -1
- package/dist/components/six-menu-item2.js +4 -3
- package/dist/components/six-menu-item2.js.map +1 -1
- package/dist/components/six-menu-label.js +3 -2
- package/dist/components/six-menu-label.js.map +1 -1
- package/dist/components/six-menu2.js +4 -3
- package/dist/components/six-menu2.js.map +1 -1
- package/dist/components/six-picto2.js +3 -2
- package/dist/components/six-picto2.js.map +1 -1
- package/dist/components/six-progress-bar.js +4 -3
- package/dist/components/six-progress-bar.js.map +1 -1
- package/dist/components/six-progress-ring.js +3 -2
- package/dist/components/six-progress-ring.js.map +1 -1
- package/dist/components/six-radio.js +4 -3
- package/dist/components/six-radio.js.map +1 -1
- package/dist/components/six-range.js +15 -4
- package/dist/components/six-range.js.map +1 -1
- package/dist/components/six-root.js +3 -2
- package/dist/components/six-root.js.map +1 -1
- package/dist/components/six-search-field.js +3 -2
- package/dist/components/six-search-field.js.map +1 -1
- package/dist/components/six-select.js +8 -7
- package/dist/components/six-select.js.map +1 -1
- package/dist/components/six-sidebar-item-group.js +2 -1
- package/dist/components/six-sidebar-item-group.js.map +1 -1
- package/dist/components/six-sidebar-item.js +4 -3
- package/dist/components/six-sidebar-item.js.map +1 -1
- package/dist/components/six-sidebar.js +4 -3
- package/dist/components/six-sidebar.js.map +1 -1
- package/dist/components/six-spinner2.js +2 -1
- package/dist/components/six-spinner2.js.map +1 -1
- package/dist/components/six-stage-indicator2.js +2 -1
- package/dist/components/six-stage-indicator2.js.map +1 -1
- package/dist/components/six-switch.js +4 -3
- package/dist/components/six-switch.js.map +1 -1
- package/dist/components/six-tab-group.js +35 -8
- package/dist/components/six-tab-group.js.map +1 -1
- package/dist/components/six-tab-panel.js +3 -2
- package/dist/components/six-tab-panel.js.map +1 -1
- package/dist/components/six-tab.js +4 -3
- package/dist/components/six-tab.js.map +1 -1
- package/dist/components/six-tag.js +4 -3
- package/dist/components/six-tag.js.map +1 -1
- package/dist/components/six-textarea.js +4 -3
- package/dist/components/six-textarea.js.map +1 -1
- package/dist/components/six-tile.js +5 -4
- package/dist/components/six-tile.js.map +1 -1
- package/dist/components/six-timepicker2.js +3 -2
- package/dist/components/six-timepicker2.js.map +1 -1
- package/dist/components/six-tooltip2.js +4 -3
- package/dist/components/six-tooltip2.js.map +1 -1
- package/dist/components.json +34 -6
- package/dist/esm/app-globals-0f993ce5.js +5 -0
- package/dist/esm/app-globals-0f993ce5.js.map +1 -0
- package/dist/esm/{form-control-d403a9cf.js → form-control-40c37714.js} +2 -2
- package/dist/esm/{form-control-d403a9cf.js.map → form-control-40c37714.js.map} +1 -1
- package/dist/esm/{index-79d4ef67.js → index-52a755dc.js} +70 -28
- package/dist/esm/index-52a755dc.js.map +1 -0
- package/dist/esm/loader.js +6 -4
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/{modal-96526245.js → modal-6c1288e3.js} +2 -18
- package/dist/esm/modal-6c1288e3.js.map +1 -0
- package/dist/esm/six-alert.entry.js +5 -4
- package/dist/esm/six-alert.entry.js.map +1 -1
- package/dist/esm/six-avatar.entry.js +4 -3
- package/dist/esm/six-avatar.entry.js.map +1 -1
- package/dist/esm/six-badge.entry.js +5 -4
- package/dist/esm/six-badge.entry.js.map +1 -1
- package/dist/esm/six-button.entry.js +5 -4
- package/dist/esm/six-button.entry.js.map +1 -1
- package/dist/esm/six-card.entry.js +4 -3
- package/dist/esm/six-card.entry.js.map +1 -1
- package/dist/esm/six-checkbox_2.entry.js +10 -8
- package/dist/esm/six-checkbox_2.entry.js.map +1 -1
- package/dist/esm/six-datepicker.entry.js +4 -3
- package/dist/esm/six-datepicker.entry.js.map +1 -1
- package/dist/esm/six-details.entry.js +6 -5
- package/dist/esm/six-details.entry.js.map +1 -1
- package/dist/esm/six-dialog.entry.js +12 -30
- package/dist/esm/six-dialog.entry.js.map +1 -1
- package/dist/esm/six-drawer.entry.js +13 -30
- package/dist/esm/six-drawer.entry.js.map +1 -1
- package/dist/esm/six-dropdown_2.entry.js +12 -10
- package/dist/esm/six-dropdown_2.entry.js.map +1 -1
- package/dist/esm/six-error-page.entry.js +4 -3
- package/dist/esm/six-error-page.entry.js.map +1 -1
- package/dist/esm/six-error.entry.js +4 -3
- package/dist/esm/six-error.entry.js.map +1 -1
- package/dist/esm/six-file-list-item.entry.js +5 -4
- package/dist/esm/six-file-list-item.entry.js.map +1 -1
- package/dist/esm/six-file-list.entry.js +4 -3
- package/dist/esm/six-file-list.entry.js.map +1 -1
- package/dist/esm/six-file-upload.entry.js +11 -9
- package/dist/esm/six-file-upload.entry.js.map +1 -1
- package/dist/esm/six-footer.entry.js +4 -3
- package/dist/esm/six-footer.entry.js.map +1 -1
- package/dist/esm/six-group-label.entry.js +5 -4
- package/dist/esm/six-group-label.entry.js.map +1 -1
- package/dist/esm/six-header.entry.js +13 -12
- package/dist/esm/six-header.entry.js.map +1 -1
- package/dist/esm/six-icon-button.entry.js +6 -5
- package/dist/esm/six-icon-button.entry.js.map +1 -1
- package/dist/esm/six-icon.entry.js +5 -4
- package/dist/esm/six-icon.entry.js.map +1 -1
- package/dist/esm/six-input.entry.js +7 -6
- package/dist/esm/six-input.entry.js.map +1 -1
- package/dist/esm/six-item-picker.entry.js +6 -5
- package/dist/esm/six-item-picker.entry.js.map +1 -1
- package/dist/esm/six-language-switcher.entry.js +6 -5
- package/dist/esm/six-language-switcher.entry.js.map +1 -1
- package/dist/esm/six-layout-grid.entry.js +4 -3
- package/dist/esm/six-layout-grid.entry.js.map +1 -1
- package/dist/esm/six-main-container.entry.js +4 -3
- package/dist/esm/six-main-container.entry.js.map +1 -1
- package/dist/esm/six-menu-divider.entry.js +4 -3
- package/dist/esm/six-menu-divider.entry.js.map +1 -1
- package/dist/esm/six-menu-label.entry.js +4 -3
- package/dist/esm/six-menu-label.entry.js.map +1 -1
- package/dist/esm/six-picto.entry.js +4 -3
- package/dist/esm/six-picto.entry.js.map +1 -1
- package/dist/esm/six-progress-bar.entry.js +5 -4
- package/dist/esm/six-progress-bar.entry.js.map +1 -1
- package/dist/esm/six-progress-ring.entry.js +4 -3
- package/dist/esm/six-progress-ring.entry.js.map +1 -1
- package/dist/esm/six-radio.entry.js +5 -4
- package/dist/esm/six-radio.entry.js.map +1 -1
- package/dist/esm/six-range.entry.js +17 -6
- package/dist/esm/six-range.entry.js.map +1 -1
- package/dist/esm/six-root.entry.js +4 -3
- package/dist/esm/six-root.entry.js.map +1 -1
- package/dist/esm/six-search-field.entry.js +4 -3
- package/dist/esm/six-search-field.entry.js.map +1 -1
- package/dist/esm/six-select.entry.js +10 -9
- package/dist/esm/six-select.entry.js.map +1 -1
- package/dist/esm/six-sidebar-item-group.entry.js +3 -2
- package/dist/esm/six-sidebar-item-group.entry.js.map +1 -1
- package/dist/esm/six-sidebar-item.entry.js +5 -4
- package/dist/esm/six-sidebar-item.entry.js.map +1 -1
- package/dist/esm/six-sidebar.entry.js +5 -4
- package/dist/esm/six-sidebar.entry.js.map +1 -1
- package/dist/esm/six-spinner.entry.js +3 -2
- package/dist/esm/six-spinner.entry.js.map +1 -1
- package/dist/esm/six-stage-indicator.entry.js +3 -2
- package/dist/esm/six-stage-indicator.entry.js.map +1 -1
- package/dist/esm/six-switch.entry.js +6 -5
- package/dist/esm/six-switch.entry.js.map +1 -1
- package/dist/esm/six-tab-group.entry.js +34 -8
- package/dist/esm/six-tab-group.entry.js.map +1 -1
- package/dist/esm/six-tab-panel.entry.js +4 -3
- package/dist/esm/six-tab-panel.entry.js.map +1 -1
- package/dist/esm/six-tab.entry.js +5 -4
- package/dist/esm/six-tab.entry.js.map +1 -1
- package/dist/esm/six-tag.entry.js +5 -4
- package/dist/esm/six-tag.entry.js.map +1 -1
- package/dist/esm/six-textarea.entry.js +6 -5
- package/dist/esm/six-textarea.entry.js.map +1 -1
- package/dist/esm/six-tile.entry.js +6 -5
- package/dist/esm/six-tile.entry.js.map +1 -1
- package/dist/esm/six-timepicker.entry.js +4 -3
- package/dist/esm/six-timepicker.entry.js.map +1 -1
- package/dist/esm/six-tooltip.entry.js +5 -4
- package/dist/esm/six-tooltip.entry.js.map +1 -1
- package/dist/esm/ui-library.js +7 -5
- package/dist/esm/ui-library.js.map +1 -1
- package/dist/types/components/six-file-upload/six-file-upload.d.ts +2 -0
- package/dist/types/components/six-range/six-range.d.ts +2 -0
- package/dist/types/components/six-tab-group/six-tab-group.d.ts +4 -1
- package/dist/types/components.d.ts +8 -0
- package/dist/ui-library/{p-870b988d.entry.js → p-01853739.entry.js} +2 -2
- package/dist/ui-library/p-01853739.entry.js.map +1 -0
- package/dist/ui-library/{p-da7f3dbd.entry.js → p-03900e17.entry.js} +2 -2
- package/dist/ui-library/p-03900e17.entry.js.map +1 -0
- package/dist/ui-library/p-0a094514.entry.js +2 -0
- package/dist/ui-library/p-0a094514.entry.js.map +1 -0
- package/dist/ui-library/p-0cca70c0.entry.js +2 -0
- package/dist/ui-library/p-0cca70c0.entry.js.map +1 -0
- package/dist/ui-library/p-19a1d34c.entry.js +2 -0
- package/dist/ui-library/p-19a1d34c.entry.js.map +1 -0
- package/dist/ui-library/p-19ca3bd1.entry.js +2 -0
- package/dist/ui-library/p-19ca3bd1.entry.js.map +1 -0
- package/dist/ui-library/p-1f1224ae.entry.js +2 -0
- package/dist/ui-library/p-1f1224ae.entry.js.map +1 -0
- package/dist/ui-library/p-21002de1.entry.js +2 -0
- package/dist/ui-library/p-21002de1.entry.js.map +1 -0
- package/dist/ui-library/{p-8888a367.entry.js → p-29b75db4.entry.js} +2 -2
- package/dist/ui-library/p-29b75db4.entry.js.map +1 -0
- package/dist/ui-library/p-338205f4.entry.js +2 -0
- package/dist/ui-library/p-338205f4.entry.js.map +1 -0
- package/dist/ui-library/p-3827f9e0.entry.js +2 -0
- package/dist/ui-library/p-3827f9e0.entry.js.map +1 -0
- package/dist/ui-library/p-38a9a590.entry.js +2 -0
- package/dist/ui-library/p-38a9a590.entry.js.map +1 -0
- package/dist/ui-library/p-3e9324c8.entry.js +2 -0
- package/dist/ui-library/p-3e9324c8.entry.js.map +1 -0
- package/dist/ui-library/p-3eed2287.entry.js +2 -0
- package/dist/ui-library/p-3eed2287.entry.js.map +1 -0
- package/dist/ui-library/p-45960b56.entry.js +2 -0
- package/dist/ui-library/p-45960b56.entry.js.map +1 -0
- package/dist/ui-library/{p-0440335d.entry.js → p-49e5d8bb.entry.js} +2 -2
- package/dist/ui-library/p-49e5d8bb.entry.js.map +1 -0
- package/dist/ui-library/p-4af73ea9.entry.js +2 -0
- package/dist/ui-library/p-4af73ea9.entry.js.map +1 -0
- package/dist/ui-library/{p-ed279165.entry.js → p-50dbe99f.entry.js} +2 -2
- package/dist/ui-library/p-50dbe99f.entry.js.map +1 -0
- package/dist/ui-library/p-52c04973.entry.js +2 -0
- package/dist/ui-library/p-52c04973.entry.js.map +1 -0
- package/dist/ui-library/{p-caea1eb6.entry.js → p-5f810571.entry.js} +2 -2
- package/dist/ui-library/p-5f810571.entry.js.map +1 -0
- package/dist/ui-library/p-651293e7.js +2 -0
- package/dist/ui-library/p-651293e7.js.map +1 -0
- package/dist/ui-library/p-6c96b62e.entry.js +2 -0
- package/dist/ui-library/p-6c96b62e.entry.js.map +1 -0
- package/dist/ui-library/p-724d0458.entry.js +2 -0
- package/dist/ui-library/p-724d0458.entry.js.map +1 -0
- package/dist/ui-library/p-7562d5f5.entry.js +2 -0
- package/dist/ui-library/p-7562d5f5.entry.js.map +1 -0
- package/dist/ui-library/{p-8ced18d8.entry.js → p-756f4acf.entry.js} +2 -2
- package/dist/ui-library/p-756f4acf.entry.js.map +1 -0
- package/dist/ui-library/p-775e6891.entry.js +2 -0
- package/dist/ui-library/p-775e6891.entry.js.map +1 -0
- package/dist/ui-library/{p-50dae789.entry.js → p-7a722a13.entry.js} +2 -2
- package/dist/ui-library/p-7a722a13.entry.js.map +1 -0
- package/dist/ui-library/{p-884c5cf9.entry.js → p-7a9dcb16.entry.js} +2 -2
- package/dist/ui-library/p-7a9dcb16.entry.js.map +1 -0
- package/dist/ui-library/{p-04cc397c.entry.js → p-7fc0bf6b.entry.js} +2 -2
- package/dist/ui-library/p-7fc0bf6b.entry.js.map +1 -0
- package/dist/ui-library/p-803915da.entry.js +2 -0
- package/dist/ui-library/p-803915da.entry.js.map +1 -0
- package/dist/ui-library/p-80476b0f.entry.js +2 -0
- package/dist/ui-library/p-80476b0f.entry.js.map +1 -0
- package/dist/ui-library/{p-961bd001.entry.js → p-8644f970.entry.js} +2 -2
- package/dist/ui-library/p-8644f970.entry.js.map +1 -0
- package/dist/ui-library/{p-9c79341d.entry.js → p-8938e9bd.entry.js} +2 -2
- package/dist/ui-library/p-8938e9bd.entry.js.map +1 -0
- package/dist/ui-library/p-8dff4dcb.entry.js +2 -0
- package/dist/ui-library/p-8dff4dcb.entry.js.map +1 -0
- package/dist/ui-library/{p-d95e292e.entry.js → p-8f307b55.entry.js} +2 -2
- package/dist/ui-library/p-8f307b55.entry.js.map +1 -0
- package/dist/ui-library/{p-ac57ba5c.entry.js → p-93ab2efc.entry.js} +2 -2
- package/dist/ui-library/p-93ab2efc.entry.js.map +1 -0
- package/dist/ui-library/p-9426a37b.entry.js +2 -0
- package/dist/ui-library/p-9426a37b.entry.js.map +1 -0
- package/dist/ui-library/p-a2a6aaea.entry.js +2 -0
- package/dist/ui-library/p-a2a6aaea.entry.js.map +1 -0
- package/dist/ui-library/p-a2b8aca7.entry.js +2 -0
- package/dist/ui-library/p-a2b8aca7.entry.js.map +1 -0
- package/dist/ui-library/{p-61e66671.js → p-aa99a393.js} +2 -2
- package/dist/ui-library/p-acc487ec.entry.js +2 -0
- package/dist/ui-library/p-acc487ec.entry.js.map +1 -0
- package/dist/ui-library/p-ba7424b3.entry.js +2 -0
- package/dist/ui-library/p-ba7424b3.entry.js.map +1 -0
- package/dist/ui-library/p-be0c0ec9.entry.js +2 -0
- package/dist/ui-library/p-be0c0ec9.entry.js.map +1 -0
- package/dist/ui-library/p-c948cf70.entry.js +2 -0
- package/dist/ui-library/p-c948cf70.entry.js.map +1 -0
- package/dist/ui-library/p-d55db23a.entry.js +2 -0
- package/dist/ui-library/p-d55db23a.entry.js.map +1 -0
- package/dist/ui-library/p-d717a2f2.entry.js +2 -0
- package/dist/ui-library/p-d717a2f2.entry.js.map +1 -0
- package/dist/ui-library/p-d7739200.entry.js +2 -0
- package/dist/ui-library/p-d7739200.entry.js.map +1 -0
- package/dist/ui-library/p-e1255160.js +2 -0
- package/dist/ui-library/p-e1255160.js.map +1 -0
- package/dist/ui-library/p-e3766acb.entry.js +2 -0
- package/dist/ui-library/p-e3766acb.entry.js.map +1 -0
- package/dist/ui-library/p-e43e5e45.entry.js +2 -0
- package/dist/ui-library/p-e43e5e45.entry.js.map +1 -0
- package/dist/ui-library/p-e798314b.entry.js +2 -0
- package/dist/ui-library/p-e798314b.entry.js.map +1 -0
- package/dist/ui-library/p-f1bb5648.entry.js +2 -0
- package/dist/ui-library/p-f1bb5648.entry.js.map +1 -0
- package/dist/ui-library/p-f8572492.entry.js +2 -0
- package/dist/ui-library/p-f8572492.entry.js.map +1 -0
- package/dist/ui-library/p-f93d8a4e.js +3 -0
- package/dist/ui-library/p-f93d8a4e.js.map +1 -0
- package/dist/ui-library/ui-library.esm.js +1 -1
- package/dist/ui-library/ui-library.esm.js.map +1 -1
- package/package.json +5 -5
- package/dist/cjs/index-d7748d51.js.map +0 -1
- package/dist/cjs/modal-3ce015be.js.map +0 -1
- package/dist/collection/utils/support.js +0 -16
- package/dist/collection/utils/support.js.map +0 -1
- package/dist/esm/index-79d4ef67.js.map +0 -1
- package/dist/esm/modal-96526245.js.map +0 -1
- package/dist/types/utils/support.d.ts +0 -1
- package/dist/ui-library/p-0440335d.entry.js.map +0 -1
- package/dist/ui-library/p-04cc397c.entry.js.map +0 -1
- package/dist/ui-library/p-0edd3091.entry.js +0 -2
- package/dist/ui-library/p-0edd3091.entry.js.map +0 -1
- package/dist/ui-library/p-150b7664.entry.js +0 -2
- package/dist/ui-library/p-150b7664.entry.js.map +0 -1
- package/dist/ui-library/p-1f5840b5.entry.js +0 -2
- package/dist/ui-library/p-1f5840b5.entry.js.map +0 -1
- package/dist/ui-library/p-28cc013e.entry.js +0 -2
- package/dist/ui-library/p-28cc013e.entry.js.map +0 -1
- package/dist/ui-library/p-3424bbc0.entry.js +0 -2
- package/dist/ui-library/p-3424bbc0.entry.js.map +0 -1
- package/dist/ui-library/p-348c68a8.entry.js +0 -2
- package/dist/ui-library/p-348c68a8.entry.js.map +0 -1
- package/dist/ui-library/p-3723ca06.entry.js +0 -2
- package/dist/ui-library/p-3723ca06.entry.js.map +0 -1
- package/dist/ui-library/p-37aeac5e.entry.js +0 -2
- package/dist/ui-library/p-37aeac5e.entry.js.map +0 -1
- package/dist/ui-library/p-3d7fb086.entry.js +0 -2
- package/dist/ui-library/p-3d7fb086.entry.js.map +0 -1
- package/dist/ui-library/p-457f7373.entry.js +0 -2
- package/dist/ui-library/p-457f7373.entry.js.map +0 -1
- package/dist/ui-library/p-4a667f31.entry.js +0 -2
- package/dist/ui-library/p-4a667f31.entry.js.map +0 -1
- package/dist/ui-library/p-50dae789.entry.js.map +0 -1
- package/dist/ui-library/p-546e33d9.entry.js +0 -2
- package/dist/ui-library/p-546e33d9.entry.js.map +0 -1
- package/dist/ui-library/p-5db3a705.entry.js +0 -2
- package/dist/ui-library/p-5db3a705.entry.js.map +0 -1
- package/dist/ui-library/p-6296779b.entry.js +0 -2
- package/dist/ui-library/p-6296779b.entry.js.map +0 -1
- package/dist/ui-library/p-64b4755d.entry.js +0 -2
- package/dist/ui-library/p-64b4755d.entry.js.map +0 -1
- package/dist/ui-library/p-6c1b046e.entry.js +0 -2
- package/dist/ui-library/p-6c1b046e.entry.js.map +0 -1
- package/dist/ui-library/p-7115316e.entry.js +0 -2
- package/dist/ui-library/p-7115316e.entry.js.map +0 -1
- package/dist/ui-library/p-73dd493f.entry.js +0 -2
- package/dist/ui-library/p-73dd493f.entry.js.map +0 -1
- package/dist/ui-library/p-870b988d.entry.js.map +0 -1
- package/dist/ui-library/p-884c5cf9.entry.js.map +0 -1
- package/dist/ui-library/p-8888a367.entry.js.map +0 -1
- package/dist/ui-library/p-8ced18d8.entry.js.map +0 -1
- package/dist/ui-library/p-935c78a7.entry.js +0 -2
- package/dist/ui-library/p-935c78a7.entry.js.map +0 -1
- package/dist/ui-library/p-961bd001.entry.js.map +0 -1
- package/dist/ui-library/p-998de05d.js +0 -2
- package/dist/ui-library/p-998de05d.js.map +0 -1
- package/dist/ui-library/p-9b08068d.entry.js +0 -2
- package/dist/ui-library/p-9b08068d.entry.js.map +0 -1
- package/dist/ui-library/p-9c79341d.entry.js.map +0 -1
- package/dist/ui-library/p-a9c159f2.entry.js +0 -2
- package/dist/ui-library/p-a9c159f2.entry.js.map +0 -1
- package/dist/ui-library/p-ac57ba5c.entry.js.map +0 -1
- package/dist/ui-library/p-af15381b.js +0 -3
- package/dist/ui-library/p-af15381b.js.map +0 -1
- package/dist/ui-library/p-b1a5f3cd.entry.js +0 -2
- package/dist/ui-library/p-b1a5f3cd.entry.js.map +0 -1
- package/dist/ui-library/p-b385a241.entry.js +0 -2
- package/dist/ui-library/p-b385a241.entry.js.map +0 -1
- package/dist/ui-library/p-b74c5d6b.entry.js +0 -2
- package/dist/ui-library/p-b74c5d6b.entry.js.map +0 -1
- package/dist/ui-library/p-bf2fb53f.entry.js +0 -2
- package/dist/ui-library/p-bf2fb53f.entry.js.map +0 -1
- package/dist/ui-library/p-c2c7370b.entry.js +0 -2
- package/dist/ui-library/p-c2c7370b.entry.js.map +0 -1
- package/dist/ui-library/p-caea1eb6.entry.js.map +0 -1
- package/dist/ui-library/p-d3f5b9a8.entry.js +0 -2
- package/dist/ui-library/p-d3f5b9a8.entry.js.map +0 -1
- package/dist/ui-library/p-d42b18eb.entry.js +0 -2
- package/dist/ui-library/p-d42b18eb.entry.js.map +0 -1
- package/dist/ui-library/p-d95e292e.entry.js.map +0 -1
- package/dist/ui-library/p-da7f3dbd.entry.js.map +0 -1
- package/dist/ui-library/p-dfb89b6a.entry.js +0 -2
- package/dist/ui-library/p-dfb89b6a.entry.js.map +0 -1
- package/dist/ui-library/p-e6032375.entry.js +0 -2
- package/dist/ui-library/p-e6032375.entry.js.map +0 -1
- package/dist/ui-library/p-e60d2324.entry.js +0 -2
- package/dist/ui-library/p-e60d2324.entry.js.map +0 -1
- package/dist/ui-library/p-e8298c6e.entry.js +0 -2
- package/dist/ui-library/p-e8298c6e.entry.js.map +0 -1
- package/dist/ui-library/p-ed279165.entry.js.map +0 -1
- package/dist/ui-library/p-ed61b75c.entry.js +0 -2
- package/dist/ui-library/p-ed61b75c.entry.js.map +0 -1
- package/dist/ui-library/p-f1ab3384.entry.js +0 -2
- package/dist/ui-library/p-f1ab3384.entry.js.map +0 -1
- package/dist/ui-library/p-f4ef481c.entry.js +0 -2
- package/dist/ui-library/p-f4ef481c.entry.js.map +0 -1
- package/dist/ui-library/p-f8cbb8da.entry.js +0 -2
- package/dist/ui-library/p-f8cbb8da.entry.js.map +0 -1
- /package/dist/ui-library/{p-61e66671.js.map → p-aa99a393.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixDialogCss","SixDialogStyle0","id","SixDialog","this","componentId","willShow","willHide","handleCloseClick","hide","handleKeyDown","event","key","handleOverlayClick","sixOverlayDismiss","emit","defaultPrevented","handleSlotChange","hasFooter","hasSlot","host","handleTransitionEnd","target","propertyName","classList","contains","isVisible","open","sixAfterShow","sixAfterHide","handleOpenChange","show","connectedCallback","modal","Modal","onFocusOut","_a","panel","focus","componentWillLoad","componentDidLoad","disconnectedCallback","unlockBodyScrolling","dialog","sixShow","activate","lockBodyScrolling","requestAnimationFrame","sixInitialFocus","preventScroll","sixHide","deactivate","render","h","ref","el","part","class","onKeyDown","onTransitionEnd","onClick","role","noHeader","label","tabIndex","name","String","fromCharCode","exportparts","onSlotchange"],"sources":["src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n */\n:host {\n --width: 31rem;\n\n display: contents;\n}\n\n.dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--six-z-index-dialog);\n color: var(--six-color-web-rock-900);\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n}\n\n.dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - var(--six-spacing-xx-large));\n max-height: calc(100% - var(--six-spacing-xx-large));\n background-color: var(--six-panel-background-color);\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--six-shadow-large);\n opacity: 0;\n transform: scale(0.8);\n transition: var(--six-transition-medium) opacity, var(--six-transition-medium) transform;\n\n &:focus {\n outline: none;\n }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n}\n\n.dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n transform: none;\n}\n\n.dialog__header {\n flex: 0 0 auto;\n display: flex;\n}\n\n.dialog__title {\n flex: 1 1 auto;\n font-size: var(--six-font-size-x-large);\n font-weight: var(--six-font-weight-bold);\n line-height: var(--six-line-height-dense);\n padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-x-large);\n padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n flex: 1 1 auto;\n padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: var(--six-spacing-large);\n\n ::slotted(six-button:not(:first-of-type)) {\n margin-left: var(--six-spacing-xx-small);\n }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n}\n\n.dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--six-overlay-background-color);\n opacity: 0;\n transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n *\n */\n@Component({\n tag: 'six-dialog',\n styleUrl: 'six-dialog.scss',\n shadow: true,\n})\nexport class SixDialog {\n private componentId = `dialog-${++id}`;\n private dialog?: HTMLElement;\n private modal?: Modal;\n private panel?: HTMLElement;\n private willShow = false;\n private willHide = false;\n\n @Element() host!: HTMLSixDialogElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /**\n * The dialog'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 /**\n * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n * easy, accessible way for users to dismiss the dialog.\n */\n @Prop() noHeader = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the dialog opens and all transitions are complete. */\n @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the dialog closes and all transitions are complete. */\n @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /**\n * Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the dialog, such as an input or button.\n */\n @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */\n @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.modal = new Modal(this.host, {\n onFocusOut: () => this.panel?.focus(),\n });\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /** Shows the dialog */\n @Method()\n async show() {\n if (this.willShow || this.modal == null || this.panel == null || this.dialog == null) {\n return;\n }\n const panel = this.panel;\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n requestAnimationFrame(() => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n panel.focus({ preventScroll: true });\n }\n });\n }\n }\n\n /** Hides the dialog */\n @Method()\n async hide() {\n if (this.willHide || this.modal == null) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n\n unlockBodyScrolling(this.host);\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 sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n if (!sixOverlayDismiss.defaultPrevented) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, '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 (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n };\n\n render() {\n return (\n <div\n ref={(el) => (this.dialog = el)}\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__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={!this.noHeader ? `${this.componentId}-title` : null}\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"dialog__header\">\n <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\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 <six-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close\"\n name=\"close\"\n onClick={this.handleCloseClick}\n />\n </header>\n )}\n\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,c as r,h as i}from"./p-f93d8a4e.js";import{a as s}from"./p-0cebf1d2.js";import{a as t}from"./p-a1502802.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block;overflow:hidden}.tag{display:flex;align-items:center;border:solid 1px;font-family:var(--six-font-family);line-height:1;white-space:nowrap;user-select:none;cursor:default}.tag__content{text-overflow:ellipsis;overflow:hidden}.tag__clear::part(base){color:inherit;padding:0}.tag--info{color:var(--six-color-white);background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900)}.tag--success{color:var(--six-color-web-rock-900);border-color:var(--six-color-success-500);background-color:var(--six-color-success-500)}.tag--primary{color:var(--six-color-web-rock-900);border-color:var(--six-color-clay-50);background-color:var(--six-color-clay-50)}.tag--warning{color:var(--six-color-web-rock-900);border-color:var(--six-color-warning-700);background-color:var(--six-color-warning-700)}.tag--danger{color:var(--six-color-white);border-color:var(--six-color-danger-800);background-color:var(--six-color-danger-800)}.tag--action{color:var(--six-color-white);border-color:var(--six-color-action-500);background-color:var(--six-color-action-500)}.tag--small{font-size:var(--six-button-font-size-small);height:calc(var(--six-height-small) * 0.8);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-small);padding:0 var(--six-spacing-x-small)}.tag--small .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xxx-small))}.tag--medium{font-size:var(--six-button-font-size-medium);height:calc(var(--six-height-medium) * 0.8);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-medium);padding:0 var(--six-spacing-small)}.tag--medium .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xx-small))}.tag--large{font-size:var(--six-button-font-size-large);height:calc(var(--six-height-large) * 0.8);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-large);padding:0 var(--six-spacing-medium)}.tag--large .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-x-small))}.tag--pill{border-radius:var(--six-border-radius-pill)}";const e=o;const l=class{constructor(i){a(this,i);this.sixClear=r(this,"six-tag-clear",7);this.resizeObserver=new ResizeObserver(t((()=>this.updateTooltip())));this.updateTooltip=()=>{if(this.tooltipElement!=null&&this.contentSlotElement!=null&&this.contentElement!=null){this.tooltipElement.content=s(this.contentSlotElement);this.tooltipElement.disabled=!(this.contentElement.offsetWidth<this.contentElement.scrollWidth)}};this.handleClearClick=()=>{this.sixClear.emit()};this.type="primary";this.size="medium";this.pill=false;this.clearable=false}connectedCallback(){if(this.contentElement!=null){this.resizeObserver.observe(this.contentElement)}}componentDidLoad(){if(this.contentElement!=null){this.resizeObserver.observe(this.contentElement)}}disconnectedCallback(){this.resizeObserver.disconnect()}render(){return i("span",{key:"59306674f01f712bc2e9daa94716f53120855b5c",part:"base",class:{tag:true,"tag--primary":this.type==="primary","tag--success":this.type==="success","tag--info":this.type==="info","tag--warning":this.type==="warning","tag--danger":this.type==="danger","tag--action":this.type==="action","tag--text":this.type==="text","tag--small":this.size==="small","tag--medium":this.size==="medium","tag--large":this.size==="large","tag--pill":this.pill,"tag--clear":this.clearable}},i("six-tooltip",{key:"ed368646e7f65e5ad2976f22175512d48328da36",ref:a=>this.tooltipElement=a},i("span",{key:"21f45d81e1f0e4778d552b20d11cfcc88bec66ae",ref:a=>this.contentElement=a,part:"content",class:"tag__content"},i("slot",{key:"948620efe64b5a923cf8b65a2f8c3792bdf8e476",ref:a=>this.contentSlotElement=a}))),this.clearable&&i("six-icon-button",{exportparts:"base:clear-button",size:"xSmall",name:"clear",class:"tag__clear",onClick:this.handleClearClick}))}};l.style=e;export{l as six_tag};
|
|
2
|
+
//# sourceMappingURL=p-d717a2f2.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixTagCss","SixTagStyle0","SixTag","this","resizeObserver","ResizeObserver","debounce","updateTooltip","tooltipElement","contentSlotElement","contentElement","content","getTextContent","disabled","offsetWidth","scrollWidth","handleClearClick","sixClear","emit","connectedCallback","observe","componentDidLoad","disconnectedCallback","disconnect","render","h","key","part","class","tag","type","size","pill","clearable","ref","el","exportparts","name","onClick"],"sources":["src/components/six-tag/six-tag.scss?tag=six-tag&encapsulation=shadow","src/components/six-tag/six-tag.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n overflow: hidden;\n}\n\n.tag {\n display: flex;\n align-items: center;\n border: solid 1px;\n font-family: var(--six-font-family);\n line-height: 1;\n white-space: nowrap;\n user-select: none;\n cursor: default;\n}\n\n.tag__content {\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.tag__clear::part(base) {\n color: inherit;\n padding: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--info {\n color: var(--six-color-white);\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n}\n\n.tag--success {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-success-500);\n background-color: var(--six-color-success-500);\n}\n\n.tag--primary {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-clay-50);\n background-color: var(--six-color-clay-50);\n}\n\n.tag--warning {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-warning-700);\n background-color: var(--six-color-warning-700);\n}\n\n.tag--danger {\n color: var(--six-color-white);\n border-color: var(--six-color-danger-800);\n background-color: var(--six-color-danger-800);\n}\n\n.tag--action {\n color: var(--six-color-white);\n border-color: var(--six-color-action-500);\n background-color: var(--six-color-action-500);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--small {\n font-size: var(--six-button-font-size-small);\n height: calc(var(--six-height-small) * 0.8);\n line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-small);\n padding: 0 var(--six-spacing-x-small);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-xxx-small));\n }\n}\n\n.tag--medium {\n font-size: var(--six-button-font-size-medium);\n height: calc(var(--six-height-medium) * 0.8);\n line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-medium);\n padding: 0 var(--six-spacing-small);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-xx-small));\n }\n}\n\n.tag--large {\n font-size: var(--six-button-font-size-large);\n height: calc(var(--six-height-large) * 0.8);\n line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-large);\n padding: 0 var(--six-spacing-medium);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-x-small));\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--pill {\n border-radius: var(--six-border-radius-pill);\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getTextContent } from '../../utils/slot';\nimport { debounce } from '../../utils/execution-control';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tag's content.\n *\n * @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n */\n\n@Component({\n tag: 'six-tag',\n styleUrl: 'six-tag.scss',\n shadow: true,\n})\nexport class SixTag {\n /** The tag's type. */\n @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text' = 'primary';\n\n /** The tag's size. */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Set to true to draw a pill-style tag with rounded edges. */\n @Prop({ reflect: true }) pill = false;\n\n /** Set to true to make the tag clearable. */\n @Prop({ reflect: true }) clearable = false;\n\n /** Emitted when the clear button is activated. */\n @Event({ eventName: 'six-tag-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n private contentSlotElement: HTMLSlotElement | undefined;\n private tooltipElement: HTMLSixTooltipElement | undefined;\n private contentElement: HTMLElement | undefined;\n private resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));\n\n connectedCallback() {\n if (this.contentElement != null) {\n this.resizeObserver.observe(this.contentElement);\n }\n }\n\n componentDidLoad() {\n if (this.contentElement != null) {\n this.resizeObserver.observe(this.contentElement);\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n private updateTooltip = () => {\n if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {\n this.tooltipElement.content = getTextContent(this.contentSlotElement);\n this.tooltipElement.disabled = !(this.contentElement.offsetWidth < this.contentElement.scrollWidth);\n }\n };\n\n private handleClearClick = () => {\n this.sixClear.emit();\n };\n\n render() {\n return (\n <span\n part=\"base\"\n class={{\n tag: true,\n\n // Types\n 'tag--primary': this.type === 'primary',\n 'tag--success': this.type === 'success',\n 'tag--info': this.type === 'info',\n 'tag--warning': this.type === 'warning',\n 'tag--danger': this.type === 'danger',\n 'tag--action': this.type === 'action',\n 'tag--text': this.type === 'text',\n\n // Sizes\n 'tag--small': this.size === 'small',\n 'tag--medium': this.size === 'medium',\n 'tag--large': this.size === 'large',\n\n // Modifers\n 'tag--pill': this.pill,\n 'tag--clear': this.clearable,\n }}\n >\n <six-tooltip ref={(el) => (this.tooltipElement = el)}>\n <span ref={(el) => (this.contentElement = el)} part=\"content\" class=\"tag__content\">\n <slot ref={(el) => (this.contentSlotElement = el as HTMLSlotElement)} />\n </span>\n </six-tooltip>\n\n {this.clearable && (\n <six-icon-button\n exportparts=\"base:clear-button\"\n size=\"xSmall\"\n name=\"clear\"\n class=\"tag__clear\"\n onClick={this.handleClearClick}\n />\n )}\n </span>\n );\n }\n}\n"],"mappings":"0HAAA,MAAMA,EAAY,60EAClB,MAAAC,EAAeD,E,MCsBFE,EAAM,M,iEAmBTC,KAAAC,eAAiB,IAAIC,eAAeC,GAAS,IAAMH,KAAKI,mBAkBxDJ,KAAAI,cAAgB,KACtB,GAAIJ,KAAKK,gBAAkB,MAAQL,KAAKM,oBAAsB,MAAQN,KAAKO,gBAAkB,KAAM,CACjGP,KAAKK,eAAeG,QAAUC,EAAeT,KAAKM,oBAClDN,KAAKK,eAAeK,WAAaV,KAAKO,eAAeI,YAAcX,KAAKO,eAAeK,Y,GAInFZ,KAAAa,iBAAmB,KACzBb,KAAKc,SAASC,MAAM,E,UA3CqF,U,UAG7C,S,UAG9B,M,eAGK,K,CAUrC,iBAAAC,GACE,GAAIhB,KAAKO,gBAAkB,KAAM,CAC/BP,KAAKC,eAAegB,QAAQjB,KAAKO,e,EAIrC,gBAAAW,GACE,GAAIlB,KAAKO,gBAAkB,KAAM,CAC/BP,KAAKC,eAAegB,QAAQjB,KAAKO,e,EAIrC,oBAAAY,GACEnB,KAAKC,eAAemB,Y,CActB,MAAAC,GACE,OACEC,EAAA,QAAAC,IAAA,2CACEC,KAAK,OACLC,MAAO,CACLC,IAAK,KAGL,eAAgB1B,KAAK2B,OAAS,UAC9B,eAAgB3B,KAAK2B,OAAS,UAC9B,YAAa3B,KAAK2B,OAAS,OAC3B,eAAgB3B,KAAK2B,OAAS,UAC9B,cAAe3B,KAAK2B,OAAS,SAC7B,cAAe3B,KAAK2B,OAAS,SAC7B,YAAa3B,KAAK2B,OAAS,OAG3B,aAAc3B,KAAK4B,OAAS,QAC5B,cAAe5B,KAAK4B,OAAS,SAC7B,aAAc5B,KAAK4B,OAAS,QAG5B,YAAa5B,KAAK6B,KAClB,aAAc7B,KAAK8B,YAGrBR,EAAA,eAAAC,IAAA,2CAAaQ,IAAMC,GAAQhC,KAAKK,eAAiB2B,GAC/CV,EAAA,QAAAC,IAAA,2CAAMQ,IAAMC,GAAQhC,KAAKO,eAAiByB,EAAKR,KAAK,UAAUC,MAAM,gBAClEH,EAAA,QAAAC,IAAA,2CAAMQ,IAAMC,GAAQhC,KAAKM,mBAAqB0B,MAIjDhC,KAAK8B,WACJR,EAAA,mBACEW,YAAY,oBACZL,KAAK,SACLM,KAAK,QACLT,MAAM,aACNU,QAASnC,KAAKa,mB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as s,H as t,g as e}from"./p-f93d8a4e.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;font-family:var(--six-font-family)}.tab-panel{border:solid 1px transparent;padding:20px 20px}";const i=o;let r=0;const d=class{constructor(s){a(this,s);this.componentId=`tab-panel-${++r}`;this.name="";this.active=false}render(){return s(t,{key:"6b8958e2148c21062d9d871ffe7a016b2fa8a1c5",id:this.host.id||this.componentId,style:{display:this.active?"block":"none"}},s("div",{key:"a35fd74db0e878943ccc49d7f33746ac1f5fc221",part:"base",class:"tab-panel",role:"tabpanel","aria-selected":this.active?"true":"false","aria-hidden":this.active?"false":"true"},s("slot",{key:"6de9b87d93c055a9c4de931139c7da3a366a2aa1"})))}get host(){return e(this)}};d.style=i;export{d as six_tab_panel};
|
|
2
|
+
//# sourceMappingURL=p-d7739200.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixTabPanelCss","SixTabPanelStyle0","id","SixTabPanel","this","componentId","render","h","Host","key","host","style","display","active","part","class","role"],"sources":["src/components/six-tab-panel/six-tab-panel.scss?tag=six-tab-panel&encapsulation=shadow","src/components/six-tab-panel/six-tab-panel.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n font-family: var(--six-font-family);\n}\n\n.tab-panel {\n border: solid 1px transparent;\n padding: 20px 20px;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab panel's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n tag: 'six-tab-panel',\n styleUrl: 'six-tab-panel.scss',\n shadow: true,\n})\nexport class SixTabPanel {\n private componentId = `tab-panel-${++id}`;\n\n @Element() host!: HTMLSixTabPanelElement;\n\n /** The tab panel's name. */\n @Prop() name = '';\n\n /** When true, the tab panel will be shown. */\n @Prop({ reflect: true }) active = false;\n\n render() {\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId} style={{ display: this.active ? 'block' : 'none' }}>\n <div\n part=\"base\"\n class=\"tab-panel\"\n role=\"tabpanel\"\n aria-selected={this.active ? 'true' : 'false'}\n aria-hidden={this.active ? 'false' : 'true'}\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,6NACvB,MAAAC,EAAeD,ECCf,IAAIE,EAAK,E,MAkBIC,EAAW,M,yBACdC,KAAAC,YAAc,eAAeH,I,UAKtB,G,YAGmB,K,CAElC,MAAAI,GACE,OAEEC,EAACC,EAAI,CAAAC,IAAA,2CAACP,GAAIE,KAAKM,KAAKR,IAAME,KAAKC,YAAaM,MAAO,CAAEC,QAASR,KAAKS,OAAS,QAAU,SACpFN,EAAA,OAAAE,IAAA,2CACEK,KAAK,OACLC,MAAM,YACNC,KAAK,WAAU,gBACAZ,KAAKS,OAAS,OAAS,QAAO,cAChCT,KAAKS,OAAS,QAAU,QAErCN,EAAA,QAAAE,IAAA,8C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["globalScripts"],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"mappings":"AAAY,MAACA,EAAgB,c"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as t,g as a}from"./p-f93d8a4e.js";const d=":host{display:block;overflow:hidden;height:inherit}.six-root{display:grid;grid-template:auto 1fr auto/auto 1fr auto;height:100%}.six-root__container--padded{padding:var(--six-spacing-xxx-large)}.six-root__left-sidebar{height:100%;overflow:scroll;grid-column:1/2}.six-root__right-sidebar{height:100%;overflow:scroll;grid-column:3/4}.six-root nav{overflow:hidden}header{grid-column:1/4;position:sticky;top:0;z-index:var(--six-z-index-header);margin-right:2px}main{height:100%;display:flex;flex-direction:column;justify-content:space-between;grid-column:2/3;overflow:auto}footer{grid-column:1/4}";const i=d;const o=class{constructor(t){e(this,t);this.padded=true;this.stage=null;this.version=""}render(){return t("host",{key:"d004ad641b82d656ccbb7b788a04d8befab64b47",class:"six-root"},t("header",{key:"cce9488ed3c0778120fb1c0ce040a74b8c3b18d6",part:"header"},this.stage&&t("six-stage-indicator",{stage:this.stage},this.version),t("slot",{key:"b5810a66f91e003d83ee9196e0c955b52773794a",name:"header"})),t("nav",{key:"8d7aa97373ddb660d7a6e5ab1b860736726b9ee7",class:"six-root__left-sidebar",part:"left-sidebar"},t("slot",{key:"ab612b588dedf3e3098cd6f423078ef2fdc83bed",name:"left-sidebar"})),t("main",{key:"2c6e91c192a5346302d6d0be19a4e43d190cf5d4",part:"main"},t("div",{key:"bb52732ddf5462b1d536444f0f584fa48ba5ee55",class:{"six-root__container":true,"six-root__container--padded":this.padded},part:"container"},t("slot",{key:"23db6d1c2426497e40e91ef7d7898f37e1977465",name:"main"})),t("div",{key:"f083d6d754ff7a502efe8f20663a423075f85e9f",class:"six-root__footer"},t("slot",{key:"d902e6b083181958e12f8f808b2dc98e2bb99dfd",name:"footer"}))),t("nav",{key:"05b158597d15d8536e8eb8ccc66f0ff971ebdc92",class:"six-root__right-sidebar",part:"right-sidebar"},t("slot",{key:"3a9168dbd5039344e948c22c822ca7f65648cb1f",name:"right-sidebar"})))}get host(){return a(this)}};o.style=i;export{o as six_root};
|
|
2
|
+
//# sourceMappingURL=p-e3766acb.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixRootCss","SixRootStyle0","SixRoot","render","h","key","class","part","this","stage","version","name","padded"],"sources":["src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n display: block;\n overflow: hidden;\n height: inherit;\n}\n\n.six-root {\n display: grid;\n grid-template: auto 1fr auto / auto 1fr auto;\n height: 100%;\n\n &__container {\n &--padded {\n padding: var(--six-spacing-xxx-large);\n }\n }\n\n &__left-sidebar {\n height: 100%;\n overflow: scroll;\n grid-column: 1 / 2;\n }\n\n &__right-sidebar {\n height: 100%;\n overflow: scroll;\n grid-column: 3 / 4;\n }\n\n nav {\n overflow: hidden;\n }\n}\n\nheader {\n grid-column: 1 / 4;\n position: sticky;\n top: 0;\n z-index: var(--six-z-index-header);\n // border fix\n margin-right: 2px;\n}\n\nmain {\n height: 100%;\n\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n grid-column: 2 / 3;\n overflow: auto;\n}\n\nfooter {\n grid-column: 1 / 4;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n tag: 'six-root',\n styleUrl: 'six-root.scss',\n shadow: true,\n})\nexport class SixRoot {\n @Element() host!: HTMLSixRootElement;\n\n /** Defines whether the content section should be padded */\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() padded = true;\n\n /** Defines the stage of the application*/\n @Prop() stage: StageType = null;\n\n /** Defines the version of the application*/\n @Prop() version = '';\n\n render() {\n return (\n <host class=\"six-root\">\n <header part=\"header\">\n {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n <slot name=\"header\" />\n </header>\n <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n <slot name=\"left-sidebar\" />\n </nav>\n <main part=\"main\">\n <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n <slot name=\"main\" />\n </div>\n <div class=\"six-root__footer\">\n <slot name=\"footer\" />\n </div>\n </main>\n <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n <slot name=\"right-sidebar\" />\n </nav>\n </host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAa,mlBACnB,MAAAC,EAAeD,E,MCkBFE,EAAO,M,qCAKD,K,WAGU,K,aAGT,E,CAElB,MAAAC,GACE,OACEC,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YACVF,EAAA,UAAAC,IAAA,2CAAQE,KAAK,UACVC,KAAKC,OAASL,EAAA,uBAAqBK,MAAOD,KAAKC,OAAQD,KAAKE,SAC7DN,EAAA,QAAAC,IAAA,2CAAMM,KAAK,YAEbP,EAAA,OAAAC,IAAA,2CAAKC,MAAM,yBAAyBC,KAAK,gBACvCH,EAAA,QAAAC,IAAA,2CAAMM,KAAK,kBAEbP,EAAA,QAAAC,IAAA,2CAAME,KAAK,QACTH,EAAA,OAAAC,IAAA,2CAAKC,MAAO,CAAE,sBAAuB,KAAM,8BAA+BE,KAAKI,QAAUL,KAAK,aAC5FH,EAAA,QAAAC,IAAA,2CAAMM,KAAK,UAEbP,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,QAAAC,IAAA,2CAAMM,KAAK,aAGfP,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0BAA0BC,KAAK,iBACxCH,EAAA,QAAAC,IAAA,2CAAMM,KAAK,mB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as i,h as s,g as e}from"./p-f93d8a4e.js";import{g as r}from"./p-0cebf1d2.js";const a=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:contents;margin:0}.alert{position:relative;display:flex;align-items:stretch;background-color:var(--six-color-white);border:solid 1px var(--six-color-web-rock-200);border-top-width:3px;border-radius:var(--six-border-radius-medium);box-shadow:var(--box-shadow);font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:1.6;color:var(--six-color-web-rock-700);opacity:0;transform:scale(0.9);transition:var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;margin:inherit}.alert:not(.alert--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--shadow{box-shadow:var(--six-shadow-medium)}.alert--open{opacity:1;transform:none}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large)}.alert__icon ::slotted(*){margin-left:var(--six-spacing-large)}.alert--primary{border-top-color:var(--six-color-web-rock-900)}.alert--primary .alert__icon{color:var(--six-color-web-rock-900)}.alert--success{border-top-color:var(--six-color-success-600)}.alert--success .alert__icon{color:var(--six-color-success-600)}.alert--info{border-top-color:var(--six-color-action-500)}.alert--info .alert__icon{color:var(--six-color-action-500)}.alert--warning{border-top-color:var(--six-color-warning-800)}.alert--warning .alert__icon{color:var(--six-color-warning-800)}.alert--danger{border-top-color:var(--six-color-danger-900)}.alert--danger .alert__icon{color:var(--six-color-danger-900)}.alert__message{flex:1 1 auto;padding:var(--six-spacing-large);overflow:hidden}.alert__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large);padding-right:var(--six-spacing-medium)}";const o=a;const n=Object.assign(document.createElement("div"),{className:"six-toast-stack"});const l=class{constructor(s){t(this,s);this.sixShow=i(this,"six-alert-show",7);this.sixAfterShow=i(this,"six-alert-after-show",7);this.sixHide=i(this,"six-alert-hide",7);this.sixAfterHide=i(this,"six-alert-after-hide",7);this.handleCloseClick=()=>{this.hide()};this.handleMouseEnter=()=>{this.pauseAutoHide()};this.handleMouseLeave=()=>{this.resetAutoHide()};this.handleTransitionEnd=t=>{const i=t.target;if(t.propertyName==="opacity"&&i.classList.contains("alert")){this.isVisible=this.open;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}};this.isVisible=false;this.open=false;this.closable=false;this.type="primary";this.duration=Infinity}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}componentWillLoad(){if(this.open){this.show()}}async show(){if(this.isVisible){return}const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;if(this.duration<Infinity){this.autoHideTimeout=window.setTimeout((()=>this.hide()),this.duration)}}async hide(){if(!this.isVisible){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}clearTimeout(this.autoHideTimeout);this.isVisible=false;this.open=false}async toast(t=true){return new Promise((i=>{var s;if(!n.parentElement){document.body.append(n)}n.append(this.host);if(t){const t=document.querySelector("six-root");const i=r(t,"header");const e=(s=t===null||t===void 0?void 0:t.shadowRoot)===null||s===void 0?void 0:s.querySelector("host main");if(e!=null&&e instanceof HTMLElement){const t=e.offsetWidth-e.clientWidth;n.style.right=`${t}px`}if(i!=null){const t=i===null||i===void 0?void 0:i.getBoundingClientRect();n.style.top=`${t.top+t.height}px`}}else{n.style.top="0";n.style.right="0"}requestAnimationFrame((()=>this.show()));this.host.addEventListener("six-alert-after-hide",(()=>{this.host.remove();i();if(n.querySelector("six-alert")===null){n.remove()}}),{once:true})}))}pauseAutoHide(){clearTimeout(this.autoHideTimeout)}resetAutoHide(){if(this.open&&this.duration<Infinity){this.autoHideTimeout=window.setTimeout((()=>this.hide()),this.duration)}}restartAutoHide(){this.pauseAutoHide();this.resetAutoHide()}render(){const t=this.host.closest(".six-toast-stack")!=null;return s("div",{key:"cd9d14bef5923cf2ec8add1f61e92733aa9dd59f",part:"base",class:{alert:true,"alert--open":this.open,"alert--visible":this.isVisible,"alert--closable":this.closable,"alert--primary":this.type==="primary","alert--success":this.type==="success","alert--info":this.type==="info","alert--warning":this.type==="warning","alert--danger":this.type==="danger","alert--shadow":t},role:"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true",onTransitionEnd:this.handleTransitionEnd,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},s("span",{key:"fb6e8cf52eb87ddb1a81a797482457b3afccaa98",part:"icon",class:"alert__icon"},s("slot",{key:"3d97a399ac05620214ef8a4d6a19c37a103f76a2",name:"icon"})),s("span",{key:"3984ce04838d33a688b6cfafb7827646e0e9d582",part:"message",class:"alert__message"},s("slot",{key:"f84ff31b7b74571b2ff9f074b617cb344313939e"})),this.closable&&s("span",{class:"alert__close"},s("six-icon-button",{name:"clear",exportparts:"base:close-button",onClick:this.handleCloseClick})))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}}};l.style=o;export{l as six_alert};
|
|
2
|
+
//# sourceMappingURL=p-e43e5e45.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixAlertCss","SixAlertStyle0","toastStack","Object","assign","document","createElement","className","SixAlert","this","handleCloseClick","hide","handleMouseEnter","pauseAutoHide","handleMouseLeave","resetAutoHide","handleTransitionEnd","event","target","propertyName","classList","contains","isVisible","open","sixAfterShow","emit","sixAfterHide","Infinity","handleOpenChange","show","handleDurationChange","restartAutoHide","componentWillLoad","sixShow","defaultPrevented","duration","autoHideTimeout","window","setTimeout","sixHide","clearTimeout","toast","adjustPosition","Promise","resolve","parentElement","body","append","host","sixRoot","querySelector","headerSlot","getSlot","mainSlot","_a","shadowRoot","HTMLElement","scrollbarWidth","offsetWidth","clientWidth","style","right","rect","getBoundingClientRect","top","height","requestAnimationFrame","addEventListener","remove","once","render","asToast","closest","h","key","part","class","alert","closable","type","role","onTransitionEnd","onMouseEnter","onMouseLeave","name","exportparts","onClick"],"sources":["src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --box-shadow: The alert's box shadow.\n */\n:host {\n display: contents;\n\n // For better DX, we'll reset the margin here so the base part can inherit it\n margin: 0;\n}\n\n.alert {\n position: relative;\n display: flex;\n align-items: stretch;\n background-color: var(--six-color-white);\n border: solid 1px var(--six-color-web-rock-200);\n border-top-width: 3px;\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--box-shadow);\n font-family: var(--six-font-sans);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-normal);\n line-height: 1.6;\n color: var(--six-color-web-rock-700);\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;\n margin: inherit;\n\n &:not(.alert--visible) {\n @include hidden;\n }\n}\n\n.alert--shadow {\n box-shadow: var(--six-shadow-medium);\n}\n\n.alert--open {\n opacity: 1;\n transform: none;\n}\n\n.alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-large);\n\n ::slotted(*) {\n margin-left: var(--six-spacing-large);\n }\n}\n\n.alert--primary {\n border-top-color: var(--six-color-web-rock-900);\n\n .alert__icon {\n color: var(--six-color-web-rock-900);\n }\n}\n\n.alert--success {\n border-top-color: var(--six-color-success-600);\n\n .alert__icon {\n color: var(--six-color-success-600);\n }\n}\n\n.alert--info {\n border-top-color: var(--six-color-action-500);\n\n .alert__icon {\n color: var(--six-color-action-500);\n }\n}\n\n.alert--warning {\n border-top-color: var(--six-color-warning-800);\n\n .alert__icon {\n color: var(--six-color-warning-800);\n }\n}\n\n.alert--danger {\n border-top-color: var(--six-color-danger-900);\n\n .alert__icon {\n color: var(--six-color-danger-900);\n }\n}\n\n.alert__message {\n flex: 1 1 auto;\n padding: var(--six-spacing-large);\n overflow: hidden;\n}\n\n.alert__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-large);\n padding-right: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot } from '../../utils/slot';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the alert icon.\n * @part message - The alert message.\n * @part close-button - The close button.\n */\n\n@Component({\n tag: 'six-alert',\n styleUrl: 'six-alert.scss',\n shadow: true,\n})\nexport class SixAlert {\n private autoHideTimeout?: number;\n\n @Element() host!: HTMLSixAlertElement;\n\n @State() isVisible = false;\n\n /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** Set to true to make the alert closable. */\n @Prop({ reflect: true }) closable = false;\n\n /** The type of alert. */\n @Prop({ reflect: true }) type: AlertType = 'primary';\n\n /**\n * The length of time, in milliseconds, the alert will show before closing itself.\n * If the user hovers over the toast alert, the timer will pause.\n * On leaving the element with the mouse, the timer resets.\n */\n @Prop() duration = Infinity;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n @Watch('duration')\n handleDurationChange() {\n this.restartAutoHide();\n }\n\n /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event({ eventName: 'six-alert-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the alert opens and all transitions are complete. */\n @Event({ eventName: 'six-alert-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event({ eventName: 'six-alert-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the alert closes and all transitions are complete. */\n @Event({ eventName: 'six-alert-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n /** Shows the alert. */\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 sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n\n if (this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n }\n }\n\n /** Hides the alert */\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 sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n clearTimeout(this.autoHideTimeout);\n this.isVisible = false;\n this.open = false;\n }\n\n /**\n * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n * calling this method again. The returned promise will resolve after the alert is hidden.\n * @param adjustPosition If true, the top and right position of the toast stack is shifted according to the\n * six-root header's height and the presence of a vertical scrollbar.\n */\n @Method()\n async toast(adjustPosition = true) {\n return new Promise<void>((resolve) => {\n if (!toastStack.parentElement) {\n document.body.append(toastStack);\n }\n toastStack.append(this.host);\n\n if (adjustPosition) {\n const sixRoot = document.querySelector('six-root');\n const headerSlot = getSlot(sixRoot, 'header');\n const mainSlot = sixRoot?.shadowRoot?.querySelector('host main');\n if (mainSlot != null && mainSlot instanceof HTMLElement) {\n const scrollbarWidth = mainSlot.offsetWidth - mainSlot.clientWidth;\n toastStack.style.right = `${scrollbarWidth}px`;\n }\n if (headerSlot != null) {\n const rect = headerSlot?.getBoundingClientRect();\n toastStack.style.top = `${rect.top + rect.height}px`;\n }\n } else {\n toastStack.style.top = '0';\n toastStack.style.right = '0';\n }\n\n requestAnimationFrame(() => this.show());\n\n this.host.addEventListener(\n 'six-alert-after-hide',\n () => {\n this.host.remove();\n resolve();\n\n // Remove the toast stack from the DOM when there are no more alerts\n if (toastStack.querySelector('six-alert') === null) {\n toastStack.remove();\n }\n },\n { once: true }\n );\n });\n }\n\n private pauseAutoHide() {\n clearTimeout(this.autoHideTimeout);\n }\n\n private resetAutoHide() {\n if (this.open && this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n }\n }\n\n private restartAutoHide() {\n this.pauseAutoHide();\n this.resetAutoHide();\n }\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleMouseEnter = () => {\n this.pauseAutoHide();\n };\n\n private handleMouseLeave = () => {\n this.resetAutoHide();\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 (event.propertyName === 'opacity' && target.classList.contains('alert')) {\n this.isVisible = this.open;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n };\n\n render() {\n const asToast = this.host.closest('.six-toast-stack') != null;\n\n return (\n <div\n part=\"base\"\n class={{\n alert: true,\n 'alert--open': this.open,\n 'alert--visible': this.isVisible,\n 'alert--closable': this.closable,\n 'alert--primary': this.type === 'primary',\n 'alert--success': this.type === 'success',\n 'alert--info': this.type === 'info',\n 'alert--warning': this.type === 'warning',\n 'alert--danger': this.type === 'danger',\n 'alert--shadow': asToast,\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n onTransitionEnd={this.handleTransitionEnd}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <span part=\"icon\" class=\"alert__icon\">\n <slot name=\"icon\" />\n </span>\n\n <span part=\"message\" class=\"alert__message\">\n <slot />\n </span>\n\n {this.closable && (\n <span class=\"alert__close\">\n <six-icon-button\n name=\"clear\"\n exportparts=\"base:close-button\"\n onClick={this.handleCloseClick}\n ></six-icon-button>\n </span>\n )}\n </div>\n );\n }\n}\n\nexport type AlertType = 'primary' | 'success' | 'info' | 'warning' | 'danger';\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as i,h as s,g as e}from"./p-f93d8a4e.js";import{P as n}from"./p-7f856f00.js";import{E as o}from"./p-8bfb4bfc.js";import{a as r,D as h}from"./p-a1502802.js";import{a as l}from"./p-0cebf1d2.js";function a(t){const i=t.tabIndex;return i>-1}function d(t){if(a(t)){return t}if(t.shadowRoot!=null){const i=[...t.shadowRoot.children].find((t=>a(t)));if(i!=null){return i}}if(t.children!=null){return[...t.children].map((t=>d(t))).at(0)}return undefined}const u=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);border:1px solid var(--six-color-web-rock-300);box-shadow:var(--six-shadow-small);opacity:0;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;max-width:90vw}.dropdown__panel__scroll{max-height:18.75rem;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none}.dropdown__panel__scroll--virtual{overflow-y:hidden;overflow-x:hidden}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}.filter{border-bottom:1px solid var(--six-color-web-rock-300)}.filter__icon{color:var(--six-color-web-rock-600)}";const c=u;let f=0;const p=class{constructor(e){t(this,e);this.sixShow=i(this,"six-dropdown-show",7);this.sixAfterShow=i(this,"six-dropdown-after-show",7);this.sixHide=i(this,"six-dropdown-hide",7);this.sixAfterHide=i(this,"six-dropdown-after-hide",7);this.sixAutoFilter=i(this,"six-dropdown-auto-filter-fired",7);this.sixAsyncFilterFired=i(this,"six-async-filter-fired",7);this.sixScroll=i(this,"six-dropdown-scroll",7);this.componentId=`dropdown-${++f}`;this.isVisible=false;this.resizeObserver=new ResizeObserver(r((()=>this.updatePanelPosition()),100));this.eventListeners=new o;this.getMenuItems=()=>{var t,i,e,n;if(this.options.length>0){return{sixMenuItems:this.renderedOptions.map((t=>s("six-menu-item",{value:t.value},t.label))),selectionContainerItems:[]}}if(this.panel==null)return{sixMenuItems:[],selectionContainerItems:[]};const o=(t=this.panelSlot)===null||t===void 0?void 0:t.assignedElements({flatten:true}).filter(w).at(0);const r=(i=this.panelSlot)===null||i===void 0?void 0:i.assignedElements({flatten:true}).filter(v).at(0);const h=(o===null||o===void 0?void 0:o.querySelectorAll("six-menu-item"))||[];let l=((e=r===null||r===void 0?void 0:r.querySelector("slot"))===null||e===void 0?void 0:e.assignedElements().filter((t=>m(t))))||[];if(l.length===0){l=Array.from(((n=r===null||r===void 0?void 0:r.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("six-menu-item"))||[])}if(h.length>0||l.length>0){return{sixMenuItems:l,selectionContainerItems:[...h]}}else{return{sixMenuItems:r?Array.from(r.querySelectorAll("six-menu-item")):[],selectionContainerItems:[]}}};this.handleDocumentKeyDown=t=>{var i;const s=t;if(s.key==="Escape"){void this.hide();this.focusOnTrigger();return}if(this.filterInputElement===((i=this.host.shadowRoot)===null||i===void 0?void 0:i.activeElement)){if(s.key==="ArrowDown"){const{sixMenuItems:t,selectionContainerItems:i}=this.getMenuItems();const s=[...i,...t].find((t=>t.style.display!=="none"));if(s!=null){s.setFocus()}}}if(s.key==="Tab"){if(this.open&&document.activeElement!=null&&m(document.activeElement)){s.preventDefault();void this.hide();this.focusOnTrigger();return}setTimeout((()=>{var t,i;const s=this.container.getRootNode()instanceof ShadowRoot?(i=(t=document.activeElement)===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.activeElement:document.activeElement;if((s===null||s===void 0?void 0:s.closest(this.container.tagName.toLowerCase()))!==this.container){void this.hide();return}}))}};this.handleDocumentMouseDown=t=>{const i=t.composedPath();if(!i.includes(this.container)){void this.hide();return}};this.handlePanelSelect=t=>{const i=t.target;if(this.closeOnSelect&&v(i)){void this.hide();this.focusOnTrigger()}};this.handleTriggerClick=()=>{this.open?this.hide():this.show()};this.handleTriggerKeyDown=t=>{if(t.key==="Escape"){this.focusOnTrigger();void this.hide();return}if(!this.disableHideOnEnterAndSpace&&[" ","Enter"].includes(t.key)){t.preventDefault();this.open?void this.hide():void this.show();return}const i=this.getMenu();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();if(!this.open){void this.show()}if(i==null){return}const s=[...i.querySelectorAll("six-menu-item")];const e=s.at(0);const n=s.at(s.length-1);if(t.key==="ArrowDown"&&e!=null){e.setFocus();return}if(t.key==="ArrowUp"&&n!=null){n.setFocus();return}}const s=["Tab","Shift","Meta","Ctrl","Alt"];if(this.open&&i!=null&&!s.includes(t.key)){void i.typeToSelect(t.key);return}};this.handleTriggerKeyUp=t=>{if(t.key===" "){t.preventDefault()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};this.handleDropdownScroll=()=>{if(this.scrollPanel==null)return;this.sixScroll.emit({scrollHeight:this.scrollPanel.scrollHeight,scrollTop:this.scrollPanel.scrollTop,scrollbarHeight:this.scrollPanel.offsetHeight*(this.scrollPanel.offsetHeight/this.scrollPanel.scrollHeight),scrollRatio:this.scrollPanel.scrollTop/(this.scrollPanel.scrollHeight-this.scrollPanel.clientHeight)})};this.open=false;this.placement="bottom-start";this.closeOnSelect=true;this.distance=4;this.skidding=0;this.hoist=false;this.containingElement=undefined;this.filter=false;this.asyncFilter=false;this.filterPlaceholder="Filter...";this.autofocusFilter=true;this.filterDebounce=0;this.disableHideOnEnterAndSpace=false;this.options=[];this.virtualScroll=false;this.matchTriggerWidth=false;this.renderedOptions=[]}get filterEnabled(){return this.filter||this.asyncFilter}get container(){return this.containingElement||this.host}handleOpenChange(){this.open?this.show():this.hide();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){if(this.popover==null)return;this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding})}handleOptionsChange(){this.validateOptions()}validateOptions(){if(!Array.isArray(this.options)){this.options=[]}if(this.virtualScroll&&this.options.length===0){console.error("Options must be defined when using virtual scrolling")}this.renderedOptions=[...this.options]}componentWillLoad(){this.validateOptions();if(this.asyncFilter){this.filterDebounce=h}}componentDidLoad(){this.init();if(this.open){void this.show()}}connectedCallback(){this.init()}init(){this.initPopover();const t=this.filterInputElement;if(t!=null){this.eventListeners.add(t,"six-input-input",r((()=>{var i;const s=(i=t.value)!==null&&i!==void 0?i:"";if(this.filter){this.applyFilter(s)}this.emitFilterEvents(s)}),this.filterDebounce))}}applyFilter(t){var i;const s=((i=t.toLowerCase())===null||i===void 0?void 0:i.trim())||"";if(this.options.length>0){this.renderedOptions=this.options.filter((t=>{var i,e,n,o;return t.label&&((e=(i=String(t.label))===null||i===void 0?void 0:i.toLowerCase())===null||e===void 0?void 0:e.includes(s))||t.value&&((o=(n=String(t.value))===null||n===void 0?void 0:n.toLowerCase())===null||o===void 0?void 0:o.includes(s))}))}else{const{selectionContainerItems:t,sixMenuItems:i}=this.getMenuItems();const e=t.map((t=>t.value));t.forEach((async t=>{t.style.display=await b(t,s)?"unset":"none"}));i.forEach((async t=>{t.style.display=await b(t,s)&&!e.includes(t.value)?"unset":"none"}))}}resetFilter(){if(this.filterInputElement!=null){this.filterInputElement.value="";this.emitFilterEvents("")}if(this.options.length>0){this.renderedOptions=[...this.options]}else{const{selectionContainerItems:t,sixMenuItems:i}=this.getMenuItems();[...t,...i].forEach((t=>t.style.display="unset"))}}emitFilterEvents(t){if(this.filter){this.sixAutoFilter.emit({filterValue:t})}else if(this.asyncFilter){this.sixAsyncFilterFired.emit({filterValue:t})}}initPopover(){if(this.trigger==null||this.positioner==null)return;this.popover=new n(this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>{if(this.filterEnabled){this.resetFilter()}this.sixAfterHide.emit()},onAfterShow:async()=>{this.sixAfterShow.emit()},onTransitionEnd:()=>{if(!this.open&&this.scrollPanel!=null){this.scrollPanel.scrollTop=0}}})}disconnectedCallback(){var t;this.resizeObserver.disconnect();this.eventListeners.removeAll();void this.hide();(t=this.popover)===null||t===void 0?void 0:t.destroy();this.popover=undefined}async show(){if(this.isVisible||this.popover==null||this.panel==null){return}const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.eventListeners.add(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.add(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=true;this.open=true;if(this.trigger!=null){this.resizeObserver.observe(this.trigger)}this.updatePanelPosition();this.popover.show();if(this.filterEnabled&&this.autofocusFilter){requestAnimationFrame((()=>{var t;(t=this.filterInputElement)===null||t===void 0?void 0:t.setFocus()}))}}updatePanelPosition(){if(!this.open){return}if(this.matchTriggerWidth&&this.trigger!=null&&this.panel!=null){const t=this.trigger.getBoundingClientRect().width;this.panel.style.minWidth=`${t}px`}if(this.popover!=null){this.popover.reposition()}}async hide(){this.resizeObserver.disconnect();if(!this.isVisible||this.panel==null||this.popover==null){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}this.eventListeners.remove(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.remove(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=false;this.open=false;this.popover.hide()}focusOnTrigger(){var t;if(this.trigger==null)return;const i=(t=this.triggerSlot)===null||t===void 0?void 0:t.assignedElements({flatten:true}).at(0);if(i!=null){if(typeof i.setFocus==="function"){i.setFocus()}else if(typeof i.focus==="function"){i.focus()}}}getMenu(){var t;return(t=this.panelSlot)===null||t===void 0?void 0:t.assignedElements({flatten:true}).filter(v).at(0)}async reposition(){if(this.open&&this.popover!=null){this.popover.reposition()}}updateAccessibleTrigger(){var t;if(this.trigger==null)return;const i=((t=this.triggerSlot)===null||t===void 0?void 0:t.assignedElements({flatten:true}))||[];const s=i.map(d).at(0);if(s!=null){s.setAttribute("aria-haspopup","true");s.setAttribute("aria-expanded",this.open?"true":"false")}}render(){return s("div",{key:"6569a6e118fd68e19f14dcae0553e25f81987923",part:"base",id:this.componentId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{key:"be04c5d687eafa3c58c9fed9cf43f72d43aa45ef",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown,onKeyUp:this.handleTriggerKeyUp},s("slot",{key:"fba562d4fc45a0874e5cf8caad5e9710d6dd34e0",name:"trigger",ref:t=>this.triggerSlot=t,onSlotchange:this.handleTriggerSlotChange})),s("div",{key:"d37f1cb0246d47ca34004f35e3575e8433d998c8",ref:t=>this.positioner=t,class:{dropdown__positioner:true,dropdown__positioner__filtered:(this.filter||this.asyncFilter)&&!this.hoist}},s("div",{key:"e6c08b51f39a12259b4d8911770e1e1754dc4b8e",ref:t=>this.panel=t,part:"panel",class:"dropdown__panel",role:"menu","aria-hidden":this.open?"false":"true","aria-labelledby":this.componentId},this.filterEnabled&&s("six-input",{class:{filter:true,"filter-hidden":!this.open},"dropdown-search":true,"aria-hidden":this.open?"false":"true",ref:t=>this.filterInputElement=t,placeholder:this.filterPlaceholder},s("six-icon",{class:"filter__icon",slot:"suffix",size:"small"},"search")),s("div",{key:"174d0a5dd5965877e9278475112e2f14d959966d",class:{dropdown__panel__scroll:true,"dropdown__panel__scroll--virtual":this.virtualScroll},onScroll:this.handleDropdownScroll,ref:t=>this.scrollPanel=t},s("slot",{key:"fa0fc63a45e693cc6655db03b0382f028aea9473",ref:t=>this.panelSlot=t}),this.options.length>0&&s("six-menu",{part:"menu",items:this.renderedOptions,virtualScroll:this.virtualScroll})),s("slot",{key:"f24f41a9a70f0624078d43eb60b41e841ee90bf7",name:"dropdown-footer"}))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],distance:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"],placement:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],options:["handleOptionsChange"],virtualScroll:["handleOptionsChange"]}}};function v(t){return(t===null||t===void 0?void 0:t.tagName.toLowerCase())==="six-menu"}function m(t){return(t===null||t===void 0?void 0:t.tagName.toLowerCase())==="six-menu-item"}function w(t){var i;return((i=t===null||t===void 0?void 0:t.getAttribute("class"))===null||i===void 0?void 0:i.includes("selection-container"))||false}async function b(t,i){return t.value.toLowerCase().includes(i)||(await t.getTextLabel()).toLowerCase().includes(i)}p.style=c;const x=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.menu{padding:var(--six-spacing-xx-small) 0;border:none;box-shadow:var(--six-shadow-small);overflow-y:auto;overflow-x:hidden}.menu:focus{outline:none}.no-shadow{box-shadow:none}";const g=x;const _=t=>{var i,s,e;return(e=(s=(i=t===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".menu-item"))===null||s===void 0?void 0:s.classList)===null||e===void 0?void 0:e.contains("menu-item--focused")};const y=t=>(t===null||t===void 0?void 0:t.tagName.toLowerCase())==="six-menu-item";const k=({value:t,label:i})=>s("six-menu-item",{key:t,value:t},i);const C=5;const I=64;const A=class{constructor(s){t(this,s);this.sixMenuItemSelected=i(this,"six-menu-item-selected",7);this.eventListeners=new o;this.typeToSelectString="";this.handleScrolling=()=>{if(this.menuWrapper==null)return;this.scrollingIndex=Math.floor(this.menuWrapper.scrollTop/this.sixMenuItemHeight)};this.removeBoxShadow=false;this.items=null;this.itemsShown=undefined;this.virtualScroll=false;this.itemSize=10;this.scrollingDebounce=15;this.disableKeyboardHandling=false;this.scrollingIndex=0;this.sixMenuItemHeight=I}connectedCallback(){this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}componentWillLoad(){if(this.items===null){return}}componentDidLoad(){this.setupForVirtualScrollingAfterRendering()}disconnectedCallback(){this.eventListeners.removeAll()}async typeToSelect(t){var i;clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelectString=""),750);this.typeToSelectString+=t.toLowerCase();const s=this.getItems();for(const t of s){const s=(i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector("slot:not([name])");const e=l(s).toLowerCase().trim();if(e.substring(0,this.typeToSelectString.length)===this.typeToSelectString){t.setFocus();break}}}getItemsShown(){var t;const i=this.virtualScroll?C:0;return(t=this.itemsShown)!==null&&t!==void 0?t:i}setupForVirtualScrollingAfterRendering(){var t,i;if(!this.virtualScroll||this.menuWrapper==null)return;this.eventListeners.add(this.menuWrapper,"scroll",r(this.handleScrolling,this.scrollingDebounce));const s=(i=(t=this.menu)===null||t===void 0?void 0:t.querySelector("six-menu-item"))===null||i===void 0?void 0:i.clientHeight;if(s!=null&&s>0){this.sixMenuItemHeight=s}}getItems(){if(this.menu==null)return[];if(this.items!=null){return this.items.map(k)}const t=this.menu.querySelector("slot");if(t==null)return[];return[...t.assignedElements({flatten:true})].filter((t=>y(t)&&!t.disabled))}getActiveItemIndex(){const t=this.getItems();const i=this.getActiveItem();if(i!=null){const s=t.indexOf(i);if(s>-1){return s}}const s=this.extractItemsFromDOM();return s.findIndex(_)}getActiveItem(){var t;const i=this.getItems().find((t=>t===document.activeElement));if(i!=null){return i}return(t=this.extractItemsFromDOM())===null||t===void 0?void 0:t.find(_)}extractItemsFromDOM(){var t,i;return Array.from((i=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelectorAll("six-menu-item"))!==null&&i!==void 0?i:[])}setActiveItem(t){t===null||t===void 0?void 0:t.setFocus()}handleClick(t){const i=t.target;const s=i.closest("six-menu-item");if(s&&!s.disabled){this.sixMenuItemSelected.emit({name:s.value,item:s})}}handleKeyDown(t){if(this.disableKeyboardHandling){return}if(t.key==="Enter"){const i=this.getActiveItem();t.preventDefault();if(i!=null){this.sixMenuItemSelected.emit({name:i.value,item:i})}}if(t.key===" "){t.preventDefault()}if(["ArrowDown","ArrowUp","Home","End"].includes(t.key)){const i=this.items===null?this.getItems():this.extractItemsFromDOM();let s=this.getActiveItemIndex();if(i.length>0){t.preventDefault();if(t.key==="ArrowDown"){s++}else if(t.key==="ArrowUp"){s--}else if(t.key==="Home"){s=0}else if(t.key==="End"){s=i.length-1}if(s<0)s=0;if(s>i.length-1)s=i.length-1;this.setActiveItem(i[s]);return}}void this.typeToSelect(t.key)}getMenuWrapperStyle(){var t;const i={};if(this.getItemsShown()>0){i.height=`${((t=this.getItemsShown())!==null&&t!==void 0?t:0)*this.sixMenuItemHeight}px`}return Object.assign({},i)}getMenuContainerStyle(){const t={};if(this.virtualScroll){t.transform=`translateY(${this.sixMenuItemHeight*this.scrollingIndex}px)`}return Object.assign({},t)}getScrollbarGhostStyle(){const t={};if(this.virtualScroll&&this.items!==null){t.height=`${this.items.length*this.sixMenuItemHeight-this.itemSize*this.sixMenuItemHeight}px`}return Object.assign({},t)}renderItems(){if(this.items===undefined||this.items===null){return}if(!this.virtualScroll){return this.items.map(k)}return this.items.slice(this.scrollingIndex,Math.min(this.items.length,this.itemSize+this.scrollingIndex)).map((({value:t,label:i})=>s("six-menu-item",{checkType:"check",key:t,value:t},i)))}render(){return s("div",{key:"a8806ec6aee657eb677931fc1ba1405caec3e96e",ref:t=>this.menuWrapper=t,style:this.getMenuWrapperStyle(),part:"wrapper",class:{menu:true,".no-shadow":this.removeBoxShadow}},s("div",{key:"34b85eb38385f88e87f49a6689cf6ad082723a87",ref:t=>this.menu=t,part:"base",role:"menu",onClick:this.handleClick,onKeyDown:this.handleKeyDown,tabIndex:0,style:this.getMenuContainerStyle()},s("slot",{key:"a62dcc8bd5d97a8d479f4a4270aedcb77b729aea"}),this.renderItems()),this.virtualScroll&&s("div",{style:this.getScrollbarGhostStyle()}))}get host(){return e(this)}};A.style=g;export{p as six_dropdown,A as six_menu};
|
|
2
|
+
//# sourceMappingURL=p-e798314b.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["isTabbable","el","tabIndex","getNearestTabbableElement","shadowRoot","tabbableShadowChild","children","find","e","map","at","undefined","sixDropdownCss","SixDropdownStyle0","id","SixDropdown","this","componentId","isVisible","resizeObserver","ResizeObserver","debounce","updatePanelPosition","eventListeners","EventListeners","getMenuItems","options","length","sixMenuItems","renderedOptions","option","h","value","label","selectionContainerItems","panel","selectionContainer","_a","panelSlot","assignedElements","flatten","filter","isSelectionContainer","sixMenuElement","_b","isSixMenu","querySelectorAll","_c","querySelector","isSixMenuItem","Array","from","_d","handleDocumentKeyDown","event","keyboardEvent","key","hide","focusOnTrigger","filterInputElement","host","activeElement","item","style","display","setFocus","open","document","preventDefault","setTimeout","container","getRootNode","ShadowRoot","closest","tagName","toLowerCase","handleDocumentMouseDown","path","composedPath","includes","handlePanelSelect","target","closeOnSelect","handleTriggerClick","show","handleTriggerKeyDown","disableHideOnEnterAndSpace","menu","getMenu","menuItems","firstMenuItem","lastMenuItem","ignoredKeys","typeToSelect","handleTriggerKeyUp","handleTriggerSlotChange","updateAccessibleTrigger","handleDropdownScroll","scrollPanel","sixScroll","emit","scrollHeight","scrollTop","scrollbarHeight","offsetHeight","scrollRatio","clientHeight","filterEnabled","asyncFilter","containingElement","handleOpenChange","handlePopoverOptionsChange","popover","setOptions","strategy","hoist","placement","distance","skidding","handleOptionsChange","validateOptions","isArray","virtualScroll","console","error","componentWillLoad","filterDebounce","DEFAULT_DEBOUNCE_FAST","componentDidLoad","init","connectedCallback","initPopover","add","filterValue","applyFilter","emitFilterEvents","filterTerm","lowerCaseFilterTerm","trim","String","selectionContainerValues","s","forEach","async","menuItem","containsFilterTerm","resetFilter","sixAutoFilter","sixAsyncFilterFired","trigger","positioner","Popover","transitionElement","onAfterHide","sixAfterHide","onAfterShow","sixAfterShow","onTransitionEnd","disconnectedCallback","disconnect","removeAll","destroy","sixShow","defaultPrevented","observe","autofocusFilter","requestAnimationFrame","matchTriggerWidth","width","getBoundingClientRect","minWidth","reposition","sixHide","remove","triggerSlot","focus","accessibleTrigger","setAttribute","render","part","class","dropdown","ref","onClick","onKeyDown","onKeyUp","name","onSlotchange","dropdown__positioner","dropdown__positioner__filtered","role","placeholder","filterPlaceholder","slot","size","dropdown__panel__scroll","onScroll","items","getAttribute","getTextLabel","sixMenuCss","SixMenuStyle0","isFocusedMenuItem","classList","contains","isSIXMenuItemElement","mapToMenuItem","DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING","DEFAULT_SIX_MENU_ITEM_HEIGHT","SixMenu","typeToSelectString","handleScrolling","menuWrapper","scrollingIndex","Math","floor","sixMenuItemHeight","handleClick","bind","handleKeyDown","setupForVirtualScrollingAfterRendering","clearTimeout","typeToSelectTimeout","getItems","getTextContent","substring","getItemsShown","defaultItemsShown","itemsShown","scrollingDebounce","menuItemHeight","disabled","getActiveItemIndex","selectedItem","getActiveItem","itemIndex","indexOf","extractItemsFromDOM","findIndex","i","setActiveItem","clickedItem","sixMenuItemSelected","disableKeyboardHandling","activeItem","indexOfActiveItem","getMenuWrapperStyle","styles","height","Object","assign","getMenuContainerStyle","transform","getScrollbarGhostStyle","itemSize","renderItems","slice","min","checkType","removeBoxShadow"],"sources":["src/utils/tabbable.ts","src/components/six-dropdown/six-dropdown.scss?tag=six-dropdown&encapsulation=shadow","src/components/six-dropdown/six-dropdown.tsx","src/components/six-menu/six-menu.scss?tag=six-menu&encapsulation=shadow","src/components/six-menu/six-menu.tsx"],"sourcesContent":["export function isTabbable(el: HTMLElement) {\n const tabIndex = el.tabIndex;\n return tabIndex > -1;\n}\n\nexport function getNearestTabbableElement(el: HTMLElement): HTMLElement | undefined {\n // Check the element\n if (isTabbable(el)) {\n return el;\n }\n\n // Check the element's shadow root\n if (el.shadowRoot != null) {\n const tabbableShadowChild = [...el.shadowRoot.children].find((e) => isTabbable(e as HTMLElement)) as HTMLElement;\n if (tabbableShadowChild != null) {\n return tabbableShadowChild;\n }\n }\n\n // Check the element's children\n if (el.children != null) {\n return [...el.children].map((e) => getNearestTabbableElement(e as HTMLElement)).at(0);\n }\n\n return undefined;\n}\n","@import 'src/global/component';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n display: inline-block;\n}\n\n.dropdown {\n position: relative;\n}\n\n.dropdown__trigger {\n display: block;\n}\n\n.dropdown__positioner {\n position: absolute;\n z-index: var(--six-z-index-dropdown);\n\n &__filtered {\n width: 100%;\n }\n}\n\n.dropdown__panel {\n font-family: var(--six-font-sans);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-normal);\n color: var(--color);\n background-color: var(--six-panel-background-color);\n border-radius: var(--six-border-radius-medium);\n border: 1px solid var(--six-color-web-rock-300);\n box-shadow: var(--six-shadow-small);\n opacity: 0;\n pointer-events: none;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n max-width: 90vw;\n}\n\n.dropdown__panel__scroll {\n max-height: 18.75rem;\n overflow-y: auto;\n overflow-x: hidden;\n overscroll-behavior: none;\n\n &--virtual {\n overflow-y: hidden;\n overflow-x: hidden;\n }\n}\n\n.filter-hidden {\n display: none;\n}\n\n.dropdown__positioner {\n &[data-popper-placement^='top'] .dropdown__panel {\n transform-origin: bottom;\n }\n\n &[data-popper-placement^='bottom'] .dropdown__panel {\n transform-origin: top;\n }\n\n &[data-popper-placement^='left'] .dropdown__panel {\n transform-origin: right;\n }\n\n &[data-popper-placement^='right'] .dropdown__panel {\n transform-origin: left;\n }\n\n &.popover-visible .dropdown__panel {\n opacity: 1;\n transform: none;\n pointer-events: all;\n }\n}\n\n.filter {\n border-bottom: 1px solid var(--six-color-web-rock-300);\n\n &__icon {\n color: var(--six-color-web-rock-600);\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport Popover from '../../utils/popover';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EmptyPayload } from '../../utils/types';\nimport { SixMenuItemData } from '../six-menu/six-menu';\n\nexport interface SixDropdownAutoFilterPayload {\n filterValue: string;\n}\n\nexport interface SixDropdownAsyncFilterPayload {\n filterValue: string;\n}\n\nexport interface SixDropdownScrollPayload {\n scrollHeight: number;\n scrollTop: number;\n scrollbarHeight: number;\n scrollRatio: number;\n}\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot trigger - The dropdown's trigger, usually a `<six-button>` element.\n * @slot dropdown-footer - The dropdown's footer area.\n * @slot - The dropdown's content.\n *\n * @part base - The component's base wrapper.\n * @part trigger - The container that wraps the trigger.\n * @part panel - The panel that gets shown when the dropdown is open.\n */\n\n@Component({\n tag: 'six-dropdown',\n styleUrl: 'six-dropdown.scss',\n shadow: true,\n})\nexport class SixDropdown {\n private componentId = `dropdown-${++id}`;\n private isVisible = false;\n private panel?: HTMLElement;\n private scrollPanel?: HTMLElement;\n private panelSlot?: HTMLSlotElement;\n private positioner?: HTMLElement;\n private popover?: Popover;\n private trigger?: HTMLElement;\n private triggerSlot?: HTMLSlotElement;\n private resizeObserver = new ResizeObserver(debounce(() => this.updatePanelPosition(), 100));\n\n // the input element shown in the dropdown when filter is set to true\n private filterInputElement?: HTMLSixInputElement;\n\n @Element() host!: HTMLSixDropdownElement;\n\n /** Indicates whether 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 /**\n * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n * inside the viewport.\n */\n @Prop() placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'bottom-start';\n\n /** Determines whether the dropdown should hide when a menu item is selected. */\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() closeOnSelect = true;\n\n /** The distance in pixels from which to offset the panel away from its trigger. */\n @Prop() distance = 4;\n\n /** The distance in pixels from which to offset the panel along its trigger. */\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 /** The dropdown will close when the user interacts outside of this element (e.g. clicking). */\n @Prop() containingElement?: HTMLElement;\n\n /**\n * Set to true to allow auto filtering for entries in the dropdown.\n * With this flag the dropdown will automatically filter itsel.\n * If you need to coordinate the shown elements yourself,\n * e.g. because you need to call an endpoint use asyncFilter instead\n */\n @Prop() filter = false;\n\n /**\n * Set to true to allow async filtering.\n * When you enter something in the search field the component will only emit an event but not filter any elements itself.\n * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself\n */\n @Prop() asyncFilter = false;\n\n /** The filter's placeholder text. */\n @Prop() filterPlaceholder = 'Filter...';\n\n /** By default the search field will be focused when opening a dropdown with filtering enabled. */\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() autofocusFilter = true;\n\n get filterEnabled() {\n return this.filter || this.asyncFilter;\n }\n\n /** The debounce for the filter callbacks. */\n @Prop({ mutable: true }) filterDebounce = 0;\n\n /** The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this */\n @Prop() disableHideOnEnterAndSpace = false;\n\n /** Set the options to be shown in the dropdown (alternative to setting the elements via html)*/\n @Prop({ mutable: true }) options: SixMenuItemData[] = [];\n\n /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n * are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n @Prop() virtualScroll = false;\n\n /**\n * Determines if the dropdown panel's width should match the width of the trigger element.\n *\n * If set to `true`, the panel will resize its width to align with the trigger's width.\n * If `false` or omitted, the panel will maintain its default width.\n */\n @Prop() matchTriggerWidth = false;\n\n get container() {\n return this.containingElement || this.host;\n }\n\n /** Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event({ eventName: 'six-dropdown-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the dropdown opens and all transitions are complete. */\n @Event({ eventName: 'six-dropdown-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event({ eventName: 'six-dropdown-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the dropdown closes and all transitions are complete. */\n @Event({ eventName: 'six-dropdown-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the auto filter is triggered */\n @Event({ eventName: 'six-dropdown-auto-filter-fired' }) sixAutoFilter!: EventEmitter<SixDropdownAutoFilterPayload>;\n\n /** Emitted when the async filter is triggered */\n @Event({ eventName: 'six-async-filter-fired' }) sixAsyncFilterFired!: EventEmitter<SixDropdownAsyncFilterPayload>;\n\n /** Emitted when the user scrolls inside dropdown panel.*/\n @Event({ eventName: 'six-dropdown-scroll' }) sixScroll!: EventEmitter<SixDropdownScrollPayload>;\n\n private eventListeners = new EventListeners();\n\n // internal representation of options, so we don't have to make options mutable\n @State() renderedOptions: SixMenuItemData[] = [];\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n this.updateAccessibleTrigger();\n }\n\n @Watch('distance')\n @Watch('hoist')\n @Watch('placement')\n @Watch('skidding')\n handlePopoverOptionsChange() {\n if (this.popover == null) return;\n\n this.popover.setOptions({\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n });\n }\n\n @Watch('options')\n @Watch('virtualScroll')\n handleOptionsChange() {\n this.validateOptions();\n }\n\n private validateOptions() {\n if (!Array.isArray(this.options)) {\n this.options = [];\n }\n if (this.virtualScroll && this.options.length === 0) {\n console.error('Options must be defined when using virtual scrolling');\n }\n this.renderedOptions = [...this.options];\n }\n\n componentWillLoad() {\n this.validateOptions();\n if (this.asyncFilter) {\n this.filterDebounce = DEFAULT_DEBOUNCE_FAST;\n }\n }\n\n componentDidLoad() {\n this.init();\n if (this.open) {\n void this.show();\n }\n }\n\n connectedCallback() {\n this.init();\n }\n\n private init() {\n this.initPopover();\n\n // listen to filter\n const filterInputElement = this.filterInputElement;\n if (filterInputElement != null) {\n this.eventListeners.add(\n filterInputElement,\n 'six-input-input',\n debounce(() => {\n const filterValue = filterInputElement.value ?? '';\n if (this.filter) {\n this.applyFilter(filterValue);\n }\n this.emitFilterEvents(filterValue);\n }, this.filterDebounce)\n );\n }\n }\n\n private applyFilter(filterTerm: string) {\n const lowerCaseFilterTerm = filterTerm.toLowerCase()?.trim() || '';\n if (this.options.length > 0) {\n this.renderedOptions = this.options.filter(\n (option) =>\n (option.label && String(option.label)?.toLowerCase()?.includes(lowerCaseFilterTerm)) ||\n (option.value && String(option.value)?.toLowerCase()?.includes(lowerCaseFilterTerm))\n );\n } else {\n const { selectionContainerItems, sixMenuItems } = this.getMenuItems();\n const selectionContainerValues = selectionContainerItems.map((s) => s.value);\n\n // Filter items in selection container\n selectionContainerItems.forEach(async (menuItem) => {\n menuItem.style.display = (await containsFilterTerm(menuItem, lowerCaseFilterTerm)) ? 'unset' : 'none';\n });\n\n // Filter other items. Always hide items which contained in the selection container.\n sixMenuItems.forEach(async (menuItem) => {\n menuItem.style.display =\n (await containsFilterTerm(menuItem, lowerCaseFilterTerm)) &&\n !selectionContainerValues.includes(menuItem.value)\n ? 'unset'\n : 'none';\n });\n }\n }\n\n private resetFilter() {\n if (this.filterInputElement != null) {\n this.filterInputElement.value = '';\n this.emitFilterEvents('');\n }\n if (this.options.length > 0) {\n this.renderedOptions = [...this.options];\n } else {\n const { selectionContainerItems, sixMenuItems } = this.getMenuItems();\n [...selectionContainerItems, ...sixMenuItems].forEach((item) => (item.style.display = 'unset'));\n }\n }\n\n private emitFilterEvents(filterValue: string) {\n if (this.filter) {\n this.sixAutoFilter.emit({ filterValue });\n } else if (this.asyncFilter) {\n this.sixAsyncFilterFired.emit({ filterValue });\n }\n }\n\n private initPopover() {\n if (this.trigger == null || this.positioner == null) return;\n this.popover = new Popover(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: () => {\n if (this.filterEnabled) {\n this.resetFilter();\n }\n this.sixAfterHide.emit();\n },\n onAfterShow: async () => {\n this.sixAfterShow.emit();\n },\n onTransitionEnd: () => {\n if (!this.open && this.scrollPanel != null) {\n this.scrollPanel.scrollTop = 0;\n }\n },\n });\n }\n\n private getMenuItems = (): {\n selectionContainerItems: HTMLSixMenuItemElement[];\n sixMenuItems: HTMLSixMenuItemElement[];\n } => {\n if (this.options.length > 0) {\n return {\n sixMenuItems: this.renderedOptions.map((option) => (\n <six-menu-item value={option.value}>{option.label}</six-menu-item>\n )),\n selectionContainerItems: [],\n };\n }\n if (this.panel == null) return { sixMenuItems: [], selectionContainerItems: [] };\n\n // Relies on the implementation of six-select. Its dropdown slot contains two elements,\n // one for the selected menu items, and one for the other items.\n const selectionContainer = this.panelSlot?.assignedElements({ flatten: true }).filter(isSelectionContainer).at(0);\n const sixMenuElement = this.panelSlot?.assignedElements({ flatten: true }).filter(isSixMenu).at(0) as\n | HTMLSixMenuElement\n | undefined;\n const selectionContainerItems = selectionContainer?.querySelectorAll('six-menu-item') || [];\n let sixMenuItems: HTMLSixMenuItemElement[] =\n sixMenuElement\n ?.querySelector('slot')\n ?.assignedElements()\n .filter((el): el is HTMLSixMenuItemElement => isSixMenuItem(el)) || [];\n\n if (sixMenuItems.length === 0) {\n sixMenuItems = Array.from(sixMenuElement?.shadowRoot?.querySelectorAll('six-menu-item') || []);\n }\n\n if (selectionContainerItems.length > 0 || sixMenuItems.length > 0) {\n return { sixMenuItems, selectionContainerItems: [...selectionContainerItems] };\n } else {\n return {\n sixMenuItems: sixMenuElement ? Array.from(sixMenuElement.querySelectorAll('six-menu-item')) : [],\n selectionContainerItems: [],\n };\n }\n };\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n this.eventListeners.removeAll();\n void this.hide();\n this.popover?.destroy();\n this.popover = undefined;\n }\n\n /** Shows the dropdown panel */\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible || this.popover == null || this.panel == null) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.eventListeners.add(this.panel, 'six-menu-item-selected', this.handlePanelSelect);\n this.eventListeners.add(document, 'keydown', this.handleDocumentKeyDown);\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n\n this.isVisible = true;\n this.open = true;\n\n if (this.trigger != null) {\n this.resizeObserver.observe(this.trigger);\n }\n this.updatePanelPosition();\n this.popover.show();\n\n if (this.filterEnabled && this.autofocusFilter) {\n requestAnimationFrame(() => {\n this.filterInputElement?.setFocus();\n });\n }\n }\n\n /**\n * Set min width of dropdown panel to the width of the trigger element\n */\n private updatePanelPosition() {\n if (!this.open) {\n return;\n }\n\n if (this.matchTriggerWidth && this.trigger != null && this.panel != null) {\n const width = this.trigger.getBoundingClientRect().width;\n this.panel.style.minWidth = `${width}px`;\n }\n\n if (this.popover != null) {\n this.popover.reposition();\n }\n }\n\n /** Hides the dropdown panel */\n @Method()\n async hide() {\n this.resizeObserver.disconnect();\n\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible || this.panel == null || this.popover == null) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.eventListeners.remove(this.panel, 'six-menu-item-selected', this.handlePanelSelect);\n this.eventListeners.remove(document, 'keydown', this.handleDocumentKeyDown);\n this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n\n this.isVisible = false;\n this.open = false;\n this.popover.hide();\n }\n\n private focusOnTrigger() {\n if (this.trigger == null) return;\n const trigger = this.triggerSlot?.assignedElements({ flatten: true }).at(0) as HTMLSixButtonElement | undefined;\n if (trigger != null) {\n if (typeof trigger.setFocus === 'function') {\n trigger.setFocus();\n } else if (typeof trigger.focus === 'function') {\n trigger.focus();\n }\n }\n }\n\n private getMenu(): HTMLSixMenuElement | undefined {\n return this.panelSlot?.assignedElements({ flatten: true }).filter(isSixMenu).at(0) as\n | HTMLSixMenuElement\n | undefined;\n }\n\n /**\n * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\n * is activated.\n *\n * @deprecated: use the property `matchTriggerWidth` instead.\n */\n @Method()\n async reposition() {\n if (this.open && this.popover != null) {\n this.popover.reposition();\n }\n }\n\n private handleDocumentKeyDown = (event: Event) => {\n const keyboardEvent = event as KeyboardEvent;\n // Close when escape is pressed\n if (keyboardEvent.key === 'Escape') {\n void this.hide();\n this.focusOnTrigger();\n return;\n }\n\n if (this.filterInputElement === this.host.shadowRoot?.activeElement) {\n if (keyboardEvent.key === 'ArrowDown') {\n const { sixMenuItems, selectionContainerItems } = this.getMenuItems();\n const item = [...selectionContainerItems, ...sixMenuItems].find((item) => item.style.display !== 'none');\n if (item != null) {\n item.setFocus();\n }\n }\n }\n\n // Handle tabbing\n if (keyboardEvent.key === 'Tab') {\n // Tabbing within an open menu should close the dropdown and refocus the trigger\n if (this.open && document.activeElement != null && isSixMenuItem(document.activeElement)) {\n keyboardEvent.preventDefault();\n void this.hide();\n this.focusOnTrigger();\n return;\n }\n\n // Tabbing outside the containing element closes the panel\n //\n // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,\n // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.\n setTimeout(() => {\n const activeElement =\n this.container.getRootNode() instanceof ShadowRoot\n ? document.activeElement?.shadowRoot?.activeElement\n : document.activeElement;\n\n if (activeElement?.closest(this.container.tagName.toLowerCase()) !== this.container) {\n void this.hide();\n return;\n }\n });\n }\n };\n\n private handleDocumentMouseDown = (event: Event) => {\n // Close when clicking outside the containing element\n const path = event.composedPath() as EventTarget[];\n if (!path.includes(this.container)) {\n void this.hide();\n return;\n }\n };\n\n private handlePanelSelect = (event: Event) => {\n const target = event.target as HTMLElement;\n\n // Hide the dropdown when a menu item is selected\n if (this.closeOnSelect && isSixMenu(target)) {\n void this.hide();\n this.focusOnTrigger();\n }\n };\n\n private handleTriggerClick = () => {\n this.open ? this.hide() : this.show();\n };\n\n private handleTriggerKeyDown = (event: KeyboardEvent) => {\n // Close when escape or tab is pressed\n if (event.key === 'Escape') {\n this.focusOnTrigger();\n void this.hide();\n return;\n }\n\n // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same\n // key again to hide the menu in case they don't want to make a selection.\n if (!this.disableHideOnEnterAndSpace && [' ', 'Enter'].includes(event.key)) {\n event.preventDefault();\n this.open ? void this.hide() : void this.show();\n return;\n }\n\n const menu = this.getMenu();\n\n // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a\n // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for\n // faster navigation.\n if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n event.preventDefault();\n\n // Show the menu if it's not already open\n if (!this.open) {\n void this.show();\n }\n\n if (menu == null) {\n return;\n }\n const menuItems = [...menu.querySelectorAll('six-menu-item')];\n const firstMenuItem = menuItems.at(0);\n const lastMenuItem = menuItems.at(menuItems.length - 1);\n\n // Focus on a menu item\n if (event.key === 'ArrowDown' && firstMenuItem != null) {\n firstMenuItem.setFocus();\n return;\n }\n\n if (event.key === 'ArrowUp' && lastMenuItem != null) {\n lastMenuItem.setFocus();\n return;\n }\n }\n\n // Other keys bring focus to the menu and initiate type-to-select behavior\n const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];\n if (this.open && menu != null && !ignoredKeys.includes(event.key)) {\n void menu.typeToSelect(event.key);\n return;\n }\n };\n\n private handleTriggerKeyUp = (event: KeyboardEvent) => {\n // Prevent space from triggering a click event in Firefox\n if (event.key === ' ') {\n event.preventDefault();\n }\n };\n\n private handleTriggerSlotChange = () => {\n this.updateAccessibleTrigger();\n };\n\n private handleDropdownScroll = () => {\n if (this.scrollPanel == null) return;\n\n this.sixScroll.emit({\n scrollHeight: this.scrollPanel.scrollHeight,\n scrollTop: this.scrollPanel.scrollTop,\n scrollbarHeight: this.scrollPanel.offsetHeight * (this.scrollPanel.offsetHeight / this.scrollPanel.scrollHeight),\n scrollRatio: this.scrollPanel.scrollTop / (this.scrollPanel.scrollHeight - this.scrollPanel.clientHeight),\n });\n };\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 // a child of the slotted element, or an element in the slotted element's shadow root.\n //\n // For example, the accessible trigger of an <sl-button> is a <button> located inside its shadow root.\n //\n // To determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n //\n private updateAccessibleTrigger() {\n if (this.trigger == null) return;\n const assignedElements = (this.triggerSlot?.assignedElements({ flatten: true }) || []) as HTMLElement[];\n const accessibleTrigger = assignedElements.map(getNearestTabbableElement).at(0);\n if (accessibleTrigger != null) {\n accessibleTrigger.setAttribute('aria-haspopup', 'true');\n accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n }\n }\n\n render() {\n return (\n <div\n part=\"base\"\n id={this.componentId}\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 onClick={this.handleTriggerClick}\n onKeyDown={this.handleTriggerKeyDown}\n onKeyUp={this.handleTriggerKeyUp}\n >\n <slot\n name=\"trigger\"\n ref={(el) => (this.triggerSlot = el as HTMLSlotElement)}\n onSlotchange={this.handleTriggerSlotChange}\n />\n </span>\n\n {/* Position the panel with a wrapper since the popover makes use of `translate`. This let's us add transitions\n on the panel without interfering with the position. */}\n <div\n ref={(el) => (this.positioner = el)}\n class={{\n dropdown__positioner: true,\n dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,\n }}\n >\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dropdown__panel\"\n role=\"menu\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-labelledby={this.componentId}\n >\n {this.filterEnabled && (\n <six-input\n class={{\n filter: true,\n 'filter-hidden': !this.open,\n }}\n dropdown-search\n aria-hidden={this.open ? 'false' : 'true'}\n ref={(el) => (this.filterInputElement = el)}\n placeholder={this.filterPlaceholder}\n >\n <six-icon class=\"filter__icon\" slot=\"suffix\" size=\"small\">\n search\n </six-icon>\n </six-input>\n )}\n <div\n class={{\n dropdown__panel__scroll: true,\n 'dropdown__panel__scroll--virtual': this.virtualScroll,\n }}\n onScroll={this.handleDropdownScroll}\n ref={(el) => (this.scrollPanel = el)}\n >\n <slot ref={(el) => (this.panelSlot = el as HTMLSlotElement)} />\n {this.options.length > 0 && (\n <six-menu part=\"menu\" items={this.renderedOptions} virtualScroll={this.virtualScroll}></six-menu>\n )}\n </div>\n <slot name=\"dropdown-footer\"></slot>\n </div>\n </div>\n </div>\n );\n }\n}\n\nfunction isSixMenu(el?: Element): boolean {\n return el?.tagName.toLowerCase() === 'six-menu';\n}\nfunction isSixMenuItem(el?: Element): boolean {\n return el?.tagName.toLowerCase() === 'six-menu-item';\n}\nfunction isSelectionContainer(el?: Element): boolean {\n return el?.getAttribute('class')?.includes('selection-container') || false;\n}\nasync function containsFilterTerm(menuItem: HTMLSixMenuItemElement, lowerCaseFilterTerm: string): Promise<boolean> {\n return (\n menuItem.value.toLowerCase().includes(lowerCaseFilterTerm) ||\n (await menuItem.getTextLabel()).toLowerCase().includes(lowerCaseFilterTerm)\n );\n}\n","@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.menu {\n padding: var(--six-spacing-xx-small) 0;\n border: none;\n box-shadow: var(--six-shadow-small);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.menu:focus {\n outline: none;\n}\n\n.no-shadow {\n box-shadow: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\nimport { StyleDeclaration } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { debounce } from '../../utils/execution-control';\n\nexport interface SixMenuItemData {\n label: string;\n value: string;\n}\n\nexport interface SixMenuItemSelectedPayload {\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nconst isFocusedMenuItem = (menuItem: HTMLSixMenuItemElement) =>\n menuItem?.shadowRoot?.querySelector('.menu-item')?.classList?.contains('menu-item--focused');\n\nconst isSIXMenuItemElement = (el?: Element): el is HTMLSixMenuItemElement =>\n el?.tagName.toLowerCase() === 'six-menu-item';\n\nconst mapToMenuItem = ({ value, label }: SixMenuItemData) => (\n <six-menu-item key={value} value={value}>\n {label}\n </six-menu-item>\n);\n\nconst DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;\n\nconst DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu's content, including menu items, menu dividers, and menu labels.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n tag: 'six-menu',\n styleUrl: 'six-menu.scss',\n shadow: true,\n})\nexport class SixMenu {\n private readonly eventListeners = new EventListeners();\n\n private menu?: HTMLElement;\n private menuWrapper?: HTMLElement;\n private typeToSelectString = '';\n private typeToSelectTimeout?: number;\n\n @Element() host!: HTMLSixMenuElement;\n\n /** Emitted when a menu item is selected. */\n @Event({ eventName: 'six-menu-item-selected' }) sixMenuItemSelected!: EventEmitter<SixMenuItemSelectedPayload>;\n\n /** Set to true to remove the box-shadow */\n @Prop() removeBoxShadow = false;\n\n /** Set the options to be shown in the dropdown */\n @Prop() items: SixMenuItemData[] | null = null;\n\n /** Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown */\n @Prop() itemsShown?: number;\n\n /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\n * are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */\n @Prop() virtualScroll = false;\n\n /**\n * Used for virtual scrolling\n * Define how many items should be rendered in the DOM when using virtual scrolling\n */\n @Prop() itemSize = 10;\n\n /**\n * Used for virtual scrolling\n * Define the debounce for listening on scrolling changes in milliseconds.\n * The lower the number the more sensitive the component reacts to scrolling changes.\n */\n @Prop() scrollingDebounce = 15;\n\n /**\n * Internal: Disables handling of key presses.\n */\n @Prop() disableKeyboardHandling = false;\n\n /**\n * Used to calculate which items should be rendered in the DOM\n */\n @State()\n private scrollingIndex = 0;\n\n // set a default item height, this variable will be updated with the real value after the first render.\n // However, it's necessary to have a default value because we can only fetch the proper height after the first render\n @State()\n sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;\n\n connectedCallback() {\n this.handleClick = this.handleClick.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n componentWillLoad() {\n if (this.items === null) {\n return;\n }\n }\n\n private handleScrolling = () => {\n if (this.menuWrapper == null) return;\n // for performance improvements we only update the DOM if the scrollRatio change \"enough\"\n this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);\n };\n\n componentDidLoad() {\n this.setupForVirtualScrollingAfterRendering();\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n /**\n * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\n * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the\n * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\n * enabling type-to-select when the menu doesn't have focus.\n */\n @Method()\n async typeToSelect(key: string) {\n clearTimeout(this.typeToSelectTimeout);\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);\n this.typeToSelectString += key.toLowerCase();\n const items = this.getItems();\n for (const item of items) {\n const slot = item.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n const label = getTextContent(slot).toLowerCase().trim();\n if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {\n item.setFocus();\n break;\n }\n }\n }\n\n private getItemsShown(): number {\n const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;\n return this.itemsShown ?? defaultItemsShown;\n }\n\n private setupForVirtualScrollingAfterRendering() {\n if (!this.virtualScroll || this.menuWrapper == null) return;\n\n this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));\n\n // set menu height to proper height once the item is rendered.\n const menuItemHeight = this.menu?.querySelector('six-menu-item')?.clientHeight;\n if (menuItemHeight != null && menuItemHeight > 0) {\n this.sixMenuItemHeight = menuItemHeight;\n }\n }\n\n private getItems(): HTMLSixMenuItemElement[] {\n if (this.menu == null) return [];\n\n if (this.items != null) {\n return this.items.map(mapToMenuItem);\n }\n\n const slot = this.menu.querySelector('slot');\n if (slot == null) return [];\n return [...slot.assignedElements({ flatten: true })].filter(\n (el): el is HTMLSixMenuItemElement => isSIXMenuItemElement(el) && !el.disabled\n );\n }\n\n private getActiveItemIndex() {\n const items = this.getItems();\n const selectedItem = this.getActiveItem();\n if (selectedItem != null) {\n const itemIndex = items.indexOf(selectedItem);\n if (itemIndex > -1) {\n return itemIndex;\n }\n }\n const sixMenuItems = this.extractItemsFromDOM();\n return sixMenuItems.findIndex(isFocusedMenuItem);\n }\n\n private getActiveItem(): HTMLSixMenuItemElement | undefined {\n const activeElement = this.getItems().find((i) => i === document.activeElement);\n if (activeElement != null) {\n return activeElement;\n }\n return this.extractItemsFromDOM()?.find(isFocusedMenuItem);\n }\n\n private extractItemsFromDOM() {\n return Array.from(this.host.shadowRoot?.querySelectorAll('six-menu-item') ?? []);\n }\n\n private setActiveItem(item: HTMLSixMenuItemElement) {\n item?.setFocus();\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const clickedItem = target.closest('six-menu-item');\n if (clickedItem && !clickedItem.disabled) {\n this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });\n }\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (this.disableKeyboardHandling) {\n return;\n }\n\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const activeItem = this.getActiveItem();\n event.preventDefault();\n\n if (activeItem != null) {\n this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });\n }\n }\n\n // Prevent scrolling when space is pressed\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move the selection when pressing down or up\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();\n\n let indexOfActiveItem = this.getActiveItemIndex();\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n indexOfActiveItem++;\n } else if (event.key === 'ArrowUp') {\n indexOfActiveItem--;\n } else if (event.key === 'Home') {\n indexOfActiveItem = 0;\n } else if (event.key === 'End') {\n indexOfActiveItem = items.length - 1;\n }\n\n if (indexOfActiveItem < 0) indexOfActiveItem = 0;\n if (indexOfActiveItem > items.length - 1) indexOfActiveItem = items.length - 1;\n\n this.setActiveItem(items[indexOfActiveItem]);\n\n return;\n }\n }\n\n void this.typeToSelect(event.key);\n }\n\n private getMenuWrapperStyle() {\n const styles: Partial<StyleDeclaration> = {};\n if (this.getItemsShown() > 0) {\n // calculate the proper height to show the correct number of items\n styles.height = `${(this.getItemsShown() ?? 0) * this.sixMenuItemHeight}px`;\n }\n return {\n ...styles,\n };\n }\n\n private getMenuContainerStyle() {\n const styles: Partial<StyleDeclaration> = {};\n\n if (this.virtualScroll) {\n // calculate height of content are if all items would be rendered so the scrollbar has the proper size\n styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;\n }\n\n return {\n ...styles,\n };\n }\n\n private getScrollbarGhostStyle() {\n const styles: Partial<StyleDeclaration> = {};\n\n if (this.virtualScroll && this.items !== null) {\n styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;\n }\n\n return {\n ...styles,\n };\n }\n\n private renderItems() {\n if (this.items === undefined || this.items === null) {\n return;\n }\n\n if (!this.virtualScroll) {\n return this.items.map(mapToMenuItem);\n }\n\n return this.items\n .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))\n .map(({ value, label }: SixMenuItemData) => (\n <six-menu-item checkType=\"check\" key={value} value={value}>\n {label}\n </six-menu-item>\n ));\n }\n\n render() {\n return (\n <div\n ref={(el) => (this.menuWrapper = el)}\n style={this.getMenuWrapperStyle()}\n part=\"wrapper\"\n class={{\n menu: true,\n '.no-shadow': this.removeBoxShadow,\n }}\n >\n <div\n ref={(el) => (this.menu = el)}\n part=\"base\"\n role=\"menu\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n tabIndex={0}\n style={this.getMenuContainerStyle()}\n >\n <slot />\n {this.renderItems()}\n </div>\n {this.virtualScroll && <div style={this.getScrollbarGhostStyle()} />}\n </div>\n );\n }\n}\n"],"mappings":"yNAAgBA,EAAWC,GACzB,MAAMC,EAAWD,EAAGC,SACpB,OAAOA,GAAY,CACrB,C,SAEgBC,EAA0BF,GAExC,GAAID,EAAWC,GAAK,CAClB,OAAOA,C,CAIT,GAAIA,EAAGG,YAAc,KAAM,CACzB,MAAMC,EAAsB,IAAIJ,EAAGG,WAAWE,UAAUC,MAAMC,GAAMR,EAAWQ,KAC/E,GAAIH,GAAuB,KAAM,CAC/B,OAAOA,C,EAKX,GAAIJ,EAAGK,UAAY,KAAM,CACvB,MAAO,IAAIL,EAAGK,UAAUG,KAAKD,GAAML,EAA0BK,KAAmBE,GAAG,E,CAGrF,OAAOC,SACT,CCzBA,MAAMC,EAAiB,iiDACvB,MAAAC,EAAeD,ECsBf,IAAIE,EAAK,E,MAsBIC,EAAW,M,oYACdC,KAAAC,YAAc,cAAcH,IAC5BE,KAAAE,UAAY,MAQZF,KAAAG,eAAiB,IAAIC,eAAeC,GAAS,IAAML,KAAKM,uBAAuB,MAuH/EN,KAAAO,eAAiB,IAAIC,EA0JrBR,KAAAS,aAAe,K,YAIrB,GAAIT,KAAKU,QAAQC,OAAS,EAAG,CAC3B,MAAO,CACLC,aAAcZ,KAAKa,gBAAgBpB,KAAKqB,GACtCC,EAAA,iBAAeC,MAAOF,EAAOE,OAAQF,EAAOG,SAE9CC,wBAAyB,G,CAG7B,GAAIlB,KAAKmB,OAAS,KAAM,MAAO,CAAEP,aAAc,GAAIM,wBAAyB,IAI5E,MAAME,GAAqBC,EAAArB,KAAKsB,aAAS,MAAAD,SAAA,SAAAA,EAAEE,iBAAiB,CAAEC,QAAS,OAAQC,OAAOC,GAAsBhC,GAAG,GAC/G,MAAMiC,GAAiBC,EAAA5B,KAAKsB,aAAS,MAAAM,SAAA,SAAAA,EAAEL,iBAAiB,CAAEC,QAAS,OAAQC,OAAOI,GAAWnC,GAAG,GAGhG,MAAMwB,GAA0BE,IAAkB,MAAlBA,SAAkB,SAAlBA,EAAoBU,iBAAiB,mBAAoB,GACzF,IAAIlB,IACFmB,EAAAJ,IAAc,MAAdA,SAAc,SAAdA,EACIK,cAAc,WAAO,MAAAD,SAAA,SAAAA,EACrBR,mBACDE,QAAQxC,GAAqCgD,EAAchD,OAAQ,GAExE,GAAI2B,EAAaD,SAAW,EAAG,CAC7BC,EAAesB,MAAMC,OAAKC,EAAAT,IAAc,MAAdA,SAAc,SAAdA,EAAgBvC,cAAU,MAAAgD,SAAA,SAAAA,EAAEN,iBAAiB,mBAAoB,G,CAG7F,GAAIZ,EAAwBP,OAAS,GAAKC,EAAaD,OAAS,EAAG,CACjE,MAAO,CAAEC,eAAcM,wBAAyB,IAAIA,G,KAC/C,CACL,MAAO,CACLN,aAAce,EAAiBO,MAAMC,KAAKR,EAAeG,iBAAiB,kBAAoB,GAC9FZ,wBAAyB,G,GAyHvBlB,KAAAqC,sBAAyBC,I,MAC/B,MAAMC,EAAgBD,EAEtB,GAAIC,EAAcC,MAAQ,SAAU,MAC7BxC,KAAKyC,OACVzC,KAAK0C,iBACL,M,CAGF,GAAI1C,KAAK2C,uBAAuBtB,EAAArB,KAAK4C,KAAKxD,cAAU,MAAAiC,SAAA,SAAAA,EAAEwB,eAAe,CACnE,GAAIN,EAAcC,MAAQ,YAAa,CACrC,MAAM5B,aAAEA,EAAYM,wBAAEA,GAA4BlB,KAAKS,eACvD,MAAMqC,EAAO,IAAI5B,KAA4BN,GAAcrB,MAAMuD,GAASA,EAAKC,MAAMC,UAAY,SACjG,GAAIF,GAAQ,KAAM,CAChBA,EAAKG,U,GAMX,GAAIV,EAAcC,MAAQ,MAAO,CAE/B,GAAIxC,KAAKkD,MAAQC,SAASN,eAAiB,MAAQZ,EAAckB,SAASN,eAAgB,CACxFN,EAAca,sBACTpD,KAAKyC,OACVzC,KAAK0C,iBACL,M,CAOFW,YAAW,K,QACT,MAAMR,EACJ7C,KAAKsD,UAAUC,wBAAyBC,YACpC5B,GAAAP,EAAA8B,SAASN,iBAAa,MAAAxB,SAAA,SAAAA,EAAEjC,cAAU,MAAAwC,SAAA,SAAAA,EAAEiB,cACpCM,SAASN,cAEf,IAAIA,IAAa,MAAbA,SAAa,SAAbA,EAAeY,QAAQzD,KAAKsD,UAAUI,QAAQC,kBAAmB3D,KAAKsD,UAAW,MAC9EtD,KAAKyC,OACV,M,OAMAzC,KAAA4D,wBAA2BtB,IAEjC,MAAMuB,EAAOvB,EAAMwB,eACnB,IAAKD,EAAKE,SAAS/D,KAAKsD,WAAY,MAC7BtD,KAAKyC,OACV,M,GAIIzC,KAAAgE,kBAAqB1B,IAC3B,MAAM2B,EAAS3B,EAAM2B,OAGrB,GAAIjE,KAAKkE,eAAiBrC,EAAUoC,GAAS,MACtCjE,KAAKyC,OACVzC,KAAK0C,gB,GAID1C,KAAAmE,mBAAqB,KAC3BnE,KAAKkD,KAAOlD,KAAKyC,OAASzC,KAAKoE,MAAM,EAG/BpE,KAAAqE,qBAAwB/B,IAE9B,GAAIA,EAAME,MAAQ,SAAU,CAC1BxC,KAAK0C,sBACA1C,KAAKyC,OACV,M,CAKF,IAAKzC,KAAKsE,4BAA8B,CAAC,IAAK,SAASP,SAASzB,EAAME,KAAM,CAC1EF,EAAMc,iBACNpD,KAAKkD,UAAYlD,KAAKyC,YAAczC,KAAKoE,OACzC,M,CAGF,MAAMG,EAAOvE,KAAKwE,UAKlB,GAAI,CAAC,YAAa,WAAWT,SAASzB,EAAME,KAAM,CAChDF,EAAMc,iBAGN,IAAKpD,KAAKkD,KAAM,MACTlD,KAAKoE,M,CAGZ,GAAIG,GAAQ,KAAM,CAChB,M,CAEF,MAAME,EAAY,IAAIF,EAAKzC,iBAAiB,kBAC5C,MAAM4C,EAAgBD,EAAU/E,GAAG,GACnC,MAAMiF,EAAeF,EAAU/E,GAAG+E,EAAU9D,OAAS,GAGrD,GAAI2B,EAAME,MAAQ,aAAekC,GAAiB,KAAM,CACtDA,EAAczB,WACd,M,CAGF,GAAIX,EAAME,MAAQ,WAAamC,GAAgB,KAAM,CACnDA,EAAa1B,WACb,M,EAKJ,MAAM2B,EAAc,CAAC,MAAO,QAAS,OAAQ,OAAQ,OACrD,GAAI5E,KAAKkD,MAAQqB,GAAQ,OAASK,EAAYb,SAASzB,EAAME,KAAM,MAC5D+B,EAAKM,aAAavC,EAAME,KAC7B,M,GAIIxC,KAAA8E,mBAAsBxC,IAE5B,GAAIA,EAAME,MAAQ,IAAK,CACrBF,EAAMc,gB,GAIFpD,KAAA+E,wBAA0B,KAChC/E,KAAKgF,yBAAyB,EAGxBhF,KAAAiF,qBAAuB,KAC7B,GAAIjF,KAAKkF,aAAe,KAAM,OAE9BlF,KAAKmF,UAAUC,KAAK,CAClBC,aAAcrF,KAAKkF,YAAYG,aAC/BC,UAAWtF,KAAKkF,YAAYI,UAC5BC,gBAAiBvF,KAAKkF,YAAYM,cAAgBxF,KAAKkF,YAAYM,aAAexF,KAAKkF,YAAYG,cACnGI,YAAazF,KAAKkF,YAAYI,WAAatF,KAAKkF,YAAYG,aAAerF,KAAKkF,YAAYQ,eAC5F,E,UAvjB2C,M,eAkB9B,e,mBAIO,K,cAGL,E,cAGA,E,WAMH,M,6CAWC,M,iBAOK,M,uBAGM,Y,qBAIF,K,oBAOgB,E,gCAGL,M,aAGiB,G,mBAI9B,M,uBAQI,M,qBA8BkB,E,CArD9C,iBAAIC,GACF,OAAO3F,KAAKyB,QAAUzB,KAAK4F,W,CAwB7B,aAAItC,GACF,OAAOtD,KAAK6F,mBAAqB7F,KAAK4C,I,CA8BxC,gBAAAkD,GACE9F,KAAKkD,KAAOlD,KAAKoE,OAASpE,KAAKyC,OAC/BzC,KAAKgF,yB,CAOP,0BAAAe,GACE,GAAI/F,KAAKgG,SAAW,KAAM,OAE1BhG,KAAKgG,QAAQC,WAAW,CACtBC,SAAUlG,KAAKmG,MAAQ,QAAU,WACjCC,UAAWpG,KAAKoG,UAChBC,SAAUrG,KAAKqG,SACfC,SAAUtG,KAAKsG,U,CAMnB,mBAAAC,GACEvG,KAAKwG,iB,CAGC,eAAAA,GACN,IAAKtE,MAAMuE,QAAQzG,KAAKU,SAAU,CAChCV,KAAKU,QAAU,E,CAEjB,GAAIV,KAAK0G,eAAiB1G,KAAKU,QAAQC,SAAW,EAAG,CACnDgG,QAAQC,MAAM,uD,CAEhB5G,KAAKa,gBAAkB,IAAIb,KAAKU,Q,CAGlC,iBAAAmG,GACE7G,KAAKwG,kBACL,GAAIxG,KAAK4F,YAAa,CACpB5F,KAAK8G,eAAiBC,C,EAI1B,gBAAAC,GACEhH,KAAKiH,OACL,GAAIjH,KAAKkD,KAAM,MACRlD,KAAKoE,M,EAId,iBAAA8C,GACElH,KAAKiH,M,CAGC,IAAAA,GACNjH,KAAKmH,cAGL,MAAMxE,EAAqB3C,KAAK2C,mBAChC,GAAIA,GAAsB,KAAM,CAC9B3C,KAAKO,eAAe6G,IAClBzE,EACA,kBACAtC,GAAS,K,MACP,MAAMgH,GAAchG,EAAAsB,EAAmB3B,SAAK,MAAAK,SAAA,EAAAA,EAAI,GAChD,GAAIrB,KAAKyB,OAAQ,CACfzB,KAAKsH,YAAYD,E,CAEnBrH,KAAKuH,iBAAiBF,EAAY,GACjCrH,KAAK8G,gB,EAKN,WAAAQ,CAAYE,G,MAClB,MAAMC,IAAsBpG,EAAAmG,EAAW7D,iBAAa,MAAAtC,SAAA,SAAAA,EAAEqG,SAAU,GAChE,GAAI1H,KAAKU,QAAQC,OAAS,EAAG,CAC3BX,KAAKa,gBAAkBb,KAAKU,QAAQe,QACjCX,I,YACC,OAACA,EAAOG,SAASW,GAAAP,EAAAsG,OAAO7G,EAAOG,UAAM,MAAAI,SAAA,SAAAA,EAAEsC,iBAAa,MAAA/B,SAAA,SAAAA,EAAEmC,SAAS0D,KAC9D3G,EAAOE,SAASoB,GAAAL,EAAA4F,OAAO7G,EAAOE,UAAM,MAAAe,SAAA,SAAAA,EAAE4B,iBAAa,MAAAvB,SAAA,SAAAA,EAAE2B,SAAS0D,GAAqB,G,KAEnF,CACL,MAAMvG,wBAAEA,EAAuBN,aAAEA,GAAiBZ,KAAKS,eACvD,MAAMmH,EAA2B1G,EAAwBzB,KAAKoI,GAAMA,EAAE7G,QAGtEE,EAAwB4G,SAAQC,MAAOC,IACrCA,EAASjF,MAAMC,cAAiBiF,EAAmBD,EAAUP,GAAwB,QAAU,MAAM,IAIvG7G,EAAakH,SAAQC,MAAOC,IAC1BA,EAASjF,MAAMC,cACNiF,EAAmBD,EAAUP,KACnCG,EAAyB7D,SAASiE,EAAShH,OACxC,QACA,MAAM,G,EAKV,WAAAkH,GACN,GAAIlI,KAAK2C,oBAAsB,KAAM,CACnC3C,KAAK2C,mBAAmB3B,MAAQ,GAChChB,KAAKuH,iBAAiB,G,CAExB,GAAIvH,KAAKU,QAAQC,OAAS,EAAG,CAC3BX,KAAKa,gBAAkB,IAAIb,KAAKU,Q,KAC3B,CACL,MAAMQ,wBAAEA,EAAuBN,aAAEA,GAAiBZ,KAAKS,eACvD,IAAIS,KAA4BN,GAAckH,SAAShF,GAAUA,EAAKC,MAAMC,QAAU,S,EAIlF,gBAAAuE,CAAiBF,GACvB,GAAIrH,KAAKyB,OAAQ,CACfzB,KAAKmI,cAAc/C,KAAK,CAAEiC,e,MACrB,GAAIrH,KAAK4F,YAAa,CAC3B5F,KAAKoI,oBAAoBhD,KAAK,CAAEiC,e,EAI5B,WAAAF,GACN,GAAInH,KAAKqI,SAAW,MAAQrI,KAAKsI,YAAc,KAAM,OACrDtI,KAAKgG,QAAU,IAAIuC,EAAQvI,KAAKqI,QAASrI,KAAKsI,WAAY,CACxDpC,SAAUlG,KAAKmG,MAAQ,QAAU,WACjCC,UAAWpG,KAAKoG,UAChBC,SAAUrG,KAAKqG,SACfC,SAAUtG,KAAKsG,SACfkC,kBAAmBxI,KAAKmB,MACxBsH,YAAa,KACX,GAAIzI,KAAK2F,cAAe,CACtB3F,KAAKkI,a,CAEPlI,KAAK0I,aAAatD,MAAM,EAE1BuD,YAAaZ,UACX/H,KAAK4I,aAAaxD,MAAM,EAE1ByD,gBAAiB,KACf,IAAK7I,KAAKkD,MAAQlD,KAAKkF,aAAe,KAAM,CAC1ClF,KAAKkF,YAAYI,UAAY,C,KA+CrC,oBAAAwD,G,MACE9I,KAAKG,eAAe4I,aACpB/I,KAAKO,eAAeyI,iBACfhJ,KAAKyC,QACVpB,EAAArB,KAAKgG,WAAO,MAAA3E,SAAA,SAAAA,EAAE4H,UACdjJ,KAAKgG,QAAUrG,S,CAKjB,UAAMyE,GAEJ,GAAIpE,KAAKE,WAAaF,KAAKgG,SAAW,MAAQhG,KAAKmB,OAAS,KAAM,CAChE,M,CAGF,MAAM+H,EAAUlJ,KAAKkJ,QAAQ9D,OAC7B,GAAI8D,EAAQC,iBAAkB,CAC5BnJ,KAAKkD,KAAO,MACZ,M,CAGFlD,KAAKO,eAAe6G,IAAIpH,KAAKmB,MAAO,yBAA0BnB,KAAKgE,mBACnEhE,KAAKO,eAAe6G,IAAIjE,SAAU,UAAWnD,KAAKqC,uBAClDrC,KAAKO,eAAe6G,IAAIjE,SAAU,YAAanD,KAAK4D,yBAEpD5D,KAAKE,UAAY,KACjBF,KAAKkD,KAAO,KAEZ,GAAIlD,KAAKqI,SAAW,KAAM,CACxBrI,KAAKG,eAAeiJ,QAAQpJ,KAAKqI,Q,CAEnCrI,KAAKM,sBACLN,KAAKgG,QAAQ5B,OAEb,GAAIpE,KAAK2F,eAAiB3F,KAAKqJ,gBAAiB,CAC9CC,uBAAsB,K,OACpBjI,EAAArB,KAAK2C,sBAAkB,MAAAtB,SAAA,SAAAA,EAAE4B,UAAU,G,EAQjC,mBAAA3C,GACN,IAAKN,KAAKkD,KAAM,CACd,M,CAGF,GAAIlD,KAAKuJ,mBAAqBvJ,KAAKqI,SAAW,MAAQrI,KAAKmB,OAAS,KAAM,CACxE,MAAMqI,EAAQxJ,KAAKqI,QAAQoB,wBAAwBD,MACnDxJ,KAAKmB,MAAM4B,MAAM2G,SAAW,GAAGF,K,CAGjC,GAAIxJ,KAAKgG,SAAW,KAAM,CACxBhG,KAAKgG,QAAQ2D,Y,EAMjB,UAAMlH,GACJzC,KAAKG,eAAe4I,aAGpB,IAAK/I,KAAKE,WAAaF,KAAKmB,OAAS,MAAQnB,KAAKgG,SAAW,KAAM,CACjE,M,CAGF,MAAM4D,EAAU5J,KAAK4J,QAAQxE,OAC7B,GAAIwE,EAAQT,iBAAkB,CAC5BnJ,KAAKkD,KAAO,KACZ,M,CAGFlD,KAAKO,eAAesJ,OAAO7J,KAAKmB,MAAO,yBAA0BnB,KAAKgE,mBACtEhE,KAAKO,eAAesJ,OAAO1G,SAAU,UAAWnD,KAAKqC,uBACrDrC,KAAKO,eAAesJ,OAAO1G,SAAU,YAAanD,KAAK4D,yBAEvD5D,KAAKE,UAAY,MACjBF,KAAKkD,KAAO,MACZlD,KAAKgG,QAAQvD,M,CAGP,cAAAC,G,MACN,GAAI1C,KAAKqI,SAAW,KAAM,OAC1B,MAAMA,GAAUhH,EAAArB,KAAK8J,eAAW,MAAAzI,SAAA,SAAAA,EAAEE,iBAAiB,CAAEC,QAAS,OAAQ9B,GAAG,GACzE,GAAI2I,GAAW,KAAM,CACnB,UAAWA,EAAQpF,WAAa,WAAY,CAC1CoF,EAAQpF,U,MACH,UAAWoF,EAAQ0B,QAAU,WAAY,CAC9C1B,EAAQ0B,O,GAKN,OAAAvF,G,MACN,OAAOnD,EAAArB,KAAKsB,aAAS,MAAAD,SAAA,SAAAA,EAAEE,iBAAiB,CAAEC,QAAS,OAAQC,OAAOI,GAAWnC,GAAG,E,CAYlF,gBAAMiK,GACJ,GAAI3J,KAAKkD,MAAQlD,KAAKgG,SAAW,KAAM,CACrChG,KAAKgG,QAAQ2D,Y,EAkKT,uBAAA3E,G,MACN,GAAIhF,KAAKqI,SAAW,KAAM,OAC1B,MAAM9G,IAAoBF,EAAArB,KAAK8J,eAAW,MAAAzI,SAAA,SAAAA,EAAEE,iBAAiB,CAAEC,QAAS,SAAW,GACnF,MAAMwI,EAAoBzI,EAAiB9B,IAAIN,GAA2BO,GAAG,GAC7E,GAAIsK,GAAqB,KAAM,CAC7BA,EAAkBC,aAAa,gBAAiB,QAChDD,EAAkBC,aAAa,gBAAiBjK,KAAKkD,KAAO,OAAS,Q,EAIzE,MAAAgH,GACE,OACEnJ,EAAA,OAAAyB,IAAA,2CACE2H,KAAK,OACLrK,GAAIE,KAAKC,YACTmK,MAAO,CACLC,SAAU,KACV,iBAAkBrK,KAAKkD,OAGzBnC,EAAA,QAAAyB,IAAA,2CACE2H,KAAK,UACLC,MAAM,oBACNE,IAAMrL,GAAQe,KAAKqI,QAAUpJ,EAC7BsL,QAASvK,KAAKmE,mBACdqG,UAAWxK,KAAKqE,qBAChBoG,QAASzK,KAAK8E,oBAEd/D,EAAA,QAAAyB,IAAA,2CACEkI,KAAK,UACLJ,IAAMrL,GAAQe,KAAK8J,YAAc7K,EACjC0L,aAAc3K,KAAK+E,2BAMvBhE,EAAA,OAAAyB,IAAA,2CACE8H,IAAMrL,GAAQe,KAAKsI,WAAarJ,EAChCmL,MAAO,CACLQ,qBAAsB,KACtBC,gCAAiC7K,KAAKyB,QAAUzB,KAAK4F,eAAiB5F,KAAKmG,QAG7EpF,EAAA,OAAAyB,IAAA,2CACE8H,IAAMrL,GAAQe,KAAKmB,MAAQlC,EAC3BkL,KAAK,QACLC,MAAM,kBACNU,KAAK,OAAM,cACE9K,KAAKkD,KAAO,QAAU,OAAM,kBACxBlD,KAAKC,aAErBD,KAAK2F,eACJ5E,EAAA,aACEqJ,MAAO,CACL3I,OAAQ,KACR,iBAAkBzB,KAAKkD,MACxB,qCAEYlD,KAAKkD,KAAO,QAAU,OACnCoH,IAAMrL,GAAQe,KAAK2C,mBAAqB1D,EACxC8L,YAAa/K,KAAKgL,mBAElBjK,EAAA,YAAUqJ,MAAM,eAAea,KAAK,SAASC,KAAK,SAAO,WAK7DnK,EAAA,OAAAyB,IAAA,2CACE4H,MAAO,CACLe,wBAAyB,KACzB,mCAAoCnL,KAAK0G,eAE3C0E,SAAUpL,KAAKiF,qBACfqF,IAAMrL,GAAQe,KAAKkF,YAAcjG,GAEjC8B,EAAA,QAAAyB,IAAA,2CAAM8H,IAAMrL,GAAQe,KAAKsB,UAAYrC,IACpCe,KAAKU,QAAQC,OAAS,GACrBI,EAAA,YAAUoJ,KAAK,OAAOkB,MAAOrL,KAAKa,gBAAiB6F,cAAe1G,KAAK0G,iBAG3E3F,EAAA,QAAAyB,IAAA,2CAAMkI,KAAK,sB,yTAQvB,SAAS7I,EAAU5C,GACjB,OAAOA,IAAE,MAAFA,SAAE,SAAFA,EAAIyE,QAAQC,iBAAkB,UACvC,CACA,SAAS1B,EAAchD,GACrB,OAAOA,IAAE,MAAFA,SAAE,SAAFA,EAAIyE,QAAQC,iBAAkB,eACvC,CACA,SAASjC,EAAqBzC,G,MAC5B,QAAOoC,EAAApC,IAAE,MAAFA,SAAE,SAAFA,EAAIqM,aAAa,YAAQ,MAAAjK,SAAA,SAAAA,EAAE0C,SAAS,yBAA0B,KACvE,CACAgE,eAAeE,EAAmBD,EAAkCP,GAClE,OACEO,EAAShH,MAAM2C,cAAcI,SAAS0D,WAC/BO,EAASuD,gBAAgB5H,cAAcI,SAAS0D,EAE3D,C,UC1uBA,MAAM+D,EAAa,iTACnB,MAAAC,EAAeD,ECef,MAAME,EAAqB1D,IAAgC,IAAA3G,EAAAO,EAAAG,EACzD,OAAAA,GAAAH,GAAAP,EAAA2G,IAAQ,MAARA,SAAQ,SAARA,EAAU5I,cAAU,MAAAiC,SAAA,SAAAA,EAAEW,cAAc,iBAAa,MAAAJ,SAAA,SAAAA,EAAE+J,aAAS,MAAA5J,SAAA,SAAAA,EAAE6J,SAAS,qBAAqB,EAE9F,MAAMC,EAAwB5M,IAC5BA,IAAE,MAAFA,SAAE,SAAFA,EAAIyE,QAAQC,iBAAkB,gBAEhC,MAAMmI,EAAgB,EAAG9K,QAAOC,WAC9BF,EAAA,iBAAeyB,IAAKxB,EAAOA,MAAOA,GAC/BC,GAIL,MAAM8K,EAAsD,EAE5D,MAAMC,EAA+B,G,MAiBxBC,EAAO,M,qFACDjM,KAAAO,eAAiB,IAAIC,EAI9BR,KAAAkM,mBAAqB,GA6DrBlM,KAAAmM,gBAAkB,KACxB,GAAInM,KAAKoM,aAAe,KAAM,OAE9BpM,KAAKqM,eAAiBC,KAAKC,MAAMvM,KAAKoM,YAAY9G,UAAYtF,KAAKwM,kBAAkB,E,qBAvD7D,M,WAGgB,K,6CAOlB,M,cAML,G,uBAOS,G,6BAKM,M,oBAMT,E,uBAKLR,C,CAEpB,iBAAA9E,GACElH,KAAKyM,YAAczM,KAAKyM,YAAYC,KAAK1M,MACzCA,KAAK2M,cAAgB3M,KAAK2M,cAAcD,KAAK1M,K,CAG/C,iBAAA6G,GACE,GAAI7G,KAAKqL,QAAU,KAAM,CACvB,M,EAUJ,gBAAArE,GACEhH,KAAK4M,wC,CAGP,oBAAA9D,GACE9I,KAAKO,eAAeyI,W,CAUtB,kBAAMnE,CAAarC,G,MACjBqK,aAAa7M,KAAK8M,qBAGlB9M,KAAK8M,oBAAsBzJ,YAAW,IAAOrD,KAAKkM,mBAAqB,IAAK,KAC5ElM,KAAKkM,oBAAsB1J,EAAImB,cAC/B,MAAM0H,EAAQrL,KAAK+M,WACnB,IAAK,MAAMjK,KAAQuI,EAAO,CACxB,MAAMJ,GAAO5J,EAAAyB,EAAK1D,cAAU,MAAAiC,SAAA,SAAAA,EAAEW,cAAc,oBAC5C,MAAMf,EAAQ+L,EAAe/B,GAAMtH,cAAc+D,OACjD,GAAIzG,EAAMgM,UAAU,EAAGjN,KAAKkM,mBAAmBvL,UAAYX,KAAKkM,mBAAoB,CAClFpJ,EAAKG,WACL,K,GAKE,aAAAiK,G,MACN,MAAMC,EAAoBnN,KAAK0G,cAAgBqF,EAAsD,EACrG,OAAO1K,EAAArB,KAAKoN,cAAU,MAAA/L,SAAA,EAAAA,EAAI8L,C,CAGpB,sCAAAP,G,QACN,IAAK5M,KAAK0G,eAAiB1G,KAAKoM,aAAe,KAAM,OAErDpM,KAAKO,eAAe6G,IAAIpH,KAAKoM,YAAa,SAAU/L,EAASL,KAAKmM,gBAAiBnM,KAAKqN,oBAGxF,MAAMC,GAAiB1L,GAAAP,EAAArB,KAAKuE,QAAI,MAAAlD,SAAA,SAAAA,EAAEW,cAAc,oBAAgB,MAAAJ,SAAA,SAAAA,EAAE8D,aAClE,GAAI4H,GAAkB,MAAQA,EAAiB,EAAG,CAChDtN,KAAKwM,kBAAoBc,C,EAIrB,QAAAP,GACN,GAAI/M,KAAKuE,MAAQ,KAAM,MAAO,GAE9B,GAAIvE,KAAKqL,OAAS,KAAM,CACtB,OAAOrL,KAAKqL,MAAM5L,IAAIqM,E,CAGxB,MAAMb,EAAOjL,KAAKuE,KAAKvC,cAAc,QACrC,GAAIiJ,GAAQ,KAAM,MAAO,GACzB,MAAO,IAAIA,EAAK1J,iBAAiB,CAAEC,QAAS,QAASC,QAClDxC,GAAqC4M,EAAqB5M,KAAQA,EAAGsO,U,CAIlE,kBAAAC,GACN,MAAMnC,EAAQrL,KAAK+M,WACnB,MAAMU,EAAezN,KAAK0N,gBAC1B,GAAID,GAAgB,KAAM,CACxB,MAAME,EAAYtC,EAAMuC,QAAQH,GAChC,GAAIE,GAAa,EAAG,CAClB,OAAOA,C,EAGX,MAAM/M,EAAeZ,KAAK6N,sBAC1B,OAAOjN,EAAakN,UAAUpC,E,CAGxB,aAAAgC,G,MACN,MAAM7K,EAAgB7C,KAAK+M,WAAWxN,MAAMwO,GAAMA,IAAM5K,SAASN,gBACjE,GAAIA,GAAiB,KAAM,CACzB,OAAOA,C,CAET,OAAOxB,EAAArB,KAAK6N,yBAAqB,MAAAxM,SAAA,SAAAA,EAAE9B,KAAKmM,E,CAGlC,mBAAAmC,G,QACN,OAAO3L,MAAMC,MAAKP,GAAAP,EAAArB,KAAK4C,KAAKxD,cAAU,MAAAiC,SAAA,SAAAA,EAAES,iBAAiB,oBAAgB,MAAAF,SAAA,EAAAA,EAAI,G,CAGvE,aAAAoM,CAAclL,GACpBA,IAAI,MAAJA,SAAI,SAAJA,EAAMG,U,CAGA,WAAAwJ,CAAYnK,GAClB,MAAM2B,EAAS3B,EAAM2B,OACrB,MAAMgK,EAAchK,EAAOR,QAAQ,iBACnC,GAAIwK,IAAgBA,EAAYV,SAAU,CACxCvN,KAAKkO,oBAAoB9I,KAAK,CAAEsF,KAAMuD,EAAYjN,MAAO8B,KAAMmL,G,EAI3D,aAAAtB,CAAcrK,GACpB,GAAItC,KAAKmO,wBAAyB,CAChC,M,CAIF,GAAI7L,EAAME,MAAQ,QAAS,CACzB,MAAM4L,EAAapO,KAAK0N,gBACxBpL,EAAMc,iBAEN,GAAIgL,GAAc,KAAM,CACtBpO,KAAKkO,oBAAoB9I,KAAK,CAAEsF,KAAM0D,EAAWpN,MAAO8B,KAAMsL,G,EAKlE,GAAI9L,EAAME,MAAQ,IAAK,CACrBF,EAAMc,gB,CAIR,GAAI,CAAC,YAAa,UAAW,OAAQ,OAAOW,SAASzB,EAAME,KAAM,CAC/D,MAAM6I,EAAQrL,KAAKqL,QAAU,KAAOrL,KAAK+M,WAAa/M,KAAK6N,sBAE3D,IAAIQ,EAAoBrO,KAAKwN,qBAE7B,GAAInC,EAAM1K,OAAS,EAAG,CACpB2B,EAAMc,iBAEN,GAAId,EAAME,MAAQ,YAAa,CAC7B6L,G,MACK,GAAI/L,EAAME,MAAQ,UAAW,CAClC6L,G,MACK,GAAI/L,EAAME,MAAQ,OAAQ,CAC/B6L,EAAoB,C,MACf,GAAI/L,EAAME,MAAQ,MAAO,CAC9B6L,EAAoBhD,EAAM1K,OAAS,C,CAGrC,GAAI0N,EAAoB,EAAGA,EAAoB,EAC/C,GAAIA,EAAoBhD,EAAM1K,OAAS,EAAG0N,EAAoBhD,EAAM1K,OAAS,EAE7EX,KAAKgO,cAAc3C,EAAMgD,IAEzB,M,OAICrO,KAAK6E,aAAavC,EAAME,I,CAGvB,mBAAA8L,G,MACN,MAAMC,EAAoC,GAC1C,GAAIvO,KAAKkN,gBAAkB,EAAG,CAE5BqB,EAAOC,OAAS,KAAInN,EAAArB,KAAKkN,mBAAe,MAAA7L,SAAA,EAAAA,EAAI,GAAKrB,KAAKwM,qB,CAExD,OAAAiC,OAAAC,OAAA,GACKH,E,CAIC,qBAAAI,GACN,MAAMJ,EAAoC,GAE1C,GAAIvO,KAAK0G,cAAe,CAEtB6H,EAAOK,UAAY,cAAc5O,KAAKwM,kBAAoBxM,KAAKqM,mB,CAGjE,OAAAoC,OAAAC,OAAA,GACKH,E,CAIC,sBAAAM,GACN,MAAMN,EAAoC,GAE1C,GAAIvO,KAAK0G,eAAiB1G,KAAKqL,QAAU,KAAM,CAC7CkD,EAAOC,OAAS,GAAGxO,KAAKqL,MAAM1K,OAASX,KAAKwM,kBAAoBxM,KAAK8O,SAAW9O,KAAKwM,qB,CAGvF,OAAAiC,OAAAC,OAAA,GACKH,E,CAIC,WAAAQ,GACN,GAAI/O,KAAKqL,QAAU1L,WAAaK,KAAKqL,QAAU,KAAM,CACnD,M,CAGF,IAAKrL,KAAK0G,cAAe,CACvB,OAAO1G,KAAKqL,MAAM5L,IAAIqM,E,CAGxB,OAAO9L,KAAKqL,MACT2D,MAAMhP,KAAKqM,eAAgBC,KAAK2C,IAAIjP,KAAKqL,MAAM1K,OAAQX,KAAK8O,SAAW9O,KAAKqM,iBAC5E5M,KAAI,EAAGuB,QAAOC,WACbF,EAAA,iBAAemO,UAAU,QAAQ1M,IAAKxB,EAAOA,MAAOA,GACjDC,I,CAKT,MAAAiJ,GACE,OACEnJ,EAAA,OAAAyB,IAAA,2CACE8H,IAAMrL,GAAQe,KAAKoM,YAAcnN,EACjC8D,MAAO/C,KAAKsO,sBACZnE,KAAK,UACLC,MAAO,CACL7F,KAAM,KACN,aAAcvE,KAAKmP,kBAGrBpO,EAAA,OAAAyB,IAAA,2CACE8H,IAAMrL,GAAQe,KAAKuE,KAAOtF,EAC1BkL,KAAK,OACLW,KAAK,OACLP,QAASvK,KAAKyM,YACdjC,UAAWxK,KAAK2M,cAChBzN,SAAU,EACV6D,MAAO/C,KAAK2O,yBAEZ5N,EAAA,QAAAyB,IAAA,6CACCxC,KAAK+O,eAEP/O,KAAK0G,eAAiB3F,EAAA,OAAKgC,MAAO/C,KAAK6O,2B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as i,h as s,H as t,g as a}from"./p-f93d8a4e.js";import{E as r}from"./p-8bfb4bfc.js";import{g as h,h as c}from"./p-0cebf1d2.js";const d=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-medium);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__app-switcher-dropdown{display:flex;align-items:center}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";const o=d;var n;(function(e){e[e["None"]=0]="None";e[e["Search"]=1]="Search";e[e["AppSwitcher"]=2]="AppSwitcher";e[e["Profile"]=3]="Profile"})(n||(n={}));var l;(function(e){e["Search"]="search-field";e["Notifications"]="notifications";e["AppSwitcher"]="app-switcher-menu";e["Profile"]="profile-menu";e["Logo"]="logo"})(l||(l={}));const f=class{constructor(s){e(this,s);this.sixAppNameClicked=i(this,"six-header-app-name-clicked",7);this.sixAppSwitcherSelect=i(this,"six-header-app-switcher-select",7);this.sixProfileSelect=i(this,"six-header-profile-select",7);this.sixHamburgerClick=i(this,"six-header-hamburger-menu-clicked",7);this.sixLogoClick=i(this,"six-header-logo-clicked",7);this.sixSearchFieldToggle=i(this,"six-header-search-field-toggle",7);this.eventListeners=new r;this.setupMenu=e=>{if(e==null)return;this.eventListeners.add(e,"click",(()=>this.sixHamburgerClick.emit()))};this.setupLogo=e=>{if(!this.clickableLogo||e==null)return;this.eventListeners.add(e,"click",(()=>this.sixLogoClick.emit()))};this.setupProfile=e=>{if(e==null)return;this.eventListeners.add(e,"six-dropdown-show",this.selectSection(n.Profile));this.eventListeners.add(e,"six-dropdown-hide",this.selectSection(n.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:i,item:s}=e.detail;this.sixProfileSelect.emit({selectedLabel:s.innerText,name:i,item:s})}))};this.setupAppSwitcher=e=>{if(e==null)return;this.eventListeners.add(e,"six-dropdown-show",this.selectSection(n.AppSwitcher));this.eventListeners.add(e,"six-dropdown-hide",this.selectSection(n.None));this.eventListeners.add(e,"six-menu-item-selected",(e=>{const{name:i,item:s}=e.detail;this.selectedApp=s.innerText;this.sixAppSwitcherSelect.emit({selectedLabel:s.innerText,name:i,item:s})}))};this.appNameClicked=()=>this.sixAppNameClicked.emit();this.computeSearchOpenState=()=>{this.selectedSection=this.openSearch?n.Search:n.None};this.shiftContent=false;this.hideHamburgerMenu=false;this.openHamburgerMenu=false;this.openSearch=false;this.clickableLogo=false;this.selectedApp=undefined;this.selectedSection=undefined}handleOpenSearchChange(){this.computeSearchOpenState()}async setSearchOpenState(e){if(this.selectedSection===n.Search&&!e){this.selectedSection=n.None}else if(e&&this.selectedSection!==n.Search){this.selectedSection=n.Search}}async getIsSearchOpen(){return this.selectedSection===n.Search}hasSlot(e){if(this.slots==null){return false}return this.slots[e]}isSectionSelected(e){return e===this.selectedSection}selectSection(e){return()=>this.selectedSection=e}toggleSearch(){const e=this.selectedSection!==n.Search;this.selectedSection=this.selectedSection===n.Search?n.None:n.Search;this.sixSearchFieldToggle.emit({visible:e});if(this.selectedSection===n.Search){setTimeout((async()=>{var e,i;const s=h(this.host,l.Search);(i=(e=s===null||s===void 0?void 0:s.shadowRoot)===null||e===void 0?void 0:e.querySelector("six-input"))===null||i===void 0?void 0:i.setFocus()}),50)}}componentWillLoad(){this.slots={[l.Search]:c(this.host,l.Search),[l.Notifications]:c(this.host,l.Notifications),[l.AppSwitcher]:c(this.host,l.AppSwitcher),[l.Profile]:c(this.host,l.Profile),[l.Logo]:c(this.host,l.Logo)};if(this.hasSlot(l.AppSwitcher)){this.updateSelectedApp()}if(this.hasSlot(l.Search)){this.computeSearchOpenState()}}connectedCallback(){const e=h(this.host,l.AppSwitcher);if(e){this.mutationObserver=new MutationObserver((e=>{if(e.some((e=>e.type==="childList"||e.type==="attributes"))){this.updateSelectedApp()}}));this.mutationObserver.observe(e,{attributes:true,childList:true,subtree:true})}}updateSelectedApp(){var e;const i=h(this.host,l.AppSwitcher);if(i==null){return undefined}const s=Array.from(i.querySelectorAll("six-menu-item"));const t=s.find((e=>e.hasAttribute("checked")&&e.getAttribute("checked")!=="false"));this.selectedApp=(e=t===null||t===void 0?void 0:t.textContent)!==null&&e!==void 0?e:undefined}disconnectedCallback(){var e;this.eventListeners.removeAll();(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}render(){const e=!this.hideHamburgerMenu&&s("section",{key:"4bdfb040919e63d80c73907e4ab99f81f41ed962",class:"six-header__menu"},s("six-icon-button",{key:"65979bc405df9ede5ff51ba6671a20c89dcc07db",name:this.openHamburgerMenu?"menu_open":"menu",ref:this.setupMenu}));const i=this.hasSlot(l.Search)&&s("section",{key:"dea31e61c8c3abdd62bbfdb427c0d5c994ca005b",class:{"six-header__search":true,"six-header__search--open":this.isSectionSelected(n.Search)}},s("six-icon-button",{key:"36411dc4797c5c14f54be612422b2b8a651dc042",name:"search",onClick:()=>this.toggleSearch(),"data-testid":"search-trigger"}));const a=this.hasSlot(l.Notifications)&&s("section",{key:"42703240d867b07571e2cae5b1475c4b40d5cab9",class:"six-header__notification"},s("slot",{key:"17ab8c5a38463636bb485ced2bb7ff04917e2a99",name:l.Notifications}));const r=this.hasSlot(l.AppSwitcher)&&s("section",{key:"1663cb55a4a112cfee5b0bd1b4162c7425b8e25c",class:{"six-header__app-switcher":true,"six-header__app-switcher--open":this.isSectionSelected(n.AppSwitcher)}},s("six-dropdown",{key:"e0b0599707152e3514dc9216a4d3b6256631377e",distance:13,skidding:20,placement:"bottom-end",ref:this.setupAppSwitcher},s("div",{key:"89a8ee9eb2af751a681256f40b66930ca7a6e6dc",slot:"trigger",class:"six-header__app-switcher-dropdown"},s("a",{key:"bcf7e1f1249cf0def1d2575d0e2e9a2a5543f808",onClick:this.appNameClicked,class:"six-header__selected-app"},this.selectedApp),s("six-icon-button",{key:"f5996669051d290c957e9a0417b77d7a424e3dab",name:"apps"})),s("slot",{key:"a55a8cd1cf35bb4b229199d86fb119678fc79617",name:l.AppSwitcher})));const h=this.hasSlot(l.Profile)&&s("section",{key:"70840d293a70fb869c6de4c70353b1f47b995e5d",class:{"six-header__profile":true,"six-header__profile--open":this.isSectionSelected(n.Profile)}},s("six-dropdown",{key:"50463552c655c87b793cee909810475c418abddf",distance:17,skidding:20,placement:"bottom-end",ref:this.setupProfile},s("slot",{key:"fae7475c62c9a0c273398a77f344dfde87c85b7c",name:"profile-avatar",slot:"trigger"}),s("slot",{key:"147b4944e080330652d02e0e6680277b910f31b9",name:"profile-menu"})));const c=this.hasSlot(l.Logo)?s("section",null,s("slot",{name:"logo"})):s("section",{class:{"six-header__logo":true,"six-header__logo--clickable":this.clickableLogo},ref:this.setupLogo},s("svg",{height:"20",viewBox:"0 0 90 26",xmlns:"http://www.w3.org/2000/svg"},s("title",null,"SIX"),s("g",{fill:"#DE3919","fill-rule":"nonzero"},s("path",{d:"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525"}),s("path",{d:"m42.16.324h5.21v24.806h-5.21z"}),s("path",{d:"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545"}))));return s(t,{key:"fe3df0b60941b770dc1a4a876fea67648103feeb"},s("header",{key:"297d9e50c392a86028d4a982262bb292abe9720c",class:"six-header"},e,c,s("section",{key:"b2f2c0a98b8bfae711ad941986c98e616c55073c",class:"six-header__placeholder"}),s("section",{key:"6d6800f2abb6986304588dda3e9a8d8905f98266",class:"six-header__custom"},s("slot",{key:"4a8d385406e6e878c620be5945affd4e77cf7d9f"})),i,a,r,h),s("div",{key:"1d2f6aa7a0842212e556f01cbaf31d04a65ec6d5",class:{"six-header__search-field":true,"six-header__search-field--visible":this.isSectionSelected(n.Search),"six-header__search-field--shift-content":this.shiftContent}},s("slot",{key:"02619aaa886ecdee27f31a9687deab5fb1ec254c",name:l.Search})))}static get assetsDirs(){return["assets"]}get host(){return a(this)}static get watchers(){return{openSearch:["handleOpenSearchChange"]}}};f.style=o;export{f as six_header};
|
|
2
|
+
//# sourceMappingURL=p-f1bb5648.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixHeaderCss","SixHeaderStyle0","Section","Slot","SixHeader","this","eventListeners","EventListeners","setupMenu","el","add","sixHamburgerClick","emit","setupLogo","clickableLogo","sixLogoClick","setupProfile","selectSection","Profile","None","event","name","item","detail","sixProfileSelect","selectedLabel","innerText","setupAppSwitcher","AppSwitcher","selectedApp","sixAppSwitcherSelect","appNameClicked","sixAppNameClicked","computeSearchOpenState","selectedSection","openSearch","Search","handleOpenSearchChange","setSearchOpenState","openState","getIsSearchOpen","hasSlot","slot","slots","isSectionSelected","value","section","toggleSearch","visible","sixSearchFieldToggle","setTimeout","async","getSlot","host","_b","_a","shadowRoot","querySelector","setFocus","componentWillLoad","Notifications","Logo","updateSelectedApp","connectedCallback","appSwitcherSlot","mutationObserver","MutationObserver","mutations","some","mutation","type","observe","attributes","childList","subtree","element","undefined","items","Array","from","querySelectorAll","firstCheckedMenuItem","find","hasAttribute","getAttribute","textContent","disconnectedCallback","removeAll","disconnect","render","hamburgerMenu","hideHamburgerMenu","h","key","class","openHamburgerMenu","ref","search","onClick","notifications","appSwitcher","distance","skidding","placement","profile","logo","height","viewBox","xmlns","fill","d","Host","shiftContent"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n display: block;\n user-select: none;\n --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n position: absolute;\n margin-left: var(--search-border-width);\n width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n display: flex;\n width: 100%;\n height: $header-height;\n background-color: var(--six-header-background-color);\n align-items: center;\n flex-wrap: wrap;\n box-shadow: var(--six-shadow-medium);\n border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n &__logo {\n width: 6rem;\n margin-top: 0.15rem;\n\n &--clickable {\n cursor: pointer;\n }\n }\n\n &__placeholder {\n flex: 1;\n }\n\n &__menu,\n &__logo,\n &__custom,\n &__search,\n &__notification,\n &__app-switcher,\n &__profile {\n height: calc(100% - #{$border-height} - 1px);\n padding: 0 1.25rem;\n display: flex;\n align-items: center;\n border-bottom: solid $border-height transparent;\n\n &--open {\n border-bottom: solid $border-height var(--six-header-border-color-open);\n }\n }\n\n &__app-switcher-dropdown {\n display: flex;\n align-items: center;\n }\n\n &__selected-app {\n cursor: pointer;\n font-size: 0.9rem;\n font-weight: 600;\n padding-right: 0;\n padding-left: 0.3rem;\n &:hover {\n color: var(--six-header-selected-app-color-hover);\n }\n }\n\n &__search-field {\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n display: none;\n\n &--visible {\n opacity: 1;\n transform: none;\n display: block;\n }\n\n &--shift-content.six-header__search-field--visible {\n height: 2.65rem;\n transition: var(--six-transition-fast) height;\n }\n\n &--shift-content:not(.six-header__search-field--visible) {\n height: 0;\n transition: var(--six-transition-fast) height;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot, hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixHeaderAppSwitcherSelectPayload {\n selectedLabel: string;\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderProfileSelectPayload {\n selectedLabel: string;\n name: string;\n item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderSearchFieldToggle {\n visible: boolean;\n}\n\nenum Section {\n None,\n Search,\n AppSwitcher,\n Profile,\n}\n\nenum Slot {\n Search = 'search-field',\n Notifications = 'notifications',\n AppSwitcher = 'app-switcher-menu',\n Profile = 'profile-menu',\n Logo = 'logo',\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define a custom component that is included in the header.\n * @slot search-field - Used to define the search field component in the header.\n * @slot notifications - Used to define the notification component in the header.\n * @slot app-switcher-menu - Used to define the application switcher menu in the header.\n * @slot profile-menu - Used to define the profile menu in the header.\n * @slot profile-avatar - Used to define the avator in the header.\n */\n\n@Component({\n tag: 'six-header',\n styleUrl: 'six-header.scss',\n shadow: true,\n assetsDirs: ['assets'],\n})\nexport class SixHeader {\n /** Indicates if content should be shifted down when search field is visible. */\n @Prop() shiftContent = false;\n\n /** Set whether the hamburger menu should be visible or not */\n @Prop() hideHamburgerMenu = false;\n\n /** Set the hamburger menu icon to open or closed state */\n @Prop() openHamburgerMenu = false;\n\n /** Set the header search to be in an open or closed state */\n @Prop() openSearch = false;\n\n /** Set whether the logo should be clickable */\n @Prop() clickableLogo = false;\n\n @Watch('openSearch')\n handleOpenSearchChange() {\n this.computeSearchOpenState();\n }\n\n /** Sets open state for search */\n @Method()\n async setSearchOpenState(openState: boolean) {\n if (this.selectedSection === Section.Search && !openState) {\n this.selectedSection = Section.None;\n } else if (openState && this.selectedSection !== Section.Search) {\n this.selectedSection = Section.Search;\n }\n }\n\n /** Get open state for search */\n @Method()\n async getIsSearchOpen() {\n return this.selectedSection === Section.Search;\n }\n\n /** Emitted when the name of the selected app is clicked. */\n @Event({ eventName: 'six-header-app-name-clicked' }) sixAppNameClicked!: EventEmitter<EmptyPayload>;\n\n /** Emitted when a menu item is in the app switcher menu is selected. */\n @Event({ eventName: 'six-header-app-switcher-select' })\n sixAppSwitcherSelect!: EventEmitter<SixHeaderAppSwitcherSelectPayload>;\n\n /** Emitted when a menu item is in the profile menu is selected. */\n @Event({ eventName: 'six-header-profile-select' }) sixProfileSelect!: EventEmitter<SixHeaderProfileSelectPayload>;\n\n /** Emitted when the hamburger menu is clicked. */\n @Event({ eventName: 'six-header-hamburger-menu-clicked' }) sixHamburgerClick!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the header logo is clicked. */\n @Event({ eventName: 'six-header-logo-clicked' }) sixLogoClick!: EventEmitter<EmptyPayload>;\n\n /** Emitted when search field is toggled. */\n @Event({ eventName: 'six-header-search-field-toggle' })\n sixSearchFieldToggle!: EventEmitter<SixHeaderSearchFieldToggle>;\n\n @Element() host!: HTMLSixHeaderElement;\n\n private eventListeners = new EventListeners();\n\n private slots?: Record<Slot, boolean>;\n\n private mutationObserver?: MutationObserver;\n\n @State() selectedApp?: string;\n @State() selectedSection?: Section;\n\n private hasSlot(slot: Slot): boolean {\n if (this.slots == null) {\n return false;\n }\n return this.slots[slot];\n }\n\n private isSectionSelected(value: Section) {\n return value === this.selectedSection;\n }\n\n private selectSection(section: Section) {\n return () => (this.selectedSection = section);\n }\n\n private toggleSearch() {\n const visible = this.selectedSection !== Section.Search;\n this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;\n this.sixSearchFieldToggle.emit({ visible });\n if (this.selectedSection === Section.Search) {\n // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n setTimeout(async () => {\n const slot = getSlot(this.host, Slot.Search);\n slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n }, 50);\n }\n }\n\n private setupMenu = (el?: HTMLSixIconButtonElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n };\n\n private setupLogo = (el?: HTMLElement) => {\n if (!this.clickableLogo || el == null) return;\n\n this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());\n };\n\n private setupProfile = (el?: HTMLSixDropdownElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));\n this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n const { name, item } = (event as CustomEvent).detail;\n this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n private setupAppSwitcher = (el?: HTMLSixDropdownElement) => {\n if (el == null) return;\n\n this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));\n this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n const { name, item } = (event as CustomEvent).detail;\n this.selectedApp = item.innerText;\n this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n });\n };\n\n private appNameClicked = () => this.sixAppNameClicked.emit();\n\n private computeSearchOpenState = () => {\n this.selectedSection = this.openSearch ? Section.Search : Section.None;\n };\n\n componentWillLoad() {\n this.slots = {\n [Slot.Search]: hasSlot(this.host, Slot.Search),\n [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),\n [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),\n [Slot.Profile]: hasSlot(this.host, Slot.Profile),\n [Slot.Logo]: hasSlot(this.host, Slot.Logo),\n };\n\n if (this.hasSlot(Slot.AppSwitcher)) {\n this.updateSelectedApp();\n }\n\n if (this.hasSlot(Slot.Search)) {\n this.computeSearchOpenState();\n }\n }\n\n connectedCallback() {\n const appSwitcherSlot = getSlot(this.host, Slot.AppSwitcher);\n if (appSwitcherSlot) {\n this.mutationObserver = new MutationObserver((mutations) => {\n if (mutations.some((mutation) => mutation.type === 'childList' || mutation.type === 'attributes')) {\n this.updateSelectedApp();\n }\n });\n this.mutationObserver.observe(appSwitcherSlot, { attributes: true, childList: true, subtree: true });\n }\n }\n\n private updateSelectedApp() {\n // there are more concise ways to select the first checked menu item, but this is one that works for jest\n const element = getSlot(this.host, Slot.AppSwitcher);\n if (element == null) {\n return undefined;\n }\n const items = Array.from(element.querySelectorAll('six-menu-item'));\n const firstCheckedMenuItem = items.find(\n (item) => item.hasAttribute('checked') && item.getAttribute('checked') !== 'false'\n );\n this.selectedApp = firstCheckedMenuItem?.textContent ?? undefined;\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n this.mutationObserver?.disconnect();\n }\n\n render() {\n const hamburgerMenu = !this.hideHamburgerMenu && (\n <section class=\"six-header__menu\">\n <six-icon-button name={this.openHamburgerMenu ? 'menu_open' : 'menu'} ref={this.setupMenu} />\n </section>\n );\n\n const search = this.hasSlot(Slot.Search) && (\n <section\n class={{\n 'six-header__search': true,\n 'six-header__search--open': this.isSectionSelected(Section.Search),\n }}\n >\n <six-icon-button name=\"search\" onClick={() => this.toggleSearch()} data-testid=\"search-trigger\" />\n </section>\n );\n\n const notifications = this.hasSlot(Slot.Notifications) && (\n <section class=\"six-header__notification\">\n <slot name={Slot.Notifications} />\n </section>\n );\n\n const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (\n <section\n class={{\n 'six-header__app-switcher': true,\n 'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),\n }}\n >\n <six-dropdown distance={13} skidding={20} placement=\"bottom-end\" ref={this.setupAppSwitcher}>\n <div slot=\"trigger\" class=\"six-header__app-switcher-dropdown\">\n <a onClick={this.appNameClicked} class=\"six-header__selected-app\">\n {this.selectedApp}\n </a>\n <six-icon-button name=\"apps\" />\n </div>\n <slot name={Slot.AppSwitcher} />\n </six-dropdown>\n </section>\n );\n\n const profile = this.hasSlot(Slot.Profile) && (\n <section\n class={{\n 'six-header__profile': true,\n 'six-header__profile--open': this.isSectionSelected(Section.Profile),\n }}\n >\n <six-dropdown distance={17} skidding={20} placement=\"bottom-end\" ref={this.setupProfile}>\n <slot name=\"profile-avatar\" slot=\"trigger\" />\n <slot name=\"profile-menu\" />\n </six-dropdown>\n </section>\n );\n\n const logo = this.hasSlot(Slot.Logo) ? (\n <section>\n <slot name=\"logo\" />\n </section>\n ) : (\n <section\n class={{\n 'six-header__logo': true,\n 'six-header__logo--clickable': this.clickableLogo,\n }}\n ref={this.setupLogo}\n >\n <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n <title>SIX</title>\n <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\" />\n <path d=\"m42.16.324h5.21v24.806h-5.21z\" />\n <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\" />\n </g>\n </svg>\n </section>\n );\n\n return (\n <Host>\n <header class=\"six-header\">\n {hamburgerMenu}\n\n {logo}\n\n <section class=\"six-header__placeholder\" />\n\n <section class=\"six-header__custom\">\n <slot />\n </section>\n\n {search}\n\n {notifications}\n\n {appSwitcher}\n\n {profile}\n </header>\n\n <div\n class={{\n 'six-header__search-field': true,\n 'six-header__search-field--visible': this.isSectionSelected(Section.Search),\n 'six-header__search-field--shift-content': this.shiftContent,\n }}\n >\n <slot name={Slot.Search} />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as a,h as i,H as s,g as o}from"./p-f93d8a4e.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:flex}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;width:100%}.tab:focus{outline:none}.tab:focus-visible{outline:var(--six-focus-ring);outline-offset:calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset))}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}.tab__indicator{position:absolute}.tab__indicator.tab__indicator--active{background-color:var(--six-tab-border-color-active)}.tab--top{margin-bottom:var(--six-spacing-xxx-small)}.tab__indicator--top{width:100%;bottom:0;height:var(--six-tab-border-width)}.tab--bottom{margin-top:var(--six-spacing-xxx-small)}.tab__indicator--bottom{width:100%;top:0;height:var(--six-tab-border-width)}.tab--left{margin-right:var(--six-spacing-xxx-small)}.tab__indicator--left{height:100%;right:0;top:0;width:var(--six-tab-border-width)}.tab--right{margin-left:var(--six-spacing-xxx-small)}.tab__indicator--right{height:100%;left:0;top:0;width:var(--six-tab-border-width)}";const r=e;let b=0;const l=class{constructor(i){t(this,i);this.sixClose=a(this,"six-tab-close",7);this.componentId=`tab-${++b}`;this.panel="";this.active=false;this.closable=false;this.disabled=false}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this)}async setFocus(t){var a;(a=this.tab)===null||a===void 0?void 0:a.focus(t)}async removeFocus(){var t;(t=this.tab)===null||t===void 0?void 0:t.blur()}handleCloseClick(){this.sixClose.emit()}render(){var t;const a=this.host.closest("six-tab-group");const o=(t=a===null||a===void 0?void 0:a.placement)!==null&&t!==void 0?t:"top";return i(s,{key:"c5b8229e0f721259a30d70e4756ae4504c915d0f",id:this.host.id||this.componentId},i("div",{key:"2f3b8d1d278020352802f885a859232370cbbcb3",part:"base",ref:t=>this.tab=t,class:{tab:true,"tab--top":o==="top","tab--bottom":o==="bottom","tab--left":o==="left","tab--right":o==="right","tab--active":this.active,"tab--closable":this.closable,"tab--disabled":this.disabled},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0"},i("slot",{key:"a09a1df3cb8a119d736a200b618e114399fe57c3"}),this.closable&&i("six-icon-button",{name:"close",size:"xSmall",exportparts:"base:close-button",class:"tab__close-button",onClick:this.handleCloseClick,tabIndex:-1,"aria-hidden":"true"})),i("div",{key:"31c108fd748bf326b1dd40a92d2b35eaef7f8c29",class:{tab__indicator:true,"tab__indicator--active":this.active,"tab__indicator--top":o==="top","tab__indicator--bottom":o==="bottom","tab__indicator--left":o==="left","tab__indicator--right":o==="right"}}))}get host(){return o(this)}};l.style=r;export{l as six_tab};
|
|
2
|
+
//# sourceMappingURL=p-f8572492.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixTabCss","SixTabStyle0","id","SixTab","this","componentId","connectedCallback","handleCloseClick","bind","setFocus","options","_a","tab","focus","removeFocus","blur","sixClose","emit","render","tabGroup","host","closest","placement","h","Host","key","part","ref","el","class","active","closable","disabled","role","tabindex","name","size","exportparts","onClick","tabIndex","tab__indicator"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: flex;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n position: absolute;\n &.tab__indicator--active {\n background-color: var(--six-tab-border-color-active);\n }\n}\n\n// TOP\n.tab--top {\n margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n width: 100%;\n bottom: 0;\n height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n width: 100%;\n top: 0;\n height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n height: 100%;\n right: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n height: 100%;\n left: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) active = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Set to true to draw the tab in a disabled state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,qrDAClB,MAAAC,EAAeD,ECEf,IAAIE,EAAK,E,MAmBIC,EAAM,M,iEACTC,KAAAC,YAAc,SAASH,I,WAME,G,YAGC,M,cAGf,M,cAGiB,K,CAKpC,iBAAAI,GACEF,KAAKG,iBAAmBH,KAAKG,iBAAiBC,KAAKJ,K,CAKrD,cAAMK,CAASC,G,OACbC,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEE,MAAMH,E,CAKlB,iBAAMI,G,OACJH,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEI,M,CAGJ,gBAAAR,GACNH,KAAKY,SAASC,M,CAGhB,MAAAC,G,MACE,MAAMC,EAA0Cf,KAAKgB,KAAKC,QAAQ,iBAClE,MAAMC,GAAYX,EAAAQ,IAAQ,MAARA,SAAQ,SAARA,EAAUG,aAAS,MAAAX,SAAA,EAAAA,EAAI,MACzC,OAEEY,EAACC,EAAI,CAAAC,IAAA,2CAACvB,GAAIE,KAAKgB,KAAKlB,IAAME,KAAKC,aAC7BkB,EAAA,OAAAE,IAAA,2CACEC,KAAK,OACLC,IAAMC,GAAQxB,KAAKQ,IAAMgB,EACzBC,MAAO,CACLjB,IAAK,KAGL,WAAYU,IAAc,MAC1B,cAAeA,IAAc,SAC7B,YAAaA,IAAc,OAC3B,aAAcA,IAAc,QAG5B,cAAelB,KAAK0B,OACpB,gBAAiB1B,KAAK2B,SACtB,gBAAiB3B,KAAK4B,UAExBC,KAAK,MAAK,gBACK7B,KAAK4B,SAAW,OAAS,QAAO,gBAChC5B,KAAK0B,OAAS,OAAS,QACtCI,SAAU9B,KAAK4B,WAAa5B,KAAK0B,OAAS,KAAO,KAEjDP,EAAA,QAAAE,IAAA,6CACCrB,KAAK2B,UACJR,EAAA,mBACEY,KAAK,QACLC,KAAK,SACLC,YAAY,oBACZR,MAAM,oBACNS,QAASlC,KAAKG,iBACdgC,UAAW,EAAC,cACA,UAIlBhB,EAAA,OAAAE,IAAA,2CACEI,MAAO,CACLW,eAAgB,KAChB,yBAA0BpC,KAAK0B,OAG/B,sBAAuBR,IAAc,MACrC,yBAA0BA,IAAc,SACxC,uBAAwBA,IAAc,OACtC,wBAAyBA,IAAc,W"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
const t="ui-library";let e;let n;let s=false;let o=false;let l=false;const c=(t,e="")=>{{return()=>{}}};const i=(t,e)=>{{return()=>{}}};const f="{visibility:hidden}.hydrated{visibility:inherit}";const r="slot-fb{display:contents}slot-fb[hidden]{display:none}";const u={};const a="http://www.w3.org/2000/svg";const d="http://www.w3.org/1999/xhtml";const v=t=>t!=null;const p=t=>{t=typeof t;return t==="object"||t==="function"};function y(t){var e,n,s;return(s=(n=(e=t.head)===null||e===void 0?void 0:e.querySelector('meta[name="csp-nonce"]'))===null||n===void 0?void 0:n.getAttribute("content"))!==null&&s!==void 0?s:undefined}const h=(t,e,...n)=>{let s=null;let o=null;let l=false;let c=false;const i=[];const f=e=>{for(let n=0;n<e.length;n++){s=e[n];if(Array.isArray(s)){f(s)}else if(s!=null&&typeof s!=="boolean"){if(l=typeof t!=="function"&&!p(s)){s=String(s)}if(l&&c){i[i.length-1].t+=s}else{i.push(l?m(null,s):s)}c=l}}};f(n);if(e){if(e.key){o=e.key}{const t=e.className||e.class;if(t){e.class=typeof t!=="object"?t:Object.keys(t).filter((e=>t[e])).join(" ")}}}if(typeof t==="function"){return t(e===null?{}:e,i,$)}const r=m(t,null);r.o=e;if(i.length>0){r.l=i}{r.i=o}return r};const m=(t,e)=>{const n={u:0,v:t,t:e,p:null,l:null};{n.o=null}{n.i=null}return n};const b={};const w=t=>t&&t.v===b;const $={forEach:(t,e)=>t.map(g).forEach(e),map:(t,e)=>t.map(g).map(e).map(S)};const g=t=>({vattrs:t.o,vchildren:t.l,vkey:t.i,vname:t.h,vtag:t.v,vtext:t.t});const S=t=>{if(typeof t.vtag==="function"){const e=Object.assign({},t.vattrs);if(t.vkey){e.key=t.vkey}if(t.vname){e.name=t.vname}return h(t.vtag,e,...t.vchildren||[])}const e=m(t.vtag,t.vtext);e.o=t.vattrs;e.l=t.vchildren;e.i=t.vkey;e.h=t.vname;return e};const j=(t,e)=>{if(t!=null&&!p(t)){if(e&4){return t==="false"?false:t===""||!!t}if(e&2){return parseFloat(t)}if(e&1){return String(t)}return t}return t};const O=t=>bt(t).$hostElement$;const k=(t,e,n)=>{const s=O(t);return{emit:t=>C(s,e,{bubbles:!!(n&4),composed:!!(n&2),cancelable:!!(n&1),detail:t})}};const C=(t,e,n)=>{const s=xt.ce(e,n);t.dispatchEvent(s);return s};const M=new WeakMap;const x=(t,e,n)=>{let s=kt.get(t);if(Ut&&n){s=s||new CSSStyleSheet;if(typeof s==="string"){s=e}else{s.replaceSync(e)}}else{s=e}kt.set(t,s)};const E=(t,e,n)=>{var s;const o=U(e);const l=kt.get(o);t=t.nodeType===11?t:Mt;if(l){if(typeof l==="string"){t=t.head||t;let n=M.get(t);let c;if(!n){M.set(t,n=new Set)}if(!n.has(o)){{c=Mt.createElement("style");c.innerHTML=l;const e=(s=xt.m)!==null&&s!==void 0?s:y(Mt);if(e!=null){c.setAttribute("nonce",e)}t.insertBefore(c,t.querySelector("link"))}if(e.u&4){c.innerHTML+=r}if(n){n.add(o)}}}else if(!t.adoptedStyleSheets.includes(l)){t.adoptedStyleSheets=[...t.adoptedStyleSheets,l]}}return o};const P=t=>{const e=t.$;const n=t.$hostElement$;const s=e.u;const o=c("attachStyles",e.S);const l=E(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);if(s&10){n["s-sc"]=l;n.classList.add(l+"-h");if(s&2){n.classList.add(l+"-s")}}o()};const U=(t,e)=>"sc-"+t.S;const L=(t,e,n,s,o,l)=>{if(n!==s){let c=gt(t,e);let i=e.toLowerCase();if(e==="class"){const e=t.classList;const o=A(n);const l=A(s);e.remove(...o.filter((t=>t&&!l.includes(t))));e.add(...l.filter((t=>t&&!o.includes(t))))}else if(e==="style"){{for(const e in n){if(!s||s[e]==null){if(e.includes("-")){t.style.removeProperty(e)}else{t.style[e]=""}}}}for(const e in s){if(!n||s[e]!==n[e]){if(e.includes("-")){t.style.setProperty(e,s[e])}else{t.style[e]=s[e]}}}}else if(e==="key");else if(e==="ref"){if(s){s(t)}}else if(!c&&e[0]==="o"&&e[1]==="n"){if(e[2]==="-"){e=e.slice(3)}else if(gt(Ct,i)){e=i.slice(2)}else{e=i[2]+e.slice(3)}if(n||s){const o=e.endsWith(D);e=e.replace(N,"");if(n){xt.rel(t,e,n,o)}if(s){xt.ael(t,e,s,o)}}}else{const i=p(s);if((c||i&&s!==null)&&!o){try{if(!t.tagName.includes("-")){const o=s==null?"":s;if(e==="list"){c=false}else if(n==null||t[e]!=o){t[e]=o}}else{t[e]=s}}catch(t){}}if(s==null||s===false){if(s!==false||t.getAttribute(e)===""){{t.removeAttribute(e)}}}else if((!c||l&4||o)&&!i){s=s===true?"":s;{t.setAttribute(e,s)}}}}};const R=/\s/;const A=t=>!t?[]:t.split(R);const D="Capture";const N=new RegExp(D+"$");const T=(t,e,n,s)=>{const o=e.p.nodeType===11&&e.p.host?e.p.host:e.p;const l=t&&t.o||u;const c=e.o||u;{for(s in l){if(!(s in c)){L(o,s,l[s],undefined,n,e.u)}}}for(s in c){L(o,s,l[s],c[s],n,e.u)}};const W=(t,s,l,c)=>{const i=s.l[l];let f=0;let r;let u;if(i.t!==null){r=i.p=Mt.createTextNode(i.t)}else{if(!o){o=i.v==="svg"}r=i.p=Mt.createElementNS(o?a:d,i.v);if(o&&i.v==="foreignObject"){o=false}{T(null,i,o)}if(v(e)&&r["s-si"]!==e){r.classList.add(r["s-si"]=e)}if(i.l){for(f=0;f<i.l.length;++f){u=W(t,i,f);if(u){r.appendChild(u)}}}{if(i.v==="svg"){o=false}else if(r.tagName==="foreignObject"){o=true}}}r["s-hn"]=n;return r};const F=(t,e,s,o,l,c)=>{let i=t;let f;if(i.shadowRoot&&i.tagName===n){i=i.shadowRoot}for(;l<=c;++l){if(o[l]){f=W(null,s,l);if(f){o[l].p=f;i.insertBefore(f,e)}}}};const H=(t,e,n)=>{for(let s=e;s<=n;++s){const e=t[s];if(e){const t=e.p;_(e);if(t){t.remove()}}}};const q=(t,e,n,s,o=false)=>{let l=0;let c=0;let i=0;let f=0;let r=e.length-1;let u=e[0];let a=e[r];let d=s.length-1;let v=s[0];let p=s[d];let y;let h;while(l<=r&&c<=d){if(u==null){u=e[++l]}else if(a==null){a=e[--r]}else if(v==null){v=s[++c]}else if(p==null){p=s[--d]}else if(I(u,v,o)){V(u,v,o);u=e[++l];v=s[++c]}else if(I(a,p,o)){V(a,p,o);a=e[--r];p=s[--d]}else if(I(u,p,o)){V(u,p,o);t.insertBefore(u.p,a.p.nextSibling);u=e[++l];p=s[--d]}else if(I(a,v,o)){V(a,v,o);t.insertBefore(a.p,u.p);a=e[--r];v=s[++c]}else{i=-1;{for(f=l;f<=r;++f){if(e[f]&&e[f].i!==null&&e[f].i===v.i){i=f;break}}}if(i>=0){h=e[i];if(h.v!==v.v){y=W(e&&e[c],n,i)}else{V(h,v,o);e[i]=undefined;y=h.p}v=s[++c]}else{y=W(e&&e[c],n,c);v=s[++c]}if(y){{u.p.parentNode.insertBefore(y,u.p)}}}}if(l>r){F(t,s[d+1]==null?null:s[d+1].p,n,s,c,d)}else if(c>d){H(e,l,r)}};const I=(t,e,n=false)=>{if(t.v===e.v){if(!n){return t.i===e.i}return true}return false};const V=(t,e,n=false)=>{const l=e.p=t.p;const c=t.l;const i=e.l;const f=e.v;const r=e.t;if(r===null){{o=f==="svg"?true:f==="foreignObject"?false:o}{if(f==="slot"&&!s);else{T(t,e,o)}}if(c!==null&&i!==null){q(l,c,e,i,n)}else if(i!==null){if(t.t!==null){l.textContent=""}F(l,null,e,i,0,i.length-1)}else if(c!==null){H(c,0,c.length-1)}if(o&&f==="svg"){o=false}}else if(t.t!==r){l.data=r}};const _=t=>{{t.o&&t.o.ref&&t.o.ref(null);t.l&&t.l.map(_)}};const z=(t,o,l=false)=>{const c=t.$hostElement$;const i=t.$;const f=t.j||m(null,null);const r=w(o)?o:h(null,null,o);n=c.tagName;if(i.O){r.o=r.o||{};i.O.map((([t,e])=>r.o[e]=c[t]))}if(l&&r.o){for(const t of Object.keys(r.o)){if(c.hasAttribute(t)&&!["key","ref","style","class"].includes(t)){r.o[t]=c[t]}}}r.v=null;r.u|=4;t.j=r;r.p=f.p=c.shadowRoot||c;{e=c["s-sc"]}s=(i.u&1)!==0;V(f,r,l)};const B=(t,e)=>{if(e&&!t.k&&e["s-p"]){e["s-p"].push(new Promise((e=>t.k=e)))}};const G=(t,e)=>{{t.u|=16}if(t.u&4){t.u|=512;return}B(t,t.C);const n=()=>J(t,e);return Wt(n)};const J=(t,e)=>{const n=c("scheduleUpdate",t.$.S);const s=t.M;let o;if(e){{t.u|=256;if(t.P){t.P.map((([t,e])=>et(s,t,e)));t.P=undefined}}{o=et(s,"componentWillLoad")}}n();return K(o,(()=>X(t,s,e)))};const K=(t,e)=>Q(t)?t.then(e):e();const Q=t=>t instanceof Promise||t&&t.then&&typeof t.then==="function";const X=async(t,e,n)=>{var s;const o=t.$hostElement$;const l=c("update",t.$.S);const i=o["s-rc"];if(n){P(t)}const f=c("render",t.$.S);{Y(t,e,o,n)}if(i){i.map((t=>t()));o["s-rc"]=undefined}f();l();{const e=(s=o["s-p"])!==null&&s!==void 0?s:[];const n=()=>Z(t);if(e.length===0){n()}else{Promise.all(e).then(n);t.u|=4;e.length=0}}};const Y=(t,e,n,s)=>{try{e=e.render();{t.u&=~16}{t.u|=2}{{{z(t,e,s)}}}}catch(e){St(e,t.$hostElement$)}return null};const Z=t=>{const e=t.$.S;const n=t.$hostElement$;const s=c("postUpdate",e);const o=t.M;const l=t.C;{et(o,"componentDidRender")}if(!(t.u&64)){t.u|=64;{nt(n)}{et(o,"componentDidLoad")}s();{t.U(n);if(!l){tt()}}}else{{et(o,"componentDidUpdate")}s()}{t.L(n)}{if(t.k){t.k();t.k=undefined}if(t.u&512){Tt((()=>G(t,false)))}t.u&=~(4|512)}};const tt=e=>{{nt(Mt.documentElement)}Tt((()=>C(Ct,"appload",{detail:{namespace:t}})))};const et=(t,e,n)=>{if(t&&t[e]){try{return t[e](n)}catch(t){St(t)}}return undefined};const nt=t=>t.classList.add("hydrated");const st=(t,e)=>bt(t).R.get(e);const ot=(t,e,n,s)=>{const o=bt(t);const l=o.$hostElement$;const c=o.R.get(e);const i=o.u;const f=o.M;n=j(n,s.A[e][0]);const r=Number.isNaN(c)&&Number.isNaN(n);const u=n!==c&&!r;if((!(i&8)||c===undefined)&&u){o.R.set(e,n);if(f){if(s.D&&i&128){const t=s.D[e];if(t){t.map((t=>{try{f[t](n,c,e)}catch(t){St(t,l)}}))}}if((i&(2|16))===2){G(o,false)}}}};const lt=(t,e,n)=>{var s;const o=t.prototype;if(e.A){if(t.watchers){e.D=t.watchers}const l=Object.entries(e.A);l.map((([t,[s]])=>{if(s&31||n&2&&s&32){Object.defineProperty(o,t,{get(){return st(this,t)},set(n){ot(this,t,n,e)},configurable:true,enumerable:true})}else if(n&1&&s&64){Object.defineProperty(o,t,{value(...e){var n;const s=bt(this);return(n=s===null||s===void 0?void 0:s.N)===null||n===void 0?void 0:n.then((()=>{var n;return(n=s.M)===null||n===void 0?void 0:n[t](...e)}))}})}}));if(n&1){const n=new Map;o.attributeChangedCallback=function(t,s,l){xt.jmp((()=>{var c;const i=n.get(t);if(this.hasOwnProperty(i)){l=this[i];delete this[i]}else if(o.hasOwnProperty(i)&&typeof this[i]==="number"&&this[i]==l){return}else if(i==null){const n=bt(this);const o=n===null||n===void 0?void 0:n.u;if(o&&!(o&8)&&o&128&&l!==s){const o=n.M;const i=(c=e.D)===null||c===void 0?void 0:c[t];i===null||i===void 0?void 0:i.forEach((e=>{if(o[e]!=null){o[e].call(o,l,s,t)}}))}return}this[i]=l===null&&typeof this[i]==="boolean"?false:l}))};t.observedAttributes=Array.from(new Set([...Object.keys((s=e.D)!==null&&s!==void 0?s:{}),...l.filter((([t,e])=>e[0]&15)).map((([t,s])=>{var o;const l=s[1]||t;n.set(l,t);if(s[0]&512){(o=e.O)===null||o===void 0?void 0:o.push([t,l])}return l}))]))}}return t};const ct=async(t,e,n,s)=>{let o;if((e.u&32)===0){e.u|=32;const s=n.T;if(s){o=Ot(n);if(o.then){const t=i();o=await o;t()}if(!o.isProxied){{n.D=o.watchers}lt(o,n,2);o.isProxied=true}const t=c("createInstance",n.S);{e.u|=8}try{new o(e)}catch(t){St(t)}{e.u&=~8}{e.u|=128}t();it(e.M)}else{o=t.constructor;customElements.whenDefined(n.S).then((()=>e.u|=128))}if(o.style){let t=o.style;const e=U(n);if(!kt.has(e)){const s=c("registerStyles",n.S);x(e,t,!!(n.u&1));s()}}}const l=e.C;const f=()=>G(e,true);if(l&&l["s-rc"]){l["s-rc"].push(f)}else{f()}};const it=t=>{{et(t,"connectedCallback")}};const ft=t=>{if((xt.u&1)===0){const e=bt(t);const n=e.$;const s=c("connectedCallback",n.S);if(!(e.u&1)){e.u|=1;{let n=t;while(n=n.parentNode||n.host){if(n["s-p"]){B(e,e.C=n);break}}}if(n.A){Object.entries(n.A).map((([e,[n]])=>{if(n&31&&t.hasOwnProperty(e)){const n=t[e];delete t[e];t[e]=n}}))}{ct(t,e,n)}}else{dt(t,e,n.W);if(e===null||e===void 0?void 0:e.M){it(e.M)}else if(e===null||e===void 0?void 0:e.F){e.F.then((()=>it(e.M)))}}s()}};const rt=t=>{{et(t,"disconnectedCallback")}};const ut=async t=>{if((xt.u&1)===0){const e=bt(t);{if(e.H){e.H.map((t=>t()));e.H=undefined}}if(e===null||e===void 0?void 0:e.M){rt(e.M)}else if(e===null||e===void 0?void 0:e.F){e.F.then((()=>rt(e.M)))}}};const at=(t,e={})=>{var n;const s=c();const o=[];const l=e.exclude||[];const i=Ct.customElements;const u=Mt.head;const a=u.querySelector("meta[charset]");const d=Mt.createElement("style");const v=[];let p;let h=true;Object.assign(xt,e);xt.q=new URL(e.resourcesUrl||"./",Mt.baseURI).href;let m=false;t.map((t=>{t[1].map((e=>{var n;const s={u:e[0],S:e[1],A:e[2],W:e[3]};if(s.u&4){m=true}{s.A=e[2]}{s.W=e[3]}{s.O=[]}{s.D=(n=e[4])!==null&&n!==void 0?n:{}}const c=s.S;const f=class extends HTMLElement{constructor(t){super(t);t=this;$t(t,s);if(s.u&1){{{t.attachShadow({mode:"open"})}}}}connectedCallback(){if(p){clearTimeout(p);p=null}if(h){v.push(this)}else{xt.jmp((()=>ft(this)))}}disconnectedCallback(){xt.jmp((()=>ut(this)))}componentOnReady(){return bt(this).F}};s.T=t[0];if(!l.includes(c)&&!i.get(c)){o.push(c);i.define(c,lt(f,s,1))}}))}));if(o.length>0){if(m){d.textContent+=r}{d.textContent+=o+f}if(d.innerHTML.length){d.setAttribute("data-styles","");const t=(n=xt.m)!==null&&n!==void 0?n:y(Mt);if(t!=null){d.setAttribute("nonce",t)}u.insertBefore(d,a?a.nextSibling:u.firstChild)}}h=false;if(v.length){v.map((t=>t.connectedCallback()))}else{{xt.jmp((()=>p=setTimeout(tt,30)))}}s()};const dt=(t,e,n,s)=>{if(n){n.map((([n,s,o])=>{const l=pt(t,n);const c=vt(e,o);const i=yt(n);xt.ael(l,s,c,i);(e.H=e.H||[]).push((()=>xt.rel(l,s,c,i)))}))}};const vt=(t,e)=>n=>{try{{if(t.u&256){t.M[e](n)}else{(t.P=t.P||[]).push([e,n])}}}catch(t){St(t)}};const pt=(t,e)=>{if(e&8)return Ct;return t};const yt=t=>Et?{passive:(t&1)!==0,capture:(t&2)!==0}:(t&2)!==0;const ht=t=>xt.m=t;const mt=new WeakMap;const bt=t=>mt.get(t);const wt=(t,e)=>mt.set(e.M=t,e);const $t=(t,e)=>{const n={u:0,$hostElement$:t,$:e,R:new Map};{n.N=new Promise((t=>n.L=t))}{n.F=new Promise((t=>n.U=t));t["s-p"]=[];t["s-rc"]=[]}dt(t,n,e.W);return mt.set(t,n)};const gt=(t,e)=>e in t;const St=(t,e)=>(0,console.error)(t,e);const jt=new Map;const Ot=(t,e,n)=>{const s=t.S.replace(/-/g,"_");const o=t.T;const l=jt.get(o);if(l){return l[s]}
|
|
2
|
+
/*!__STENCIL_STATIC_IMPORT_SWITCH__*/return import(`./${o}.entry.js${""}`).then((t=>{{jt.set(o,t)}return t[s]}),St)};const kt=new Map;const Ct=typeof window!=="undefined"?window:{};const Mt=Ct.document||{head:{}};const xt={u:0,q:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,s)=>t.addEventListener(e,n,s),rel:(t,e,n,s)=>t.removeEventListener(e,n,s),ce:(t,e)=>new CustomEvent(t,e)};const Et=(()=>{let t=false;try{Mt.addEventListener("e",null,Object.defineProperty({},"passive",{get(){t=true}}))}catch(t){}return t})();const Pt=t=>Promise.resolve(t);const Ut=(()=>{try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(t){}return false})();const Lt=[];const Rt=[];const At=(t,e)=>n=>{t.push(n);if(!l){l=true;if(e&&xt.u&4){Tt(Nt)}else{xt.raf(Nt)}}};const Dt=t=>{for(let e=0;e<t.length;e++){try{t[e](performance.now())}catch(t){St(t)}}t.length=0};const Nt=()=>{Dt(Lt);{Dt(Rt);if(l=Lt.length>0){xt.raf(Nt)}}};const Tt=t=>Pt().then(t);const Wt=At(Rt,true);export{b as H,at as b,k as c,O as g,h,Pt as p,wt as r,ht as s};
|
|
3
|
+
//# sourceMappingURL=p-f93d8a4e.js.map
|