@ukic/web-components 3.12.0 → 3.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/{helpers-478d1107.js → helpers-15fae358.js} +5 -1
- package/dist/cjs/helpers-15fae358.js.map +1 -0
- package/dist/cjs/ic-accordion-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-accordion.cjs.entry.js +1 -1
- package/dist/cjs/ic-action-chip.cjs.entry.js +1 -1
- package/dist/cjs/ic-alert.cjs.entry.js +6 -4
- package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-back-to-top.cjs.entry.js +6 -5
- package/dist/cjs/ic-back-to-top.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-badge.cjs.entry.js +3 -3
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +3 -3
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +5 -4
- package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +43 -19
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card-vertical.cjs.entry.js +5 -5
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +9 -5
- package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +5 -5
- package/dist/cjs/ic-chip.cjs.entry.js +4 -4
- package/dist/cjs/ic-data-list.cjs.entry.js +2 -2
- package/dist/cjs/ic-data-row.cjs.entry.js +3 -3
- package/dist/cjs/ic-dialog.cjs.entry.js +39 -13
- package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +3 -2
- package/dist/cjs/ic-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-empty-state.cjs.entry.js +3 -3
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js +3 -3
- package/dist/cjs/ic-footer.cjs.entry.js +1 -1
- package/dist/cjs/ic-hero.cjs.entry.js +8 -7
- package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +6 -6
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +18 -15
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js +6 -6
- package/dist/cjs/ic-layout-grid-item.cjs.entry.js +2 -2
- package/dist/cjs/ic-layout-grid.cjs.entry.js +2 -2
- package/dist/cjs/ic-link.cjs.entry.js +2 -2
- package/dist/cjs/ic-menu-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-menu-item.cjs.entry.js +3 -2
- package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-button.cjs.entry.js +3 -3
- package/dist/cjs/ic-navigation-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-navigation-item.cjs.entry.js +4 -4
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-menu.cjs.entry.js +5 -5
- package/dist/cjs/ic-page-header.cjs.entry.js +8 -8
- package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-pagination-item.cjs.entry.js +2 -2
- package/dist/cjs/ic-pagination.cjs.entry.js +5 -5
- package/dist/cjs/ic-popover-menu.cjs.entry.js +5 -5
- package/dist/cjs/ic-radio-group.cjs.entry.js +5 -5
- package/dist/cjs/ic-radio-option.cjs.entry.js +5 -5
- package/dist/cjs/ic-search-bar.cjs.entry.js +10 -10
- package/dist/cjs/ic-section-container.cjs.entry.js +2 -2
- package/dist/cjs/ic-select.cjs.entry.js +20 -12
- package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +6 -6
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-skeleton.cjs.entry.js +2 -2
- package/dist/cjs/ic-skip-link.cjs.entry.js +2 -2
- package/dist/cjs/ic-status-tag.cjs.entry.js +4 -4
- package/dist/cjs/ic-status-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +15 -14
- package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +4 -3
- package/dist/cjs/ic-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +5 -5
- package/dist/cjs/ic-tab-context.cjs.entry.js +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +3 -3
- package/dist/cjs/ic-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/ic-tab.cjs.entry.js +3 -3
- package/dist/cjs/ic-text-field.cjs.entry.js +12 -7
- package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-theme.cjs.entry.js +2 -2
- package/dist/cjs/ic-toast-region.cjs.entry.js +1 -1
- package/dist/cjs/ic-toast.cjs.entry.js +8 -5
- package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js +8 -4
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js +58 -45
- package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +6 -6
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-typography.cjs.entry.js +3 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/ic-alert/ic-alert.css +19 -29
- package/dist/collection/components/ic-alert/ic-alert.js +4 -2
- package/dist/collection/components/ic-alert/ic-alert.js.map +1 -1
- package/dist/collection/components/ic-back-to-top/ic-back-to-top.css +1 -1
- package/dist/collection/components/ic-back-to-top/ic-back-to-top.js +4 -3
- package/dist/collection/components/ic-back-to-top/ic-back-to-top.js.map +1 -1
- package/dist/collection/components/ic-badge/ic-badge.js +2 -2
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.css +5 -4
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js +3 -2
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js.map +1 -1
- package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js +2 -2
- package/dist/collection/components/ic-button/ic-button.js +36 -11
- package/dist/collection/components/ic-button/ic-button.js.map +1 -1
- package/dist/collection/components/ic-card-vertical/ic-card-vertical.js +4 -4
- package/dist/collection/components/ic-checkbox/ic-checkbox.js +4 -4
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +34 -4
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.stories.js +163 -0
- package/dist/collection/components/ic-chip/ic-chip.js +3 -3
- package/dist/collection/components/ic-data-list/ic-data-list.js +2 -2
- package/dist/collection/components/ic-data-row/ic-data-row.js +2 -2
- package/dist/collection/components/ic-dialog/ic-dialog.css +1 -1
- package/dist/collection/components/ic-dialog/ic-dialog.js +38 -12
- package/dist/collection/components/ic-dialog/ic-dialog.js.map +1 -1
- package/dist/collection/components/ic-divider/ic-divider.css +89 -89
- package/dist/collection/components/ic-divider/ic-divider.js +2 -1
- package/dist/collection/components/ic-divider/ic-divider.js.map +1 -1
- package/dist/collection/components/ic-empty-state/ic-empty-state.js +2 -2
- package/dist/collection/components/ic-footer-link/ic-footer-link.js +2 -2
- package/dist/collection/components/ic-hero/ic-hero.css +4 -4
- package/dist/collection/components/ic-hero/ic-hero.js +6 -5
- package/dist/collection/components/ic-hero/ic-hero.js.map +1 -1
- package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js +5 -5
- package/dist/collection/components/ic-input-component-container/ic-input-component-container.js +3 -3
- package/dist/collection/components/ic-input-container/ic-input-container.js +2 -2
- package/dist/collection/components/ic-input-label/ic-input-label.js +2 -2
- package/dist/collection/components/ic-input-validation/ic-input-validation.js +3 -3
- package/dist/collection/components/ic-layout-grid/ic-layout-grid.js +2 -2
- package/dist/collection/components/ic-layout-grid-item/ic-layout-grid-item.js +2 -2
- package/dist/collection/components/ic-link/ic-link.js +1 -1
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css +4 -4
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js +6 -5
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js.map +1 -1
- package/dist/collection/components/ic-menu/ic-menu.js +12 -9
- package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
- package/dist/collection/components/ic-menu-group/ic-menu-group.js +1 -1
- package/dist/collection/components/ic-menu-item/ic-menu-item.css +6 -6
- package/dist/collection/components/ic-menu-item/ic-menu-item.js +1 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.js.map +1 -1
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.js +2 -2
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js +1 -1
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.css +9 -0
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +2 -2
- package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js +4 -4
- package/dist/collection/components/ic-page-header/ic-page-header.css +4 -0
- package/dist/collection/components/ic-page-header/ic-page-header.js +6 -6
- package/dist/collection/components/ic-pagination/ic-pagination.js +4 -4
- package/dist/collection/components/ic-pagination-item/ic-pagination-item.js +1 -1
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +4 -4
- package/dist/collection/components/ic-radio-group/ic-radio-group.js +4 -4
- package/dist/collection/components/ic-radio-option/ic-radio-option.js +4 -4
- package/dist/collection/components/ic-search-bar/ic-search-bar.js +9 -9
- package/dist/collection/components/ic-section-container/ic-section-container.js +2 -2
- package/dist/collection/components/ic-select/ic-select.js +20 -12
- package/dist/collection/components/ic-select/ic-select.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select_(single).stories.js +74 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.css +2 -0
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +4 -4
- package/dist/collection/components/ic-skeleton/ic-skeleton.js +2 -2
- package/dist/collection/components/ic-skip-link/ic-skip-link.js +2 -2
- package/dist/collection/components/ic-status-tag/ic-status-tag.css +1 -4
- package/dist/collection/components/ic-status-tag/ic-status-tag.js +2 -2
- package/dist/collection/components/ic-step/ic-step.js +16 -15
- package/dist/collection/components/ic-step/ic-step.js.map +1 -1
- package/dist/collection/components/ic-step/ic-step.types.js.map +1 -1
- package/dist/collection/components/ic-stepper/ic-stepper.js +5 -4
- package/dist/collection/components/ic-stepper/ic-stepper.js.map +1 -1
- package/dist/collection/components/ic-stepper/ic-stepper.stories.js +2 -1
- package/dist/collection/components/ic-switch/ic-switch.js +4 -4
- package/dist/collection/components/ic-tab/ic-tab.js +2 -2
- package/dist/collection/components/ic-tab-context/ic-tab-context.js +1 -1
- package/dist/collection/components/ic-tab-group/ic-tab-group.js +2 -2
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.js +2 -2
- package/dist/collection/components/ic-text-field/ic-text-field.js +17 -11
- package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
- package/dist/collection/components/ic-text-field/ic-text-field.stories.js +22 -0
- package/dist/collection/components/ic-text-field/ic-text-field.types.js.map +1 -1
- package/dist/collection/components/ic-theme/ic-theme.js +1 -1
- package/dist/collection/components/ic-toast/ic-toast.css +6 -6
- package/dist/collection/components/ic-toast/ic-toast.js +6 -3
- package/dist/collection/components/ic-toast/ic-toast.js.map +1 -1
- package/dist/collection/components/ic-toast-region/ic-toast-region.js +1 -1
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +57 -44
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map +1 -1
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js +7 -3
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js.map +1 -1
- package/dist/collection/components/ic-tooltip/ic-tooltip.js +3 -3
- package/dist/collection/components/ic-tooltip/ic-tooltip.js.map +1 -1
- package/dist/collection/components/ic-tooltip/ic-tooltip.stories.js +37 -109
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.css +13 -10
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js +4 -4
- package/dist/collection/components/ic-typography/ic-typography.js +2 -2
- package/dist/collection/icds-table-style.css +66 -0
- package/dist/collection/utils/helpers.js +3 -0
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/components/helpers.js +4 -1
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/ic-action-chip.js +1 -1
- package/dist/components/ic-alert.js +6 -4
- package/dist/components/ic-alert.js.map +1 -1
- package/dist/components/ic-back-to-top.js +6 -5
- package/dist/components/ic-back-to-top.js.map +1 -1
- package/dist/components/ic-badge.js +3 -3
- package/dist/components/ic-breadcrumb-group.js +3 -3
- package/dist/components/ic-breadcrumb2.js +5 -4
- package/dist/components/ic-breadcrumb2.js.map +1 -1
- package/dist/components/ic-button2.js +35 -11
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-card-vertical.js +5 -5
- package/dist/components/ic-checkbox-group.js +10 -5
- package/dist/components/ic-checkbox-group.js.map +1 -1
- package/dist/components/ic-checkbox.js +5 -5
- package/dist/components/ic-chip.js +4 -4
- package/dist/components/ic-data-list.js +2 -2
- package/dist/components/ic-data-row.js +3 -3
- package/dist/components/ic-dialog.js +39 -13
- package/dist/components/ic-dialog.js.map +1 -1
- package/dist/components/ic-divider2.js +3 -2
- package/dist/components/ic-divider2.js.map +1 -1
- package/dist/components/ic-empty-state.js +3 -3
- package/dist/components/ic-footer-link-group.js +1 -1
- package/dist/components/ic-footer-link.js +3 -3
- package/dist/components/ic-footer.js +1 -1
- package/dist/components/ic-hero.js +8 -7
- package/dist/components/ic-hero.js.map +1 -1
- package/dist/components/ic-horizontal-scroll2.js +6 -6
- package/dist/components/ic-input-component-container2.js +4 -4
- package/dist/components/ic-input-container2.js +2 -2
- package/dist/components/ic-input-label2.js +3 -3
- package/dist/components/ic-input-validation2.js +4 -4
- package/dist/components/ic-layout-grid-item.js +2 -2
- package/dist/components/ic-layout-grid.js +2 -2
- package/dist/components/ic-link2.js +1 -1
- package/dist/components/ic-loading-indicator2.js +7 -6
- package/dist/components/ic-loading-indicator2.js.map +1 -1
- package/dist/components/ic-menu-group.js +2 -2
- package/dist/components/ic-menu-item2.js +3 -2
- package/dist/components/ic-menu-item2.js.map +1 -1
- package/dist/components/ic-menu2.js +13 -10
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-button.js +3 -3
- package/dist/components/ic-navigation-group.js +2 -2
- package/dist/components/ic-navigation-item.js +4 -4
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-navigation-menu2.js +5 -5
- package/dist/components/ic-page-header.js +8 -8
- package/dist/components/ic-page-header.js.map +1 -1
- package/dist/components/ic-pagination-item2.js +2 -2
- package/dist/components/ic-pagination.js +4 -4
- package/dist/components/ic-popover-menu.js +5 -5
- package/dist/components/ic-radio-group.js +5 -5
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-radio-option.js +5 -5
- package/dist/components/ic-search-bar.js +10 -10
- package/dist/components/ic-section-container2.js +2 -2
- package/dist/components/ic-select.js +20 -12
- package/dist/components/ic-select.js.map +1 -1
- package/dist/components/ic-side-navigation.js +6 -6
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-skeleton.js +2 -2
- package/dist/components/ic-skip-link.js +2 -2
- package/dist/components/ic-status-tag.js +3 -3
- package/dist/components/ic-status-tag.js.map +1 -1
- package/dist/components/ic-step.js +15 -14
- package/dist/components/ic-step.js.map +1 -1
- package/dist/components/ic-stepper.js +3 -2
- package/dist/components/ic-stepper.js.map +1 -1
- package/dist/components/ic-switch.js +5 -5
- package/dist/components/ic-tab-context.js +1 -1
- package/dist/components/ic-tab-group.js +2 -2
- package/dist/components/ic-tab-panel.js +2 -2
- package/dist/components/ic-tab.js +2 -2
- package/dist/components/ic-text-field.js +12 -7
- package/dist/components/ic-text-field.js.map +1 -1
- package/dist/components/ic-theme.js +2 -2
- package/dist/components/ic-toast-region.js +1 -1
- package/dist/components/ic-toast.js +8 -5
- package/dist/components/ic-toast.js.map +1 -1
- package/dist/components/ic-toggle-button-group.js +7 -3
- package/dist/components/ic-toggle-button-group.js.map +1 -1
- package/dist/components/ic-toggle-button.js +58 -45
- package/dist/components/ic-toggle-button.js.map +1 -1
- package/dist/components/ic-tooltip2.js +3 -3
- package/dist/components/ic-tooltip2.js.map +1 -1
- package/dist/components/ic-top-navigation.js +6 -6
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/components/ic-typography2.js +2 -2
- package/dist/core/core.css +11 -8
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/icds-table-style.css +66 -0
- package/dist/core/p-0257d59e.entry.js +2 -0
- package/dist/core/p-0257d59e.entry.js.map +1 -0
- package/dist/core/p-042cfc35.entry.js +2 -0
- package/dist/core/p-042cfc35.entry.js.map +1 -0
- package/dist/core/{p-514daffe.entry.js → p-053ed367.entry.js} +2 -2
- package/dist/core/{p-54803e3b.entry.js → p-06b3ae40.entry.js} +2 -2
- package/dist/core/{p-95d3d1a7.entry.js → p-091a7fbf.entry.js} +2 -2
- package/dist/core/{p-4747c39f.entry.js → p-09c31ac6.entry.js} +2 -2
- package/dist/core/{p-01e018cb.entry.js → p-0b1ea961.entry.js} +2 -2
- package/dist/core/{p-cf868a24.entry.js → p-0cbd0967.entry.js} +2 -2
- package/dist/core/p-0cbd0967.entry.js.map +1 -0
- package/dist/core/{p-33582352.entry.js → p-109e7fce.entry.js} +2 -2
- package/dist/core/{p-99793b64.entry.js → p-199c5ff6.entry.js} +2 -2
- package/dist/core/p-2026f4fa.entry.js +2 -0
- package/dist/core/p-2026f4fa.entry.js.map +1 -0
- package/dist/core/p-24d46cab.entry.js +2 -0
- package/dist/core/p-24d46cab.entry.js.map +1 -0
- package/dist/core/{p-228bc12d.entry.js → p-2969b5c9.entry.js} +2 -2
- package/dist/core/{p-c975cced.entry.js → p-296a41ce.entry.js} +2 -2
- package/dist/core/p-30312243.entry.js +2 -0
- package/dist/core/p-30312243.entry.js.map +1 -0
- package/dist/core/p-355d0914.entry.js +2 -0
- package/dist/core/p-355d0914.entry.js.map +1 -0
- package/dist/core/{p-1423bd4a.entry.js → p-3785c740.entry.js} +2 -2
- package/dist/core/{p-8684efeb.entry.js → p-3a94849e.entry.js} +2 -2
- package/dist/core/{p-a06c1e4e.entry.js → p-3b13d191.entry.js} +2 -2
- package/dist/core/{p-13e093d0.entry.js → p-411527a1.entry.js} +2 -2
- package/dist/core/{p-de32a223.entry.js → p-44fbe8c2.entry.js} +2 -2
- package/dist/core/{p-93479c36.entry.js → p-4637c326.entry.js} +2 -2
- package/dist/core/{p-fb734a59.entry.js → p-48eb7299.entry.js} +2 -2
- package/dist/core/{p-b0376079.entry.js → p-4a358f09.entry.js} +2 -2
- package/dist/core/{p-e6dacbe2.entry.js → p-4bdeb62d.entry.js} +2 -2
- package/dist/core/{p-9cf6ccfd.entry.js → p-5cf704e3.entry.js} +2 -2
- package/dist/core/p-614953c5.entry.js +2 -0
- package/dist/core/p-614953c5.entry.js.map +1 -0
- package/dist/core/p-62b9e7bf.entry.js +2 -0
- package/dist/core/p-62b9e7bf.entry.js.map +1 -0
- package/dist/core/{p-05036675.entry.js → p-6996e94f.entry.js} +2 -2
- package/dist/core/p-6996e94f.entry.js.map +1 -0
- package/dist/core/{p-cc00cbce.entry.js → p-6e61c48a.entry.js} +2 -2
- package/dist/core/{p-33789b23.entry.js → p-6f60262e.entry.js} +3 -3
- package/dist/core/p-6f60262e.entry.js.map +1 -0
- package/dist/core/{p-d58ad080.entry.js → p-6fb29846.entry.js} +2 -2
- package/dist/core/p-6fb29846.entry.js.map +1 -0
- package/dist/core/p-77a6c3f7.entry.js +2 -0
- package/dist/core/p-77a6c3f7.entry.js.map +1 -0
- package/dist/core/p-7970cbed.entry.js +2 -0
- package/dist/core/p-7970cbed.entry.js.map +1 -0
- package/dist/core/{p-37d217b5.entry.js → p-889bb8db.entry.js} +2 -2
- package/dist/core/{p-c04e1fab.entry.js → p-8c7d6a85.entry.js} +2 -2
- package/dist/core/{p-6dbe70f1.entry.js → p-911b4aa4.entry.js} +2 -2
- package/dist/core/{p-57721431.entry.js → p-93e1ba0a.entry.js} +2 -2
- package/dist/core/{p-37daa8fe.entry.js → p-9c2e9189.entry.js} +2 -2
- package/dist/core/{p-8558b9b7.entry.js → p-a45de09d.entry.js} +2 -2
- package/dist/core/{p-b57e59b7.js → p-a5658054.js} +2 -2
- package/dist/core/p-a5658054.js.map +1 -0
- package/dist/core/{p-ea06792a.entry.js → p-a7f21494.entry.js} +2 -2
- package/dist/core/p-a8dc3162.entry.js +2 -0
- package/dist/core/p-a8dc3162.entry.js.map +1 -0
- package/dist/core/p-ab26beed.entry.js +2 -0
- package/dist/core/p-ab26beed.entry.js.map +1 -0
- package/dist/core/{p-2126d37b.entry.js → p-ad6632a9.entry.js} +2 -2
- package/dist/core/p-ae7dcbd5.entry.js +2 -0
- package/dist/core/p-ae7dcbd5.entry.js.map +1 -0
- package/dist/core/{p-9a8bcb78.entry.js → p-b00efb15.entry.js} +2 -2
- package/dist/core/p-b29e325f.entry.js +2 -0
- package/dist/core/{p-b9bdd9a9.entry.js → p-bba25812.entry.js} +2 -2
- package/dist/core/{p-27e67d45.entry.js → p-c397b33f.entry.js} +2 -2
- package/dist/core/{p-45097448.entry.js → p-c4ffcc64.entry.js} +2 -2
- package/dist/core/{p-675bb3e4.entry.js → p-d1cce122.entry.js} +2 -2
- package/dist/core/p-d20a61a7.entry.js +2 -0
- package/dist/core/p-d20a61a7.entry.js.map +1 -0
- package/dist/core/{p-492fcb51.entry.js → p-d8200098.entry.js} +2 -2
- package/dist/core/{p-80317cd1.entry.js → p-e0423c7e.entry.js} +2 -2
- package/dist/core/p-eb1823b3.entry.js +2 -0
- package/dist/core/p-eb1823b3.entry.js.map +1 -0
- package/dist/core/{p-b1838ad8.entry.js → p-ef397b6f.entry.js} +2 -2
- package/dist/core/p-ef397b6f.entry.js.map +1 -0
- package/dist/core/p-efc97f21.entry.js +2 -0
- package/dist/core/p-efc97f21.entry.js.map +1 -0
- package/dist/core/{p-b4a2f6fa.entry.js → p-f098e531.entry.js} +2 -2
- package/dist/core/{p-0ec76cff.entry.js → p-f247db14.entry.js} +2 -2
- package/dist/core/{p-813ad03c.entry.js → p-f4e2e41f.entry.js} +2 -2
- package/dist/core/{p-abd88929.entry.js → p-f7706ff7.entry.js} +2 -2
- package/dist/core/p-f7706ff7.entry.js.map +1 -0
- package/dist/core/{p-5fcfcfb6.entry.js → p-fb43abd6.entry.js} +2 -2
- package/dist/esm/core.js +1 -1
- package/dist/esm/{helpers-4ddac6ed.js → helpers-dcedb279.js} +5 -2
- package/dist/esm/helpers-dcedb279.js.map +1 -0
- package/dist/esm/ic-accordion-group.entry.js +1 -1
- package/dist/esm/ic-accordion.entry.js +1 -1
- package/dist/esm/ic-action-chip.entry.js +1 -1
- package/dist/esm/ic-alert.entry.js +6 -4
- package/dist/esm/ic-alert.entry.js.map +1 -1
- package/dist/esm/ic-back-to-top.entry.js +6 -5
- package/dist/esm/ic-back-to-top.entry.js.map +1 -1
- package/dist/esm/ic-badge.entry.js +3 -3
- package/dist/esm/ic-breadcrumb-group.entry.js +3 -3
- package/dist/esm/ic-breadcrumb.entry.js +5 -4
- package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ic-button_3.entry.js +43 -19
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card-vertical.entry.js +5 -5
- package/dist/esm/ic-checkbox-group.entry.js +9 -5
- package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
- package/dist/esm/ic-checkbox.entry.js +5 -5
- package/dist/esm/ic-chip.entry.js +4 -4
- package/dist/esm/ic-data-list.entry.js +2 -2
- package/dist/esm/ic-data-row.entry.js +3 -3
- package/dist/esm/ic-dialog.entry.js +39 -13
- package/dist/esm/ic-dialog.entry.js.map +1 -1
- package/dist/esm/ic-divider.entry.js +3 -2
- package/dist/esm/ic-divider.entry.js.map +1 -1
- package/dist/esm/ic-empty-state.entry.js +3 -3
- package/dist/esm/ic-footer-link-group.entry.js +1 -1
- package/dist/esm/ic-footer-link.entry.js +3 -3
- package/dist/esm/ic-footer.entry.js +1 -1
- package/dist/esm/ic-hero.entry.js +8 -7
- package/dist/esm/ic-hero.entry.js.map +1 -1
- package/dist/esm/ic-horizontal-scroll.entry.js +6 -6
- package/dist/esm/ic-input-component-container_3.entry.js +18 -15
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-input-label_2.entry.js +6 -6
- package/dist/esm/ic-layout-grid-item.entry.js +2 -2
- package/dist/esm/ic-layout-grid.entry.js +2 -2
- package/dist/esm/ic-link.entry.js +2 -2
- package/dist/esm/ic-menu-group.entry.js +2 -2
- package/dist/esm/ic-menu-item.entry.js +3 -2
- package/dist/esm/ic-menu-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-button.entry.js +3 -3
- package/dist/esm/ic-navigation-group.entry.js +2 -2
- package/dist/esm/ic-navigation-item.entry.js +4 -4
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-menu.entry.js +5 -5
- package/dist/esm/ic-page-header.entry.js +8 -8
- package/dist/esm/ic-page-header.entry.js.map +1 -1
- package/dist/esm/ic-pagination-item.entry.js +2 -2
- package/dist/esm/ic-pagination.entry.js +5 -5
- package/dist/esm/ic-popover-menu.entry.js +5 -5
- package/dist/esm/ic-radio-group.entry.js +5 -5
- package/dist/esm/ic-radio-option.entry.js +5 -5
- package/dist/esm/ic-search-bar.entry.js +10 -10
- package/dist/esm/ic-section-container.entry.js +2 -2
- package/dist/esm/ic-select.entry.js +20 -12
- package/dist/esm/ic-select.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +6 -6
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-skeleton.entry.js +2 -2
- package/dist/esm/ic-skip-link.entry.js +2 -2
- package/dist/esm/ic-status-tag.entry.js +4 -4
- package/dist/esm/ic-status-tag.entry.js.map +1 -1
- package/dist/esm/ic-step.entry.js +15 -14
- package/dist/esm/ic-step.entry.js.map +1 -1
- package/dist/esm/ic-stepper.entry.js +4 -3
- package/dist/esm/ic-stepper.entry.js.map +1 -1
- package/dist/esm/ic-switch.entry.js +5 -5
- package/dist/esm/ic-tab-context.entry.js +1 -1
- package/dist/esm/ic-tab-group.entry.js +3 -3
- package/dist/esm/ic-tab-panel.entry.js +2 -2
- package/dist/esm/ic-tab.entry.js +3 -3
- package/dist/esm/ic-text-field.entry.js +12 -7
- package/dist/esm/ic-text-field.entry.js.map +1 -1
- package/dist/esm/ic-theme.entry.js +2 -2
- package/dist/esm/ic-toast-region.entry.js +1 -1
- package/dist/esm/ic-toast.entry.js +8 -5
- package/dist/esm/ic-toast.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button-group.entry.js +8 -4
- package/dist/esm/ic-toggle-button-group.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button.entry.js +58 -45
- package/dist/esm/ic-toggle-button.entry.js.map +1 -1
- package/dist/esm/ic-top-navigation.entry.js +6 -6
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/ic-typography.entry.js +3 -3
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-button/ic-button.d.ts +8 -2
- package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts +5 -1
- package/dist/types/components/ic-dialog/ic-dialog.d.ts +2 -1
- package/dist/types/components/ic-step/ic-step.types.d.ts +1 -0
- package/dist/types/components/ic-text-field/ic-text-field.d.ts +2 -4
- package/dist/types/components/ic-text-field/ic-text-field.types.d.ts +5 -0
- package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts +1 -0
- package/dist/types/components.d.ts +13 -5
- package/dist/types/utils/helpers.d.ts +1 -0
- package/dist/types/utils/types.d.ts +6 -2
- package/hydrate/index.js +369 -266
- package/hydrate/index.mjs +369 -266
- package/package.json +2 -2
- package/vscode-data.json +15 -0
- package/dist/cjs/helpers-478d1107.js.map +0 -1
- package/dist/core/p-0123dde7.entry.js +0 -2
- package/dist/core/p-0123dde7.entry.js.map +0 -1
- package/dist/core/p-02af2b59.entry.js +0 -2
- package/dist/core/p-02af2b59.entry.js.map +0 -1
- package/dist/core/p-05036675.entry.js.map +0 -1
- package/dist/core/p-0c36ce84.entry.js +0 -2
- package/dist/core/p-0c36ce84.entry.js.map +0 -1
- package/dist/core/p-25bef09d.entry.js +0 -2
- package/dist/core/p-2800fc30.entry.js +0 -2
- package/dist/core/p-2800fc30.entry.js.map +0 -1
- package/dist/core/p-33789b23.entry.js.map +0 -1
- package/dist/core/p-3e36f281.entry.js +0 -2
- package/dist/core/p-3e36f281.entry.js.map +0 -1
- package/dist/core/p-6058d4c9.entry.js +0 -2
- package/dist/core/p-6058d4c9.entry.js.map +0 -1
- package/dist/core/p-6e139e6e.entry.js +0 -2
- package/dist/core/p-6e139e6e.entry.js.map +0 -1
- package/dist/core/p-80e0f66e.entry.js +0 -2
- package/dist/core/p-80e0f66e.entry.js.map +0 -1
- package/dist/core/p-8b99a806.entry.js +0 -2
- package/dist/core/p-8b99a806.entry.js.map +0 -1
- package/dist/core/p-a1857d24.entry.js +0 -2
- package/dist/core/p-a1857d24.entry.js.map +0 -1
- package/dist/core/p-a1e2e029.entry.js +0 -2
- package/dist/core/p-a1e2e029.entry.js.map +0 -1
- package/dist/core/p-abd88929.entry.js.map +0 -1
- package/dist/core/p-b1838ad8.entry.js.map +0 -1
- package/dist/core/p-b57e59b7.js.map +0 -1
- package/dist/core/p-c2d5e301.entry.js +0 -2
- package/dist/core/p-c2d5e301.entry.js.map +0 -1
- package/dist/core/p-cf868a24.entry.js.map +0 -1
- package/dist/core/p-d58ad080.entry.js.map +0 -1
- package/dist/core/p-e9d28e02.entry.js +0 -2
- package/dist/core/p-e9d28e02.entry.js.map +0 -1
- package/dist/core/p-eb0e7153.entry.js +0 -2
- package/dist/core/p-eb0e7153.entry.js.map +0 -1
- package/dist/core/p-f609ca37.entry.js +0 -2
- package/dist/core/p-f609ca37.entry.js.map +0 -1
- package/dist/core/p-fb69fbc0.entry.js +0 -2
- package/dist/core/p-fb69fbc0.entry.js.map +0 -1
- package/dist/esm/helpers-4ddac6ed.js.map +0 -1
- /package/dist/core/{p-514daffe.entry.js.map → p-053ed367.entry.js.map} +0 -0
- /package/dist/core/{p-54803e3b.entry.js.map → p-06b3ae40.entry.js.map} +0 -0
- /package/dist/core/{p-95d3d1a7.entry.js.map → p-091a7fbf.entry.js.map} +0 -0
- /package/dist/core/{p-4747c39f.entry.js.map → p-09c31ac6.entry.js.map} +0 -0
- /package/dist/core/{p-01e018cb.entry.js.map → p-0b1ea961.entry.js.map} +0 -0
- /package/dist/core/{p-33582352.entry.js.map → p-109e7fce.entry.js.map} +0 -0
- /package/dist/core/{p-99793b64.entry.js.map → p-199c5ff6.entry.js.map} +0 -0
- /package/dist/core/{p-228bc12d.entry.js.map → p-2969b5c9.entry.js.map} +0 -0
- /package/dist/core/{p-c975cced.entry.js.map → p-296a41ce.entry.js.map} +0 -0
- /package/dist/core/{p-1423bd4a.entry.js.map → p-3785c740.entry.js.map} +0 -0
- /package/dist/core/{p-8684efeb.entry.js.map → p-3a94849e.entry.js.map} +0 -0
- /package/dist/core/{p-a06c1e4e.entry.js.map → p-3b13d191.entry.js.map} +0 -0
- /package/dist/core/{p-13e093d0.entry.js.map → p-411527a1.entry.js.map} +0 -0
- /package/dist/core/{p-de32a223.entry.js.map → p-44fbe8c2.entry.js.map} +0 -0
- /package/dist/core/{p-93479c36.entry.js.map → p-4637c326.entry.js.map} +0 -0
- /package/dist/core/{p-fb734a59.entry.js.map → p-48eb7299.entry.js.map} +0 -0
- /package/dist/core/{p-b0376079.entry.js.map → p-4a358f09.entry.js.map} +0 -0
- /package/dist/core/{p-e6dacbe2.entry.js.map → p-4bdeb62d.entry.js.map} +0 -0
- /package/dist/core/{p-9cf6ccfd.entry.js.map → p-5cf704e3.entry.js.map} +0 -0
- /package/dist/core/{p-cc00cbce.entry.js.map → p-6e61c48a.entry.js.map} +0 -0
- /package/dist/core/{p-37d217b5.entry.js.map → p-889bb8db.entry.js.map} +0 -0
- /package/dist/core/{p-c04e1fab.entry.js.map → p-8c7d6a85.entry.js.map} +0 -0
- /package/dist/core/{p-6dbe70f1.entry.js.map → p-911b4aa4.entry.js.map} +0 -0
- /package/dist/core/{p-57721431.entry.js.map → p-93e1ba0a.entry.js.map} +0 -0
- /package/dist/core/{p-37daa8fe.entry.js.map → p-9c2e9189.entry.js.map} +0 -0
- /package/dist/core/{p-8558b9b7.entry.js.map → p-a45de09d.entry.js.map} +0 -0
- /package/dist/core/{p-ea06792a.entry.js.map → p-a7f21494.entry.js.map} +0 -0
- /package/dist/core/{p-2126d37b.entry.js.map → p-ad6632a9.entry.js.map} +0 -0
- /package/dist/core/{p-9a8bcb78.entry.js.map → p-b00efb15.entry.js.map} +0 -0
- /package/dist/core/{p-25bef09d.entry.js.map → p-b29e325f.entry.js.map} +0 -0
- /package/dist/core/{p-b9bdd9a9.entry.js.map → p-bba25812.entry.js.map} +0 -0
- /package/dist/core/{p-27e67d45.entry.js.map → p-c397b33f.entry.js.map} +0 -0
- /package/dist/core/{p-45097448.entry.js.map → p-c4ffcc64.entry.js.map} +0 -0
- /package/dist/core/{p-675bb3e4.entry.js.map → p-d1cce122.entry.js.map} +0 -0
- /package/dist/core/{p-492fcb51.entry.js.map → p-d8200098.entry.js.map} +0 -0
- /package/dist/core/{p-80317cd1.entry.js.map → p-e0423c7e.entry.js.map} +0 -0
- /package/dist/core/{p-b4a2f6fa.entry.js.map → p-f098e531.entry.js.map} +0 -0
- /package/dist/core/{p-0ec76cff.entry.js.map → p-f247db14.entry.js.map} +0 -0
- /package/dist/core/{p-813ad03c.entry.js.map → p-f4e2e41f.entry.js.map} +0 -0
- /package/dist/core/{p-5fcfcfb6.entry.js.map → p-fb43abd6.entry.js.map} +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["icStepCss","IcStepStyle0","Step","constructor","hostRef","this","current","icI18n","next","step","of","lastStep","completed","notRequired","required","optional","theme","type","typeChangeHandler","variant","render","compactStepStyling","heading","lastStepNum","nextStepHeading","progress","status","stepNum","subheading","ariaLabel","stepStatus","isPropDefined","toUpperCase","slice","stepType","statusIcon","h","key","class","innerHTML","checkIcon","warningIcon","compactStep","size","undefined","icon","partialBar","finalStep","_a","el","parentElement","classList","contains","defaultStep","Host","role","_b"],"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING */\n:host {\n display: flex;\n flex: auto;\n\n --ic-typography-color: currentcolor;\n}\n\n.step {\n display: flex;\n flex: 1 1 0;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n}\n\n.heading,\n.subheading,\n.step-status,\n.next-step {\n white-space: pre-line;\n}\n\n.next-step {\n color: var(--ic-stepper-compact-step-next-text);\n}\n\n.visually-hidden {\n position: absolute;\n left: -9999px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n.visually-hidden:dir(rtl) {\n right: -9999px;\n}\n\n/* COMPACT STEP STYLING */\n:host(.ic-step-compact) {\n column-gap: var(--ic-space-sm);\n\n --compact-step-inner-color: var(--ic-step-indicator-status-current);\n --compact-step-outer-color: var(--ic-step-indicator-status-remaining);\n --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.ic-step-compact) .step {\n column-gap: var(--ic-space-sm);\n}\n\n:host(.ic-step-compact) .step:not(.current) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n margin: var(--ic-space-xs) 0 0;\n}\n\n:host ic-loading-indicator::part(ic-loading-container) {\n border-radius: 50%;\n}\n\n:host() ic-loading-indicator::part(ic-loading-container) {\n background-color: var(--ic-step-indicator-background);\n}\n\n:host(.ic-step-compact) .heading-area {\n display: flex;\n flex-direction: column;\n width: 14.25rem;\n}\n\n:host(.ic-step-compact) .heading {\n color: var(--ic-stepper-compact-step-title);\n}\n\n:host(.ic-step-compact) .disabled .heading {\n color: var(--ic-stepper-compact-step-title-disabled);\n}\n\n.info-line {\n display: flex;\n column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n display: flex;\n color: var(--ic-stepper-compact-step-requirement-text);\n column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n color: var(--ic-stepper-compact-step-completed-text);\n}\n\n.compact-step-disabled :is(.heading, .step-status) {\n color: var(--ic-stepper-compact-step-requirement-text-disabled);\n}\n\n.step-num {\n color: var(--ic-stepper-compact-step-stage-text);\n white-space: nowrap;\n}\n\n:host(.ic-step-compact) .step-icon {\n margin: var(--ic-space-xxxs);\n}\n\n:host(.ic-step-compact) .step-icon svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n/* DEFAULT STEP STYLING */\n:host(.ic-step-default) .step {\n flex-direction: column;\n}\n\n:host(.ic-step-default.last-step) {\n flex-grow: initial;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 2.5rem;\n}\n\n:host(.ic-step-default) .step-icon {\n border-radius: 50%;\n background-color: var(--ic-step-number-inactive);\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n color: var(--ic-step-number-text-inactive);\n}\n\n:host(.ic-step-default) .current {\n color: var(--ic-status-info-default);\n}\n\n:host(.ic-step-default) .heading-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n width: 100%;\n}\n\n:host(.ic-step-default) .heading,\n.subheading {\n width: fit-content;\n}\n\n.heading {\n color: var(--ic-step-title);\n}\n\n.current .heading {\n color: var(--ic-step-title-current);\n}\n\n.completed .heading {\n color: var(--ic-step-title-success);\n}\n\n.disabled .heading {\n color: var(--ic-step-title-disabled);\n}\n\n.subheading {\n color: var(--ic-step-title-status-text-inactive);\n}\n\n.current .subheading {\n color: var(--ic-step-title-status-text-current);\n}\n\n.disabled .subheading {\n color: var(--ic-step-title-status-text-disabled);\n}\n\n:host(.ic-step-default) .completed {\n color: var(--ic-status-success-default);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-step-number-background-active);\n color: var(--ic-step-number-text-current);\n}\n\n.disabled {\n color: var(--ic-color-text-disabled-mid);\n}\n\n.disabled .step-icon-inner {\n border: var(--ic-border-width) dashed var(--ic-step-number-disabled);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n color: var(--ic-step-number-text-disabled);\n}\n\n.disabled .step-icon {\n background-color: transparent !important;\n}\n\n.completed .step-icon-inner {\n background: var(--ic-step-number-background-success);\n box-shadow: inset var(--ic-step-number-background-success) 0 0 0\n var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n:host(.ic-step-default) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 * var(--ic-space-xxxs));\n background-color: var(--ic-step-number-current-outer-fill);\n\n /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-stepper-connector-remaining-status);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n.aligned-full-width.step-connect {\n min-width: 6.25rem;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 0.125rem dashed var(--ic-stepper-connector-disabled);\n border-radius: 0;\n}\n\n.completed .step-connect {\n background-color: var(--ic-stepper-connector-success);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-stepper-connector-current-status);\n}\n\n.step-icon-inner .check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n width: var(--ic-space-md);\n height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n fill: var(--ic-step-number-icon-success);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n /* COMPACT STEP */\n .compact-step-disabled :is(.heading, .step-status) {\n color: GrayText;\n }\n\n /* DEFAULT STEP */\n .step-connect:not(.disabled .step-connect) {\n border: var(--ic-border-hc);\n }\n\n .active .step-icon-inner,\n .completed .step-icon-inner,\n .current .step-icon-inner {\n forced-color-adjust: none;\n box-shadow: inset canvastext 0 0 0 0.125rem;\n background-color: transparent;\n color: canvastext;\n }\n\n :host(.ic-step-default) .current .step-icon {\n padding: 0;\n border: none;\n }\n\n .disabled,\n .disabled .heading-area,\n .disabled .step-icon-inner,\n .disabled .heading {\n color: GrayText;\n }\n\n .step-connect-inner,\n .completed .step-connect {\n background-color: canvastext;\n }\n\n .step-icon-inner .check-icon > svg > path {\n fill: canvastext;\n }\n}\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport {\n IcStepVariants,\n IcStepStatuses,\n IcStepTypes,\n IcStepI18n,\n} from \"./ic-step.types\";\nimport { isPropDefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n\n /**\n * @internal If a compact stepper is being used, this sets the styling of the step.\n */\n @Prop() compactStepStyling?: IcStepTypes;\n\n /**\n * @internal If `true`, and a compact stepper is being used, the current step will be the only step in view.\n */\n @Prop({ mutable: true }) current?: boolean = false;\n\n /**\n * Words within the component that can be replaced to translate the component into a different language\n */\n @Prop() icI18n: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\n\n /**\n * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n */\n @Prop() lastStep!: boolean;\n\n /**\n * @internal The step number of the final step. This is managed by ic-stepper.\n */\n @Prop() lastStepNum?: number;\n\n /**\n * @internal The name of the next step. This is managed by ic-stepper.\n */\n @Prop() nextStepHeading?: string;\n\n /**\n * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n */\n @Prop() progress?: number;\n\n /**\n * @internal The step number, managed by ic-stepper.\n */\n @Prop() stepNum?: number;\n\n /**\n * The status of the step. Use this prop to display a status message on the step if it is required or optional.\n */\n @Prop() status?: IcStepStatuses;\n\n /**\n * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n */\n @Prop() subheading?: string;\n\n /**\n * The title of the step within the stepper.\n */\n @Prop() heading?: string;\n\n /**\n * @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * @internal The variant of the step. This is managed by ic-stepper.\n */\n @Prop() variant!: IcStepVariants;\n\n /**\n * The state of the step within the stepper.\n */\n @Prop() type?: IcStepTypes = \"active\";\n\n @Watch(\"type\")\n typeChangeHandler(): void {\n if (this.variant === \"compact\" && this.type === \"current\") {\n this.current = true;\n } else {\n this.current = false;\n }\n }\n\n render() {\n const {\n compactStepStyling,\n current,\n heading,\n icI18n,\n lastStep,\n lastStepNum,\n nextStepHeading,\n progress,\n status,\n stepNum,\n subheading,\n theme,\n type,\n variant,\n } = this;\n\n // ARIA LABEL\n let ariaLabel = \"\";\n\n if (type === \"completed\") {\n ariaLabel = `. ${icI18n.completed}`;\n } else if (type === \"disabled\") {\n ariaLabel = `. ${icI18n.notRequired}`;\n } else if (status === \"required\") {\n ariaLabel = `. ${icI18n.required}`;\n } else if (status === \"optional\") {\n ariaLabel = `. ${icI18n.optional}`;\n }\n\n // STEP STATUS\n let stepStatus;\n if (status && isPropDefined(status)) {\n stepStatus = status[0].toUpperCase() + status.slice(1);\n }\n\n // STEP TYPE\n let stepType;\n if (type === \"disabled\" || compactStepStyling === \"disabled\") {\n stepType = icI18n.notRequired;\n } else if (compactStepStyling === \"completed\") {\n stepType = icI18n.completed;\n }\n\n // STATUS ICON FOR COMPACT STEP\n let statusIcon;\n if (type === \"completed\" || compactStepStyling === \"completed\") {\n statusIcon = (\n <span\n class=\"check-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={checkIcon}\n ></span>\n );\n } else if (type === \"disabled\" || compactStepStyling === \"disabled\") {\n statusIcon = (\n <span\n class=\"warning-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={warningIcon}\n ></span>\n );\n }\n\n // COMPACT STEP COMPONENT\n const compactStep = (\n <div\n class={{\n [\"step\"]: true,\n [\"current\"]: !!current,\n [`compact-step-${compactStepStyling}`]: !!compactStepStyling,\n [\"disabled\"]:\n type === \"disabled\" || compactStepStyling === \"disabled\",\n }}\n >\n <ic-loading-indicator\n class={{\n \"compact-step-progress-indicator\": true,\n \"not-required\":\n type === \"disabled\" || compactStepStyling === \"disabled\",\n }}\n aria-hidden=\"true\"\n size=\"small\"\n inner-label={stepNum}\n progress={progress}\n ></ic-loading-indicator>\n <div class=\"heading-area\">\n <ic-typography variant=\"h4\" class=\"heading\">\n {heading}\n </ic-typography>\n <div class=\"info-line\">\n <ic-typography variant=\"caption\" class=\"step-num\">\n {`${stepNum} ${icI18n.of} ${lastStepNum}`}\n <span class=\"visually-hidden\"> steps</span>\n </ic-typography>\n {(this.subheading ||\n type === \"completed\" ||\n type === \"disabled\" ||\n (this.variant === \"compact\" &&\n !!compactStepStyling &&\n compactStepStyling !== \"active\") ||\n !!status) && (\n <div class=\"step-status\">\n {statusIcon !== undefined && statusIcon}\n {(subheading || stepType) && (\n <ic-typography variant=\"caption\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : type === \"disabled\" ||\n (variant === \"compact\" &&\n compactStepStyling === \"disabled\") ||\n type === \"completed\" ||\n (variant === \"compact\" &&\n compactStepStyling === \"completed\")\n ? stepType\n : status && stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n {lastStep ? (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.lastStep}\n </ic-typography>\n ) : (\n isPropDefined(nextStepHeading) && (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.next}\n <span class=\"visually-hidden\"> {icI18n.step}</span>:{\" \"}\n {this.nextStepHeading}\n </ic-typography>\n )\n )}\n </div>\n </div>\n );\n\n // ICON FOR DEFAULT STEP\n let icon;\n if (type !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n // STEP CONNECT FOR DEFAULT STEP\n const partialBar = type === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n\n const finalStep = !lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n }}\n >\n {partialBar}\n </div>\n );\n\n // DEFAULT STEP COMPONENT\n const defaultStep = (\n <div\n class={{\n [\"step\"]: true,\n [`${type}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(heading || subheading || status) && (\n <div class=\"heading-area\">\n {heading && (\n <ic-typography variant=\"subtitle-large\" class=\"heading\">\n {heading}\n </ic-typography>\n )}\n {heading && (subheading || status) && (\n <ic-typography variant=\"caption\" class=\"subheading\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`${icI18n.step} ${stepNum}${ariaLabel}`}\n aria-current={(current || type === \"current\") && \"step\"}\n class={{\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n [`ic-step-${variant}`]: true,\n [`ic-theme-${theme}`]: this.theme !== \"inherit\",\n }}\n >\n {variant === \"compact\" ? compactStep : defaultStep}\n </Host>\n );\n }\n}\n"],"mappings":"mfAAA,MAAMA,EAAY,4nLAClB,MAAAC,EAAeD,E,MCgBFE,EAAI,MALjB,WAAAC,CAAAC,G,UAgB2BC,KAAAC,QAAoB,MAKrCD,KAAAE,OAAqB,CAC3BC,KAAM,OACNC,KAAM,OACNC,GAAI,KACJC,SAAU,YACVC,UAAW,YACXC,YAAa,eACbC,SAAU,WACVC,SAAU,YA8CJV,KAAAW,MAAsB,UAUtBX,KAAAY,KAAqB,Q,CAG7B,iBAAAC,GACE,GAAIb,KAAKc,UAAY,WAAad,KAAKY,OAAS,UAAW,CACzDZ,KAAKC,QAAU,I,KACV,CACLD,KAAKC,QAAU,K,EAInB,MAAAc,G,QACE,MAAMC,mBACJA,EAAkBf,QAClBA,EAAOgB,QACPA,EAAOf,OACPA,EAAMI,SACNA,EAAQY,YACRA,EAAWC,gBACXA,EAAeC,SACfA,EAAQC,OACRA,EAAMC,QACNA,EAAOC,WACPA,EAAUZ,MACVA,EAAKC,KACLA,EAAIE,QACJA,GACEd,KAGJ,IAAIwB,EAAY,GAEhB,GAAIZ,IAAS,YAAa,CACxBY,EAAY,KAAKtB,EAAOK,W,MACnB,GAAIK,IAAS,WAAY,CAC9BY,EAAY,KAAKtB,EAAOM,a,MACnB,GAAIa,IAAW,WAAY,CAChCG,EAAY,KAAKtB,EAAOO,U,MACnB,GAAIY,IAAW,WAAY,CAChCG,EAAY,KAAKtB,EAAOQ,U,CAI1B,IAAIe,EACJ,GAAIJ,GAAUK,EAAcL,GAAS,CACnCI,EAAaJ,EAAO,GAAGM,cAAgBN,EAAOO,MAAM,E,CAItD,IAAIC,EACJ,GAAIjB,IAAS,YAAcI,IAAuB,WAAY,CAC5Da,EAAW3B,EAAOM,W,MACb,GAAIQ,IAAuB,YAAa,CAC7Ca,EAAW3B,EAAOK,S,CAIpB,IAAIuB,EACJ,GAAIlB,IAAS,aAAeI,IAAuB,YAAa,CAC9Dc,EACEC,EAAA,QAAAC,IAAA,2CACEC,MAAM,uBAAsB,cAChB,OACZC,UAAWC,G,MAGV,GAAIvB,IAAS,YAAcI,IAAuB,WAAY,CACnEc,EACEC,EAAA,QAAAC,IAAA,2CACEC,MAAM,yBAAwB,cAClB,OACZC,UAAWE,G,CAMjB,MAAMC,EACJN,EAAA,OAAAC,IAAA,2CACEC,MAAO,CACL,CAAC,QAAS,KACV,CAAC,aAAchC,EACf,CAAC,gBAAgBe,OAAyBA,EAC1C,CAAC,YACCJ,IAAS,YAAcI,IAAuB,aAGlDe,EAAA,wBAAAC,IAAA,2CACEC,MAAO,CACL,kCAAmC,KACnC,eACErB,IAAS,YAAcI,IAAuB,YACjD,cACW,OACZsB,KAAK,QAAO,cACChB,EACbF,SAAUA,IAEZW,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACTF,EAAA,iBAAAC,IAAA,2CAAelB,QAAQ,KAAKmB,MAAM,WAC/BhB,GAEHc,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,iBAAAC,IAAA,2CAAelB,QAAQ,UAAUmB,MAAM,YACpC,GAAGX,KAAWpB,EAAOG,MAAMa,IAC5Ba,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBAAiB,YAE7BjC,KAAKuB,YACLX,IAAS,aACTA,IAAS,YACRZ,KAAKc,UAAY,aACdE,GACFA,IAAuB,YACvBK,IACFU,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eACRH,IAAeS,WAAaT,GAC3BP,GAAcM,IACdE,EAAA,iBAAAC,IAAA,2CAAelB,QAAQ,WACpBS,IAAe,MAAQG,EAAcH,GAClCA,EACAX,IAAS,YACRE,IAAY,WACXE,IAAuB,YACzBJ,IAAS,aACRE,IAAY,WACXE,IAAuB,YACzBa,EACAR,GAAUI,KAMvBnB,EACCyB,EAAA,iBAAejB,QAAQ,iBAAiBmB,MAAM,aAC3C/B,EAAOI,UAGVoB,EAAcP,IACZY,EAAA,iBAAejB,QAAQ,iBAAiBmB,MAAM,aAC3C/B,EAAOC,KACR4B,EAAA,QAAME,MAAM,mBAAiB,IAAG/B,EAAOE,MAAY,IAAE,IACpDJ,KAAKmB,mBASlB,IAAIqB,EACJ,GAAI5B,IAAS,YAAa,CACxB4B,EACET,EAAA,iBAAAC,IAAA,2CAAelB,QAAQ,kBACrBiB,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBAAiB,cAAa,QACvCjC,KAAKsB,S,KAIP,CACLkB,EACET,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kBAAiB,cAAa,QACvCF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,aAAaC,UAAWC,I,CAM1C,MAAMM,EAAa7B,IAAS,WAC1BmB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBAGb,MAAMS,GAAapC,GACjByB,EAAA,OAAAC,IAAA,2CACEC,MAAO,CACL,CAAC,gBAAiB,KAClB,CAAC,2BACCU,EAAA3C,KAAK4C,GAAGC,iBAAa,MAAAF,SAAA,SAAAA,EAAEG,UAAUC,SAAS,yBACzC/C,KAAK4C,GAAGC,cAAcC,UAAUC,SAAS,8BAI7CN,GAKL,MAAMO,EACJjB,EAAA,OAAAC,IAAA,2CACEC,MAAO,CACL,CAAC,QAAS,KACV,CAAC,GAAGrB,KAAS,OAGfmB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,YACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aAAaO,GACvBE,IAEDzB,GAAWM,GAAcF,IACzBU,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACRhB,GACCc,EAAA,iBAAAC,IAAA,2CAAelB,QAAQ,iBAAiBmB,MAAM,WAC3ChB,GAGJA,IAAYM,GAAcF,IACzBU,EAAA,iBAAAC,IAAA,2CAAelB,QAAQ,UAAUmB,MAAM,cACpCV,IAAe,MAAQG,EAAcH,GAClCA,EACAE,KAQhB,OACEM,EAACkB,EAAI,CAAAjB,IAAA,2CACHkB,KAAK,WAAU,aACH,GAAGhD,EAAOE,QAAQkB,IAAUE,IAAW,gBACpCvB,GAAWW,IAAS,YAAc,OACjDqB,MAAO,CACL,CAAC,2BACCkB,EAAAnD,KAAK4C,GAAGC,iBAAa,MAAAM,SAAA,SAAAA,EAAEL,UAAUC,SAAS,yBACzC/C,KAAK4C,GAAGC,cAAcC,UAAUC,SAAS,4BAE5C,CAAC,WAAWjC,KAAY,KACxB,CAAC,YAAYH,KAAUX,KAAKW,QAAU,YAGvCG,IAAY,UAAYuB,EAAcW,E","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["IcInformationStatus","IcBrandForegroundEnum","DARK_MODE_THRESHOLD","ANYWHERE_SEARCH_POSITION","icInput","inheritAttributes","element","attributes","attributeObject","forEach","attr","value","getAttribute","removeAttribute","debounceEvent","event","wait","original","_original","emit","debounce","bind","func","timer","args","clearTimeout","setTimeout","renderHiddenInput","container","name","disabled","always","hasShadowDom","input","getHiddenInputElement","ownerDocument","createElement","type","classList","add","appendChild","Date","toISOString","Array","from","querySelectorAll","filter","el","parentElement","renderFileHiddenInput","multiple","accept","undefined","hidden","files","onchange","click","removeHiddenInput","_a","remove","shadowRoot","attachShadow","getInputHelperTextID","id","getInputValidationTextID","getInputDescribedByText","inputId","helperText","validationText","isSlotUsed","trim","getBrandFromContext","brandFromEvent","getRootNode","host","blockColorParent","closest","IC_BLOCK_COLOR_COMPONENTS","Default","parentTag","tagName","toLowerCase","IC_BLOCK_COLOR_EXCEPTIONS","includes","IC_FIXED_COLOR_COMPONENTS","contains","Dark","Light","isMobileOrTablet","navigator","maxTouchPoints","test","userAgent","handleHiddenFormButtonClick","form","button","hiddenFormButtonId","hiddenFormButton","document","querySelector","setAttribute","_b","style","display","formAction","_c","formaction","formEnctype","_d","formenctype","formMethod","_e","formmethod","formNoValidate","_f","formnovalidate","formTarget","_g","formtarget","isEmptyString","length","isPropDefined","prop","getLabelFromValue","options","valueField","labelField","ungroupedOptions","map","option","children","push","matchingValue","find","getFilteredMenuOptions","includeDescriptions","searchString","position","label","description","lowerSearchString","startsWith","getOptionsWithoutGroupTitlesCount","optionsWithoutGroupTitles","deviceSizeMatches","size","window","matchMedia","matches","getCurrentDeviceSize","DEVICE_SIZES","S","M","L","XL","UNDEFINED","getCssProperty","cssVar","getComputedStyle","documentElement","getPropertyValue","getBrandColorBrightness","parseInt","getBrandForegroundAppearance","brightness","getSlot","slotHasContent","getSlotContent","slot","getSlotElements","slotContent","firstElementChild","elements","assignedElements","childNodes","getNavItemParentDetails","navType","parent","XS","Number","replace","hasValidationStatus","status","slotName","some","child","onComponentPropUndefinedChange","oldValue","newValue","callback","onComponentRequiredPropUndefined","props","component","propName","console","error","kebabToCamelCase","kebabCase","split","word","index","substring","toUpperCase","join","checkResizeObserver","callbackFn","ResizeObserver","hex2dec","v","hexToRgba","hex","hexChars","char","repeat","r","slice","g","b","a","rgbaStrToObj","rgbaStr","isRGBA","rgbValues","elementOverflowsX","scrollWidth","clientWidth","hasClassificationBanner","addFormResetListener","addEventListener","removeFormResetListener","removeEventListener","pxToRem","px","base","removeDisabledFalse","isMacDevice","indexOf","convertToRGBA","color","firstChar","capitalize","text","charAt","checkSlotInChildMutations","addedNodes","removedNodes","hasSlot","nodeList","node","isArray","isElInAGGrid","isSlottedInGroup","hasDynamicChildSlots","mutationList","slotNames","renderDynamicChildSlots","ref","forceUpdate","getElementInheritedTheme","blockParentTheme","theme","wrapperTheme","call"],"sources":["src/utils/types.ts","src/utils/helpers.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nexport type IcFocusableComponents =\n | HTMLIcBreadcrumbElement\n | HTMLIcButtonElement\n | HTMLIcCardVerticalElement\n | HTMLIcCheckboxElement\n | HTMLIcChipElement\n | HTMLIcLinkElement\n | HTMLIcNavigationButtonElement\n | HTMLIcNavigationGroupElement\n | HTMLIcNavigationItemElement\n | HTMLIcRadioOptionElement\n | HTMLIcSearchBarElement\n | HTMLIcSelectElement\n | HTMLIcSwitchElement\n | HTMLIcTabElement\n | HTMLIcTextFieldElement;\n\nexport type IcStatusVariants =\n | \"neutral\"\n | \"info\"\n | \"warning\"\n | \"error\"\n | \"success\"\n | \"ai\";\n\nexport enum IcInformationStatus {\n Warning = \"warning\",\n Error = \"error\",\n Success = \"success\",\n}\n\nexport type IcSizes = \"medium\" | \"large\" | \"small\";\n\nexport type IcSizesNoLarge = \"medium\" | \"small\";\n\nexport type IcInformationStatusOrEmpty = \"warning\" | \"error\" | \"success\" | \"\";\n\nexport type IcNavType = \"side\" | \"top\" | \"page-header\";\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type IcAutocompleteTypes =\n | \"on\"\n | \"off\"\n | \"name\"\n | \"honorific-prefix\"\n | \"given-name\"\n | \"additional-name\"\n | \"family-name\"\n | \"honorific-suffix\"\n | \"nickname\"\n | \"email\"\n | \"username\"\n | \"new-password\"\n | \"current-password\"\n | \"one-time-code\"\n | \"organization-title\"\n | \"organization\"\n | \"street-address\"\n | \"address-line1\"\n | \"address-line2\"\n | \"address-line3\"\n | \"address-level4\"\n | \"address-level3\"\n | \"address-level2\"\n | \"address-level1\"\n | \"country\"\n | \"country-name\"\n | \"postal-code\"\n | \"cc-name\"\n | \"cc-given-name\"\n | \"cc-additional-name\"\n | \"cc-family-name\"\n | \"cc-family-name\"\n | \"cc-number\"\n | \"cc-exp\"\n | \"cc-exp-month\"\n | \"cc-exp-year\"\n | \"cc-csc\"\n | \"cc-type\"\n | \"transaction-currency\"\n | \"transaction-amount\"\n | \"language\"\n | \"bday\"\n | \"bday-day\"\n | \"bday-month\"\n | \"bday-year\"\n | \"sex\"\n | \"tel\"\n | \"tel-country-code\"\n | \"tel-national\"\n | \"tel-area-code\"\n | \"tel-local\"\n | \"tel-extension\"\n | \"impp\"\n | \"url\"\n | \"photo\";\n\nexport type IcAlignment = \"left\" | \"center\" | \"full-width\";\n\nexport enum IcBrandForegroundEnum {\n Default = \"default\",\n Dark = \"dark\",\n Light = \"light\",\n}\n\nexport type IcThemeMode = \"dark\" | \"light\" | \"inherit\";\n\nexport type IcBrandForeground = \"default\" | \"dark\" | \"light\";\n\nexport type IcBrandForegroundNoDefault = \"dark\" | \"light\";\n\nexport type IcBrand = {\n mode: IcBrandForeground;\n color: IcColorRGB;\n};\n\nexport type IcAdditionalFieldTypes = \"static\" | \"dynamic\";\n\nexport type IcColorRGB = {\n r: number;\n g: number;\n b: number;\n};\n\nexport type IcColorRGBA = IcColorRGB & {\n a: number;\n};\n\nexport type IcActivationTypes = \"automatic\" | \"manual\";\n\nexport type IcAutocorrectStates = \"on\" | \"off\";\n\nexport type IcNavParentDetails = {\n navType: IcNavType | \"\";\n parent: HTMLElement | null;\n};\n\nexport type IcTypographyVariants =\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"subtitle-large\"\n | \"subtitle-small\"\n | \"body\"\n | \"label\"\n | \"label-uppercase\"\n | \"caption\"\n | \"caption-uppercase\"\n | \"code-large\"\n | \"code-small\"\n | \"code-extra-small\"\n | \"badge\"\n | \"badge-small\";\n\n/**\n * @interface IcMenuOption\n * @field {string} A label field to options. Defaults to \"label\", but can have any custom name.\n * @field {string} A value field to options. Defaults to \"value\", but can have any custom name.\n */\nexport interface IcMenuOption {\n description?: string;\n disabled?: boolean;\n recommended?: boolean;\n children?: IcMenuOption[];\n loading?: boolean;\n timedOut?: boolean;\n [key: string]: any;\n element?: {\n component: any;\n ariaLabel: string;\n };\n icon?: any;\n}\n\nexport type IcSearchMatchPositions = \"start\" | \"anywhere\";\n\nexport type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;\n\nexport type IcRequiredPropsTypes =\n | string\n | boolean\n | number\n | HTMLElement\n | IcMenuOption[]\n | undefined;\n\nexport type IcPropObject = { prop: IcRequiredPropsTypes; propName: string };\n\nexport type IcRelatedTarget = EventTarget | undefined;\n\nexport type IcOrientation = \"horizontal\" | \"vertical\";\n\nexport type IcEmphasisType = \"filled\" | \"outlined\";\n\nexport interface IcValueEventDetail {\n value: string;\n keyPressed?: string;\n}\n\nexport interface IcMultiValueEventDetail {\n value: string | string[] | null;\n keyPressed?: string;\n}\n\nexport interface IcBlurEventDetail {\n relatedTarget: IcRelatedTarget | null;\n}\n\nexport type IcSelectTypes = \"single\" | \"multi\";\n\nexport type IcSelectMethodTypes = \"auto\" | \"manual\";\n\nexport type IcDeviceSizes = 0 | 576 | 768 | 992 | 1200;\n\ntype RGB = `rgb(${string})`;\ntype RGBA = `rgba(${string})`;\ntype HEX = `#${string}`;\n\nexport type IcColor = RGB | RGBA | HEX;\n\nexport type IcIconPlacementOptions = \"left\" | \"right\" | \"top\";\n\nexport type IcButtonTooltipPlacement = \"top\" | \"right\" | \"bottom\" | \"left\";\n\nexport type IcThemeSettings = \"dark\" | \"light\" | \"system\";\n\n// Matches HTML aria-live attribute options\nexport type IcAriaLive = \"polite\" | \"assertive\" | \"off\";\n\n// Includes 'default' option for when the aria-live value is handled within a component\nexport type IcValidationAriaLive = \"default\" | \"polite\" | \"assertive\" | \"off\";\n","import { EventEmitter, forceUpdate } from \"@stencil/core\";\nimport {\n IcCallbackFunctionNoReturn,\n IcInformationStatusOrEmpty,\n IcNavParentDetails,\n IcPropObject,\n IcSearchMatchPositions,\n IcColorRGBA,\n IcDeviceSizes,\n IcColor,\n IcBrandForegroundNoDefault,\n IcThemeMode,\n} from \"./types\";\n\nimport {\n IcMenuOption,\n IcBrandForeground,\n IcBrandForegroundEnum,\n} from \"../utils/types\";\nimport {\n IC_BLOCK_COLOR_COMPONENTS,\n IC_BLOCK_COLOR_EXCEPTIONS,\n IC_FIXED_COLOR_COMPONENTS,\n} from \"./constants\";\n\nconst DARK_MODE_THRESHOLD = 133.3505;\nconst ANYWHERE_SEARCH_POSITION = \"anywhere\";\nconst icInput = \"ic-input\";\n\n/**\n * converts an enum of strings into an array of strings\n */\nexport const stringEnumToArray = (\n theEnum: Record<string, string | number>\n): string[] => {\n const arr: string[] = [];\n Object.values(theEnum).forEach((val) => {\n if (isNaN(Number(val))) {\n const str = val as string;\n arr.push(str);\n }\n });\n return arr;\n};\n\n/**\n * Used to inherit global attributes set on the host. Called in componentWillLoad and assigned\n * to a variable that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (\n element: HTMLElement,\n attributes: string[] = []\n): { [key: string]: string } => {\n const attributeObject: { [key: string]: string } = {};\n\n attributes.forEach((attr) => {\n const value = element.getAttribute(attr);\n if (value !== null) {\n attributeObject[attr] = value;\n element.removeAttribute(attr);\n }\n });\n\n return attributeObject;\n};\n\nexport const debounceEvent = (\n event: EventEmitter,\n wait: number\n): EventEmitter => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const original = (event as any)._original || event;\n return {\n _original: event,\n emit: debounce(original.emit.bind(original), wait),\n } as EventEmitter;\n};\n\nexport const debounce = (\n func: (...args: unknown[]) => void,\n wait = 0\n): unknown => {\n let timer: ReturnType<typeof setTimeout>;\n return (...args: unknown[]) => {\n clearTimeout(timer);\n timer = setTimeout(func, wait, ...args);\n };\n};\n\n/**\n * This method is used to add a hidden input to a host element that contains\n * a Shadow DOM. It does not add the input inside of the Shadow root which\n * allows it to be picked up inside of forms. It should contain the same\n * values as the host element.\n *\n * @param container The element where the input will be added\n * @param value The value of the input\n * @param name The name of the input\n * @param disabled If true, the input is disabled\n * @param always Add a hidden input even if the container does not use Shadow\n */\nexport const renderHiddenInput = (\n container: HTMLElement,\n value?: string | Date | null,\n name?: string,\n disabled = false,\n always = true\n): void => {\n if (name && (always || hasShadowDom(container))) {\n let input = getHiddenInputElement(container);\n\n if (!input) {\n input = container.ownerDocument.createElement(\"input\");\n input.type = \"hidden\";\n input.classList.add(icInput);\n container.appendChild(input);\n }\n input.disabled = disabled;\n input.name = name;\n input.value = value instanceof Date ? value.toISOString() : value || \"\";\n }\n};\n\nconst getHiddenInputElement = (container: HTMLElement) =>\n Array.from(\n container.querySelectorAll<HTMLInputElement>(`input.${icInput}`)\n ).filter((el) => container === el.parentElement)[0];\n\n/**\n * This method is used to add a hidden file input to a host element that contains\n * a Shadow DOM. It does not add the input inside of the Shadow root which\n * allows it to be picked up inside of forms. It should contain the same\n * values as the host element.\n *\n * @param event: The event that is emitted once a file is selected.\n * @param container The element where the input will be added\n * @param multiple If true, multiple files can be selected\n * @param disabled If true, the input is disabled\n * @param accept A string of the accepted files\n * @param name The name of the input\n * @param value The value of the input\n */\nexport const renderFileHiddenInput = (\n event: EventEmitter,\n container: HTMLElement,\n multiple: boolean,\n disabled: boolean,\n accept?: string,\n name?: string,\n value?: FileList\n): void => {\n if (name !== undefined && hasShadowDom(container)) {\n let input = getHiddenInputElement(container);\n\n if (input === null || input === undefined) {\n input = container.ownerDocument.createElement(\"input\");\n input.classList.add(icInput);\n container.appendChild(input);\n }\n input.type = \"file\";\n input.hidden = true;\n input.multiple = multiple;\n input.name = name;\n input.disabled = disabled;\n\n if (value) input.files = value;\n if (accept) input.accept = accept;\n\n input.onchange = () => {\n event.emit(input.files);\n };\n input.click();\n }\n};\n\nexport const removeHiddenInput = (container: HTMLElement): void => {\n getHiddenInputElement(container)?.remove();\n};\n\nexport const hasShadowDom = (el: HTMLElement | null | undefined): boolean =>\n !!el && !!el.shadowRoot && !!el.attachShadow;\n\nexport const getInputHelperTextID = (id: string): string => id + \"-helper-text\";\n\nexport const getInputValidationTextID = (id: string): string =>\n id + \"-validation-text\";\n\nexport const getInputDescribedByText = (\n el: HTMLElement,\n inputId: string,\n helperText: boolean,\n validationText: boolean\n): string =>\n `${\n isSlotUsed(el, \"helper-text\") || helperText\n ? getInputHelperTextID(inputId)\n : \"\"\n } ${validationText ? getInputValidationTextID(inputId) : \"\"}`.trim();\n\n/**\n * This method helps to understand the context in which a component exists,\n * to assist with choosing appropriate foreground colours to use. For example,\n * this method will help you use the 'white' version of a button if it's within\n * a block colour element using white foreground text.\n *\n * This only works for components/elements passed via <slot> and not if they\n * are part of an IC component.\n *\n * \"\"\n * @returns IcBrandForeground depending on the context\n */\nexport const getBrandFromContext = (\n el: Element,\n brandFromEvent: IcBrandForeground | null = null\n): IcBrandForeground => {\n const parentElement =\n el.parentElement || (<ShadowRoot>el.getRootNode()).host.parentElement;\n const blockColorParent = parentElement?.closest(IC_BLOCK_COLOR_COMPONENTS);\n\n if (!blockColorParent) return IcBrandForegroundEnum.Default;\n\n const parentTag = blockColorParent.tagName.toLowerCase();\n\n if (\n IC_BLOCK_COLOR_EXCEPTIONS[parentTag]?.includes(el.tagName.toLowerCase())\n ) {\n return IcBrandForegroundEnum.Default;\n } else if (\n brandFromEvent !== null &&\n !IC_FIXED_COLOR_COMPONENTS.includes(parentTag)\n ) {\n return brandFromEvent;\n } else if (\n blockColorParent.classList.contains(\n `${parentTag}-${IcBrandForegroundEnum.Dark}`\n ) ||\n blockColorParent.classList.contains(IcBrandForegroundEnum.Dark)\n ) {\n return IcBrandForegroundEnum.Dark;\n } else {\n return IcBrandForegroundEnum.Light;\n }\n};\n\n/**\n * Checks if the current device is a mobile or tablet device.\n * @returns {boolean} Returns true if the device is a mobile or tablet device, otherwise returns false.\n */\nexport const isMobileOrTablet = (): boolean =>\n \"maxTouchPoints\" in navigator && \"userAgent\" in navigator\n ? navigator.maxTouchPoints > 0 &&\n /iPad|iPhone|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(\n navigator.userAgent\n )\n : false;\n\n/**\n * Will create a button within the lightDOM which interacts with the form.\n * This is required as buttons within the shadowDOM will not invoke a submit or reset\n *\n * @param form - form element to associate button with\n * @param button - shadowDOM button\n */\nexport const handleHiddenFormButtonClick = (\n form: HTMLFormElement | null,\n button: HTMLIcButtonElement\n): void => {\n const hiddenFormButtonId =\n button.type === \"submit\" || button.type === \"reset\"\n ? `hidden-form-${button.type}-button`\n : \"hidden-form-button\";\n\n const hiddenFormButton =\n document.querySelector<HTMLButtonElement>(`#${hiddenFormButtonId}`) ??\n document.createElement(\"button\");\n\n hiddenFormButton.setAttribute(\"type\", button.type ?? \"button\");\n hiddenFormButton.id = hiddenFormButtonId;\n hiddenFormButton.style.display = \"none\";\n\n hiddenFormButton.formAction = button.formaction ?? \"\";\n hiddenFormButton.formEnctype = button.formenctype ?? \"\";\n hiddenFormButton.formMethod = button.formmethod ?? \"\";\n hiddenFormButton.formNoValidate = button.formnovalidate ?? false;\n hiddenFormButton.formTarget = button.formtarget ?? \"\";\n\n form?.appendChild(hiddenFormButton);\n hiddenFormButton.click();\n};\n\nexport const isEmptyString = (value?: string): boolean =>\n !value || value.trim().length === 0;\n\n// A helper function that checks if a prop has been defined\nexport const isPropDefined = (prop?: string): string | undefined =>\n prop !== undefined ? prop : undefined;\n\n/**\n * Extracts the label using the value from an object. Requires the object to have a label and value property.\n * @param value - value from object\n * @param options - list of menu items\n * @returns - label corresponding to value\n */\nexport const getLabelFromValue = (\n value: string,\n options: IcMenuOption[],\n valueField = \"value\",\n labelField = \"label\"\n): string | undefined => {\n const ungroupedOptions: IcMenuOption[] = [];\n if (options.length > 0 && options.map) {\n options.map((option) => {\n if (option.children) {\n option.children.map((option: IcMenuOption) =>\n ungroupedOptions.push(option)\n );\n } else {\n ungroupedOptions.push(option);\n }\n });\n const matchingValue = ungroupedOptions.find(\n (option) => option[valueField] === value\n );\n if (matchingValue !== undefined) return matchingValue[labelField];\n }\n\n return undefined;\n};\n\n/**\n * Filters the options based on the search string.\n * @param options - array of options\n * @param includeDescriptions - determines whether option descriptions are included when filtering options\n * @param searchString - string used to filter the options\n * @param position - whether the search string matches the start of or anywhere in the options\n * @returns filtered array of options\n */\nexport const getFilteredMenuOptions = (\n options: IcMenuOption[],\n includeDescriptions: boolean,\n searchString: string,\n position: IcSearchMatchPositions = ANYWHERE_SEARCH_POSITION,\n labelField = \"label\"\n): IcMenuOption[] =>\n options.filter((option) => {\n const label: string = option[labelField].toLowerCase();\n const description = option.description?.toLowerCase();\n const lowerSearchString = searchString.toLowerCase();\n\n return position === ANYWHERE_SEARCH_POSITION\n ? includeDescriptions\n ? label.includes(lowerSearchString) ||\n description?.includes(lowerSearchString)\n : label.includes(lowerSearchString)\n : includeDescriptions\n ? label.startsWith(lowerSearchString) ||\n description?.startsWith(lowerSearchString)\n : label.startsWith(lowerSearchString);\n });\n\n/**\n * Gets count of options where only group title \"parent\" options have been removed.\n * Disabled options are included in the count.\n * @param options - array of options\n * @returns number of options not including group titles\n */\nexport const getOptionsWithoutGroupTitlesCount = (\n options: IcMenuOption[]\n): number => {\n const optionsWithoutGroupTitles: IcMenuOption[] = [];\n\n if (options.length > 0 && options.map) {\n options.map((option) => {\n if (option.children) {\n option.children.map((option) => optionsWithoutGroupTitles.push(option));\n } else {\n optionsWithoutGroupTitles.push(option);\n }\n });\n }\n\n return optionsWithoutGroupTitles.length;\n};\n\nexport const deviceSizeMatches = (size: number): boolean =>\n window.matchMedia(`(max-width: ${size}px)`).matches;\n\nexport const getCurrentDeviceSize = (): number => {\n if (deviceSizeMatches(DEVICE_SIZES.S)) {\n return DEVICE_SIZES.S;\n }\n if (deviceSizeMatches(DEVICE_SIZES.M)) {\n return DEVICE_SIZES.M;\n }\n if (deviceSizeMatches(DEVICE_SIZES.L)) {\n return DEVICE_SIZES.L;\n }\n if (deviceSizeMatches(DEVICE_SIZES.XL)) {\n return DEVICE_SIZES.XL;\n }\n //fallback needed as all of above get initialised to 0 in jest tests\n return DEVICE_SIZES.UNDEFINED;\n};\n\nexport const getCssProperty = (cssVar: string): string =>\n getComputedStyle(document.documentElement).getPropertyValue(cssVar);\n\n/**\n * Returns the brightness of the theme colour, calculated by using the theme RGB CSS values by:\n * - Multiplying each RGB value by a set number: https://www.w3.org/TR/AERT/#color-contrast\n * - Adding them together and dividing by 1000\n * This is a similar calculation to its CSS counterpart: \"--ic-brand-text-color\"\n * @returns number representing the brightness of the theme colour\n */\nexport const getBrandColorBrightness = (): number =>\n (parseInt(getCssProperty(\"--ic-brand-color-primary-r\")) * 299 +\n parseInt(getCssProperty(\"--ic-brand-color-primary-g\")) * 587 +\n parseInt(getCssProperty(\"--ic-brand-color-primary-b\")) * 114) /\n 1000;\n\n/**\n * Returns if dark or light foreground colors should be used for color contrast reasons\n * @returns \"dark\" or \"light\"\n * @param brightness - Optional custom brightness value. Defaults to `getBrandColorBrightness`\n */\nexport const getBrandForegroundAppearance = (\n brightness = getBrandColorBrightness()\n): IcBrandForegroundNoDefault =>\n brightness > DARK_MODE_THRESHOLD\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n\nexport const getSlot = (\n element: HTMLElement | undefined,\n name: string\n): Element | null => element?.querySelector(`[slot=\"${name}\"]`) || null;\n\nexport const slotHasContent = (element: HTMLElement, name: string): boolean =>\n getSlot(element, name) !== null;\n\nexport const getSlotContent = (\n element: HTMLElement,\n name: string\n): Element[] | NodeListOf<ChildNode> | null => {\n const slot = getSlot(element, name);\n return slot ? getSlotElements(slot) : null;\n};\n\nexport const getSlotElements = (\n slot: Element\n): NodeListOf<ChildNode> | Element[] | null => {\n const slotContent = slot.firstElementChild as HTMLSlotElement;\n\n if (slotContent === null) return [slot];\n\n const elements = slotContent.assignedElements\n ? slotContent.assignedElements()\n : slotContent.childNodes;\n return elements.length ? elements : slot.tagName ? [slot] : null;\n};\n\nexport const getNavItemParentDetails = ({\n parentElement,\n}: HTMLElement): IcNavParentDetails => {\n let navType: IcNavParentDetails = { navType: \"\", parent: null };\n if (parentElement) {\n switch (parentElement.tagName) {\n case \"IC-NAVIGATION-GROUP\":\n navType = getNavItemParentDetails(parentElement);\n break;\n case \"IC-TOP-NAVIGATION\":\n navType = { navType: \"top\", parent: parentElement };\n break;\n case \"IC-SIDE-NAVIGATION\":\n navType = { navType: \"side\", parent: parentElement };\n break;\n case \"IC-PAGE-HEADER\":\n navType = { navType: \"page-header\", parent: null };\n break;\n }\n }\n\n return navType;\n};\n\nexport const DEVICE_SIZES = {\n XS: Number(\n getCssProperty(\"--ic-breakpoint-xs\").replace(\"px\", \"\")\n ) as IcDeviceSizes, // 0\n S: Number(\n getCssProperty(\"--ic-breakpoint-sm\").replace(\"px\", \"\")\n ) as IcDeviceSizes, // 576\n M: Number(\n getCssProperty(\"--ic-breakpoint-md\").replace(\"px\", \"\")\n ) as IcDeviceSizes, // 768\n L: Number(\n getCssProperty(\"--ic-breakpoint-lg\").replace(\"px\", \"\")\n ) as IcDeviceSizes, // 992\n XL: Number(\n getCssProperty(\"--ic-breakpoint-xl\").replace(\"px\", \"\")\n ) as IcDeviceSizes, // 1200\n UNDEFINED: 1200,\n};\n\nexport const hasValidationStatus = (\n status?: IcInformationStatusOrEmpty,\n disabled?: boolean\n): boolean => !!status && !disabled;\n\nexport const isSlotUsed = (\n { children }: HTMLElement,\n slotName: string\n): boolean =>\n Array.from(children).some((child) => child.getAttribute(\"slot\") === slotName);\n\n// added as a common method to allow detection of gatsby hydration issue, where (camelCase) props are initially undefined & then update\n// with a value. Allows a callback function to be executed when this is the case\nexport const onComponentPropUndefinedChange = (\n oldValue: string | undefined,\n newValue: string | undefined,\n callback: IcCallbackFunctionNoReturn\n): void => {\n if (oldValue === undefined && newValue !== oldValue) {\n callback();\n }\n};\n\nexport const onComponentRequiredPropUndefined = (\n props: IcPropObject[],\n component: string\n): void => {\n props.forEach(({ prop, propName }) => {\n if (prop === null || prop === undefined) {\n console.error(\n `No ${propName} specified for ${component} component - prop '${propName}' (web components) / '${kebabToCamelCase(\n propName\n )}' (react) required`\n );\n }\n });\n};\n\nexport const kebabToCamelCase = (kebabCase: string): string =>\n kebabCase\n .toLowerCase()\n .split(\"-\")\n .map((word, index) =>\n index === 0\n ? word\n : `${word.substring(0, 1).toUpperCase()}${word.substring(1)}`\n )\n .join(\"\");\n\nexport const checkResizeObserver = (\n callbackFn: IcCallbackFunctionNoReturn\n): void => {\n if (\n typeof window !== \"undefined\" &&\n typeof window.ResizeObserver !== \"undefined\"\n ) {\n callbackFn();\n }\n};\n\nconst hex2dec = (v: string) => parseInt(v, 16);\n\nexport const hexToRgba = (hex: string): IcColorRGBA => {\n const hexChars = hex\n .replace(\"#\", \"\")\n .split(\"\")\n .map((char) => char.repeat(2));\n return {\n r: hex2dec(hex.length === 4 ? hexChars[0] : hex.slice(1, 3)),\n g: hex2dec(hex.length === 4 ? hexChars[1] : hex.slice(3, 5)),\n b: hex2dec(hex.length === 4 ? hexChars[2] : hex.slice(5)),\n a: 1,\n };\n};\n\nexport const rgbaStrToObj = (rgbaStr: string): IcColorRGBA => {\n const isRGBA = rgbaStr.slice(3, 4).toLowerCase() === \"a\";\n const rgbValues = rgbaStr\n .substring(isRGBA ? 5 : 4, rgbaStr.length - 1)\n .replace(/ /g, \"\")\n .split(\",\")\n .map(Number);\n return {\n r: rgbValues[0],\n g: rgbValues[1],\n b: rgbValues[2],\n a: isRGBA ? rgbValues[3] : 1,\n };\n};\n\nexport const elementOverflowsX = ({\n scrollWidth,\n clientWidth,\n}: HTMLElement): boolean => scrollWidth > clientWidth;\n\nexport const hasClassificationBanner = (): boolean =>\n !!document.querySelector(\"ic-classification-banner:not([inline='true'])\");\n\nexport const addFormResetListener = (\n el: HTMLElement,\n callbackFn: IcCallbackFunctionNoReturn\n): void => {\n el.closest(\"FORM\")?.addEventListener(\"reset\", callbackFn);\n};\n\nexport const removeFormResetListener = (\n el: HTMLElement,\n callbackFn: IcCallbackFunctionNoReturn\n): void => {\n el.closest(\"FORM\")?.removeEventListener(\"reset\", callbackFn);\n};\n\nexport const pxToRem = (px: string, base = 16): string =>\n `${(1 / base) * parseInt(px)}rem`;\n\n/**\n * Removes the disabled attribute from the provided element when its value is set to false.\n * This effectively makes it null, to not confuse screen readers that cannot interpret the false value\n */\nexport const removeDisabledFalse = (\n disabled: boolean | undefined,\n element: HTMLElement\n): void => {\n if (!disabled) {\n element.removeAttribute(\"disabled\");\n }\n};\n\nexport const isMacDevice = (): boolean =>\n window.navigator.userAgent.toUpperCase().indexOf(\"MAC\") >= 0;\n\nexport const isNumeric = (value: string): boolean => /^-?\\d+$/.test(value);\n\nexport async function waitForHydration(): Promise<boolean> {\n const elements = document.getElementsByTagName(\"*\");\n\n for (let i = 0; i < elements.length; i++) {\n if (elements[i].tagName.startsWith(\"IC-\")) {\n if (elements[i].classList.contains(\"hydrated\")) {\n return true;\n }\n } else {\n return false;\n }\n }\n\n return false;\n}\n\nexport const convertToRGBA = (color: IcColor): IcColorRGBA | null => {\n const firstChar = color?.slice(0, 1).toLowerCase();\n\n if (firstChar !== \"#\" && firstChar !== \"r\") return null;\n return firstChar === \"#\" ? hexToRgba(color) : rgbaStrToObj(color);\n};\n\nexport const capitalize = (text: string): string =>\n text.charAt(0).toUpperCase() + text.slice(1);\n\nexport const checkSlotInChildMutations = (\n addedNodes: NodeList,\n removedNodes: NodeList,\n slotName: string | string[]\n): boolean => {\n const hasSlot = (nodeList: NodeList) =>\n Array.from(nodeList).some((node) =>\n Array.isArray(slotName)\n ? slotName.some((name) => (node as Element).slot === name)\n : (node as Element).slot === slotName\n );\n return hasSlot(addedNodes) || hasSlot(removedNodes);\n};\n\nexport const isElInAGGrid = (el: HTMLElement): boolean =>\n !!el.closest(\".ag-cell\") && !!el.closest(\".ag-root\");\n\n/**\n * Checks if the component is slotted in its relevant 'group' component\n * @param component - the component to check\n */\nexport const isSlottedInGroup = (component: HTMLElement): boolean =>\n component.parentElement?.tagName === `${component.tagName}-GROUP`;\n\nexport const hasDynamicChildSlots = (\n mutationList: MutationRecord[],\n slotNames: string | string[]\n): boolean =>\n mutationList.some(\n ({ type, addedNodes, removedNodes }) =>\n type === \"childList\" &&\n checkSlotInChildMutations(addedNodes, removedNodes, slotNames)\n );\n\nexport const renderDynamicChildSlots = (\n mutationList: MutationRecord[],\n slotNames: string | string[],\n ref: any\n): void => {\n if (hasDynamicChildSlots(mutationList, slotNames)) {\n forceUpdate(ref);\n }\n};\n\nexport const getElementInheritedTheme = (el: HTMLElement): IcThemeMode => {\n const blockParentTheme =\n el.parentElement?.closest<HTMLIcTopNavigationElement>(\n IC_BLOCK_COLOR_COMPONENTS\n )?.theme;\n\n if (blockParentTheme && blockParentTheme !== \"inherit\")\n return blockParentTheme;\n\n const wrapperTheme = el.parentElement?.closest(\"ic-theme\")?.theme;\n\n if (wrapperTheme && wrapperTheme !== \"system\") return wrapperTheme;\n\n return window.matchMedia?.(\"(prefers-color-scheme: dark)\").matches\n ? \"dark\"\n : \"light\";\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,h as i,H as s,g as e}from"./p-8e4e97b4.js";import{p as h,h as l}from"./p-b57e59b7.js";import"./p-bddf799a.js";const a=":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.ic-stepper-default:not(.ic-stepper-aligned-left)) .step-item-list{flex:auto}:host(.ic-stepper-compact) ul ::slotted(ic-step){display:none}:host(.ic-stepper-compact) ul ::slotted(ic-step.show){display:flex}:host(.ic-stepper-compact) ul ::slotted(ic-step.hide){display:none;opacity:0;visibility:hidden}";const o=a;const d=class{constructor(i){t(this,i);var s;this.resizeObserver=null;this.visuallyHidden="visually-hidden";this.alignedFullWidth=true;this.autoSetStepTitles=true;this.lastStepWidth=0;this.noOfResizes=0;this.stepperWidth=(s=document.querySelector("ic-stepper"))===null||s===void 0?void 0:s.getBoundingClientRect().width;this.stepTypes=[];this.variantOverride=this.variant!=="compact";this.aligned="full-width";this.connectorWidth=100;this.hideStepInfo=false;this.icI18n={next:"Next",step:"Step",of:"of",lastStep:"Last step",completed:"Completed",notRequired:"Not required",required:"Required",optional:"Optional"};this.theme="inherit";this.variant="default";this.getChildren=()=>{this.steps=Array.from(this.el.querySelectorAll("ic-step"));this.stepsWithStepTitles=Array.from(this.el.querySelectorAll("ic-step[heading]"))};this.checkStepTitles=()=>{if(this.stepsWithStepTitles.length<this.steps.length&&this.variantOverride&&this.variant==="compact"){this.noOfResizes=this.noOfResizes+1;if(this.noOfResizes===1){console.error(`The prop 'heading' is required for all steps of the Stepper component (compact variant)`)}}};this.setStepTypes=()=>{this.getChildren();this.stepTypes=[];for(let t=0;t<this.steps.length;t++){this.stepTypes.push("active")}};this.setStepperWidth=()=>{this.alignedFullWidth=this.variant==="default"&&this.aligned==="full-width";const t=this.steps[this.steps.length-1];t.style.maxWidth="none";if(this.alignedFullWidth){this.stepperWidth=this.el.offsetWidth;t.style.maxWidth=h(`${this.stepperWidth/this.steps.length}px`);this.lastStepWidth=t.offsetWidth}};this.initialiseStepStates=()=>{this.steps.forEach(((t,i)=>{var s,e,l;if(this.icI18n!==undefined){t.icI18n=this.icI18n}t.variant=this.variant;t.stepNum=i+1;t.lastStep=i===this.steps.length-1;t.lastStepNum=this.steps.length;if(t.type!=="current"){t.current=false;this.stepTypes[i]=t.type}else{t.current=true}const a=t.shadowRoot&&t.shadowRoot.querySelector(".step > .heading-area");if(this.stepsWithStepTitles.length==0&&this.variantOverride){if(this.variant==="compact"){this.autoSetStepTitles=true;if(this.autoSetStepTitles){t.heading="Step "+t.stepNum;a&&((s=a===null||a===void 0?void 0:a.querySelector(".heading"))===null||s===void 0?void 0:s.setAttribute("aria-hidden","true"))}}if(this.variant==="default"){this.autoSetStepTitles=false;if(!this.autoSetStepTitles){t.heading=undefined;a&&((e=a===null||a===void 0?void 0:a.querySelector(".heading"))===null||e===void 0?void 0:e.removeAttribute("aria-hidden"))}}}if(this.variant==="compact"){if(t.current===true||t.type==="current"){t.classList.remove("hide");t.classList.add("show")}else if(t.classList.contains("show")){t.classList.remove("show");t.classList.add("hide")}if(!t.lastStep){t.nextStepHeading=this.steps[i+1].heading;t.progress=t.stepNum/this.steps.length*100}else if(t.lastStep&&this.stepTypes[i]!=="completed"){t.progress=95}else{t.progress=100}if(this.hideStepInfo&&a!==null){a.classList.remove(this.visuallyHidden)}t.compactStepStyling=this.stepTypes[i]}if(this.variant==="default"){if(!t.lastStep){if(this.alignedFullWidth&&this.stepperWidth!==undefined){t.style.width=h(`${(this.stepperWidth-this.lastStepWidth)/(this.steps.length-1)}px`);t.style.minWidth=h("148px")}}else if(t.lastStep){t.classList.add("last-step");if(this.alignedFullWidth){t.style.maxWidth=`${this.lastStepWidth}px`}else if(this.connectorWidth){t.style.maxWidth=this.connectorWidth>100?h(`${this.connectorWidth+48}px`):h("148px")}}if(this.aligned==="left"&&this.connectorWidth){t.style.width=this.connectorWidth>100?h(`${this.connectorWidth+48}px`):h("148px");const i=(l=t.shadowRoot)===null||l===void 0?void 0:l.querySelector(".step > .step-top > .step-connect");if(i){i.style.width=this.connectorWidth>100?h(`${this.connectorWidth}px`):h("100px")}}if(this.hideStepInfo&&a!==null){a.classList.add(this.visuallyHidden)}}}))};this.setHideStepInfo=()=>{this.steps.forEach((t=>{var i,s,e;const h=(i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".step > .heading-area");if(h){if(this.hideStepInfo){(s=h.classList)===null||s===void 0?void 0:s.add(this.visuallyHidden)}else{(e=h.classList)===null||e===void 0?void 0:e.remove(this.visuallyHidden)}}}))};this.overrideVariant=()=>{if(this.variantOverride){let t=148*this.steps.length;if(this.aligned==="left"&&this.connectorWidth&&this.connectorWidth>100){t=(this.connectorWidth+48)*this.steps.length}if(this.el.clientWidth<t){this.variant="compact"}else{this.variant="default"}}};this.resizeObserverCallback=()=>{this.getChildren();this.checkStepTitles();this.overrideVariant();this.setStepperWidth();this.initialiseStepStates();this.handleThemeChange()};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.el)}}handleThemeChange(){this.getChildren();this.steps.forEach((t=>{t.theme=this.theme}))}handlePropChange(){this.setHideStepInfo();this.getChildren()}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}componentWillLoad(){this.setStepTypes();this.handleThemeChange();if(this.variant==="compact"){this.variantOverride=false}}componentWillRender(){this.initialiseStepStates()}componentDidLoad(){l(this.runResizeObserver)}render(){return i(s,{key:"a5ec9b8d778ba54adf1b3034455e64df0a51fd7c",class:{[`ic-stepper-${this.variant}`]:true,["ic-stepper-aligned-left"]:this.variant==="default"&&this.aligned==="left",[`ic-theme-${this.theme}`]:this.theme!=="inherit"}},i("ul",{key:"4140f5cb20325ee4c5c98c855c4b822a448294e8",class:"step-item-list"},i("slot",{key:"cda080de502e7760bb3f9a1519f0261b554b0b77"})))}get el(){return e(this)}static get watchers(){return{theme:["handleThemeChange"],hideStepInfo:["handlePropChange"],variant:["handlePropChange"]}}};d.style=o;export{d as ic_stepper};
|
|
2
|
-
//# sourceMappingURL=p-c2d5e301.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["icStepperCss","IcStepperStyle0","Stepper","constructor","hostRef","this","resizeObserver","visuallyHidden","alignedFullWidth","autoSetStepTitles","lastStepWidth","noOfResizes","stepperWidth","_a","document","querySelector","getBoundingClientRect","width","stepTypes","variantOverride","variant","aligned","connectorWidth","hideStepInfo","icI18n","next","step","of","lastStep","completed","notRequired","required","optional","theme","getChildren","steps","Array","from","el","querySelectorAll","stepsWithStepTitles","checkStepTitles","length","console","error","setStepTypes","i","push","setStepperWidth","style","maxWidth","offsetWidth","pxToRem","initialiseStepStates","forEach","index","undefined","stepNum","lastStepNum","type","current","stepTitleArea","shadowRoot","heading","setAttribute","_b","removeAttribute","classList","remove","add","contains","nextStepHeading","progress","compactStepStyling","minWidth","stepConnect","_c","setHideStepInfo","overrideVariant","minDefaultStepperWidth","clientWidth","resizeObserverCallback","handleThemeChange","runResizeObserver","ResizeObserver","observe","handlePropChange","disconnectedCallback","disconnect","componentWillLoad","componentWillRender","componentDidLoad","checkResizeObserver","render","h","Host","key","class"],"sources":["src/components/ic-stepper/ic-stepper.css?tag=ic-stepper&encapsulation=shadow","src/components/ic-stepper/ic-stepper.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n}\n\n.step-item-list {\n display: flex;\n margin: 0;\n padding: 0;\n}\n\n:host(.ic-stepper-default:not(.ic-stepper-aligned-left)) .step-item-list {\n flex: auto;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step) {\n display: none;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.show) {\n display: flex;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n","import { Component, Element, Host, Prop, h, State, Watch } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport {\n IcStepTypes,\n IcStepVariants,\n IcStepI18n,\n} from \"../ic-step/ic-step.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-stepper\",\n styleUrl: \"ic-stepper.css\",\n shadow: true,\n})\nexport class Stepper {\n private resizeObserver: ResizeObserver | null = null;\n private steps: HTMLIcStepElement[];\n private stepsWithStepTitles: HTMLIcStepElement[];\n private visuallyHidden: string = \"visually-hidden\";\n\n @Element() el: HTMLIcStepperElement;\n\n @State() alignedFullWidth: boolean = true;\n @State() autoSetStepTitles: boolean = true;\n @State() lastStepWidth: number = 0;\n @State() noOfResizes?: number = 0;\n @State() stepperWidth: number | undefined = document\n .querySelector(\"ic-stepper\")\n ?.getBoundingClientRect().width;\n @State() stepTypes: IcStepTypes[] = [];\n @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n /**\n * The alignment of the default stepper within its container.\n */\n @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n /**\n * The length of the connector between each step in pixels. Minimum length is 100px.\n */\n @Prop() connectorWidth?: number = 100;\n\n /**\n * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n */\n @Prop() hideStepInfo?: boolean = false;\n\n /**\n * Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.\n */\n @Prop() icI18n?: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n handleThemeChange(): void {\n this.getChildren();\n this.steps.forEach((step) => {\n step.theme = this.theme;\n });\n }\n\n /**\n * The variant of the stepper.\n */\n @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n @Watch(\"hideStepInfo\")\n @Watch(\"variant\")\n handlePropChange(): void {\n this.setHideStepInfo();\n this.getChildren();\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\n this.setStepTypes();\n this.handleThemeChange();\n\n if (this.variant === \"compact\") {\n this.variantOverride = false;\n }\n }\n\n componentWillRender(): void {\n this.initialiseStepStates();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n // Get all steps currently within this stepper\n private getChildren = (): void => {\n this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n this.stepsWithStepTitles = Array.from(\n this.el.querySelectorAll(\"ic-step[heading]\")\n );\n };\n\n // Inform the user that stepTitles are required on all steps in a compact stepper\n private checkStepTitles = (): void => {\n if (\n this.stepsWithStepTitles.length < this.steps.length &&\n this.variantOverride &&\n this.variant === \"compact\"\n ) {\n this.noOfResizes = this.noOfResizes! + 1;\n if (this.noOfResizes === 1) {\n console.error(\n `The prop 'heading' is required for all steps of the Stepper component (compact variant)`\n );\n }\n }\n };\n\n private setStepTypes = (): void => {\n this.getChildren();\n this.stepTypes = [];\n for (let i = 0; i < this.steps.length; i++) {\n this.stepTypes.push(\"active\");\n }\n };\n\n private setStepperWidth = (): void => {\n this.alignedFullWidth =\n this.variant === \"default\" && this.aligned === \"full-width\";\n\n const lastStep = this.steps[this.steps.length - 1];\n lastStep.style.maxWidth = \"none\";\n\n if (this.alignedFullWidth) {\n this.stepperWidth = this.el.offsetWidth;\n lastStep.style.maxWidth = pxToRem(\n `${this.stepperWidth / this.steps.length}px`\n );\n this.lastStepWidth = lastStep.offsetWidth;\n }\n };\n\n private initialiseStepStates = (): void => {\n this.steps.forEach((step, index) => {\n // Set language\n if (this.icI18n !== undefined) {\n step.icI18n = this.icI18n;\n }\n // Set variant\n step.variant = this.variant!;\n // Assign stepNum to each step\n step.stepNum = index + 1;\n // Assign lastStep to final step\n step.lastStep = index === this.steps.length - 1;\n step.lastStepNum = this.steps.length;\n\n if (step.type !== \"current\") {\n step.current = false;\n this.stepTypes[index] = step.type!;\n } else {\n step.current = true;\n }\n\n const stepTitleArea =\n step.shadowRoot &&\n step.shadowRoot.querySelector(\".step > .heading-area\");\n\n if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n if (this.variant === \"compact\") {\n this.autoSetStepTitles = true;\n if (this.autoSetStepTitles) {\n step.heading = \"Step \" + step.stepNum;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n }\n }\n if (this.variant === \"default\") {\n this.autoSetStepTitles = false;\n if (!this.autoSetStepTitles) {\n step.heading = undefined;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.removeAttribute(\"aria-hidden\");\n }\n }\n }\n\n if (this.variant === \"compact\") {\n if (step.current === true || step.type === \"current\") {\n step.classList.remove(\"hide\");\n step.classList.add(\"show\");\n } else if (step.classList.contains(\"show\")) {\n step.classList.remove(\"show\");\n step.classList.add(\"hide\");\n }\n\n if (!step.lastStep) {\n step.nextStepHeading = this.steps[index + 1].heading;\n step.progress = (step.stepNum / this.steps.length) * 100;\n } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n step.progress = 95;\n } else {\n step.progress = 100;\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.remove(this.visuallyHidden);\n }\n\n step.compactStepStyling = this.stepTypes[index];\n }\n\n if (this.variant === \"default\") {\n if (!step.lastStep) {\n if (this.alignedFullWidth && this.stepperWidth !== undefined) {\n step.style.width = pxToRem(\n `${\n (this.stepperWidth - this.lastStepWidth) /\n (this.steps.length - 1)\n }px`\n );\n step.style.minWidth = pxToRem(\"148px\");\n }\n } else if (step.lastStep) {\n step.classList.add(\"last-step\");\n if (this.alignedFullWidth) {\n step.style.maxWidth = `${this.lastStepWidth}px`;\n } else if (this.connectorWidth) {\n step.style.maxWidth =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n }\n }\n\n if (this.aligned === \"left\" && this.connectorWidth) {\n step.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n const stepConnect = step.shadowRoot?.querySelector(\n \".step > .step-top > .step-connect\"\n ) as HTMLElement;\n\n if (stepConnect) {\n stepConnect.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth}px`)\n : pxToRem(\"100px\");\n }\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.add(this.visuallyHidden);\n }\n }\n });\n };\n\n private setHideStepInfo = (): void => {\n this.steps.forEach((step) => {\n const stepTitleArea = step.shadowRoot?.querySelector(\n \".step > .heading-area\"\n );\n\n if (stepTitleArea) {\n if (this.hideStepInfo) {\n stepTitleArea.classList?.add(this.visuallyHidden);\n } else {\n stepTitleArea.classList?.remove(this.visuallyHidden);\n }\n }\n });\n };\n\n private overrideVariant = () => {\n if (this.variantOverride) {\n let minDefaultStepperWidth = 148 * this.steps.length;\n\n if (\n this.aligned === \"left\" &&\n this.connectorWidth &&\n this.connectorWidth > 100\n ) {\n minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n }\n if (this.el.clientWidth < minDefaultStepperWidth) {\n this.variant = \"compact\";\n } else {\n this.variant = \"default\";\n }\n }\n };\n\n private resizeObserverCallback = () => {\n this.getChildren();\n this.checkStepTitles();\n this.overrideVariant();\n this.setStepperWidth();\n this.initialiseStepStates();\n this.handleThemeChange();\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n [`ic-stepper-${this.variant}`]: true,\n [\"ic-stepper-aligned-left\"]:\n this.variant === \"default\" && this.aligned === \"left\",\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <ul class=\"step-item-list\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["icCheckboxGroupCss","IcCheckboxGroupStyle0","CHECKBOX_SELECTOR","CheckboxGroup","constructor","hostRef","this","disabled","helperText","hideLabel","required","size","theme","validationStatus","validationText","watchDisabledHandler","removeDisabledFalse","el","labelNameHandler","newValue","oldValue","propName","Array","from","querySelectorAll","forEach","checkbox","groupLabel","name","watchThemeHandler","handleChange","ev","target","tagName","stopImmediatePropagation","componentWillLoad","componentDidLoad","onComponentRequiredPropUndefined","prop","label","selectHandler","checkedOptions","filter","checked","icChange","emit","value","map","opt","textFieldValue","_a","querySelector","selectedOption","render","describedBy","getInputDescribedByText","renderSRText","showValidation","hasValidationStatus","h","Host","key","class","id","trim","useLabelTag","slot","for","ariaLiveMode","status","message"],"sources":["src/components/ic-checkbox-group/ic-checkbox-group.css?tag=ic-checkbox-group&encapsulation=shadow","src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n\n --ic-input-label-text-color: var(--ic-checkbox-group-label);\n --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle);\n --ic-input-validation-error: var(--ic-checkbox-state-icon-error);\n --ic-input-validation-status-text-color: var(--ic-checkbox-state-text);\n}\n\n:host(.ic-checkbox-group-disabled) {\n --ic-input-label-text-color: var(--ic-checkbox-group-label-disabled);\n --ic-input-label-helper-text-color: var(\n --ic-checkbox-group-subtitle-disabled\n );\n}\n\nic-input-label.error {\n color: var(--ic-checkbox-group-label-error);\n\n --ic-typography-color: var(--ic-checkbox-group-label-error);\n --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle-error);\n}\n\nic-input-label:not(.with-helper) .ic-typography-label,\nic-input-label .helpertext {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small)\n ic-input-label:not(.with-helper)\n .ic-typography-label,\n:host(.ic-checkbox-group-small) ic-input-label .helpertext {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host(.ic-checkbox-group-large)\n ic-input-label:not(.with-helper)\n .ic-typography-label,\n:host(.ic-checkbox-group-large) ic-input-label .helpertext {\n margin-bottom: calc(var(--ic-space-sm) * 1.5);\n}\n\nic-input-label .helpertext {\n display: block;\n}\n\nic-input-validation.show-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small) ic-input-validation.show-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n:host(.ic-checkbox-group-large) ic-input-validation.show-validation {\n margin-top: calc(var(--ic-space-sm) * 1.5);\n}\n\n.checkboxes-container {\n margin-bottom: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-checkbox-group-small) .checkboxes-container {\n margin-bottom: calc(-1 * var(--ic-space-xxxs));\n}\n\n.screen-reader-only-text {\n position: absolute;\n left: -9999px;\n background-color: #fff;\n color: #000;\n text-transform: none;\n}\n\n.screen-reader-only-text:dir(rtl) {\n right: -9999px;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n IcInformationStatusOrEmpty,\n IcSizes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\nconst CHECKBOX_SELECTOR = \"ic-checkbox\";\n\n/**\n * @slot helper-text - Content is set as the helper text for the checkbox group.\n */\n@Component({\n tag: \"ic-checkbox-group\",\n styleUrl: \"ic-checkbox-group.css\",\n shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n @Element() el: HTMLIcCheckboxGroupElement;\n\n /**\n * If `true`, the checkbox group will be set to the disabled state.\n */\n @Prop() disabled: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * The label for the checkbox group to be displayed.\n */\n @Prop() label!: string;\n\n /**\n * The name for the checkbox group to differentiate from other groups.\n */\n @Prop() name!: string;\n\n @Watch(\"label\")\n @Watch(\"name\")\n labelNameHandler(\n newValue: string,\n oldValue: string,\n propName: \"label\" | \"name\"\n ): void {\n Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n (checkbox) => {\n if (propName === \"label\") checkbox.groupLabel = newValue;\n else if (checkbox.name === oldValue) {\n // If the checkbox name has been set by the parent, then override it\n checkbox.name = newValue;\n }\n }\n );\n }\n\n /**\n * If `true`, the checkbox group will require a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * The size of the checkboxes to be displayed. This does not affect the font size of the label.\n */\n @Prop() size: IcSizes = \"medium\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(newValue: IcThemeMode): void {\n Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n (checkbox) => {\n checkbox.theme = newValue;\n }\n );\n }\n\n /**\n * The validation status - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The text to display as the validation message.\n */\n @Prop() validationText: string = \"\";\n\n /**\n * Emitted when a checkbox is checked.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icChange\")\n handleChange(ev: CustomEvent): void {\n //don't pass on the event if it has come from slotted text field\n //otherwise any icChange handler bound to the checkbox group will also run\n if ((ev.target as HTMLElement).tagName === \"IC-TEXT-FIELD\") {\n ev.stopImmediatePropagation();\n }\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n this.watchThemeHandler(this.theme);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Checkbox Group\"\n );\n }\n\n @Listen(\"icCheck\")\n selectHandler({ target }: CustomEvent): void {\n const checkedOptions = Array.from(\n this.el.querySelectorAll(CHECKBOX_SELECTOR)\n ).filter(({ checked, disabled }) => checked && !disabled);\n this.icChange.emit({\n value: checkedOptions.map(({ value }) => value),\n checkedOptions: checkedOptions.map((opt) => ({\n checkbox: opt,\n textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n })),\n selectedOption: target as HTMLIcCheckboxElement,\n });\n }\n\n render() {\n const {\n disabled,\n helperText,\n hideLabel,\n label,\n name,\n required,\n size,\n theme,\n validationStatus,\n validationText,\n } = this;\n\n const describedBy = getInputDescribedByText(\n this.el,\n name,\n helperText !== \"\",\n validationStatus !== \"\"\n );\n\n const renderSRText = validationStatus === \"error\" || required || hideLabel;\n\n const showValidation = hasValidationStatus(validationStatus, disabled);\n\n return (\n <Host\n class={{\n \"ic-checkbox-group-disabled\": !!disabled,\n [`ic-checkbox-group-${size}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n {renderSRText && (\n <span\n id=\"screenReaderOnlyText\"\n class=\"screen-reader-only-text\"\n aria-hidden=\"true\"\n >\n {label} {validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n {required ? \"required\" : null}\n </span>\n )}\n <fieldset\n id={name}\n aria-labelledby={`${\n renderSRText ? \"screenReaderOnlyText\" : \"\"\n } ${describedBy}`.trim()}\n disabled={disabled}\n >\n {!hideLabel && (\n <legend>\n <ic-input-label\n class={{ [`${validationStatus}`]: true }}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n useLabelTag={false}\n >\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n </legend>\n )}\n <div class=\"checkboxes-container\">\n <slot></slot>\n </div>\n </fieldset>\n {showValidation && (\n <ic-input-validation\n class={{\n \"show-validation\": showValidation,\n }}\n for={name}\n ariaLiveMode=\"polite\"\n status={validationStatus}\n message={validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["icStatusTagCss","IcStatusTagStyle0","StatusTag","constructor","hostRef","this","announced","size","status","theme","uppercase","variant","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","render","h","Host","key","class","role"],"sources":["src/components/ic-status-tag/ic-status-tag.css?tag=ic-status-tag&encapsulation=shadow","src/components/ic-status-tag/ic-status-tag.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.tag {\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n font-size: 0.875rem;\n border-radius: var(--ic-space-md);\n display: inline-block;\n min-width: 2.5rem;\n text-align: center;\n\n --ic-typography-color: var(--ic-status-tag-text);\n}\n\n.small {\n padding: var(--ic-space-xxxs) var(--ic-space-sm);\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.large {\n padding: var(--ic-space-xs) var(--ic-space-sm);\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.filled-neutral {\n background-color: var(--ic-status-tag-neutral);\n}\n\n.filled-success {\n background-color: var(--ic-status-tag-success);\n}\n\n.filled-warning {\n background-color: var(--ic-status-tag-warning);\n\n --ic-typography-color: var(--ic-status-tag-filled-warning-text);\n}\n\n.filled-danger {\n background-color: var(--ic-status-tag-error);\n}\n\n.outlined {\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined.small {\n padding: var(--ic-space-1px) calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px))\n calc(var(--ic-space-sm) - var(--ic-space-1px));\n}\n\n.outlined-neutral {\n background-color: var(--ic-status-tag-outlined-background-neutral);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-neutral);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n.outlined-success {\n background-color: var(--ic-status-tag-outlined-background-success);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-success);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n.outlined-warning {\n background-color: var(--ic-status-tag-outlined-background-warning);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-warning);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n.outlined-danger {\n background-color: var(--ic-status-tag-outlined-background-error);\n border: var(--ic-border-width) solid var(--ic-status-tag-outlined-error);\n\n --ic-typography-color: var(--ic-status-tag-text-inverted);\n}\n\n@media (forced-colors: active) {\n .tag {\n border: var(--ic-border-hc);\n -ms-high-contrast-adjust: none;\n forced-color-adjust: none;\n\n --ic-typography-color: var(--ic-status-tag-text);\n }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStatusTagStatuses } from \"./ic-status-tag.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-status-tag\",\n styleUrl: \"ic-status-tag.css\",\n shadow: true,\n})\nexport class StatusTag {\n /**\n * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n * Screen readers will announce changes to the `label`, but not the initial value.\n */\n @Prop() announced?: boolean = false;\n\n /**\n * The content rendered within the status tag.\n */\n @Prop() label!: string;\n\n /**\n * The size of the status tag component.\n */\n @Prop() size?: IcSizes = \"medium\";\n\n /**\n * The colour of the status tag.\n */\n @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: \"dark\" | \"light\" | \"inherit\" = \"inherit\";\n\n /**\n * The letter case of the status tag's label.\n */\n @Prop() uppercase?: boolean = true;\n\n /**\n * The emphasis of the status tag.\n */\n @Prop() variant?: IcEmphasisType = \"filled\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Status Tag\"\n );\n }\n\n render() {\n const { label, status, variant, size, announced, theme, uppercase } = this;\n return (\n <Host\n class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}\n role={announced ? \"status\" : null}\n aria-label=\"Status\"\n >\n <strong\n class={{\n [\"tag\"]: true,\n [`${variant}-${status}`]: true,\n [\"outlined\"]: variant === \"outlined\",\n [`${size}`]: true,\n }}\n >\n <ic-typography\n variant={uppercase ? \"label-uppercase\" : \"label\"}\n apply-vertical-margins={false}\n >\n <span>{label}</span>\n </ic-typography>\n </strong>\n </Host>\n );\n }\n}\n"],"mappings":"8GAAA,MAAMA,EAAiB,05IACvB,MAAAC,EAAeD,E,MCSFE,EAAS,MALtB,WAAAC,CAAAC,G,UAUUC,KAAAC,UAAsB,MAUtBD,KAAAE,KAAiB,SAKjBF,KAAAG,OAA+B,UAK/BH,KAAAI,MAAuC,UAKvCJ,KAAAK,UAAsB,KAKtBL,KAAAM,QAA2B,Q,CAEnC,gBAAAC,GACEC,EACE,CAAC,CAAEC,KAAMT,KAAKU,MAAOC,SAAU,UAC/B,a,CAIJ,MAAAC,GACE,MAAMF,MAAEA,EAAKP,OAAEA,EAAMG,QAAEA,EAAOJ,KAAEA,EAAID,UAAEA,EAASG,MAAEA,EAAKC,UAAEA,GAAcL,KACtE,OACEa,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAAE,CAAC,YAAYZ,KAAUA,IAAU,WAC1Ca,KAAMhB,EAAY,SAAW,KAAI,aACtB,UAEXY,EAAA,UAAAE,IAAA,2CACEC,MAAO,CACL,CAAC,OAAQ,KACT,CAAC,GAAGV,KAAWH,KAAW,KAC1B,CAAC,YAAaG,IAAY,WAC1B,CAAC,GAAGJ,KAAS,OAGfW,EAAA,iBAAAE,IAAA,2CACET,QAASD,EAAY,kBAAoB,QAAO,yBACxB,OAExBQ,EAAA,QAAAE,IAAA,4CAAOL,K","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as i,c as t,h as e,F as s,H as a,g as o}from"./p-8e4e97b4.js";import{c as n}from"./p-f074ef5b.js";import{h as r,u as l,i as h,o as d}from"./p-b57e59b7.js";import"./p-bddf799a.js";const c='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;min-height:100% !important;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);opacity:0}:host(.ic-dialog-fade-in){opacity:1}:host(.disable-height-constraint){background:none;justify-content:unset;align-items:unset}.dialog.disable-height-constraint{max-height:none;position:relative}.dialog.disable-height-constraint .content-area{overflow-y:visible}@media (prefers-reduced-motion: no-preference){:host{transition:opacity var(--ic-easing-transition-slow)}.dialog{transform:translateY(-3rem);transition:transform 1000s}:host(.ic-dialog-fade-in) .dialog{transform:translateY(0);transition:transform var(--ic-easing-transition-slow)}}:host(.ic-dialog-hidden){display:none}.dialog{background-color:var(--ic-dialog-background);color:var(--ic-dialog-text-primary);--ic-typography-color:var(--ic-dialog-text-primary);border:var(--ic-space-1px) solid var(--ic-dialog-border);border-radius:var(--ic-border-radius);padding:var(--ic-space-xs) 0 var(--ic-space-md);display:flex;flex-direction:column;box-sizing:border-box;overflow-x:visible}.small{width:50%;max-width:25rem;min-height:11rem;max-height:70vh}.medium{width:70vw;max-width:44rem;min-height:12.5rem;max-height:70vh}.large{width:90vw;max-width:62.5rem;min-height:12.5rem;max-height:90vh}.heading-area{display:flex;margin-bottom:var(--ic-space-xs);padding:0 var(--ic-space-md)}.heading{overflow-wrap:break-word}.close-icon{margin-left:auto}.close-icon>svg{color:var(--ic-dialog-clear-button)}.content-area{padding:0 var(--ic-space-md);margin:0;overflow-y:auto}#dialog-content{margin-bottom:var(--ic-space-sm)}#dialog-content ::slotted(ic-typography){overflow-wrap:break-word}#dialog-content ::slotted(*){position:relative}.dialog-controls{margin-top:auto;padding:var(--ic-space-xs) var(--ic-space-md) 0;display:flex;justify-content:flex-end;gap:var(--ic-space-md)}.dialog-control-button{width:-moz-fit-content;width:fit-content}.backdrop{overflow-y:auto;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);padding-top:16px;padding-bottom:16px}.heading ic-typography{--ic-typography-color:var(--ic-dialog-text-primary)}.label ic-typography{--ic-typography-color:var(--ic-dialog-label)}@media (min-width: 800px){:host([size="large"]) .dialog:not(.disable-width-constraint)>.content-area{width:75%}}@media (max-width: 576px){.dialog{width:100vw;height:100vh;max-width:none;max-height:none;box-sizing:border-box}.backdrop{padding:0}.dialog.disable-height-constraint{height:auto;min-height:100vh}}@media (max-width: 364px){.dialog-control-button{width:unset}}';const g=c;const b=class{constructor(a){i(this,a);this.icDialogCancelled=t(this,"icDialogCancelled",7);this.icDialogClosed=t(this,"icDialogClosed",7);this.icDialogConfirmed=t(this,"icDialogConfirmed",7);this.icDialogOpened=t(this,"icDialogOpened",7);this.contentAreaMutationObserver=null;this.DATA_GETS_FOCUS="data-gets-focus";this.DIALOG_CONTROLS="dialog-controls";this.dialogHeight=0;this.focusedElementIndex=0;this.IC_TEXT_FIELD="IC-TEXT-FIELD";this.IC_ACCORDION="IC-ACCORDION";this.IC_ACCORDION_GROUP="IC-ACCORDION-GROUP";this.IC_CHECKBOX="IC-CHECKBOX";this.IC_SEARCH_BAR="IC-SEARCH-BAR";this.IC_TAB_CONTEXT="IC-TAB-CONTEXT";this.resizeObserver=null;this.dialogRendered=false;this.fadeIn=false;this.closeOnBackdropClick=true;this.destructive=false;this.dismissLabel="Dismiss";this.disableHeightConstraint=false;this.disableWidthConstraint=false;this.hideCloseButton=false;this.hideDefaultControls=false;this.open=false;this.size="small";this.theme="inherit";this.dialogOpened=()=>{var i,t;this.dialogRendered=true;if(this.disableHeightConstraint){(i=this.dialogEl)===null||i===void 0?void 0:i.show()}else{(t=this.dialogEl)===null||t===void 0?void 0:t.showModal()}setTimeout((()=>{this.fadeIn=true;if(this.backdropEl&&this.disableHeightConstraint&&this.backdropEl.scrollTop!==0){this.backdropEl.scrollTop=0}}),10);setTimeout((()=>{this.setInitialFocus();r(this.runResizeObserver)}),75);setTimeout((()=>{this.icDialogOpened.emit()}),80)};this.runResizeObserver=()=>{if(this.dialogEl){this.resizeObserver=new ResizeObserver((()=>{clearTimeout(this.resizeTimeout);this.resizeTimeout=window.setTimeout(this.resizeObserverCallback,80)}));this.resizeObserver.observe(this.dialogEl)}};this.resizeObserverCallback=()=>{if(this.dialogEl&&this.dialogEl.clientHeight!==this.dialogHeight){this.dialogHeight=this.dialogEl.clientHeight}};this.refreshInteractiveElementsOnSlotChange=()=>{var i,t,e;const s=(i=this.el.shadowRoot)===null||i===void 0?void 0:i.querySelector("#dialog-content");if(s){this.contentArea=s.querySelector("slot");(t=this.contentArea)===null||t===void 0?void 0:t.addEventListener("slotchange",this.getInteractiveElements);this.contentAreaMutationObserver=new MutationObserver((()=>{this.getInteractiveElements()}));(e=l(s))===null||e===void 0?void 0:e.forEach((i=>{var t;(t=this.contentAreaMutationObserver)===null||t===void 0?void 0:t.observe(i,{childList:true,subtree:true})}))}};this.removeSlotChangeListener=()=>{var i;if(this.contentArea){this.contentArea.removeEventListener("slotchange",this.getInteractiveElements);(i=this.contentAreaMutationObserver)===null||i===void 0?void 0:i.disconnect()}};this.setInitialFocus=()=>{this.sourceElement=document.activeElement;this.focusedElementIndex=this.interactiveElementList?this.interactiveElementList.findIndex((i=>i.hasAttribute(this.DATA_GETS_FOCUS))):0;this.focusElement(this.interactiveElementList[this.focusedElementIndex])};this.getFocusedElementIndex=()=>{var i;for(let t=0;t<this.interactiveElementList.length;t++){if(this.interactiveElementList[t]===(((i=this.el.shadowRoot)===null||i===void 0?void 0:i.activeElement)||document.activeElement)){this.focusedElementIndex=t}}};this.closeIconClick=()=>{this.open=false};this.getInteractiveElements=()=>{var i;this.interactiveElementList=Array.from(((i=this.el.shadowRoot)===null||i===void 0?void 0:i.querySelectorAll("ic-button"))||[]);const t=Array.from(this.el.querySelectorAll(`a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex="-1"]),\n ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-context,\n ic-back-to-top, ic-breadcrumb, ic-chip[dismissible="true"], ic-footer-link, ic-link, ic-navigation-button,\n ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion, ic-date-input, ic-date-picker`));if(t.length>0){if(t[0].slot!==this.DIALOG_CONTROLS){t[0].setAttribute(this.DATA_GETS_FOCUS,"")}else if(!this.destructive){t[t.length-1].setAttribute(this.DATA_GETS_FOCUS,"")}}for(let i=0;i<t.length;i++){this.interactiveElementList.splice(1+i,0,t[i])}};this.getNextFocusEl=i=>this.interactiveElementList[i];this.onTabKeyPress=i=>{this.getFocusedElementIndex();if(this.interactiveElementList[this.focusedElementIndex].tagName===this.IC_SEARCH_BAR){return false}this.setFocusIndexBasedOnShiftKey(i);this.loopNextFocusIndexIfLastElement();this.focusElement(this.getNextFocusEl(this.focusedElementIndex),i);return true};this.shouldSkipElement=i=>{const t=getComputedStyle(i).visibility==="hidden"||i.offsetHeight===0||i.hasAttribute("disabled")||i.tagName===this.IC_ACCORDION_GROUP&&i.hasAttribute("single-expansion");const e=i.closest("ic-radio-option");return t||i.getAttribute("type")==="radio"&&!!e&&!(e.hasAttribute("selected")||i.tabIndex===0)};this.focusElement=(i,t=false)=>{let e=i;if(this.shouldSkipElement(i)){this.setFocusIndexBasedOnShiftKey(t);this.loopNextFocusIndexIfLastElement();e=this.getNextFocusEl(this.focusedElementIndex);this.focusElement(e,t)}else{switch(i.tagName){case this.IC_ACCORDION_GROUP:case this.IC_ACCORDION:case this.IC_SEARCH_BAR:case this.IC_TEXT_FIELD:case this.IC_CHECKBOX:case this.IC_TAB_CONTEXT:i.setFocus();break;default:i.focus()}}};this.renderDialog=()=>{const{hideDefaultControls:i,size:t,heading:a,label:o,destructive:r,dismissLabel:l,hideCloseButton:d,disableHeightConstraint:c,disableWidthConstraint:g,closeIconClick:b,DIALOG_CONTROLS:p}=this;const u=h(this.el,p);return e("dialog",{class:{dialog:true,[`${t}`]:true,"disable-height-constraint":!!c,"disable-width-constraint":!!g},"aria-labelledby":"dialog-label dialog-heading","aria-describedby":"dialog-alert dialog-content",ref:i=>this.dialogEl=i},e("div",{class:"heading-area"},e("div",{class:"heading-content"},e("div",{class:"label"},e("slot",{name:"label"},e("ic-typography",{variant:"label",id:"dialog-label"},o))),e("div",{class:"heading"},e("slot",{name:"heading"},e("ic-typography",{variant:"h4",id:"dialog-heading"},a)))),!d&&e("ic-button",{class:"close-icon",variant:"icon-tertiary",innerHTML:n,"aria-label":l,onClick:b,"data-gets-focus":r||i&&!u?"":null})),e("div",{class:"content-area"},h(this.el,"alert")&&e("slot",{name:"alert"}),e("div",{id:"dialog-content"},e("slot",null))),(u||!i)&&e("div",{class:{[p]:true}},u?e("slot",{name:p}):e(s,null,e("ic-button",{variant:"tertiary",onClick:()=>this.cancelDialog(),class:"dialog-control-button","data-gets-focus":null},"Cancel"),e("ic-button",{variant:r?"destructive":"primary",onClick:()=>this.confirmDialog(),class:"dialog-control-button","data-gets-focus":""},"Confirm"))))}}watchOpenHandler(){if(this.open){this.dialogOpened()}else{this.fadeIn=false;if(this.resizeObserver!==null){this.resizeObserver.disconnect()}setTimeout((()=>{var i,t;this.dialogRendered=false;(i=this.dialogEl)===null||i===void 0?void 0:i.close();(t=this.sourceElement)===null||t===void 0?void 0:t.focus();this.dialogHeight=0;this.icDialogClosed.emit()}),80)}}disconnectedCallback(){this.removeSlotChangeListener()}componentDidLoad(){this.getInteractiveElements();this.refreshInteractiveElementsOnSlotChange();if(this.open){this.dialogOpened()}!h(this.el,"heading")&&d([{prop:this.heading,propName:"heading"}],"Dialog")}componentDidRender(){document.body.style.overflow=getComputedStyle(this.el).display!=="none"&&this.disableHeightConstraint?"hidden":"auto"}handleKeyboard(i){if(this.dialogRendered){switch(i.key){case"Tab":if(this.onTabKeyPress(i.shiftKey)){i.preventDefault()}break;case"Escape":if(!i.repeat){this.open=false}i.stopImmediatePropagation();break}}}handleClick(i){if(this.dialogEl&&this.closeOnBackdropClick&&i.composedPath().indexOf(this.dialogEl)<=0){const{top:t,height:e,left:s,width:a}=this.dialogEl.getBoundingClientRect();const o=t<=i.clientY&&i.clientY<=t+e&&s<=i.clientX&&i.clientX<=s+a;if(!o){this.open=false}}}async cancelDialog(){this.icDialogCancelled.emit();this.open=false}async confirmDialog(){this.icDialogConfirmed.emit()}loopNextFocusIndexIfLastElement(){if(this.focusedElementIndex>this.interactiveElementList.length-1)this.focusedElementIndex=0;else if(this.focusedElementIndex<0){this.focusedElementIndex=this.interactiveElementList.length-1}}setFocusIndexBasedOnShiftKey(i){if(i){this.focusedElementIndex-=1}else{this.focusedElementIndex+=1}}render(){const{dialogRendered:i,disableHeightConstraint:t,fadeIn:s,theme:o}=this;return e(a,{key:"6de63d3d94afa349dc9bb5b30296837bbf89f810",class:{"ic-dialog-hidden":!i,"ic-dialog-fade-in":s,"disable-height-constraint":!!t,[`ic-theme-${o}`]:o!=="inherit"}},t?e("div",{class:"backdrop",ref:i=>this.backdropEl=i},this.renderDialog()):this.renderDialog())}get el(){return o(this)}static get watchers(){return{open:["watchOpenHandler"]}}};b.style=g;export{b as ic_dialog};
|
|
2
|
-
//# sourceMappingURL=p-e9d28e02.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["icDialogCss","IcDialogStyle0","Dialog","constructor","hostRef","this","contentAreaMutationObserver","DATA_GETS_FOCUS","DIALOG_CONTROLS","dialogHeight","focusedElementIndex","IC_TEXT_FIELD","IC_ACCORDION","IC_ACCORDION_GROUP","IC_CHECKBOX","IC_SEARCH_BAR","IC_TAB_CONTEXT","resizeObserver","dialogRendered","fadeIn","closeOnBackdropClick","destructive","dismissLabel","disableHeightConstraint","disableWidthConstraint","hideCloseButton","hideDefaultControls","open","size","theme","dialogOpened","_a","dialogEl","show","_b","showModal","setTimeout","backdropEl","scrollTop","setInitialFocus","checkResizeObserver","runResizeObserver","icDialogOpened","emit","ResizeObserver","clearTimeout","resizeTimeout","window","resizeObserverCallback","observe","clientHeight","refreshInteractiveElementsOnSlotChange","contentWrapper","el","shadowRoot","querySelector","contentArea","addEventListener","getInteractiveElements","MutationObserver","_c","getSlotElements","forEach","childList","subtree","removeSlotChangeListener","removeEventListener","disconnect","sourceElement","document","activeElement","interactiveElementList","findIndex","element","hasAttribute","focusElement","getFocusedElementIndex","i","length","closeIconClick","Array","from","querySelectorAll","slottedInteractiveElements","slot","setAttribute","splice","getNextFocusEl","onTabKeyPress","shiftKey","tagName","setFocusIndexBasedOnShiftKey","loopNextFocusIndexIfLastElement","shouldSkipElement","isHidden","getComputedStyle","visibility","offsetHeight","radioEl","closest","getAttribute","tabIndex","nextFocusEl","setFocus","focus","renderDialog","heading","label","controlsSlotUsed","isSlotUsed","h","class","dialog","ref","name","variant","id","innerHTML","closeIcon","onClick","Fragment","cancelDialog","confirmDialog","watchOpenHandler","close","icDialogClosed","disconnectedCallback","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","componentDidRender","body","style","overflow","display","handleKeyboard","ev","key","preventDefault","repeat","stopImmediatePropagation","handleClick","composedPath","indexOf","top","height","left","width","getBoundingClientRect","isInDialog","clientY","clientX","icDialogCancelled","icDialogConfirmed","render","Host"],"sources":["src/components/ic-dialog/ic-dialog.css?tag=ic-dialog&encapsulation=shadow","src/components/ic-dialog/ic-dialog.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-dialog: z-index of dialog \n */\n\n:host {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100% !important;\n background: rgb(0 0 0 / 60%);\n z-index: var(--ic-z-index-dialog);\n opacity: 0;\n}\n\n:host(.ic-dialog-fade-in) {\n opacity: 1;\n}\n\n:host(.disable-height-constraint) {\n background: none;\n justify-content: unset;\n align-items: unset;\n}\n\n.dialog.disable-height-constraint {\n max-height: none;\n position: relative;\n}\n\n.dialog.disable-height-constraint .content-area {\n overflow-y: visible;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n :host {\n transition: opacity var(--ic-easing-transition-slow);\n }\n\n .dialog {\n transform: translateY(-3rem);\n transition: transform 1000s;\n }\n\n :host(.ic-dialog-fade-in) .dialog {\n transform: translateY(0);\n transition: transform var(--ic-easing-transition-slow);\n }\n}\n\n:host(.ic-dialog-hidden) {\n display: none;\n}\n\n.dialog {\n background-color: var(--ic-dialog-background);\n color: var(--ic-dialog-text-primary);\n\n --ic-typography-color: var(--ic-dialog-text-primary);\n\n border: var(--ic-space-1px) solid var(--ic-dialog-border);\n border-radius: var(--ic-border-radius);\n padding: var(--ic-space-xs) 0 var(--ic-space-md);\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n overflow-x: visible;\n}\n\n.small {\n width: 50%;\n max-width: 25rem;\n min-height: 11rem;\n max-height: 70vh;\n}\n\n.medium {\n width: 70vw;\n max-width: 44rem;\n min-height: 12.5rem;\n max-height: 70vh;\n}\n\n.large {\n width: 90vw;\n max-width: 62.5rem;\n min-height: 12.5rem;\n max-height: 90vh;\n}\n\n.heading-area {\n display: flex;\n margin-bottom: var(--ic-space-xs);\n padding: 0 var(--ic-space-md);\n}\n\n.heading {\n overflow-wrap: break-word;\n}\n\n.close-icon {\n margin-left: auto;\n}\n\n.close-icon > svg {\n color: var(--ic-dialog-clear-button);\n}\n\n.content-area {\n padding: 0 var(--ic-space-md);\n margin: 0;\n overflow-y: auto;\n}\n\n#dialog-content {\n margin-bottom: var(--ic-space-sm);\n}\n\n#dialog-content ::slotted(ic-typography) {\n overflow-wrap: break-word;\n}\n\n#dialog-content ::slotted(*) {\n position: relative;\n}\n\n.dialog-controls {\n margin-top: auto;\n padding: var(--ic-space-xs) var(--ic-space-md) 0;\n display: flex;\n justify-content: flex-end;\n gap: var(--ic-space-md);\n}\n\n.dialog-control-button {\n width: fit-content;\n}\n\n.backdrop {\n overflow-y: auto;\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgb(0 0 0 / 60%);\n z-index: var(--ic-z-index-dialog);\n padding-top: 16px;\n padding-bottom: 16px;\n}\n\n.heading ic-typography {\n --ic-typography-color: var(--ic-dialog-text-primary);\n}\n\n.label ic-typography {\n --ic-typography-color: var(--ic-dialog-label);\n}\n\n@media (min-width: 800px) {\n :host([size=\"large\"]) .dialog:not(.disable-width-constraint) > .content-area {\n width: 75%;\n }\n}\n\n@media (max-width: 576px) {\n .dialog {\n width: 100vw;\n height: 100vh;\n max-width: none;\n max-height: none;\n box-sizing: border-box;\n }\n\n .backdrop {\n padding: 0;\n }\n\n .dialog.disable-height-constraint {\n height: auto;\n min-height: 100vh;\n }\n}\n\n@media (max-width: 364px) {\n .dialog-control-button {\n width: unset;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Method,\n Listen,\n Watch,\n h,\n Fragment,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport {\n isSlotUsed,\n checkResizeObserver,\n onComponentRequiredPropUndefined,\n getSlotElements,\n} from \"../../utils/helpers\";\nimport { IcFocusableComponents, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot dialog-controls - Content will be place at the bottom of the dialog.\n * @slot heading - Content will be placed at the top of the dialog.\n * @slot label - Content will be placed above the dialog heading.\n * @slot alert - Content will be placed at the top of the content area of the dialog.\n */\n@Component({\n tag: \"ic-dialog\",\n styleUrl: \"ic-dialog.css\",\n shadow: true,\n})\nexport class Dialog {\n private backdropEl?: HTMLDivElement;\n private contentArea: HTMLSlotElement | null;\n private contentAreaMutationObserver: MutationObserver | null = null;\n private DATA_GETS_FOCUS: string = \"data-gets-focus\";\n private DIALOG_CONTROLS: string = \"dialog-controls\";\n private dialogEl?: HTMLDialogElement;\n private dialogHeight: number = 0;\n private focusedElementIndex = 0;\n private IC_TEXT_FIELD: string = \"IC-TEXT-FIELD\";\n private IC_ACCORDION: string = \"IC-ACCORDION\";\n private IC_ACCORDION_GROUP: string = \"IC-ACCORDION-GROUP\";\n private IC_CHECKBOX = \"IC-CHECKBOX\";\n private IC_SEARCH_BAR: string = \"IC-SEARCH-BAR\";\n private IC_TAB_CONTEXT: string = \"IC-TAB-CONTEXT\";\n private interactiveElementList: HTMLElement[];\n private resizeObserver: ResizeObserver | null = null;\n private resizeTimeout: number;\n private sourceElement: HTMLElement;\n\n @Element() el: HTMLIcDialogElement;\n\n @State() dialogRendered: boolean = false;\n @State() fadeIn: boolean = false;\n\n /**\n * If set to `false`, the dialog will not close when the backdrop is clicked.\n */\n @Prop() closeOnBackdropClick?: boolean = true;\n\n /**\n * If 'true', sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.\n */\n @Prop() destructive?: boolean = false;\n\n /**\n * Sets the dismiss label tooltip and aria label.\n */\n @Prop() dismissLabel?: string = \"Dismiss\";\n\n /**\n * If set to `true`, the content area max height and overflow properties are removed allowing the dialog to stretch below the fold.\n * This prop also prevents popover elements from being cut off within the content area.\n */\n @Prop() disableHeightConstraint?: boolean = false;\n\n /**\n * If set to `true`, the content area width property is removed, allowing content to take the full width of the dialog when using the large variant.\n */\n @Prop() disableWidthConstraint?: boolean = false;\n\n /**\n * If `true`, the close button will not be displayed.\n */\n @Prop() hideCloseButton?: boolean = false;\n\n /**\n * If set to `true`, default button controls will not be shown, but slotted dialog controls will still be displayed.\n */\n @Prop() hideDefaultControls: boolean = false;\n\n /**\n * Sets the heading for the dialog.\n */\n @Prop() heading?: string;\n\n /**\n * Sets the optional label for the dialog which appears above the heading.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the dialog will be displayed.\n */\n @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n if (this.open) {\n this.dialogOpened();\n } else {\n this.fadeIn = false;\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n setTimeout(() => {\n this.dialogRendered = false;\n this.dialogEl?.close();\n this.sourceElement?.focus();\n this.dialogHeight = 0;\n this.icDialogClosed.emit();\n }, 80);\n }\n }\n\n /**\n * Sets the maximum and minimum height and width for the dialog.\n */\n @Prop() size?: \"small\" | \"medium\" | \"large\" = \"small\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called.\n */\n @Event() icDialogCancelled: EventEmitter<void>;\n\n /**\n * Emitted when dialog has closed.\n */\n @Event() icDialogClosed: EventEmitter<void>;\n\n /**\n * Confirmation event emitted when default 'Confirm' primary button clicked or 'confirmDialog' method is called.\n */\n @Event() icDialogConfirmed: EventEmitter<void>;\n\n /**\n * Emitted when dialog has opened.\n */\n @Event() icDialogOpened: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.removeSlotChangeListener();\n }\n\n componentDidLoad(): void {\n this.getInteractiveElements();\n\n this.refreshInteractiveElementsOnSlotChange();\n\n if (this.open) {\n this.dialogOpened();\n }\n\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Dialog\"\n );\n }\n\n componentDidRender(): void {\n document.body.style.overflow =\n getComputedStyle(this.el).display !== \"none\" &&\n this.disableHeightConstraint\n ? \"hidden\"\n : \"auto\";\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyboard(ev: KeyboardEvent): void {\n if (this.dialogRendered) {\n switch (ev.key) {\n case \"Tab\":\n if (this.onTabKeyPress(ev.shiftKey)) {\n ev.preventDefault();\n }\n break;\n case \"Escape\":\n if (!ev.repeat) {\n this.open = false;\n }\n ev.stopImmediatePropagation();\n break;\n }\n }\n }\n\n @Listen(\"click\", {})\n handleClick(ev: MouseEvent): void {\n if (\n this.dialogEl &&\n this.closeOnBackdropClick &&\n ev.composedPath().indexOf(this.dialogEl) <= 0\n ) {\n const { top, height, left, width } =\n this.dialogEl.getBoundingClientRect();\n const isInDialog =\n top <= ev.clientY &&\n ev.clientY <= top + height &&\n left <= ev.clientX &&\n ev.clientX <= left + width;\n if (!isInDialog) {\n this.open = false;\n }\n }\n }\n\n /**\n * Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.\n */\n @Method()\n async cancelDialog(): Promise<void> {\n this.icDialogCancelled.emit();\n this.open = false;\n }\n\n /**\n * Confirms the dialog. Used by the default 'Confirm' button or can be called manually to trigger confirming of dialog.\n */\n @Method()\n async confirmDialog(): Promise<void> {\n this.icDialogConfirmed.emit();\n }\n\n private dialogOpened = () => {\n this.dialogRendered = true;\n\n if (this.disableHeightConstraint) {\n this.dialogEl?.show();\n } else {\n this.dialogEl?.showModal();\n }\n\n setTimeout(() => {\n this.fadeIn = true;\n\n /**\n * This is required to set scroll back to top if:\n * - dialog content goes below the fold\n * - is closed using cancel or confirm and reopened.\n *\n * Without this, the scroll bar will start from the dialog's last scroll-x coordinate.\n */\n if (\n this.backdropEl &&\n this.disableHeightConstraint &&\n this.backdropEl.scrollTop !== 0\n ) {\n this.backdropEl.scrollTop = 0;\n }\n }, 10);\n\n setTimeout(() => {\n this.setInitialFocus();\n checkResizeObserver(this.runResizeObserver);\n }, 75);\n\n setTimeout(() => {\n this.icDialogOpened.emit();\n }, 80);\n };\n\n private runResizeObserver = () => {\n if (this.dialogEl) {\n this.resizeObserver = new ResizeObserver(() => {\n clearTimeout(this.resizeTimeout);\n this.resizeTimeout = window.setTimeout(this.resizeObserverCallback, 80);\n });\n this.resizeObserver.observe(this.dialogEl);\n }\n };\n\n private resizeObserverCallback = () => {\n if (this.dialogEl && this.dialogEl.clientHeight !== this.dialogHeight) {\n this.dialogHeight = this.dialogEl.clientHeight;\n }\n };\n\n private refreshInteractiveElementsOnSlotChange = () => {\n const contentWrapper = this.el.shadowRoot?.querySelector(\"#dialog-content\");\n\n if (contentWrapper) {\n this.contentArea = contentWrapper.querySelector(\"slot\");\n\n // Detect changes to slotted elements\n this.contentArea?.addEventListener(\n \"slotchange\",\n this.getInteractiveElements\n );\n\n this.contentAreaMutationObserver = new MutationObserver(() => {\n this.getInteractiveElements();\n });\n\n // Detect changes to children of slotted elements\n getSlotElements(contentWrapper)?.forEach((el) => {\n this.contentAreaMutationObserver?.observe(el, {\n childList: true,\n subtree: true,\n });\n });\n }\n };\n\n private removeSlotChangeListener = () => {\n if (this.contentArea) {\n this.contentArea.removeEventListener(\n \"slotchange\",\n this.getInteractiveElements\n );\n\n this.contentAreaMutationObserver?.disconnect();\n }\n };\n\n private setInitialFocus = () => {\n this.sourceElement = document.activeElement as HTMLElement;\n this.focusedElementIndex = this.interactiveElementList\n ? this.interactiveElementList.findIndex((element) =>\n element.hasAttribute(this.DATA_GETS_FOCUS)\n )\n : 0;\n this.focusElement(this.interactiveElementList[this.focusedElementIndex]);\n };\n\n private getFocusedElementIndex = () => {\n for (let i = 0; i < this.interactiveElementList.length; i++) {\n if (\n (this.interactiveElementList[i] as HTMLElement) ===\n (this.el.shadowRoot?.activeElement || document.activeElement)\n ) {\n this.focusedElementIndex = i;\n }\n }\n };\n\n private closeIconClick = () => {\n this.open = false;\n };\n\n private getInteractiveElements = () => {\n this.interactiveElementList = Array.from(\n this.el.shadowRoot?.querySelectorAll(\"ic-button\") || []\n );\n const slottedInteractiveElements = Array.from(\n this.el.querySelectorAll(\n `a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex=\"-1\"]),\n ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-context,\n ic-back-to-top, ic-breadcrumb, ic-chip[dismissible=\"true\"], ic-footer-link, ic-link, ic-navigation-button,\n ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion, ic-date-input, ic-date-picker`\n )\n );\n if (slottedInteractiveElements.length > 0) {\n if (slottedInteractiveElements[0].slot !== this.DIALOG_CONTROLS) {\n slottedInteractiveElements[0].setAttribute(this.DATA_GETS_FOCUS, \"\");\n } else if (!this.destructive) {\n slottedInteractiveElements[\n slottedInteractiveElements.length - 1\n ].setAttribute(this.DATA_GETS_FOCUS, \"\");\n }\n }\n for (let i = 0; i < slottedInteractiveElements.length; i++) {\n this.interactiveElementList.splice(\n 1 + i,\n 0,\n slottedInteractiveElements[i] as HTMLElement\n );\n }\n };\n\n private getNextFocusEl = (focusedElementIndex: number) =>\n this.interactiveElementList[focusedElementIndex];\n\n private onTabKeyPress = (shiftKey: boolean): boolean => {\n this.getFocusedElementIndex();\n\n if (\n this.interactiveElementList[this.focusedElementIndex].tagName ===\n this.IC_SEARCH_BAR\n ) {\n return false;\n }\n\n this.setFocusIndexBasedOnShiftKey(shiftKey);\n this.loopNextFocusIndexIfLastElement();\n\n this.focusElement(this.getNextFocusEl(this.focusedElementIndex), shiftKey);\n return true;\n };\n\n private shouldSkipElement = (element: HTMLElement): boolean => {\n const isHidden =\n getComputedStyle(element).visibility === \"hidden\" ||\n element.offsetHeight === 0 ||\n element.hasAttribute(\"disabled\") ||\n (element.tagName === this.IC_ACCORDION_GROUP &&\n element.hasAttribute(\"single-expansion\"));\n\n const radioEl = element.closest(\"ic-radio-option\");\n\n return (\n isHidden ||\n (element.getAttribute(\"type\") === \"radio\" &&\n !!radioEl &&\n !(radioEl.hasAttribute(\"selected\") || element.tabIndex === 0))\n );\n };\n\n private focusElement = (element: HTMLElement, shiftKey = false) => {\n let nextFocusEl = element;\n\n if (this.shouldSkipElement(element)) {\n this.setFocusIndexBasedOnShiftKey(shiftKey);\n this.loopNextFocusIndexIfLastElement();\n\n nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);\n this.focusElement(nextFocusEl, shiftKey);\n } else {\n switch (element.tagName) {\n case this.IC_ACCORDION_GROUP:\n case this.IC_ACCORDION:\n case this.IC_SEARCH_BAR:\n case this.IC_TEXT_FIELD:\n case this.IC_CHECKBOX:\n case this.IC_TAB_CONTEXT:\n (element as IcFocusableComponents).setFocus();\n break;\n default:\n (element as HTMLElement).focus();\n }\n }\n };\n\n private loopNextFocusIndexIfLastElement() {\n if (this.focusedElementIndex > this.interactiveElementList.length - 1)\n this.focusedElementIndex = 0;\n else if (this.focusedElementIndex < 0) {\n this.focusedElementIndex = this.interactiveElementList.length - 1;\n }\n }\n\n private setFocusIndexBasedOnShiftKey(shiftKey: boolean) {\n if (shiftKey) {\n this.focusedElementIndex -= 1;\n } else {\n this.focusedElementIndex += 1;\n }\n }\n\n private renderDialog = () => {\n const {\n hideDefaultControls,\n size,\n heading,\n label,\n destructive,\n dismissLabel,\n hideCloseButton,\n disableHeightConstraint,\n disableWidthConstraint,\n closeIconClick,\n DIALOG_CONTROLS,\n } = this;\n\n const controlsSlotUsed = isSlotUsed(this.el, DIALOG_CONTROLS);\n\n return (\n <dialog\n class={{\n dialog: true,\n [`${size}`]: true,\n \"disable-height-constraint\": !!disableHeightConstraint,\n \"disable-width-constraint\": !!disableWidthConstraint,\n }}\n aria-labelledby=\"dialog-label dialog-heading\"\n aria-describedby=\"dialog-alert dialog-content\"\n ref={(el) => (this.dialogEl = el)}\n >\n <div class=\"heading-area\">\n <div class=\"heading-content\">\n <div class=\"label\">\n <slot name=\"label\">\n <ic-typography variant=\"label\" id=\"dialog-label\">\n {label}\n </ic-typography>\n </slot>\n </div>\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography variant=\"h4\" id=\"dialog-heading\">\n {heading}\n </ic-typography>\n </slot>\n </div>\n </div>\n {!hideCloseButton && (\n <ic-button\n class=\"close-icon\"\n variant=\"icon-tertiary\"\n innerHTML={closeIcon}\n aria-label={dismissLabel}\n onClick={closeIconClick}\n data-gets-focus={\n destructive || (hideDefaultControls && !controlsSlotUsed)\n ? \"\"\n : null\n }\n ></ic-button>\n )}\n </div>\n <div class=\"content-area\">\n {isSlotUsed(this.el, \"alert\") && <slot name=\"alert\" />}\n <div id=\"dialog-content\">\n <slot />\n </div>\n </div>\n {(controlsSlotUsed || !hideDefaultControls) && (\n <div\n class={{\n [DIALOG_CONTROLS]: true,\n }}\n >\n {controlsSlotUsed ? (\n <slot name={DIALOG_CONTROLS} />\n ) : (\n <Fragment>\n <ic-button\n variant=\"tertiary\"\n onClick={() => this.cancelDialog()}\n class=\"dialog-control-button\"\n data-gets-focus={null}\n >\n Cancel\n </ic-button>\n <ic-button\n variant={destructive ? \"destructive\" : \"primary\"}\n onClick={() => this.confirmDialog()}\n class=\"dialog-control-button\"\n data-gets-focus=\"\"\n >\n Confirm\n </ic-button>\n </Fragment>\n )}\n </div>\n )}\n </dialog>\n );\n };\n\n render() {\n const { dialogRendered, disableHeightConstraint, fadeIn, theme } = this;\n\n return (\n <Host\n class={{\n \"ic-dialog-hidden\": !dialogRendered,\n \"ic-dialog-fade-in\": fadeIn,\n \"disable-height-constraint\": !!disableHeightConstraint,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n {disableHeightConstraint ? (\n <div class=\"backdrop\" ref={(el) => (this.backdropEl = el)}>\n {this.renderDialog()}\n </div>\n ) : (\n this.renderDialog()\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,h as r,H as i,g as t}from"./p-8e4e97b4.js";import{C as c}from"./p-3b185c32.js";import{u as a,i as o}from"./p-b57e59b7.js";import"./p-bddf799a.js";const s=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>\n</svg>\n`;const n=':host{display:block;margin:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}:host .breadcrumb{display:flex;align-items:center;white-space:nowrap;gap:var(--ic-space-xs);min-height:var(--ic-space-lg)}:host .chevron{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host .chevron svg,:host(.ic-breadcrumb-monochrome) .chevron svg{color:var(--ic-breadcrumb-icon-chevron)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-breadcrumb-icon)}:host(.ic-breadcrumb-monochrome) .back-icon svg{color:var(--ic-breadcrumb-icon-monochrome)}:host(.ic-breadcrumb-back){display:flex;align-items:center}:host(.ic-breadcrumb-back) .chevron{display:none}ic-link{--breadcrumb-link-display:inline-flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current="page"]){cursor:text}:host([aria-current="page"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs);color:var(--ic-breadcrumb-text)}:host([aria-current="page"].ic-breadcrumb-monochrome) .current-page-container{color:var(--ic-breadcrumb-text-monochrome)}:host([aria-current="page"]) slot{pointer-events:none}:host(.collapsed-breadcrumb-wrapper){margin-right:var(--ic-space-xs) !important;display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb){border:none;background-color:transparent;color:var(--ic-color-hyperlink-default);text-decoration:underline;font-weight:var(--ic-font-weight-bold);cursor:pointer}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){outline:var(--ic-hc-focus-outline);border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}.slotted-link-container{gap:var(--ic-space-xs);display:flex}.slotted-link-container .back-icon{width:1.5rem;height:1.5rem}.slotted-link-container .link-wrapper{line-height:1.5rem}@media (forced-colors: active){.back-icon svg{color:currentcolor}}@supports (text-underline-offset: 25%){ic-link{--breadcrumb-link-display:flex}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}';const l=n;const d=class{constructor(i){e(this,i);this.HREF_ATTR="href";this.linkSlotContent=null;this.slottedLinkEl=null;this.slottedLinkHref=null;this.current=false;this.monochrome=false;this.showBackIcon=false;this.theme="inherit";this.updatedSlottedLinkFocus=()=>{var e,r;if(this.linkSlotContent){this.linkSlotContent.tabIndex=this.current?-1:0}if(this.current){(e=this.slottedLinkEl)===null||e===void 0?void 0:e.removeAttribute(this.HREF_ATTR)}else if(this.slottedLinkHref){(r=this.slottedLinkEl)===null||r===void 0?void 0:r.setAttribute(this.HREF_ATTR,this.slottedLinkHref)}};this.getSlottedLinkEl=()=>{if(!this.linkSlotContent)return null;return this.linkSlotContent.hasAttribute(this.HREF_ATTR)?this.linkSlotContent:this.linkSlotContent.querySelector("[href]")};this.renderBackIcon=()=>r("div",{class:"back-icon",innerHTML:s})}watchCurrentHandler(){this.updatedSlottedLinkFocus();this.el.ariaCurrent=this.current?"page":null}componentDidLoad(){var e,r;const i=(e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector(".link-wrapper");if(i){const e=a(i);if(e){this.linkSlotContent=e[0];this.slottedLinkEl=this.getSlottedLinkEl();this.slottedLinkHref=((r=this.slottedLinkEl)===null||r===void 0?void 0:r.getAttribute("href"))||null}this.updatedSlottedLinkFocus()}}componentWillRender(){const e=this.el.querySelector("ic-link");if(e){const r="current-page";e.classList.remove(r);if(this.current&&!e.classList.contains(r)){e.classList.add("breadcrumb-link",r)}}}async setFocus(){var e,r;(r=(e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector("ic-link"))===null||r===void 0?void 0:r.focus()}render(){const{current:e,href:t,monochrome:a,pageTitle:s,showBackIcon:n,theme:l}=this;const d=`${s===null||s===void 0?void 0:s.toLowerCase().replace(" ","-")}-describedby`;return r(i,{key:"2c1131138a8be3af8ee344e0fbff5594fbcc2d77",class:{"ic-breadcrumb-back":n,"ic-breadcrumb-monochrome":a,[`ic-theme-${l}`]:l!=="inherit"},"aria-current":e&&"page",role:"listitem"},r("div",{key:"ee77a3aeced7063c4dbab6e1641daf11242d63ca",class:"breadcrumb"},r("span",{key:"1c2dc66e95e0676a381ab25769aa1b735ee5b9c5",innerHTML:c,class:"chevron","aria-hidden":"true"}),n&&r("span",{key:"3857c2967dd82b45a2400107e50d6f03bc65cdde",id:d,class:"hide"},`Back to ${s}`),!t?r("div",{class:"slotted-link-container"},n&&this.renderBackIcon(),r("span",{class:"link-wrapper"},r("slot",null))):e?r("span",{class:"current-page-container"},o(this.el,"icon")&&r("slot",{name:"icon"}),s):r("ic-link",{theme:l,monochrome:a,href:t,class:"breadcrumb-link","aria-describedby":n&&d},n&&this.renderBackIcon(),o(this.el,"icon")&&r("slot",{name:"icon"}),s)))}static get delegatesFocus(){return true}get el(){return t(this)}static get watchers(){return{current:["watchCurrentHandler"]}}};d.style=l;export{d as ic_breadcrumb};
|
|
2
|
-
//# sourceMappingURL=p-eb0e7153.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["icBreadcrumbCss","IcBreadcrumbStyle0","Breadcrumb","constructor","hostRef","this","HREF_ATTR","linkSlotContent","slottedLinkEl","slottedLinkHref","current","monochrome","showBackIcon","theme","updatedSlottedLinkFocus","tabIndex","_a","removeAttribute","_b","setAttribute","getSlottedLinkEl","hasAttribute","querySelector","renderBackIcon","h","class","innerHTML","backIcon","watchCurrentHandler","el","ariaCurrent","componentDidLoad","slottedLinkWrapper","shadowRoot","slotEls","getSlotElements","getAttribute","componentWillRender","icLink","CURRENT_PAGE","classList","remove","contains","add","setFocus","focus","render","href","pageTitle","describedById","toLowerCase","replace","Host","key","role","chevronIcon","id","isSlotUsed","name"],"sources":["src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"sourcesContent":[":host {\n display: block;\n margin: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n:host .breadcrumb {\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: var(--ic-space-xs);\n min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host .chevron svg,\n:host(.ic-breadcrumb-monochrome) .chevron svg {\n color: var(--ic-breadcrumb-icon-chevron);\n}\n\n:host(:first-child) .chevron {\n display: none;\n}\n\n.back-icon svg {\n color: var(--ic-breadcrumb-icon);\n}\n\n:host(.ic-breadcrumb-monochrome) .back-icon svg {\n color: var(--ic-breadcrumb-icon-monochrome);\n}\n\n:host(.ic-breadcrumb-back) {\n display: flex;\n align-items: center;\n}\n\n:host(.ic-breadcrumb-back) .chevron {\n display: none;\n}\n\nic-link {\n --breadcrumb-link-display: inline-flex;\n --breadcrumb-link-align-items: center;\n --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) {\n cursor: text;\n}\n\n:host([aria-current=\"page\"]) .current-page-container {\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n color: var(--ic-breadcrumb-text);\n}\n\n:host([aria-current=\"page\"].ic-breadcrumb-monochrome) .current-page-container {\n color: var(--ic-breadcrumb-text-monochrome);\n}\n\n:host([aria-current=\"page\"]) slot {\n pointer-events: none;\n}\n\n:host(.collapsed-breadcrumb-wrapper) {\n margin-right: var(--ic-space-xs) !important;\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb) {\n border: none;\n background-color: transparent;\n color: var(--ic-color-hyperlink-default);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n cursor: pointer;\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n outline: var(--ic-hc-focus-outline);\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n display: none;\n}\n\n.slotted-link-container {\n gap: var(--ic-space-xs);\n display: flex;\n}\n\n.slotted-link-container .back-icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.slotted-link-container .link-wrapper {\n line-height: 1.5rem;\n}\n\n@media (forced-colors: active) {\n .back-icon svg {\n color: currentcolor;\n }\n}\n\n@supports (text-underline-offset: 25%) {\n ic-link {\n --breadcrumb-link-display: flex;\n }\n\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n","import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Method,\n Watch,\n} from \"@stencil/core\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { getSlotElements, isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be rendered to the left of the breadcrumb page title.\n */\n@Component({\n tag: \"ic-breadcrumb\",\n styleUrl: \"ic-breadcrumb.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Breadcrumb {\n private HREF_ATTR = \"href\";\n private linkSlotContent: HTMLElement | null = null;\n private slottedLinkEl: HTMLElement | null = null;\n private slottedLinkHref: string | null = null;\n\n @Element() el: HTMLIcBreadcrumbElement;\n\n /**\n * If `true`, aria-current will be set on the breadcrumb.\n */\n @Prop() current = false;\n @Watch(\"current\")\n watchCurrentHandler(): void {\n this.updatedSlottedLinkFocus();\n this.el.ariaCurrent = this.current ? \"page\" : null;\n }\n\n /**\n * The URL that the breadcrumb link points to.\n */\n @Prop() href?: string;\n\n /**\n * @internal If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.\n */\n @Prop() monochrome = false;\n\n /**\n * The title of the breadcrumb.\n */\n @Prop() pageTitle!: string;\n\n /**\n * @internal If `true`, back icon will be displayed.\n */\n @Prop({ reflect: true }) showBackIcon = false;\n\n /**\n * @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme: IcThemeMode = \"inherit\";\n\n // Prevent focus on breadcrumb if current page and contains slotted link\n private updatedSlottedLinkFocus = () => {\n // Sets tabindex on wrong element in unit test snapshots\n // - related to known Jest issue: https://github.com/ionic-team/stencil/issues/2830\n if (this.linkSlotContent) {\n this.linkSlotContent.tabIndex = this.current ? -1 : 0; // Prevent focus\n }\n\n if (this.current) {\n this.slottedLinkEl?.removeAttribute(this.HREF_ATTR); // Prevent screen reader announcing breadcrumb as a link\n } else if (this.slottedLinkHref) {\n this.slottedLinkEl?.setAttribute(this.HREF_ATTR, this.slottedLinkHref);\n }\n };\n\n private getSlottedLinkEl = () => {\n if (!this.linkSlotContent) return null;\n\n return this.linkSlotContent.hasAttribute(this.HREF_ATTR)\n ? this.linkSlotContent\n : this.linkSlotContent.querySelector<HTMLElement>(\"[href]\");\n };\n\n componentDidLoad(): void {\n const slottedLinkWrapper =\n this.el.shadowRoot?.querySelector(\".link-wrapper\");\n\n if (slottedLinkWrapper) {\n const slotEls = getSlotElements(slottedLinkWrapper);\n if (slotEls) {\n this.linkSlotContent = slotEls[0] as HTMLElement;\n this.slottedLinkEl = this.getSlottedLinkEl();\n this.slottedLinkHref = this.slottedLinkEl?.getAttribute(\"href\") || null;\n }\n this.updatedSlottedLinkFocus();\n }\n }\n\n componentWillRender(): void {\n const icLink = this.el.querySelector(\"ic-link\");\n if (icLink) {\n const CURRENT_PAGE = \"current-page\";\n icLink.classList.remove(CURRENT_PAGE);\n\n if (this.current && !icLink.classList.contains(CURRENT_PAGE)) {\n icLink.classList.add(\"breadcrumb-link\", CURRENT_PAGE);\n }\n }\n }\n\n /**\n * Sets focus on the breadcrumb.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot?.querySelector(\"ic-link\")?.focus();\n }\n\n private renderBackIcon = () => (\n <div class=\"back-icon\" innerHTML={backIcon}></div>\n );\n\n render() {\n const { current, href, monochrome, pageTitle, showBackIcon, theme } = this;\n const describedById = `${pageTitle\n ?.toLowerCase()\n .replace(\" \", \"-\")}-describedby`;\n\n return (\n <Host\n class={{\n \"ic-breadcrumb-back\": showBackIcon,\n \"ic-breadcrumb-monochrome\": monochrome,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n aria-current={current && \"page\"}\n role=\"listitem\"\n >\n <div class=\"breadcrumb\">\n <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n {showBackIcon && (\n <span\n id={describedById}\n class=\"hide\"\n >{`Back to ${pageTitle}`}</span>\n )}\n {!href ? (\n <div class=\"slotted-link-container\">\n {showBackIcon && this.renderBackIcon()}\n <span class=\"link-wrapper\">\n <slot />\n </span>\n </div>\n ) : current ? (\n <span class=\"current-page-container\">\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </span>\n ) : (\n <ic-link\n theme={theme}\n monochrome={monochrome}\n href={href}\n class=\"breadcrumb-link\"\n aria-describedby={showBackIcon && describedById}\n >\n {showBackIcon && this.renderBackIcon()}\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </ic-link>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,H as o,g as r}from"./p-8e4e97b4.js";import{e as s,r as n,o as a,i as c}from"./p-b57e59b7.js";import{C as u}from"./p-c2e091d7.js";import{C as l}from"./p-3b185c32.js";import"./p-bddf799a.js";const p='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host ::part(button){color:var(--ic-popover-menu-item-check);--ic-typography-color:var(--ic-popover-menu-item-check);padding:calc(var(--ic-space-xxxs) / 2);display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:0;min-height:2.5rem;height:auto}.focus-border{display:flex;align-items:flex-start;gap:var(--ic-space-xs);border-radius:var(--ic-border-radius);margin:calc(var(--ic-space-xxxs) / 2);padding:var(--ic-space-xxs);border:var(--ic-space-xxxs) dashed transparent;--icon-height:auto}:host(.ic-menu-item-disabled) ::part(button){color:var(--ic-popover-menu-item-check-disabled) !important;--ic-typography-color:var(--ic-popover-menu-item-check-disabled) !important;pointer-events:none}:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-disabled) !important}:host([variant="destructive"]) ::part(button){color:var(--ic-popover-menu-destructive-item-icon);--ic-typography-color:var(--ic-popover-menu-destructive-item-label)}:host ::part(button):hover{background-color:var(--ic-popover-background-hover)}:host ::part(button):focus-visible,:host ::part(button):focus{color:var(--ic-popover-menu-item-icon-focused);--ic-typography-color:purple;background-color:var(--ic-popover-background-focus);box-shadow:none}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{color:var(--ic-popover-menu-item-icon-disabled) !important;--ic-typography-color:orange !important}:host([variant="destructive"]) ::part(button):focus-visible,:host([variant="destructive"]) ::part(button):focus{background-color:var(--ic-popover-destructive-background-focus)}ic-button:focus-within .menu-item-label,ic-button:focus-within .shortcut,ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-focused)}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:var(--ic-popover-menu-border)}:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-label-disabled) !important}:host ::part(button):active{background-color:var(--ic-popover-background-pressed);color:var(--ic-popover-menu-item-label) !important;--ic-typography-color:var(--ic-popover-menu-item-label) !important}:host([variant="destructive"]) ::part(button):active{background-color:var(--ic-popover-background-pressed);color:var(--ic-popover-menu-destructive-item-label) !important;--ic-typography-color:var(\n --ic-popover-menu-destructive-item-label\n ) !important}.menu-item-info{display:flex;flex-direction:column;flex:1;align-items:baseline;white-space:pre-line;text-align:left}.menu-labels{display:flex;align-items:baseline;gap:var(--ic-space-xs)}.menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-description)}.shortcut{--ic-typography-color:var(--ic-popover-menu-item-shortcut);display:flex;flex:min-content}:host([variant="destructive"]) .menu-item-label{text-transform:uppercase;font-weight:600;letter-spacing:0.025em}ic-button:active .menu-item-label{--ic-typography-color:var(--ic-popover-menu-item-label)}ic-button:active .menu-item-description{--ic-typography-color:var(--ic-popover-menu-item-description)}ic-button:active .shortcut{--ic-typography-color:var(--ic-popover-menu-item-shortcut)}:host([variant="destructive"]) ic-button:active .menu-item-label{--ic-typography-color:var(\n --ic-popover-menu-destructive-item-label\n ) !important}.icon,.check-icon,.submenu-icon,.icon ::slotted(svg),.check-icon svg,.submenu-icon svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.check-icon.hide{visibility:hidden}@media (forced-colors: active){:host ::part(button){border:canvas}:host ::part(button):focus-visible{outline:var(--ic-space-xxxs) solid transparent}.focus-border{border-color:canvas}:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border{border-color:GrayText}:host(.ic-menu-item-disabled) .menu-item-info,:host(.ic-menu-item-disabled) .menu-item-label,:host(.ic-menu-item-disabled) .shortcut,:host(.ic-menu-item-disabled) .menu-item-description,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description{--ic-typography-color:GrayText !important}:host(.ic-menu-item-disabled) ::part(button):focus-visible,:host(.ic-menu-item-disabled) ::part(button):focus{outline-color:GrayText !important}}';const m=p;const d=class{constructor(i){t(this,i);this.childBlur=e(this,"childBlur",7);this.handleMenuItemClick=e(this,"handleMenuItemClick",7);this.icToggleChecked=e(this,"icToggleChecked",7);this.triggerPopoverMenuInstance=e(this,"triggerPopoverMenuInstance",7);this.checked=false;this.disabled=false;this.variant="default";this.handleClick=t=>{if(s(this.submenuTriggerFor)){this.triggerPopoverMenuInstance.emit()}else if(this.variant==="toggle"){t.preventDefault();this.checked=!this.checked;this.icToggleChecked.emit({checked:this.checked})}this.handleMenuItemClick.emit(this.el)};this.getMenuItemAriaLabel=()=>{let t=this.label;if(s(this.description)){t=`${t}, ${this.description}`}if(s(this.keyboardShortcutLabel)){t=`${t}, ${this.keyboardShortcutLabel}`}if(this.variant==="destructive"){t=`${t}, destructive`}if(s(this.submenuTriggerFor)){t=`${t}, triggers submenu`}if(this.el.classList.contains("ic-popover-submenu-back-button")){t="Go back to parent menu"}const e=this.el.parentElement;if(e&&e.tagName==="IC-MENU-GROUP"&&e.label){return`${t}, ${e.label} menu group`}else{return t}}}watchDisabledHandler(){n(this.disabled,this.el)}componentWillLoad(){if(s(this.submenuTriggerFor)&&this.variant!=="default"){this.variant="default"}n(this.disabled,this.el)}componentDidLoad(){a([{prop:this.label,propName:"label"}],"Menu Item")}handleHostClick(t){if(this.disabled){t.stopImmediatePropagation()}}render(){const t=()=>i("div",{class:"menu-item-info"},i("div",{class:"menu-labels"},i("ic-typography",{class:"menu-item-label"},this.label),this.keyboardShortcutLabel&&i("ic-typography",{variant:"caption",class:"shortcut"},this.keyboardShortcutLabel)),this.description&&i("ic-typography",{class:"menu-item-description",variant:"caption"},this.description));return i(o,{class:{["ic-menu-item-disabled"]:!!this.disabled}},i("ic-button",{fullWidth:true,variant:"tertiary",onClick:this.handleClick,href:s(this.href),hreflang:s(this.hreflang),target:s(this.target),rel:s(this.rel),referrerpolicy:this.referrerpolicy,role:this.variant==="toggle"?"menuitemcheckbox":"menuitem","aria-disabled":`${this.disabled}`,"aria-checked":this.variant==="toggle"?this.checked?"true":"false":undefined,"aria-label":this.getMenuItemAriaLabel(),"aria-haspopup":s(this.submenuTriggerFor)||this.el.classList.contains("ic-popover-submenu-back-button")?"menu":false},i("div",{class:"focus-border"},c(this.el,"icon")&&i("span",{class:"icon"},i("slot",{name:"icon"})),i(t,null),this.variant==="toggle"&&i("span",{class:{["check-icon"]:true,["hide"]:!this.checked},"aria-hidden":"true",innerHTML:u}),s(this.submenuTriggerFor)&&i("span",{class:{["submenu-icon"]:true},"aria-hidden":"true",innerHTML:l}))))}static get delegatesFocus(){return true}get el(){return r(this)}static get watchers(){return{disabled:["watchDisabledHandler"]}}};d.style=m;export{d as ic_menu_item};
|
|
2
|
-
//# sourceMappingURL=p-f609ca37.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["icMenuItemCss","IcMenuItemStyle0","MenuItem","constructor","hostRef","this","checked","disabled","variant","handleClick","e","isPropDefined","submenuTriggerFor","triggerPopoverMenuInstance","emit","preventDefault","icToggleChecked","handleMenuItemClick","el","getMenuItemAriaLabel","ariaLabel","label","description","keyboardShortcutLabel","classList","contains","parentEl","parentElement","tagName","watchDisabledHandler","removeDisabledFalse","componentWillLoad","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","handleHostClick","stopImmediatePropagation","render","MenuItemInformation","h","class","Host","fullWidth","onClick","href","hreflang","target","rel","referrerpolicy","role","undefined","isSlotUsed","name","innerHTML","Check","Chevron"],"sources":["src/components/ic-menu-item/ic-menu-item.css?tag=ic-menu-item&encapsulation=shadow","src/components/ic-menu-item/ic-menu-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host ::part(button) {\n color: var(--ic-popover-menu-item-check);\n\n --ic-typography-color: var(--ic-popover-menu-item-check);\n\n padding: calc(var(--ic-space-xxxs) / 2);\n display: flex;\n align-items: flex-start;\n gap: var(--ic-space-xs);\n border-radius: 0;\n min-height: 2.5rem;\n height: auto;\n}\n\n.focus-border {\n display: flex;\n align-items: flex-start;\n gap: var(--ic-space-xs);\n border-radius: var(--ic-border-radius);\n margin: calc(var(--ic-space-xxxs) / 2);\n padding: var(--ic-space-xxs);\n border: var(--ic-space-xxxs) dashed transparent;\n\n --icon-height: auto;\n}\n\n:host(.ic-menu-item-disabled) ::part(button) {\n color: var(--ic-popover-menu-item-check-disabled) !important;\n\n --ic-typography-color: var(--ic-popover-menu-item-check-disabled) !important;\n\n pointer-events: none;\n}\n\n:host(.ic-menu-item-disabled) .menu-item-label,\n:host(.ic-menu-item-disabled) .shortcut,\n:host(.ic-menu-item-disabled) .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-label-disabled) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button) {\n color: var(--ic-popover-menu-destructive-item-icon);\n\n --ic-typography-color: var(--ic-popover-menu-destructive-item-label);\n}\n\n:host ::part(button):hover {\n background-color: var(--ic-popover-background-hover);\n}\n\n:host ::part(button):focus-visible,\n:host ::part(button):focus {\n color: var(--ic-popover-menu-item-icon-focused);\n\n --ic-typography-color: purple;\n\n background-color: var(--ic-popover-background-focus);\n box-shadow: none;\n}\n\n:host(.ic-menu-item-disabled) ::part(button):focus-visible,\n:host(.ic-menu-item-disabled) ::part(button):focus {\n color: var(--ic-popover-menu-item-icon-disabled) !important;\n\n --ic-typography-color: orange !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):focus-visible,\n:host([variant=\"destructive\"]) ::part(button):focus {\n background-color: var(--ic-popover-destructive-background-focus);\n}\n\nic-button:focus-within .menu-item-label,\nic-button:focus-within .shortcut,\nic-button:focus-within .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-label-focused);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n border-color: var(--ic-popover-menu-border);\n}\n\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n:host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n:host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-label-disabled) !important;\n}\n\n:host ::part(button):active {\n background-color: var(--ic-popover-background-pressed);\n color: var(--ic-popover-menu-item-label) !important;\n\n --ic-typography-color: var(--ic-popover-menu-item-label) !important;\n}\n\n:host([variant=\"destructive\"]) ::part(button):active {\n background-color: var(--ic-popover-background-pressed);\n color: var(--ic-popover-menu-destructive-item-label) !important;\n\n --ic-typography-color: var(\n --ic-popover-menu-destructive-item-label\n ) !important;\n}\n\n.menu-item-info {\n display: flex;\n flex-direction: column;\n flex: 1;\n align-items: baseline;\n white-space: pre-line;\n text-align: left;\n}\n\n.menu-labels {\n display: flex;\n align-items: baseline;\n gap: var(--ic-space-xs);\n}\n\n.menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-description);\n}\n\n.shortcut {\n --ic-typography-color: var(--ic-popover-menu-item-shortcut);\n\n display: flex;\n flex: min-content;\n}\n\n:host([variant=\"destructive\"]) .menu-item-label {\n text-transform: uppercase;\n font-weight: 600;\n letter-spacing: 0.025em;\n}\n\nic-button:active .menu-item-label {\n --ic-typography-color: var(--ic-popover-menu-item-label);\n}\n\nic-button:active .menu-item-description {\n --ic-typography-color: var(--ic-popover-menu-item-description);\n}\n\nic-button:active .shortcut {\n --ic-typography-color: var(--ic-popover-menu-item-shortcut);\n}\n\n:host([variant=\"destructive\"]) ic-button:active .menu-item-label {\n --ic-typography-color: var(\n --ic-popover-menu-destructive-item-label\n ) !important;\n}\n\n.icon,\n.check-icon,\n.submenu-icon,\n.icon ::slotted(svg),\n.check-icon svg,\n.submenu-icon svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.check-icon.hide {\n visibility: hidden;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n :host ::part(button) {\n border: canvas;\n }\n\n :host ::part(button):focus-visible {\n outline: var(--ic-space-xxxs) solid transparent;\n }\n\n .focus-border {\n border-color: canvas;\n }\n\n :host(.ic-menu-item-disabled) ic-button:focus-within .focus-border {\n border-color: GrayText;\n }\n\n :host(.ic-menu-item-disabled) .menu-item-info,\n :host(.ic-menu-item-disabled) .menu-item-label,\n :host(.ic-menu-item-disabled) .shortcut,\n :host(.ic-menu-item-disabled) .menu-item-description,\n :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-info,\n :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-label,\n :host(.ic-menu-item-disabled) ic-button:focus-within .shortcut,\n :host(.ic-menu-item-disabled) ic-button:focus-within .menu-item-description {\n --ic-typography-color: GrayText !important;\n }\n\n :host(.ic-menu-item-disabled) ::part(button):focus-visible,\n :host(.ic-menu-item-disabled) ::part(button):focus {\n outline-color: GrayText !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n Watch,\n} from \"@stencil/core\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot icon - Content will be placed to the left of the menu item label.\n */\n\n@Component({\n tag: \"ic-menu-item\",\n styleUrl: \"ic-menu-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class MenuItem {\n @Element() el: HTMLIcMenuItemElement;\n\n /**\n * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.\n */\n @Prop({ mutable: true, reflect: true }) checked?: boolean = false;\n\n /**\n * The description displayed in the menu item, below the label.\n */\n @Prop() description?: string;\n\n /**\n * If `true`, the menu item will be in disabled state.\n */\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The URL that the link points to. This will render the menu item as an \"a\" tag.\n */\n @Prop() href?: string;\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n\n /**\n * The label describing the keyboard shortcut for a menu item's action.\n */\n @Prop() keyboardShortcutLabel?: string;\n\n /**\n * The label to display in the menu item.\n */\n @Prop() label!: string;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n */\n @Prop() submenuTriggerFor?: string;\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n /**\n * The variant of the menu item.\n */\n @Prop({ mutable: true, reflect: true }) variant?: IcMenuItemVariants =\n \"default\";\n\n /**\n * @internal Emitted when item loses focus.\n */\n @Event() childBlur: EventEmitter<void>;\n\n /**\n * @internal Emitted when the user clicks a menu item.\n */\n @Event() handleMenuItemClick: EventEmitter<HTMLIcMenuItemElement>;\n\n /**\n * Emitted when the user clicks a menu item that is set to the toggle variant.\n */\n @Event() icToggleChecked: EventEmitter<{\n checked: boolean;\n }>;\n\n /**\n * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n */\n @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n componentWillLoad(): void {\n // This ensures that trigger menu items are always set to the default variant\n if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n this.variant = \"default\";\n }\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Menu Item\"\n );\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(e: Event): void {\n if (this.disabled) {\n e.stopImmediatePropagation();\n }\n }\n\n private handleClick = (e: Event): void => {\n if (isPropDefined(this.submenuTriggerFor)) {\n this.triggerPopoverMenuInstance.emit();\n } else if (this.variant === \"toggle\") {\n e.preventDefault();\n this.checked = !this.checked;\n this.icToggleChecked.emit({\n checked: this.checked,\n });\n }\n this.handleMenuItemClick.emit(this.el);\n };\n\n private getMenuItemAriaLabel = (): string => {\n let ariaLabel = this.label;\n\n if (isPropDefined(this.description)) {\n ariaLabel = `${ariaLabel}, ${this.description}`;\n }\n\n if (isPropDefined(this.keyboardShortcutLabel)) {\n ariaLabel = `${ariaLabel}, ${this.keyboardShortcutLabel}`;\n }\n\n if (this.variant === \"destructive\") {\n ariaLabel = `${ariaLabel}, destructive`;\n }\n\n if (isPropDefined(this.submenuTriggerFor)) {\n ariaLabel = `${ariaLabel}, triggers submenu`;\n }\n\n if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n ariaLabel = \"Go back to parent menu\";\n }\n const parentEl = this.el.parentElement;\n\n if (\n parentEl &&\n parentEl.tagName === \"IC-MENU-GROUP\" &&\n (parentEl as HTMLIcMenuGroupElement).label\n ) {\n return `${ariaLabel}, ${\n (parentEl as HTMLIcMenuGroupElement).label\n } menu group`;\n } else {\n return ariaLabel;\n }\n };\n\n render() {\n // A sub-component to layout the menu information correctly in ic-button\n const MenuItemInformation = () => {\n return (\n <div class=\"menu-item-info\">\n <div class=\"menu-labels\">\n <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n {this.keyboardShortcutLabel && (\n <ic-typography variant=\"caption\" class=\"shortcut\">\n {this.keyboardShortcutLabel}\n </ic-typography>\n )}\n </div>\n {this.description && (\n <ic-typography class=\"menu-item-description\" variant=\"caption\">\n {this.description}\n </ic-typography>\n )}\n </div>\n );\n };\n\n return (\n <Host\n class={{\n [\"ic-menu-item-disabled\"]: !!this.disabled,\n }}\n >\n <ic-button\n fullWidth\n variant=\"tertiary\"\n onClick={this.handleClick}\n href={isPropDefined(this.href)}\n hreflang={isPropDefined(this.hreflang)}\n target={isPropDefined(this.target)}\n rel={isPropDefined(this.rel)}\n referrerpolicy={this.referrerpolicy}\n role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n aria-disabled={`${this.disabled}`}\n aria-checked={\n this.variant === \"toggle\"\n ? this.checked\n ? \"true\"\n : \"false\"\n : undefined\n }\n aria-label={this.getMenuItemAriaLabel()}\n aria-haspopup={\n isPropDefined(this.submenuTriggerFor) ||\n this.el.classList.contains(\"ic-popover-submenu-back-button\")\n ? \"menu\"\n : false\n }\n >\n <div class=\"focus-border\">\n {isSlotUsed(this.el, \"icon\") && (\n <span class=\"icon\">\n <slot name=\"icon\"></slot>\n </span>\n )}\n <MenuItemInformation />\n {this.variant === \"toggle\" && (\n <span\n class={{\n [\"check-icon\"]: true,\n [\"hide\"]: !this.checked,\n }}\n aria-hidden=\"true\"\n innerHTML={Check}\n />\n )}\n {isPropDefined(this.submenuTriggerFor) && (\n <span\n class={{ [\"submenu-icon\"]: true }}\n aria-hidden=\"true\"\n innerHTML={Chevron}\n />\n )}\n </div>\n </ic-button>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as a,F as e,H as o,g as n}from"./p-8e4e97b4.js";import{D as s,g as r,i as c,M as l,f as d,c as h,h as p,o as b,K as m,I as v,e as f}from"./p-b57e59b7.js";import"./p-bddf799a.js";const g='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;color:var(--ic-top-navigation-text);width:100%;position:relative;--ic-typography-color:var(--ic-top-navigation-text);--ic-button-secondary-text-monochrome:var(--ic-brand-text-color);--ic-button-secondary-border-monochrome:var(--ic-brand-text-color);--navigation-link-colour:var(--ic-top-navigation-text)}:host(.dark){color:var(--ic-color-text-primary-light);--ic-typography-color:var(--ic-color-text-primary-light);--ic-top-navigation-logo:var(--ic-color-icon-neutral);--ic-top-navigation-icon:var(--ic-color-icon-neutral);--ic-top-navigation-icon-and-label:var(--ic-color-text-primary-light);--ic-top-navigation-theme:var(--ic-color-icon-neutral);--ic-top-navigation-status-tag:var(--ic-color-background-primary-dark);--ic-top-navigation-status-tag-text:var(--ic-color-brand-text);--ic-top-navigation-status-tag-secondary:var(--ic-state-layer-darken-10);--ic-top-navigation-title-hover:var(--ic-action-dark-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-dark-bg-pressed);--navigation-link-colour:var(--ic-color-text-primary-light)}:host(.dark) ::slotted(ic-navigation-button){--ic-button-icon-monochrome:var(--ic-color-text-primary-light)}::slotted(ic-navigation-button){--ic-button-icon-monochrome:white}:host .top-navigation{background-color:var(--ic-top-navigation-background);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name="search"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active,:host .title-link ::slotted(a),:host .title-link:visited ::slotted(a),:host .title-link:active ::slotted(a){color:var(--ic-top-navigation-icon-and-label);text-decoration:none;outline:none}:host .title-link:hover:not(:focus){background-color:var(--ic-top-navigation-title-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-top-navigation-title-pressed)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-space-1px) solid var(--ic-top-navigation-keyline);padding:0 var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-border-keyline-darken)}.top-panel-container{display:flex;padding-top:0.5rem;padding-bottom:0.5rem}.navigation-tabs{margin-top:calc(-1 * var(--ic-space-1px))}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.title-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}:host .app-status{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag);color:var(--ic-top-navigation-status-tag-text);--ic-typography-color:var(--ic-top-navigation-status-tag-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}:host .app-version{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag-secondary);color:var(--ic-top-navigation-status-tag);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}slot[name="app-icon"]::slotted(*){fill:var(--ic-top-navigation-logo);width:2em;height:2em;cursor:pointer}slot[name="toggle-icon"] svg{fill:var(--ic-top-navigation-icon)}.search-menu-container{justify-content:right;display:flex;align-items:center}.menu-button-container{margin-left:var(--ic-space-md)}.menu-button-container .navigation-landmark-button-text{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.menu-button-container .navigation-landmark-button-text:dir(rtl){right:-9999px}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:2.75rem}.navigation-item-list::-webkit-scrollbar{display:none}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding:0 var(--ic-space-md)}}:host(.mobile-mode) .app-status,:host(.mobile-mode) .app-version{display:none}:host(.mobile-mode) .title-link{margin-right:var(--ic-space-xs)}:host(.mobile-mode) .search-menu-container{max-width:10rem}:host(.mobile-mode) .search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-border-keyline-darken);height:4rem;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:2.5rem}.search-bar-container{margin-top:0;height:3.5rem;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name="app-icon"]::slotted(*){width:1.5em;height:1.5em}slot[name="toggle-icon"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-border-hc)}.app-status,.app-version{border:var(--ic-border-hc)}slot[name="app-icon"]::slotted(*){fill:currentcolor}slot[name="toggle-icon"] svg{fill:currentcolor}}';const u=g;const y=class{constructor(a){t(this,a);this.icNavigationMenuClosed=i(this,"icNavigationMenuClosed",7);this.icNavigationMenuOpened=i(this,"icNavigationMenuOpened",7);this.icTopNavResized=i(this,"icTopNavResized",7);this.hasAppIcon=false;this.hasAppTitleSlot=false;this.hasIconButtons=false;this.hasNavigation=false;this.hasSearchSlotContent=false;this.resizeObserver=null;this.searchBar=null;this.deviceSize=s.XL;this.foregroundColor=r();this.hasFullWidthSearchBar=false;this.mobileSearchBarVisible=false;this.mobileSearchHiddenOnBlur=false;this.navMenuVisible=false;this.searchButtonClick=false;this.searchValue="";this.contentAligned="full-width";this.customMobileBreakpoint=s.L;this.href="/";this.inline=false;this.shortAppTitle="";this.status="";this.theme="inherit";this.version="";this.checkSlots=()=>{this.hasAppIcon=c(this.el,"app-icon");this.hasAppTitleSlot=c(this.el,"app-title");this.hasNavigation=c(this.el,"navigation");this.hasIconButtons=c(this.el,"buttons");this.hasSearchSlotContent=c(this.el,"search");if(this.hasAppIcon){const t=this.el.querySelector('[slot="app-icon"]');if(t&&t.tagName==="A")t.tabIndex=-1}};this.initialiseSearchBar=()=>{if(!this.hasSearchSlotContent)return;const t=l(this.el,"search");if((t===null||t===void 0?void 0:t.tagName)==="IC-SEARCH-BAR"){this.searchBar=t}else if((t===null||t===void 0?void 0:t.tagName)==="FORM"){this.searchBar=t.querySelector("ic-search-bar")}if(this.searchBar!==null){this.searchBar.hideLabel=true}};this.toggleSearchBar=()=>{var t;this.mobileSearchBarVisible=!this.mobileSearchBarVisible;if(!this.searchBar)return;(t=this.mobileSearchButtonEl)===null||t===void 0?void 0:t.setAttribute("aria-label",`${this.mobileSearchBarVisible?"Hide":"Show"} search`);this.hasFullWidthSearchBar=this.mobileSearchBarVisible;this.searchBar.fullWidth=this.mobileSearchBarVisible;if(this.mobileSearchBarVisible){setTimeout((()=>{var t;(t=this.searchBar)===null||t===void 0?void 0:t.focus()}),100)}};this.menuButtonClick=()=>{this.showNavMenu(true)};this.showNavMenu=t=>{this.navMenuVisible=t;(t?this.icNavigationMenuOpened:this.icNavigationMenuClosed).emit();document.body.style.height=t?"100%":"auto";document.body.style.overflow=t?"hidden":"auto"};this.searchButtonMouseDownHandler=()=>{this.searchButtonClick=true};this.searchButtonClickHandler=()=>{this.toggleSearchBar();this.searchButtonClick=false};this.resizeObserverCallback=t=>{if(t===this.deviceSize)return;this.deviceSize=t;if(t>this.customMobileBreakpoint){this.showNavMenu(false);if(this.mobileSearchBarVisible){this.toggleSearchBar()}}this.icTopNavResized.emit({size:t});if(this.searchBar&&document.activeElement===this.searchBar){this.searchBar.setAttribute("hidden","true");this.searchBar.removeAttribute("hidden");setTimeout((()=>{var t;(t=this.searchBar)===null||t===void 0?void 0:t.focus()}),100)}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback(d())}));this.resizeObserver.observe(this.el)}}watchPropHandler(t,i){h(i,t,this.initialiseSearchBar)}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}componentWillLoad(){this.checkSlots();this.deviceSize=d();this.initialiseSearchBar()}componentDidLoad(){p(this.runResizeObserver);if(!this.hasAppTitleSlot){b([{prop:this.appTitle,propName:"app-title"}],"Top Navigation")}}componentWillRender(){this.checkSlots()}navBarMenuCloseHandler(){var t;this.showNavMenu(false);(t=this.menuButtonEl)===null||t===void 0?void 0:t.setFocus()}searchInputBlurHandler({detail:t}){if(t!==null){if(this.mobileSearchBarVisible&&!this.searchButtonClick){this.toggleSearchBar()}this.searchValue=t.value}}searchValueChangeHandler({detail:t}){this.searchValue=t.value}brandChangeHandler({detail:t}){this.foregroundColor=t.mode}render(){const{appTitle:t,contentAligned:i,customMobileBreakpoint:n,deviceSize:r,el:l,foregroundColor:d,hasAppIcon:h,hasAppTitleSlot:p,hasFullWidthSearchBar:b,hasIconButtons:g,hasNavigation:u,hasSearchSlotContent:y,href:k,inline:x,menuButtonClick:w,mobileSearchBarVisible:z,navMenuVisible:H,searchButtonClickHandler:M,searchButtonMouseDownHandler:C,shortAppTitle:B,status:S,version:T,theme:j}=this;const A=S!=="";const $=T!=="";const I=u||g||A||$;const N=r<=s.S;const R=N?"medium":"large";const V=t!==""&&f(t);const O=r<=n;const D=O?N?"subtitle-small":"h4":"h3";const L=`${z?"Hide":"Show"} search`;const F=N?"small":"medium";const W=c(l,"short-app-title");const q=p?"div":"a";const P=q=="a"&&{href:k};return a(o,{key:"b0d2e6aebeb66ddb4ca659cfba83e2cdbd6ec3f4",class:{"fullwidth-searchbar":b,"mobile-mode":O,[v.Dark]:d===v.Dark,[`ic-theme-${j}`]:j!=="inherit"}},a("div",{key:"4a4576c41289fc356d5cfd4e0414901bd8d21a88",class:"top-navigation"},a("ic-section-container",{key:"ec7aa4c1ce015f80c3850c2eba3b1e6b6d00c475",aligned:i,"full-height":true},a("header",{key:"b388f01d5e3084e0530dcc5b460d773b8f51d1f2",role:"banner"},a("div",{key:"a733f85700e1abccdf8aeceb97198359c53f9960",class:"top-panel-container"},a("div",{key:"948679467aee550281cdec8c5e43c6d5b4e7fd29",class:"app-details-container"},(V||p)&&a(q,Object.assign({key:"4054a371178c53cf2794e7a9a653575b95a9354c",class:"title-link"},P),h&&a("div",{key:"11616acef1f4ff274320f24da803eab7cc52fa1d",class:"app-icon-container"},a("slot",{key:"b36a9b7f67c72851dd11fd8f356a6735f4676814",name:"app-icon"})),N&&(!m(B)||W)?a("ic-typography",{variant:"subtitle-small","aria-label":(!p||!W)&&`${t} (${B})`},a("h1",null,W?a("slot",{name:"short-app-title"}):B)):a("ic-typography",{variant:D},a("h1",{class:"title-wrap"},p?a("slot",{name:"app-title"}):t))),A&&a("div",{key:"42f5c01069f02f82abd34b4a540050154bdafec5",class:"app-status"},a("ic-typography",{key:"6052ad2c828b533ec121ee45d71c0afcdaae0622","aria-label":"app tag",variant:"label-uppercase",class:"app-status-text"},S)),$&&a("div",{key:"173b8c98351d425e843aae093902b91feaa7fd05",class:"app-version"},a("ic-typography",{key:"f46ecb51ac2c1f2c01beabf4590ac76681d94733",variant:"label",class:"app-version-text","aria-label":"app version"},T))),(y||I)&&a("div",{key:"8f85b0505a04f7a3affb88ceaa81fe9eccd72ea1",class:"search-menu-container"},a("div",{key:"ff332cfc554fef6856becd5fb87b9f315565bc1e",class:"search-actions-container"},!O?a(e,null,a("slot",{name:"search"}),g&&a("div",{class:"icon-buttons-container"},a("slot",{name:"buttons"}))):a(e,null,y&&a("ic-button",{id:"search-toggle-button",ref:t=>this.mobileSearchButtonEl=t,onMouseDown:C,variant:"icon-tertiary",monochrome:true,size:R,"aria-label":L,theme:d,onClick:M},a("slot",{name:"toggle-icon"},a("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"#ffffff"},a("path",{d:"M0 0h24v24H0V0z",fill:"none"}),a("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))),I&&a("div",{class:"menu-button-container"},a("span",{id:"navigation-landmark-button-text",class:"navigation-landmark-button-text","aria-hidden":"true"},"Main navigation button"),a("nav",{"aria-labelledby":"navigation-landmark-button-text","aria-hidden":`${H}`},a("ic-button",{id:"menu-button",ref:t=>this.menuButtonEl=t,theme:d,variant:"secondary",monochrome:true,"aria-expanded":"false","aria-haspopup":"true","aria-label":`Open ${u?"navigation":"app"} menu`,size:F,onClick:w},"Menu",a("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#ffffff",slot:"left-icon"},a("path",{d:"M0 0h24v24H0V0z",fill:"none"}),a("path",{d:"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"}))))))))),z&&a("div",{key:"ef7c477979320e20293484f6594eb89a38973540",class:"search-bar-container"},a("slot",{key:"b19e53fc019ff1d16c0da99d7d38bc6428dd7cc8",name:"search"})),u&&!O&&a("div",{key:"bdd8f9b982328135f06fc010828bbf0dc803a788",class:"navigation-tabs"},a("span",{key:"e231e5a002a04ff6275aa2d6a39c66d83787367a",id:"navigation-landmark-text",class:"navigation-landmark-text","aria-hidden":"true"},"Main pages"),a("nav",{key:"201327e158e97d601a8fb93b8174af6091bd0295","aria-labelledby":"navigation-landmark-text",class:"nav-panel-container"},a("ic-horizontal-scroll",{key:"df8f402d0da993079b7378292cba17e85259c53c",monochrome:true,appearance:d},a("ul",{key:"22aa05880499690dcd43572705234bdb6fd386b0",class:"navigation-item-list",tabindex:"-1"},a("slot",{key:"effb669cef379880d7b45ca4e74ef096c10a1afb",name:"navigation"})))))))),H&&a("ic-navigation-menu",{key:"a0a45fb9db2ea99414cdc2570f6c9697a96f01ad",version:T,status:S,class:{inline:x}},g&&a("div",{key:"8c74bfd6c807022ccb315bd4718fa8a521fb08ae",class:"menu-buttons-slot",slot:"buttons"},a("slot",{key:"1720467597b353122e907f7c83e1f9e0ef62c9ad",name:"buttons"})),a("ul",{key:"ccdc85df3febad2d603caeccafbd675be4d3d9a2",slot:"navigation"},a("slot",{key:"1f465185f8937c81b279e8823127e0e8bc7d6841",name:"navigation"}))))}get el(){return n(this)}static get watchers(){return{appTitle:["watchPropHandler"]}}};y.style=u;export{y as ic_top_navigation};
|
|
2
|
-
//# sourceMappingURL=p-fb69fbc0.entry.js.map
|