@ukic/web-components 3.0.0-alpha.5 → 3.0.0-alpha.7
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +4 -4
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/{helpers-529aaa3a.js → helpers-50fa27f6.js} +46 -29
- package/dist/cjs/helpers-50fa27f6.js.map +1 -0
- package/dist/cjs/ic-accordion-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-accordion.cjs.entry.js +8 -1
- package/dist/cjs/ic-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-alert.cjs.entry.js +3 -10
- package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-back-to-top.cjs.entry.js +1 -1
- package/dist/cjs/ic-badge.cjs.entry.js +2 -2
- package/dist/cjs/ic-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +10 -7
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card-vertical.cjs.entry.js +26 -24
- package/dist/cjs/ic-card-vertical.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +5 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +5 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-chip.cjs.entry.js +9 -4
- package/dist/cjs/ic-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +1 -1
- package/dist/cjs/ic-dialog.cjs.entry.js +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +3 -3
- package/dist/cjs/ic-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-empty-state.cjs.entry.js +2 -12
- package/dist/cjs/ic-empty-state.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +4 -5
- package/dist/cjs/ic-footer-link-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js +4 -5
- package/dist/cjs/ic-footer-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer.cjs.entry.js +24 -14
- package/dist/cjs/ic-footer.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-hero.cjs.entry.js +7 -15
- package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +3 -3
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +39 -24
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js +1 -1
- package/dist/cjs/ic-link.cjs.entry.js +9 -6
- package/dist/cjs/ic-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-menu-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-menu-item.cjs.entry.js +7 -1
- package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-button.cjs.entry.js +6 -7
- package/dist/cjs/ic-navigation-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +5 -6
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- 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 +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +1 -1
- package/dist/cjs/ic-pagination-item.cjs.entry.js +5 -1
- package/dist/cjs/ic-pagination-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-pagination.cjs.entry.js +5 -1
- package/dist/cjs/ic-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +1 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js +9 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js +5 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +37 -29
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-select.cjs.entry.js +52 -34
- package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +5 -5
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-status-tag.cjs.entry.js +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +6 -2
- package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/ic-tab.cjs.entry.js +5 -2
- package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-text-field.cjs.entry.js +26 -9
- package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-theme.cjs.entry.js +20 -20
- package/dist/cjs/ic-theme.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toast.cjs.entry.js +1 -1
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js +3 -0
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js +7 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +10 -6
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-typography.cjs.entry.js +1 -1
- package/dist/cjs/index-f982899d.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/ag-theme-icds.css +32 -31
- package/dist/collection/components/ic-accordion/ic-accordion.js +10 -1
- package/dist/collection/components/ic-accordion/ic-accordion.js.map +1 -1
- package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js +3 -0
- package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js.map +1 -1
- package/dist/collection/components/ic-alert/ic-alert.js +5 -12
- package/dist/collection/components/ic-alert/ic-alert.js.map +1 -1
- package/dist/collection/components/ic-alert/test/basic/ic-alert.spec.js +21 -3
- package/dist/collection/components/ic-alert/test/basic/ic-alert.spec.js.map +1 -1
- package/dist/collection/components/ic-badge/ic-badge.js +2 -2
- package/dist/collection/components/ic-badge/ic-badge.js.map +1 -1
- package/dist/collection/components/ic-button/ic-button.css +40 -0
- package/dist/collection/components/ic-button/ic-button.js +12 -9
- package/dist/collection/components/ic-button/ic-button.js.map +1 -1
- package/dist/collection/components/ic-button/test/basic/ic-button.spec.js +7 -7
- package/dist/collection/components/ic-button/test/basic/ic-button.spec.js.map +1 -1
- package/dist/collection/components/ic-card-vertical/ic-card-vertical.js +33 -28
- package/dist/collection/components/ic-card-vertical/ic-card-vertical.js.map +1 -1
- package/dist/collection/components/ic-card-vertical/test/basic/ic-card-vertical.spec.js +44 -3
- package/dist/collection/components/ic-card-vertical/test/basic/ic-card-vertical.spec.js.map +1 -1
- package/dist/collection/components/ic-checkbox/ic-checkbox.js +6 -0
- package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +6 -0
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
- package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js +3 -0
- package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js.map +1 -1
- package/dist/collection/components/ic-chip/ic-chip.js +27 -2
- package/dist/collection/components/ic-chip/ic-chip.js.map +1 -1
- package/dist/collection/components/ic-chip/test/basic/ic-chip.spec.js +3 -0
- package/dist/collection/components/ic-chip/test/basic/ic-chip.spec.js.map +1 -1
- package/dist/collection/components/ic-divider/ic-divider.js +8 -8
- package/dist/collection/components/ic-divider/ic-divider.js.map +1 -1
- package/dist/collection/components/ic-divider/test/basic/ic-divider.spec.js +4 -4
- package/dist/collection/components/ic-divider/test/basic/ic-divider.spec.js.map +1 -1
- package/dist/collection/components/ic-empty-state/ic-empty-state.js +3 -13
- package/dist/collection/components/ic-empty-state/ic-empty-state.js.map +1 -1
- package/dist/collection/components/ic-footer/ic-footer.css +2 -2
- package/dist/collection/components/ic-footer/ic-footer.js +26 -16
- package/dist/collection/components/ic-footer/ic-footer.js.map +1 -1
- package/dist/collection/components/ic-footer/test/basic/ic-footer.spec.js +43 -2
- package/dist/collection/components/ic-footer/test/basic/ic-footer.spec.js.map +1 -1
- package/dist/collection/components/ic-footer-link/ic-footer-link.js +6 -7
- package/dist/collection/components/ic-footer-link/ic-footer-link.js.map +1 -1
- package/dist/collection/components/ic-footer-link/test/basic/ic-footer-link.spec.js +1 -1
- package/dist/collection/components/ic-footer-link/test/basic/ic-footer-link.spec.js.map +1 -1
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js +6 -7
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js.map +1 -1
- package/dist/collection/components/ic-footer-link-group/test/basic/ic-footer-link-group.spec.js +1 -1
- package/dist/collection/components/ic-footer-link-group/test/basic/ic-footer-link-group.spec.js.map +1 -1
- package/dist/collection/components/ic-hero/ic-hero.css +3 -3
- package/dist/collection/components/ic-hero/ic-hero.js +10 -18
- package/dist/collection/components/ic-hero/ic-hero.js.map +1 -1
- package/dist/collection/components/ic-hero/test/basic/ic-hero.spec.js +23 -5
- package/dist/collection/components/ic-hero/test/basic/ic-hero.spec.js.map +1 -1
- package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js +6 -6
- package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js.map +1 -1
- package/dist/collection/components/ic-input-component-container/ic-input-component-container.js +16 -11
- package/dist/collection/components/ic-input-component-container/ic-input-component-container.js.map +1 -1
- package/dist/collection/components/ic-input-component-container/test/basic/ic-input-component-container.spec.js +30 -3
- package/dist/collection/components/ic-input-component-container/test/basic/ic-input-component-container.spec.js.map +1 -1
- package/dist/collection/components/ic-link/ic-link.js +12 -9
- package/dist/collection/components/ic-link/ic-link.js.map +1 -1
- package/dist/collection/components/ic-link/test/basic/ic-link.spec.js +5 -5
- package/dist/collection/components/ic-link/test/basic/ic-link.spec.js.map +1 -1
- package/dist/collection/components/ic-menu/ic-menu.css +6 -0
- package/dist/collection/components/ic-menu/ic-menu.js +42 -15
- package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
- package/dist/collection/components/ic-menu/test/basic/ic-menu.spec.js +9 -9
- package/dist/collection/components/ic-menu/test/basic/ic-menu.spec.js.map +1 -1
- package/dist/collection/components/ic-menu-item/ic-menu-item.js +9 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.js.map +1 -1
- package/dist/collection/components/ic-menu-item/test/basic/ic-menu-item.spec.js +13 -0
- package/dist/collection/components/ic-menu-item/test/basic/ic-menu-item.spec.js.map +1 -1
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.js +9 -10
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.js.map +1 -1
- package/dist/collection/components/ic-navigation-button/test/basic/ic-navigation-button.spec.js +2 -2
- package/dist/collection/components/ic-navigation-button/test/basic/ic-navigation-button.spec.js.map +1 -1
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.css +1 -1
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js +6 -7
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js.map +1 -1
- package/dist/collection/components/ic-navigation-group/test/basic/ic-navigation-group.spec.js +3 -3
- package/dist/collection/components/ic-navigation-group/test/basic/ic-navigation-group.spec.js.map +1 -1
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.css +9 -9
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +5 -5
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
- package/dist/collection/components/ic-navigation-item/test/basic/ic-navigation-item.spec.js +3 -3
- package/dist/collection/components/ic-navigation-item/test/basic/ic-navigation-item.spec.js.map +1 -1
- package/dist/collection/components/ic-pagination/ic-pagination.js +6 -0
- package/dist/collection/components/ic-pagination/ic-pagination.js.map +1 -1
- package/dist/collection/components/ic-pagination/test/basic/ic-pagination.spec.js +10 -0
- package/dist/collection/components/ic-pagination/test/basic/ic-pagination.spec.js.map +1 -1
- package/dist/collection/components/ic-pagination-item/ic-pagination-item.js +6 -0
- package/dist/collection/components/ic-pagination-item/ic-pagination-item.js.map +1 -1
- package/dist/collection/components/ic-pagination-item/test/basic/ic-pagination-item.spec.js +3 -0
- package/dist/collection/components/ic-pagination-item/test/basic/ic-pagination-item.spec.js.map +1 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.js +8 -0
- package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
- package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js +6 -0
- package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js.map +1 -1
- package/dist/collection/components/ic-radio-option/ic-radio-option.js +6 -0
- package/dist/collection/components/ic-radio-option/ic-radio-option.js.map +1 -1
- package/dist/collection/components/ic-search-bar/ic-search-bar.css +66 -4
- package/dist/collection/components/ic-search-bar/ic-search-bar.js +60 -29
- package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
- package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.spec.js +63 -94
- package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.spec.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select.js +56 -36
- package/dist/collection/components/ic-select/ic-select.js.map +1 -1
- package/dist/collection/components/ic-select/test/basic/ic-select.spec.js +74 -0
- package/dist/collection/components/ic-select/test/basic/ic-select.spec.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.css +2 -2
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +7 -7
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.types.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation.spec.js +3 -3
- package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation.spec.js.map +1 -1
- package/dist/collection/components/ic-switch/ic-switch.js +6 -0
- package/dist/collection/components/ic-switch/ic-switch.js.map +1 -1
- package/dist/collection/components/ic-switch/test/basic/ic-switch.spec.js +3 -0
- package/dist/collection/components/ic-switch/test/basic/ic-switch.spec.js.map +1 -1
- package/dist/collection/components/ic-tab/ic-tab.js +6 -0
- package/dist/collection/components/ic-tab/ic-tab.js.map +1 -1
- package/dist/collection/components/ic-tab/test/basic/ic-tab.spec.js +16 -0
- package/dist/collection/components/ic-tab/test/basic/ic-tab.spec.js.map +1 -1
- package/dist/collection/components/ic-text-field/ic-text-field.js +30 -11
- package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
- package/dist/collection/components/ic-text-field/test/basic/ic-text-field.input.spec.js +26 -12
- package/dist/collection/components/ic-text-field/test/basic/ic-text-field.input.spec.js.map +1 -1
- package/dist/collection/components/ic-theme/ic-theme.js +31 -31
- package/dist/collection/components/ic-theme/ic-theme.js.map +1 -1
- package/dist/collection/components/ic-theme/test/basic/ic-theme.e2e.js +7 -7
- package/dist/collection/components/ic-theme/test/basic/ic-theme.e2e.js.map +1 -1
- package/dist/collection/components/ic-theme/test/basic/ic-theme.spec.js +11 -11
- package/dist/collection/components/ic-theme/test/basic/ic-theme.spec.js.map +1 -1
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +9 -0
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map +1 -1
- package/dist/collection/components/ic-toggle-button/test/basic/ic-toggle-button.spec.js +10 -0
- package/dist/collection/components/ic-toggle-button/test/basic/ic-toggle-button.spec.js.map +1 -1
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js +3 -0
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js.map +1 -1
- package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js +104 -0
- package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js.map +1 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.css +6 -2
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js +12 -8
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js.map +1 -1
- package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.spec.js +3 -3
- package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.spec.js.map +1 -1
- package/dist/collection/testspec.setup.js +14 -0
- package/dist/collection/testspec.setup.js.map +1 -1
- package/dist/collection/utils/helpers.js +35 -20
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/types.js +6 -6
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/components/helpers.js +42 -26
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/ic-accordion.js +9 -1
- package/dist/components/ic-accordion.js.map +1 -1
- package/dist/components/ic-alert.js +4 -11
- package/dist/components/ic-alert.js.map +1 -1
- package/dist/components/ic-badge.js +2 -2
- package/dist/components/ic-badge.js.map +1 -1
- package/dist/components/ic-button2.js +11 -8
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-card-vertical.js +30 -26
- package/dist/components/ic-card-vertical.js.map +1 -1
- package/dist/components/ic-checkbox-group.js +5 -0
- package/dist/components/ic-checkbox-group.js.map +1 -1
- package/dist/components/ic-checkbox.js +5 -0
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/components/ic-chip.js +11 -4
- package/dist/components/ic-chip.js.map +1 -1
- package/dist/components/ic-divider2.js +4 -4
- package/dist/components/ic-divider2.js.map +1 -1
- package/dist/components/ic-empty-state.js +3 -13
- package/dist/components/ic-empty-state.js.map +1 -1
- package/dist/components/ic-footer-link-group.js +5 -6
- package/dist/components/ic-footer-link-group.js.map +1 -1
- package/dist/components/ic-footer-link.js +5 -6
- package/dist/components/ic-footer-link.js.map +1 -1
- package/dist/components/ic-footer.js +25 -15
- package/dist/components/ic-footer.js.map +1 -1
- package/dist/components/ic-hero.js +9 -17
- package/dist/components/ic-hero.js.map +1 -1
- package/dist/components/ic-horizontal-scroll2.js +3 -3
- package/dist/components/ic-horizontal-scroll2.js.map +1 -1
- package/dist/components/ic-input-component-container2.js +15 -11
- package/dist/components/ic-input-component-container2.js.map +1 -1
- package/dist/components/ic-link2.js +10 -7
- package/dist/components/ic-link2.js.map +1 -1
- package/dist/components/ic-menu-item2.js +9 -1
- package/dist/components/ic-menu-item2.js.map +1 -1
- package/dist/components/ic-menu2.js +28 -15
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-button.js +7 -8
- package/dist/components/ic-navigation-button.js.map +1 -1
- package/dist/components/ic-navigation-group.js +6 -7
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/components/ic-navigation-item.js +5 -5
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-pagination-item2.js +6 -1
- package/dist/components/ic-pagination-item2.js.map +1 -1
- package/dist/components/ic-pagination.js +5 -0
- package/dist/components/ic-pagination.js.map +1 -1
- package/dist/components/ic-radio-group.js +8 -0
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-radio-option.js +6 -1
- package/dist/components/ic-radio-option.js.map +1 -1
- package/dist/components/ic-search-bar.js +52 -54
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-select.js +54 -35
- 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-stepper.js +1 -1
- package/dist/components/ic-switch.js +8 -3
- package/dist/components/ic-switch.js.map +1 -1
- package/dist/components/ic-tab.js +5 -2
- package/dist/components/ic-tab.js.map +1 -1
- package/dist/components/ic-text-field.js +371 -1
- package/dist/components/ic-text-field.js.map +1 -1
- package/dist/components/ic-theme.js +22 -22
- package/dist/components/ic-theme.js.map +1 -1
- package/dist/components/ic-toggle-button-group.js +3 -0
- package/dist/components/ic-toggle-button-group.js.map +1 -1
- package/dist/components/ic-toggle-button.js +9 -1
- package/dist/components/ic-toggle-button.js.map +1 -1
- package/dist/components/ic-top-navigation.js +11 -7
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/core/ag-theme-icds.css +32 -31
- package/dist/core/core.css +78 -46
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/p-050e3e36.entry.js +2 -0
- package/dist/core/p-050e3e36.entry.js.map +1 -0
- package/dist/core/{p-f580f0ce.entry.js → p-08a82b71.entry.js} +2 -2
- package/dist/core/p-08a82b71.entry.js.map +1 -0
- package/dist/core/p-12bd8ade.entry.js +2 -0
- package/dist/core/p-12bd8ade.entry.js.map +1 -0
- package/dist/core/{p-d3263ed9.entry.js → p-13637d3f.entry.js} +2 -2
- package/dist/core/p-13637d3f.entry.js.map +1 -0
- package/dist/core/{p-ba37e169.entry.js → p-1425c78b.entry.js} +2 -2
- package/dist/core/p-1425c78b.entry.js.map +1 -0
- package/dist/core/{p-48463a79.entry.js → p-16df8bcf.entry.js} +2 -2
- package/dist/core/p-16df8bcf.entry.js.map +1 -0
- package/dist/core/{p-e107f362.entry.js → p-1b1f7523.entry.js} +2 -2
- package/dist/core/{p-12f72d83.entry.js → p-2179e015.entry.js} +2 -2
- package/dist/core/p-273f9b03.entry.js +2 -0
- package/dist/core/p-273f9b03.entry.js.map +1 -0
- package/dist/core/{p-b06939fa.entry.js → p-27933dfe.entry.js} +2 -2
- package/dist/core/{p-98816f52.entry.js → p-2aca1bac.entry.js} +2 -2
- package/dist/core/p-30f91e2e.entry.js +2 -0
- package/dist/core/p-30f91e2e.entry.js.map +1 -0
- package/dist/core/p-3361ac8f.entry.js +2 -0
- package/dist/core/p-3361ac8f.entry.js.map +1 -0
- package/dist/core/{p-a91b0212.entry.js → p-34e89ebf.entry.js} +2 -2
- package/dist/core/p-353893b7.entry.js +2 -0
- package/dist/core/p-353893b7.entry.js.map +1 -0
- package/dist/core/p-3645c4e6.entry.js +2 -0
- package/dist/core/p-3645c4e6.entry.js.map +1 -0
- package/dist/core/p-369ff74c.entry.js +2 -0
- package/dist/core/p-369ff74c.entry.js.map +1 -0
- package/dist/core/p-46dd7413.entry.js +2 -0
- package/dist/core/p-46dd7413.entry.js.map +1 -0
- package/dist/core/{p-7cba80ac.entry.js → p-4e57c7ba.entry.js} +2 -2
- package/dist/core/p-4e57c7ba.entry.js.map +1 -0
- package/dist/core/p-51990f23.entry.js +2 -0
- package/dist/core/p-51990f23.entry.js.map +1 -0
- package/dist/core/{p-15fd6539.entry.js → p-5347f687.entry.js} +2 -2
- package/dist/core/{p-6bb3ef22.entry.js → p-538f1bb9.entry.js} +2 -2
- package/dist/core/p-538f1bb9.entry.js.map +1 -0
- package/dist/core/{p-60d458e5.entry.js → p-5479be2b.entry.js} +2 -2
- package/dist/core/p-5479be2b.entry.js.map +1 -0
- package/dist/core/{p-d987bdc0.entry.js → p-5801598f.entry.js} +2 -2
- package/dist/core/p-5801598f.entry.js.map +1 -0
- package/dist/core/{p-c7e01fcd.entry.js → p-5b118dec.entry.js} +2 -2
- package/dist/core/p-5b118dec.entry.js.map +1 -0
- package/dist/core/p-5d89525e.entry.js +2 -0
- package/dist/core/p-5d89525e.entry.js.map +1 -0
- package/dist/core/{p-81f80487.entry.js → p-5dcafe90.entry.js} +2 -2
- package/dist/core/p-5dcafe90.entry.js.map +1 -0
- package/dist/core/{p-c4f32f77.entry.js → p-5e694b17.entry.js} +2 -2
- package/dist/core/{p-c4f32f77.entry.js.map → p-5e694b17.entry.js.map} +1 -1
- package/dist/core/{p-2223c7ee.entry.js → p-6331782f.entry.js} +2 -2
- package/dist/core/{p-c5d3c71e.entry.js → p-6a5d58bc.entry.js} +2 -2
- package/dist/core/p-6d0c5a77.entry.js +2 -0
- package/dist/core/p-6d0c5a77.entry.js.map +1 -0
- package/dist/core/p-6f16a69e.entry.js +2 -0
- package/dist/core/p-6f16a69e.entry.js.map +1 -0
- package/dist/core/{p-85d33e38.entry.js → p-7a16046a.entry.js} +2 -2
- package/dist/core/p-7a16046a.entry.js.map +1 -0
- package/dist/core/p-7c0ff8cf.entry.js +2 -0
- package/dist/core/p-7c0ff8cf.entry.js.map +1 -0
- package/dist/core/p-7c39afb5.entry.js +2 -0
- package/dist/core/p-7c39afb5.entry.js.map +1 -0
- package/dist/core/{p-f069f50e.entry.js → p-7e546e88.entry.js} +2 -2
- package/dist/core/{p-3a4000d8.entry.js → p-8dda6121.entry.js} +2 -2
- package/dist/core/{p-c43d676b.entry.js → p-9505b0f1.entry.js} +2 -2
- package/dist/core/{p-685d6aa9.entry.js → p-a25d535a.entry.js} +2 -2
- package/dist/core/p-a519e9a6.entry.js +2 -0
- package/dist/core/p-a519e9a6.entry.js.map +1 -0
- package/dist/core/p-b052e67a.entry.js +2 -0
- package/dist/core/p-b052e67a.entry.js.map +1 -0
- package/dist/core/p-bafcbecc.entry.js +2 -0
- package/dist/core/p-bafcbecc.entry.js.map +1 -0
- package/dist/core/{p-c82240b7.entry.js → p-bdbce1a0.entry.js} +2 -2
- package/dist/core/p-c68d98f8.entry.js +2 -0
- package/dist/core/p-c68d98f8.entry.js.map +1 -0
- package/dist/core/{p-c563d479.entry.js → p-cae08ac2.entry.js} +2 -2
- package/dist/core/p-cae08ac2.entry.js.map +1 -0
- package/dist/core/{p-cdbc3414.entry.js → p-d6ce4473.entry.js} +2 -2
- package/dist/core/{p-78f46cf8.entry.js → p-dcdfe5f9.entry.js} +2 -2
- package/dist/core/{p-4fea4610.entry.js → p-e9c078fa.entry.js} +2 -2
- package/dist/core/p-e9c078fa.entry.js.map +1 -0
- package/dist/core/p-eafa4df2.js +2 -0
- package/dist/core/p-eafa4df2.js.map +1 -0
- package/dist/core/p-eb132c44.entry.js +2 -0
- package/dist/core/p-eb132c44.entry.js.map +1 -0
- package/dist/core/p-ebf2b874.entry.js +2 -0
- package/dist/core/p-ebf2b874.entry.js.map +1 -0
- package/dist/core/{p-97e8246c.entry.js → p-eec110a7.entry.js} +2 -2
- package/dist/core/{p-03dc6b93.entry.js → p-f1b7e4f4.entry.js} +2 -2
- package/dist/core/{p-175baf98.entry.js → p-f8890135.entry.js} +2 -2
- package/dist/esm/core.js +1 -1
- package/dist/esm/{helpers-7bf8c67f.js → helpers-8565b5c5.js} +43 -27
- package/dist/esm/helpers-8565b5c5.js.map +1 -0
- package/dist/esm/ic-accordion-group.entry.js +1 -1
- package/dist/esm/ic-accordion.entry.js +8 -1
- package/dist/esm/ic-accordion.entry.js.map +1 -1
- package/dist/esm/ic-alert.entry.js +4 -11
- package/dist/esm/ic-alert.entry.js.map +1 -1
- package/dist/esm/ic-back-to-top.entry.js +1 -1
- package/dist/esm/ic-badge.entry.js +2 -2
- package/dist/esm/ic-badge.entry.js.map +1 -1
- package/dist/esm/ic-breadcrumb-group.entry.js +1 -1
- package/dist/esm/ic-breadcrumb.entry.js +1 -1
- package/dist/esm/ic-button_3.entry.js +10 -7
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card-vertical.entry.js +27 -25
- package/dist/esm/ic-card-vertical.entry.js.map +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +5 -1
- package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
- package/dist/esm/ic-checkbox.entry.js +5 -1
- package/dist/esm/ic-checkbox.entry.js.map +1 -1
- package/dist/esm/ic-chip.entry.js +9 -4
- package/dist/esm/ic-chip.entry.js.map +1 -1
- package/dist/esm/ic-data-row.entry.js +1 -1
- package/dist/esm/ic-dialog.entry.js +1 -1
- package/dist/esm/ic-divider.entry.js +3 -3
- package/dist/esm/ic-divider.entry.js.map +1 -1
- package/dist/esm/ic-empty-state.entry.js +3 -13
- package/dist/esm/ic-empty-state.entry.js.map +1 -1
- package/dist/esm/ic-footer-link-group.entry.js +4 -5
- package/dist/esm/ic-footer-link-group.entry.js.map +1 -1
- package/dist/esm/ic-footer-link.entry.js +4 -5
- package/dist/esm/ic-footer-link.entry.js.map +1 -1
- package/dist/esm/ic-footer.entry.js +24 -14
- package/dist/esm/ic-footer.entry.js.map +1 -1
- package/dist/esm/ic-hero.entry.js +8 -16
- package/dist/esm/ic-hero.entry.js.map +1 -1
- package/dist/esm/ic-horizontal-scroll.entry.js +3 -3
- package/dist/esm/ic-horizontal-scroll.entry.js.map +1 -1
- package/dist/esm/ic-input-component-container_3.entry.js +40 -25
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-input-label_2.entry.js +1 -1
- package/dist/esm/ic-link.entry.js +9 -6
- package/dist/esm/ic-link.entry.js.map +1 -1
- package/dist/esm/ic-menu-group.entry.js +1 -1
- package/dist/esm/ic-menu-item.entry.js +7 -1
- package/dist/esm/ic-menu-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-button.entry.js +6 -7
- package/dist/esm/ic-navigation-button.entry.js.map +1 -1
- package/dist/esm/ic-navigation-group.entry.js +5 -6
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- 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 +1 -1
- package/dist/esm/ic-page-header.entry.js +1 -1
- package/dist/esm/ic-pagination-item.entry.js +5 -1
- package/dist/esm/ic-pagination-item.entry.js.map +1 -1
- package/dist/esm/ic-pagination.entry.js +5 -1
- package/dist/esm/ic-pagination.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +1 -1
- package/dist/esm/ic-radio-group.entry.js +9 -1
- package/dist/esm/ic-radio-group.entry.js.map +1 -1
- package/dist/esm/ic-radio-option.entry.js +5 -1
- package/dist/esm/ic-radio-option.entry.js.map +1 -1
- package/dist/esm/ic-search-bar.entry.js +37 -29
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-select.entry.js +52 -34
- package/dist/esm/ic-select.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +5 -5
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-status-tag.entry.js +1 -1
- package/dist/esm/ic-step.entry.js +1 -1
- package/dist/esm/ic-stepper.entry.js +1 -1
- package/dist/esm/ic-switch.entry.js +6 -2
- package/dist/esm/ic-switch.entry.js.map +1 -1
- package/dist/esm/ic-tab-group.entry.js +1 -1
- package/dist/esm/ic-tab-panel.entry.js +1 -1
- package/dist/esm/ic-tab.entry.js +5 -2
- package/dist/esm/ic-tab.entry.js.map +1 -1
- package/dist/esm/ic-text-field.entry.js +26 -9
- package/dist/esm/ic-text-field.entry.js.map +1 -1
- package/dist/esm/ic-theme.entry.js +20 -20
- package/dist/esm/ic-theme.entry.js.map +1 -1
- package/dist/esm/ic-toast.entry.js +1 -1
- package/dist/esm/ic-toggle-button-group.entry.js +3 -0
- package/dist/esm/ic-toggle-button-group.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button.entry.js +7 -1
- package/dist/esm/ic-toggle-button.entry.js.map +1 -1
- package/dist/esm/ic-top-navigation.entry.js +10 -6
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/ic-typography.entry.js +1 -1
- package/dist/esm/index-d1d2c456.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-accordion/ic-accordion.d.ts +2 -0
- package/dist/types/components/ic-alert/ic-alert.d.ts +0 -1
- package/dist/types/components/ic-button/ic-button.d.ts +2 -2
- package/dist/types/components/ic-card-vertical/ic-card-vertical.d.ts +3 -3
- package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +1 -0
- package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts +1 -0
- package/dist/types/components/ic-chip/ic-chip.d.ts +5 -0
- package/dist/types/components/ic-divider/ic-divider.d.ts +4 -4
- package/dist/types/components/ic-empty-state/ic-empty-state.d.ts +0 -1
- package/dist/types/components/ic-footer/ic-footer.d.ts +4 -3
- package/dist/types/components/ic-footer-link/ic-footer-link.d.ts +3 -3
- package/dist/types/components/ic-footer-link-group/ic-footer-link-group.d.ts +3 -3
- package/dist/types/components/ic-hero/ic-hero.d.ts +3 -4
- package/dist/types/components/ic-horizontal-scroll/ic-horizontal-scroll.d.ts +2 -2
- package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts +2 -1
- package/dist/types/components/ic-link/ic-link.d.ts +2 -2
- package/dist/types/components/ic-menu/ic-menu.d.ts +7 -2
- package/dist/types/components/ic-menu-item/ic-menu-item.d.ts +1 -0
- package/dist/types/components/ic-navigation-button/ic-navigation-button.d.ts +3 -3
- package/dist/types/components/ic-navigation-group/ic-navigation-group.d.ts +3 -3
- package/dist/types/components/ic-navigation-item/ic-navigation-item.d.ts +3 -3
- package/dist/types/components/ic-pagination/ic-pagination.d.ts +1 -0
- package/dist/types/components/ic-pagination-item/ic-pagination-item.d.ts +1 -0
- package/dist/types/components/ic-radio-option/ic-radio-option.d.ts +1 -0
- package/dist/types/components/ic-search-bar/ic-search-bar.d.ts +10 -2
- package/dist/types/components/ic-select/ic-select.d.ts +6 -4
- package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts +3 -3
- package/dist/types/components/ic-side-navigation/ic-side-navigation.types.d.ts +2 -2
- package/dist/types/components/ic-switch/ic-switch.d.ts +1 -0
- package/dist/types/components/ic-tab/ic-tab.d.ts +1 -0
- package/dist/types/components/ic-text-field/ic-text-field.d.ts +5 -1
- package/dist/types/components/ic-theme/ic-theme.d.ts +8 -8
- package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts +1 -0
- package/dist/types/components/ic-top-navigation/ic-top-navigation.d.ts +3 -3
- package/dist/types/components.d.ts +41 -23
- package/dist/types/testspec.setup.d.ts +9 -0
- package/dist/types/utils/helpers.d.ts +14 -8
- package/dist/types/utils/types.d.ts +5 -5
- package/hydrate/index.js +401 -266
- package/package.json +4 -9
- package/vscode-data.json +11 -7
- package/dist/cjs/helpers-529aaa3a.js.map +0 -1
- package/dist/components/ic-text-field2.js +0 -357
- package/dist/components/ic-text-field2.js.map +0 -1
- package/dist/core/p-04339c98.entry.js +0 -2
- package/dist/core/p-04339c98.entry.js.map +0 -1
- package/dist/core/p-0aec7fab.entry.js +0 -2
- package/dist/core/p-0aec7fab.entry.js.map +0 -1
- package/dist/core/p-0cef50b7.entry.js +0 -2
- package/dist/core/p-0cef50b7.entry.js.map +0 -1
- package/dist/core/p-274b1ed7.entry.js +0 -2
- package/dist/core/p-274b1ed7.entry.js.map +0 -1
- package/dist/core/p-2a300ec7.entry.js +0 -2
- package/dist/core/p-2a300ec7.entry.js.map +0 -1
- package/dist/core/p-303307bb.entry.js +0 -2
- package/dist/core/p-303307bb.entry.js.map +0 -1
- package/dist/core/p-3317f083.entry.js +0 -2
- package/dist/core/p-3317f083.entry.js.map +0 -1
- package/dist/core/p-35bd9d76.entry.js +0 -2
- package/dist/core/p-35bd9d76.entry.js.map +0 -1
- package/dist/core/p-36f4e0bd.entry.js +0 -2
- package/dist/core/p-36f4e0bd.entry.js.map +0 -1
- package/dist/core/p-48463a79.entry.js.map +0 -1
- package/dist/core/p-4fea4610.entry.js.map +0 -1
- package/dist/core/p-60d458e5.entry.js.map +0 -1
- package/dist/core/p-6bb3ef22.entry.js.map +0 -1
- package/dist/core/p-6cb1f1da.entry.js +0 -2
- package/dist/core/p-6cb1f1da.entry.js.map +0 -1
- package/dist/core/p-79c132e3.entry.js +0 -2
- package/dist/core/p-79c132e3.entry.js.map +0 -1
- package/dist/core/p-7cba80ac.entry.js.map +0 -1
- package/dist/core/p-81f80487.entry.js.map +0 -1
- package/dist/core/p-85be0268.entry.js +0 -2
- package/dist/core/p-85be0268.entry.js.map +0 -1
- package/dist/core/p-85d33e38.entry.js.map +0 -1
- package/dist/core/p-88810080.entry.js +0 -2
- package/dist/core/p-88810080.entry.js.map +0 -1
- package/dist/core/p-a01841e2.entry.js +0 -2
- package/dist/core/p-a01841e2.entry.js.map +0 -1
- package/dist/core/p-a6be333f.entry.js +0 -2
- package/dist/core/p-a6be333f.entry.js.map +0 -1
- package/dist/core/p-ae42affc.entry.js +0 -2
- package/dist/core/p-ae42affc.entry.js.map +0 -1
- package/dist/core/p-ba37e169.entry.js.map +0 -1
- package/dist/core/p-ba55afea.entry.js +0 -2
- package/dist/core/p-ba55afea.entry.js.map +0 -1
- package/dist/core/p-bbd2febe.entry.js +0 -2
- package/dist/core/p-bbd2febe.entry.js.map +0 -1
- package/dist/core/p-c0d5043e.entry.js +0 -2
- package/dist/core/p-c0d5043e.entry.js.map +0 -1
- package/dist/core/p-c563d479.entry.js.map +0 -1
- package/dist/core/p-c7e01fcd.entry.js.map +0 -1
- package/dist/core/p-d3263ed9.entry.js.map +0 -1
- package/dist/core/p-d43e0f4b.entry.js +0 -2
- package/dist/core/p-d43e0f4b.entry.js.map +0 -1
- package/dist/core/p-d987bdc0.entry.js.map +0 -1
- package/dist/core/p-ec097c1f.entry.js +0 -2
- package/dist/core/p-ec097c1f.entry.js.map +0 -1
- package/dist/core/p-f580f0ce.entry.js.map +0 -1
- package/dist/core/p-f99576e0.js +0 -2
- package/dist/core/p-f99576e0.js.map +0 -1
- package/dist/esm/helpers-7bf8c67f.js.map +0 -1
- /package/dist/core/{p-e107f362.entry.js.map → p-1b1f7523.entry.js.map} +0 -0
- /package/dist/core/{p-12f72d83.entry.js.map → p-2179e015.entry.js.map} +0 -0
- /package/dist/core/{p-b06939fa.entry.js.map → p-27933dfe.entry.js.map} +0 -0
- /package/dist/core/{p-98816f52.entry.js.map → p-2aca1bac.entry.js.map} +0 -0
- /package/dist/core/{p-a91b0212.entry.js.map → p-34e89ebf.entry.js.map} +0 -0
- /package/dist/core/{p-15fd6539.entry.js.map → p-5347f687.entry.js.map} +0 -0
- /package/dist/core/{p-2223c7ee.entry.js.map → p-6331782f.entry.js.map} +0 -0
- /package/dist/core/{p-c5d3c71e.entry.js.map → p-6a5d58bc.entry.js.map} +0 -0
- /package/dist/core/{p-f069f50e.entry.js.map → p-7e546e88.entry.js.map} +0 -0
- /package/dist/core/{p-3a4000d8.entry.js.map → p-8dda6121.entry.js.map} +0 -0
- /package/dist/core/{p-c43d676b.entry.js.map → p-9505b0f1.entry.js.map} +0 -0
- /package/dist/core/{p-685d6aa9.entry.js.map → p-a25d535a.entry.js.map} +0 -0
- /package/dist/core/{p-c82240b7.entry.js.map → p-bdbce1a0.entry.js.map} +0 -0
- /package/dist/core/{p-cdbc3414.entry.js.map → p-d6ce4473.entry.js.map} +0 -0
- /package/dist/core/{p-78f46cf8.entry.js.map → p-dcdfe5f9.entry.js.map} +0 -0
- /package/dist/core/{p-97e8246c.entry.js.map → p-eec110a7.entry.js.map} +0 -0
- /package/dist/core/{p-03dc6b93.entry.js.map → p-f1b7e4f4.entry.js.map} +0 -0
- /package/dist/core/{p-175baf98.entry.js.map → p-f8890135.entry.js.map} +0 -0
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["icSearchBarCss","inputIds","SearchBar","this","assistiveHintEl","hasTimedOut","inputId","menuCloseFromMenuChangeEvent","menuId","preLoad","preventSubmit","prevNoOption","retryButtonClick","truncateValue","handleClear","ev","keyboardEvent","mouseEvent","type","code","value","inputEl","loading","clearTimeout","timeoutTimer","filteredOptions","options","el","setFocus","icClear","emit","preventDefault","onInput","target","icInput","noOptions","labelField","emptyOptionListText","valueField","length","setMenuChange","disableAutoFiltering","rawFilteredOptions","getFilteredMenuOptions","showClearButton","handleShowClearButton","debounceAriaLiveUpdate","onInputBlur","nextFocus","relatedTarget","icSearchBarBlur","onInputFocus","icSearchBarFocus","handleClearBlur","icClearBlur","clearButtonFocused","handleSubmitSearchBlur","icSubmitSearchBlur","searchSubmitFocused","handleMouseDown","handleSubmitSearchFocus","handleSubmitSearch","highlightedValue","undefined","icSubmitSearch","form","closest","searchSubmitButton","handleHiddenFormButtonClick","handleSubmitSearchKeyDown","key","handleRetry","retryViaKeyPress","detail","keyPressed","icRetryLoad","triggerLoading","loadingOption","loadingLabel","timeout","window","setTimeout","loadingErrorLabel","timedOut","handleOptionSelect","label","icOptionSelect","handleMenuOptionHighlight","optionValue","_a","optionId","replace","ariaActiveDescendant","handleMenuChange","open","icMenuChange","handleHostFocus","handleTruncateValue","handleHostBlur","menu","focus","visible","handleFocusClearButton","truncate","renderAssistiveHintEl","input","shadowRoot","querySelector","Object","keys","hasOptionsOrFilterDisabled","document","createElement","innerText","assistiveHintText","id","style","display","after","updateSearchResultAriaLive","searchResultsStatusEl","charactersUntilSuggestion","hadNoOptions","searchMode","isSubmitDisabled","valueNotSet","valueLengthLess","disabled","highlightFirstOptionAfterNoResults","handleSetFirstOption","prevNoOptionsList","find","filteredOption","watchDisabledHandler","removeDisabledFalse","debounceChanged","icChange","debounceEvent","debounce","loadingHandler","newValue","filteredOptionsHandler","newOptions","some","opt","watchOptionsHandler","watchValueHandler","getLabelFromValue","connectedCallback","disconnectedCallback","remove","componentWillLoad","componentDidLoad","focusOnLoad","onComponentRequiredPropUndefined","prop","propName","componentWillRender","handleKeyDown","event","icKeydown","handleKeyboardOpen","handleKeyUp","debounceAriaLive","render","name","required","size","placeholder","helperText","readonly","spellcheck","fullWidth","hideLabel","autofocus","autocapitalize","autocomplete","theme","disabledMode","describedBy","getInputDescribedByText","trim","describedById","hasSuggestedSearch","menuOpen","menuRendered","labelValue","renderHiddenInput","h","Host","class","onFocus","onBlur","for","ref","anchorEl","role","autoFocus","inputmode","innerHTML","clearIcon","onClick","onMouseDown","onKeyDown","variant","searchIcon","fullwidth","activationType","autofocusOnSelected","inputLabel","onMenuOptionSelect","onMenuStateChange","onMenuOptionId","onRetryButtonClicked","parentEl"],"sources":["src/components/ic-search-bar/ic-search-bar.css?tag=ic-search-bar&encapsulation=shadow","src/components/ic-search-bar/ic-search-bar.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-menu: z-index of search bar menu\n */\n\n:host(.ic-search-bar-search) {\n display: block;\n\n --divider-height: 1.5rem;\n --ic-input-label-helpertext-padding: var(--ic-space-xxs);\n --border-color: var(--ic-search-bar-outline);\n --input-bg-color: var(--ic-search-bar-background);\n --border-color-disabled: var(--ic-search-bar-outline-disabled);\n --menu-item-text-color: var(--ic-search-bar-dropdown-option-text);\n --menu-item-desc-text-color: var(--ic-search-bar-dropdown-option-description);\n --menu-bg-color: var(--ic-search-bar-dropdown-background);\n --menu-border-color: var(--ic-search-bar-dropdown-outline);\n}\n\n:host(.ic-search-bar-disabled) {\n --ic-input-label-text-color: var(--ic-search-bar-label-disabled);\n --ic-input-label-helper-text-color: var(--ic-search-bar-subtitle-disabled);\n}\n\n:host(.ic-search-bar-search:hover) {\n --border-color: var(--ic-search-bar-outline-hover);\n}\n\n:host(.ic-search-bar-search:active) {\n --border-color: var(--ic-search-bar-outline-pressed);\n}\n\n:host(.ic-search-bar-search.ic-search-bar-small) {\n --divider-height: 1rem;\n}\n\n:host(.ic-search-bar-full-width) {\n width: 100%;\n}\n\n:host(.ic-search-bar-search) .ic-button-disabled:hover {\n border-color: var(--ic-architectural-200);\n}\n\n:host(.ic-search-bar-search.ic-search-bar-disabled) .ic-button-disabled svg {\n color: var(--ic-architectural-200);\n}\n\n:host(.ic-search-bar-search) .ic-button-disabled svg {\n color: var(--ic-architectural-400);\n}\n\n/* Custom Input */\n\n::placeholder {\n color: var(--ic-search-bar-placeholder-text);\n opacity: 1;\n}\n\ninput {\n border: 0;\n border-radius: var(--ic-border-radius);\n color: var(--ic-search-bar-filled-text);\n background-color: var(--input-bg-color);\n line-height: 1.5rem;\n letter-spacing: 0.005rem;\n width: 100%;\n padding-right: var(--ic-space-xs);\n padding-left: var(--ic-space-xs);\n caret-color: var(--ic-search-bar-filled-text-cursor);\n}\n\ninput:focus {\n border: 0;\n outline: 0;\n}\n\ninput:disabled {\n color: var(--ic-search-bar-disabled-text);\n}\n\n/* Chrome, Safari, Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.no-left-pad {\n padding-left: 0;\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n}\n\ninput[type=\"search\"].truncate-value {\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n/* CLEAR */\n\n.clear-button-container {\n align-items: center;\n margin-right: var(--ic-space-1px);\n display: none;\n visibility: hidden;\n}\n\n.clear-button {\n border-radius: var(--ic-border-radius);\n transition: box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition);\n}\n\n.clear-button:focus,\n.clear-button:active {\n background-color: var(--ic-color-focus-inner);\n box-shadow: inset 0 0 0 0.125rem var(--ic-color-focus-outer);\n border-radius: 0.25rem;\n}\n\n.clear-button-unfocused * {\n fill: var(--ic-search-bar-clear-button);\n}\n\n.clear-button:focus,\n.clear-button:active * {\n fill: white;\n}\n\n.clear-button-visible {\n visibility: visible;\n display: flex;\n}\n\n.search-submit-button-container {\n display: flex;\n align-items: center;\n}\n\n.search-submit-button-unfocused * {\n fill: var(--ic-search-bar-filled-icon);\n}\n\n.search-submit-button-disabled * {\n fill: var(--ic-search-bar-icon-disabled);\n}\n\n.search-submit-button-disabled .ic-tooltip-container {\n display: none !important;\n}\n\n.search-submit-button:focus,\n.search-submit-button:active {\n background-color: var(--ic-color-focus-inner) !important;\n box-shadow: inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;\n border-radius: var(--ic-space-xxs);\n}\n\n.search-submit-button:focus,\n.search-submit-button:active * {\n fill: white;\n}\n\n.divider {\n width: var(--ic-border-width);\n background-color: var(--ic-search-bar-dropdown-divider);\n height: var(--divider-height);\n}\n\n.menu-container {\n width: var(--input-width, 20rem);\n position: relative;\n top: var(--ic-space-xxxs);\n}\n\n.menu-container.fullwidth {\n width: 100%;\n}\n\n.no-results {\n cursor: not-allowed;\n}\n\n.search-results-status {\n border: 0;\n clip: rect(0, 0, 0, 0, 0);\n height: var(--ic-space-1px);\n margin-bottom: calc(-1 * var(--ic-space-1px));\n margin-right: calc(-1 * var(--ic-space-1px));\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: var(--ic-space-1px);\n}\n\n@media (forced-colors: active) {\n .search-submit-button-unfocused * {\n fill: canvastext;\n }\n\n .search-submit-button-disabled * {\n fill: GrayText;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n} from \"@stencil/core\";\n\nimport {\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcMenuOption,\n IcSizesNoLarge,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n getInputDescribedByText,\n renderHiddenInput,\n handleHiddenFormButtonClick,\n getLabelFromValue,\n onComponentRequiredPropUndefined,\n getFilteredMenuOptions,\n removeDisabledFalse,\n debounceEvent,\n} from \"../../utils/helpers\";\nimport {\n IcSearchBarBlurEventDetail,\n IcSearchBarSearchModes,\n} from \"./ic-search-bar.types\";\nimport { IcValueEventDetail, IcBlurEventDetail } from \"../../utils/types\";\nimport {\n IcMenuChangeEventDetail,\n IcOptionSelectEventDetail,\n} from \"../ic-menu/ic-menu.types\";\n\nimport clearIcon from \"../../assets/clear-icon.svg\";\nimport searchIcon from \"../../assets/search-icon.svg\";\n\nlet inputIds = 0;\n\n@Component({\n tag: \"ic-search-bar\",\n styleUrl: \"ic-search-bar.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class SearchBar {\n private anchorEl: HTMLElement;\n private assistiveHintEl: HTMLSpanElement = null;\n private debounceAriaLive: number;\n private hasTimedOut = false;\n private inputEl: HTMLInputElement;\n private inputId = `ic-search-bar-input-${inputIds++}`;\n private menu: HTMLIcMenuElement;\n private menuCloseFromMenuChangeEvent: boolean = false;\n private menuId = `${this.inputId}-menu`;\n private preLoad = true;\n private preventSubmit: boolean = false;\n private prevNoOption: boolean = false;\n private retryButtonClick: boolean = false;\n private retryViaKeyPress: boolean;\n private timeoutTimer: number;\n private truncateValue = false;\n private searchSubmitButton: HTMLIcButtonElement;\n\n @Element() el: HTMLIcSearchBarElement;\n\n @State() ariaActiveDescendant: string;\n @State() clearButtonFocused: boolean = false;\n @State() highlightedValue: string;\n @State() open: boolean = false;\n @State() searchSubmitFocused: boolean = false;\n @State() showClearButton: boolean = false;\n\n /**\n * The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n */\n @Prop() autocapitalize = \"off\";\n\n /**\n * The state of autocompletion the browser can apply on the text value.\n */\n @Prop() autocomplete?: IcAutocompleteTypes = \"off\";\n\n /**\n * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n */\n @Prop() autocorrect?: IcAutocorrectStates = \"off\";\n\n /**\n * If `true`, the form control will have input focus when the page loads.\n */\n @Prop() autofocus = false;\n\n /**\n * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.\n */\n @Prop() charactersUntilSuggestion: number = 2;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\n * If `true`, all options provided will be displayed.\n */\n @Prop() disableAutoFiltering?: boolean = false;\n\n /**\n * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n */\n @Prop() debounce?: number = 0;\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /**\n * The text displayed when there are no options in the option list.\n */\n @Prop() emptyOptionListText = \"No results found\";\n\n /**\n * If `true`, the search bar will be focused when component loaded.\n */\n @Prop() focusOnLoad?: boolean = false;\n\n /**\n * Specify whether the search bar fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n */\n @Prop() fullWidth?: boolean = false;\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 hint text for the hidden assistive description element.\n */\n @Prop() assistiveHintText?: string =\n \"When autocomplete results are available use the up and down arrows to choose and press enter to select\";\n\n /**\n * The label for the search bar.\n */\n @Prop() label!: string;\n\n /**\n * The custom name for the label field to correspond with the IcMenuOption type.\n */\n @Prop() labelField?: string = \"label\";\n\n /**\n * Trigger loading state when fetching options asynchronously\n */\n @Prop({ mutable: true }) loading?: boolean = false;\n\n /**\n * Change the message displayed when external loading times out.\n */\n @Prop() loadingErrorLabel?: string = \"Loading Error\";\n\n /**\n * Change the message displayed whilst the options are being loaded externally.\n */\n @Prop() loadingLabel?: string = \"Loading...\";\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The placeholder value to display.\n */\n @Prop() placeholder?: string = \"Search\";\n\n /**\n * If `true`, the readonly state will be set.\n */\n @Prop() readonly?: boolean = false;\n\n /**\n * If `true`, the search bar will require a value.\n */\n @Prop() required?: boolean = false;\n\n /**\n * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.\n */\n @Prop() searchMode?: IcSearchBarSearchModes = \"navigation\";\n\n /**\n * The size of the search bar component.\n */\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /**\n * If `true`, the value of the search will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\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 * If using external filtering, set a timeout for when loading takes too long.\n */\n @Prop() timeout?: number;\n\n /**\n * The custom name for the value field to correspond with the IcMenuOption type.\n */\n @Prop() valueField?: string = \"value\";\n\n @Watch(\"loading\")\n loadingHandler(newValue: boolean): void {\n if (newValue && !this.hasTimedOut) {\n this.preLoad = false;\n this.triggerLoading();\n }\n }\n\n @State() filteredOptions: IcMenuOption[] = [];\n\n @Watch(\"filteredOptions\")\n filteredOptionsHandler(newOptions: IcMenuOption[]): void {\n this.hasTimedOut = newOptions.some((opt) => opt.timedOut);\n }\n\n /**\n * The suggested search options.\n */\n @Prop() options?: IcMenuOption[] = [];\n\n @Watch(\"options\")\n watchOptionsHandler(newOptions: IcMenuOption[]): void {\n if (this.disableAutoFiltering && !this.hasTimedOut) {\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n if (newOptions.length > 0) {\n this.filteredOptions = newOptions;\n } else {\n if (this.hadNoOptions()) {\n return;\n }\n this.setMenuChange(true);\n !this.preLoad &&\n (this.filteredOptions = [\n {\n [this.labelField]: this.emptyOptionListText,\n [this.valueField]: \"\",\n },\n ]);\n this.preLoad = true;\n }\n }\n this.debounceAriaLiveUpdate();\n }\n\n /**\n * The value of the search input.\n */\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n @Watch(\"value\")\n watchValueHandler(newValue: string): void {\n if (\n this.inputEl &&\n this.options &&\n !!getLabelFromValue(\n newValue,\n this.options,\n this.valueField,\n this.labelField\n )\n ) {\n this.inputEl.value = getLabelFromValue(\n newValue,\n this.options,\n this.valueField,\n this.labelField\n );\n } else if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n this.icChange.emit({ value: newValue });\n }\n\n // The icChange event is defined here so that it appears as an event for search bar\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when value is cleared with clear button\n */\n @Event() icClear: EventEmitter<void>;\n private handleClear = (ev: Event) => {\n const keyboardEvent = ev as KeyboardEvent;\n const mouseEvent = ev as MouseEvent;\n\n if (\n mouseEvent.type === \"click\" ||\n keyboardEvent.code === \"Enter\" ||\n keyboardEvent.code === \"Space\"\n ) {\n this.value = \"\";\n this.inputEl.value = \"\";\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n this.filteredOptions = this.options;\n this.el.setFocus();\n\n this.icClear.emit();\n ev.preventDefault();\n\n this.preventSubmit = true;\n }\n };\n\n // The icInput event is defined here so that it appears as an event for search bar\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n\n const noOptions = [\n { [this.labelField]: this.emptyOptionListText, [this.valueField]: \"\" },\n ];\n\n if (this.options.length > 0) {\n this.setMenuChange(true);\n\n this.preLoad = false;\n\n if (this.disableAutoFiltering === false) {\n const rawFilteredOptions = getFilteredMenuOptions(\n this.options,\n false,\n this.value,\n \"anywhere\",\n this.labelField\n );\n\n this.filteredOptions =\n rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;\n }\n }\n\n if (!this.showClearButton) {\n this.handleShowClearButton(true);\n }\n\n this.debounceAriaLiveUpdate();\n };\n\n private onInputBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icSearchBarBlur.emit({ value: value, relatedTarget: nextFocus });\n };\n\n private onInputFocus = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icSearchBarFocus.emit({ value: value });\n\n this.handleShowClearButton(true);\n };\n\n /**\n * Emitted when option is highlighted within the menu\n */\n @Event() icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;\n\n /**\n * Emitted when the state of the menu changes (i.e. open or close)\n */\n @Event() icMenuChange: EventEmitter<IcMenuChangeEventDetail>;\n /**\n * @internal - Emitted when blur is invoked from clear button\n */\n @Event() icClearBlur: EventEmitter<IcBlurEventDetail>;\n private handleClearBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icClearBlur.emit({ relatedTarget: nextFocus });\n\n this.clearButtonFocused = false;\n };\n\n /**\n * Emitted when the 'retry loading' button is clicked\n */\n @Event() icRetryLoad: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when the search value has been submitted\n */\n @Event() icSubmitSearch: EventEmitter<IcValueEventDetail>;\n\n /**\n * @internal - Emitted when blur is invoked from search submit button\n */\n @Event() icSubmitSearchBlur: EventEmitter<IcBlurEventDetail>;\n private handleSubmitSearchBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icSubmitSearchBlur.emit({ relatedTarget: nextFocus });\n\n this.searchSubmitFocused = false;\n };\n\n /**\n * Emitted when blur is invoked from ic-search-bar\n */\n @Event() icSearchBarBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n\n /**\n * Emitted when focus is invoked from ic-search-bar\n */\n @Event() icSearchBarFocus: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when a keydown event occurred.\n */\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n disconnectedCallback(): void {\n if (this.assistiveHintEl) {\n this.assistiveHintEl.remove();\n }\n }\n\n componentWillLoad(): void {\n this.watchValueHandler(this.value);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n if (this.focusOnLoad) {\n this.el.setFocus();\n }\n\n if (this.hasOptionsOrFilterDisabled()) {\n this.renderAssistiveHintEl();\n if (this.disableAutoFiltering) {\n this.filteredOptions = this.options;\n }\n }\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Search Bar\"\n );\n }\n\n componentWillRender(): void {\n this.highlightFirstOptionAfterNoResults();\n }\n\n @Listen(\"keydown\", {})\n handleKeyDown(event: KeyboardEvent): void {\n this.icKeydown.emit({ event });\n if (this.menu && this.open) {\n this.menu.handleKeyboardOpen(event);\n }\n }\n\n @Listen(\"keyup\", {})\n handleKeyUp(ev: KeyboardEvent): void {\n if (ev.key === \"Enter\") {\n if (this.preventSubmit || this.isSubmitDisabled()) {\n return;\n }\n\n this.handleSubmitSearch();\n this.setMenuChange(false);\n }\n\n if (ev.key === \"Escape\") {\n this.setMenuChange(false);\n }\n\n if (this.preventSubmit) {\n this.preventSubmit = false;\n }\n }\n\n /**\n * Sets focus on the native `input`.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n this.inputEl?.focus();\n }\n\n private handleMouseDown = (ev: Event) => {\n ev.preventDefault();\n };\n\n private handleSubmitSearchFocus = () => {\n this.searchSubmitFocused = true;\n };\n\n private handleSubmitSearch = () => {\n this.highlightedValue && (this.value = this.highlightedValue);\n this.highlightedValue = undefined;\n this.icSubmitSearch.emit({ value: this.value });\n\n const form: HTMLFormElement = this.el.closest(\"FORM\");\n\n if (this.searchSubmitButton && !!form && !this.preventSubmit) {\n handleHiddenFormButtonClick(form, this.searchSubmitButton);\n }\n };\n\n private debounceAriaLiveUpdate() {\n clearTimeout(this.debounceAriaLive);\n\n this.debounceAriaLive = window.setTimeout(() => {\n this.updateSearchResultAriaLive();\n }, 500);\n }\n\n private handleSubmitSearchKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === \" \") {\n ev.preventDefault();\n this.handleSubmitSearch();\n }\n };\n\n private handleRetry = (ev: CustomEvent<IcValueEventDetail>) => {\n this.retryViaKeyPress = ev.detail.keyPressed === \"Enter\";\n this.icRetryLoad.emit({ value: ev.detail.value });\n this.triggerLoading();\n this.retryButtonClick = true;\n };\n\n private triggerLoading = () => {\n const loadingOption: IcMenuOption[] = [\n {\n [this.labelField]: this.loadingLabel,\n [this.valueField]: \"\",\n loading: true,\n },\n ];\n if (this.filteredOptions !== loadingOption)\n this.filteredOptions = loadingOption;\n if (this.timeout) {\n this.timeoutTimer = window.setTimeout(() => {\n this.filteredOptions = [\n {\n [this.labelField]: this.loadingErrorLabel,\n [this.valueField]: \"\",\n timedOut: true,\n },\n ];\n }, this.timeout);\n }\n };\n\n private handleOptionSelect = (ev: CustomEvent) => {\n if (ev.detail.label === this.emptyOptionListText) {\n this.el.setFocus();\n return;\n }\n\n this.value = ev.detail.value;\n this.icOptionSelect.emit({ value: this.value });\n };\n\n private handleMenuOptionHighlight = (ev: CustomEvent) => {\n const optionValue = ev.detail.optionId?.replace(`${this.menuId}-`, \"\");\n optionValue && (this.highlightedValue = optionValue);\n if (ev.detail.optionId) {\n this.ariaActiveDescendant = ev.detail.optionId;\n } else {\n this.ariaActiveDescendant = undefined;\n }\n };\n\n private handleMenuChange = (ev: CustomEvent<IcMenuChangeEventDetail>) => {\n this.setMenuChange(ev.detail.open);\n if (!ev.detail.open) {\n this.menuCloseFromMenuChangeEvent = true;\n }\n };\n\n private setMenuChange = (open: boolean) => {\n if (this.open !== open) {\n this.open = open;\n this.icMenuChange.emit({ open });\n }\n };\n\n private handleHostFocus = () => {\n if (this.options && this.value && !this.menuCloseFromMenuChangeEvent) {\n this.setMenuChange(true);\n }\n this.handleTruncateValue(false);\n\n this.icSearchBarFocus.emit();\n };\n\n private handleHostBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n if (\n this.open &&\n this.options &&\n nextFocus !== this.menu &&\n !this.retryViaKeyPress &&\n !this.retryButtonClick\n ) {\n this.setMenuChange(false);\n }\n\n if (this.retryButtonClick || this.retryViaKeyPress) {\n this.inputEl?.focus();\n }\n\n this.handleShowClearButton(false);\n this.menuCloseFromMenuChangeEvent = false;\n this.handleTruncateValue(true);\n this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n };\n\n private handleShowClearButton = (visible: boolean): void => {\n this.showClearButton = visible;\n };\n\n private handleFocusClearButton = (): void => {\n this.clearButtonFocused = true;\n };\n\n private handleTruncateValue = (truncate: boolean): void => {\n this.truncateValue = truncate;\n };\n\n private renderAssistiveHintEl = (): void => {\n const input = this.el.shadowRoot?.querySelector(`#${this.inputId}`);\n\n if (\n input &&\n Object.keys(input).length > 0 &&\n this.hasOptionsOrFilterDisabled()\n ) {\n this.assistiveHintEl = document.createElement(\"span\");\n this.assistiveHintEl.innerText = this.assistiveHintText;\n this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;\n this.assistiveHintEl.style.display = \"none\";\n if (input.after !== undefined) {\n input.after(this.assistiveHintEl);\n }\n }\n };\n\n private updateSearchResultAriaLive = (): void => {\n const searchResultsStatusEl = this.el.shadowRoot.querySelector(\n \".search-results-status\"\n ) as HTMLParagraphElement;\n\n if (searchResultsStatusEl) {\n if (\n !this.open ||\n this.value === \"\" ||\n this.value.length < this.charactersUntilSuggestion\n ) {\n searchResultsStatusEl.innerText = \"\";\n } else if (\n this.hasOptionsOrFilterDisabled() &&\n this.filteredOptions.length > 0 &&\n this.open &&\n !this.filteredOptions[0].loading\n ) {\n if (this.hadNoOptions()) {\n searchResultsStatusEl.innerText = this.emptyOptionListText;\n } else {\n searchResultsStatusEl.innerText = `${\n this.filteredOptions.length\n } result${this.filteredOptions.length > 1 ? \"s\" : \"\"} available`;\n }\n }\n }\n };\n\n private hasOptionsOrFilterDisabled = (): boolean =>\n this.options.length > 0 || this.disableAutoFiltering;\n\n private hadNoOptions = (): boolean =>\n this.filteredOptions.length === 1 &&\n this.filteredOptions[0][this.labelField] === this.emptyOptionListText &&\n this.searchMode === \"navigation\";\n\n private isSubmitDisabled = (): boolean => {\n const valueNotSet =\n this.value === undefined || this.value === null || this.value === \"\";\n const valueLengthLess = this.value.length < this.charactersUntilSuggestion;\n return (\n valueNotSet ||\n valueLengthLess ||\n this.disabled ||\n this.hadNoOptions() ||\n this.hasTimedOut ||\n this.loading\n );\n };\n\n private highlightFirstOptionAfterNoResults = () => {\n if (this.prevNoOption && this.menu && !this.hasTimedOut) {\n this.menu.handleSetFirstOption();\n this.prevNoOption = false;\n }\n const prevNoOptionsList = this.filteredOptions.find(\n (filteredOption) =>\n filteredOption[this.labelField] === this.emptyOptionListText ||\n filteredOption[this.labelField] === this.loadingErrorLabel ||\n filteredOption[this.labelField] === this.loadingLabel\n );\n if (prevNoOptionsList) {\n this.prevNoOption = true;\n }\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n size,\n placeholder,\n helperText,\n disabled,\n value,\n readonly,\n spellcheck,\n fullWidth,\n options,\n open,\n hideLabel,\n menuId,\n ariaActiveDescendant,\n truncateValue,\n autofocus,\n autocapitalize,\n autocomplete,\n filteredOptions,\n theme,\n } = this;\n\n const disabledMode = readonly || disabled;\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n ).trim();\n\n let describedById;\n\n if (describedBy !== \"\" && this.hasOptionsOrFilterDisabled()) {\n describedById = `${describedBy} ${this.inputId}-assistive-hint`;\n } else if (this.hasOptionsOrFilterDisabled()) {\n describedById = `${this.inputId}-assistive-hint`;\n } else if (describedBy !== \"\") {\n describedById = describedBy;\n } else {\n describedById = undefined;\n }\n\n const hasSuggestedSearch = !!value && this.hasOptionsOrFilterDisabled();\n const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;\n const menuRendered =\n menuOpen && value.length >= this.charactersUntilSuggestion;\n\n const labelValue = getLabelFromValue(\n value,\n options,\n this.valueField,\n this.labelField\n );\n\n renderHiddenInput(true, this.el, name, value, disabledMode);\n\n return (\n <Host\n class={{\n [\"ic-search-bar-search\"]: true,\n [\"ic-search-bar-full-width\"]: fullWidth,\n [\"ic-search-bar-disabled\"]: disabled,\n [\"ic-search-bar-small\"]: size === \"small\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onFocus={this.handleHostFocus}\n onBlur={this.handleHostBlur}\n >\n <ic-input-container readonly={readonly} disabled={disabledMode}>\n {!hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledMode && !readonly}\n readonly={readonly}\n ></ic-input-label>\n )}\n <ic-input-component-container\n ref={(el) => (this.anchorEl = el)}\n size={size}\n disabled={disabledMode}\n readonly={readonly}\n fullWidth={fullWidth}\n >\n <input\n id={inputId}\n name={name}\n ref={(el) => (this.inputEl = el)}\n value={options && !!labelValue ? labelValue : value}\n class={{\n \"no-left-pad\": readonly,\n readonly,\n \"truncate-value\": truncateValue,\n }}\n placeholder={placeholder}\n required={required}\n disabled={disabledMode}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onInputBlur}\n onFocus={this.onInputFocus}\n aria-label={label}\n aria-activedescendant={ariaActiveDescendant}\n aria-expanded={\n options.length > 0 && menuRendered ? `${menuOpen}` : undefined\n }\n aria-owns={menuRendered ? menuId : undefined}\n aria-describedby={describedById}\n aria-controls={menuRendered ? menuId : undefined}\n aria-haspopup={options.length > 0 ? \"listbox\" : undefined}\n aria-autocomplete={hasSuggestedSearch ? \"list\" : undefined}\n role={options.length > 0 && menuRendered ? \"combobox\" : undefined}\n autocomplete={autocomplete}\n autocapitalize={autocapitalize}\n autoFocus={autofocus}\n spellcheck={spellcheck}\n inputmode=\"search\"\n ></input>\n <div\n class={{\n \"clear-button-container\": true,\n \"clear-button-visible\":\n value && !disabledMode && this.showClearButton,\n }}\n >\n <ic-button\n id=\"clear-button\"\n class={{\n \"clear-button\": true,\n \"clear-button-unfocused\": !this.clearButtonFocused,\n }}\n aria-label=\"Clear\"\n innerHTML={clearIcon}\n onClick={this.handleClear}\n onMouseDown={this.handleMouseDown}\n size={size}\n onFocus={this.handleFocusClearButton}\n onBlur={this.handleClearBlur}\n onKeyDown={this.handleClear}\n type=\"submit\"\n variant=\"icon\"\n theme={this.clearButtonFocused ? \"light\" : \"dark\"}\n ></ic-button>\n <div class=\"divider\"></div>\n </div>\n <div\n class={{\n \"search-submit-button-container\": true,\n \"search-submit-button-disabled\": this.isSubmitDisabled(),\n }}\n >\n <ic-button\n id=\"search-submit-button\"\n aria-label=\"Search\"\n ref={(el) => (this.searchSubmitButton = el)}\n class={{\n [\"search-submit-button\"]: true,\n [\"search-submit-button-small\"]: size === \"small\",\n [\"search-submit-button-unfocused\"]: !this.searchSubmitFocused,\n [\"search-submit-button-disabled\"]: this.isSubmitDisabled(),\n }}\n disabled={this.isSubmitDisabled()}\n innerHTML={searchIcon}\n size={size}\n onClick={this.handleSubmitSearch}\n onMouseDown={this.handleMouseDown}\n onBlur={this.handleSubmitSearchBlur}\n onFocus={this.handleSubmitSearchFocus}\n onKeyDown={this.handleSubmitSearchKeyDown}\n type=\"submit\"\n variant=\"icon\"\n theme={this.searchSubmitFocused ? \"light\" : \"dark\"}\n ></ic-button>\n </div>\n </ic-input-component-container>\n <div\n class={{\n \"menu-container\": true,\n fullwidth: fullWidth,\n }}\n >\n {menuRendered && (\n <ic-menu\n class={{\n \"no-results\":\n this.hadNoOptions() ||\n (filteredOptions.length === 1 &&\n (filteredOptions[0][this.labelField] ===\n this.loadingLabel ||\n filteredOptions[0][this.labelField] ===\n this.loadingErrorLabel)),\n }}\n activationType=\"manual\"\n anchorEl={this.anchorEl}\n autofocusOnSelected={false}\n searchMode={this.searchMode}\n inputEl={this.inputEl}\n inputLabel={label}\n ref={(el) => (this.menu = el)}\n fullWidth={fullWidth}\n menuId={menuId}\n open={!!menuRendered}\n options={filteredOptions}\n onMenuOptionSelect={this.handleOptionSelect}\n onMenuStateChange={this.handleMenuChange}\n onMenuOptionId={this.handleMenuOptionHighlight}\n onRetryButtonClicked={this.handleRetry}\n parentEl={this.el}\n value={value}\n labelField={this.labelField}\n valueField={this.valueField}\n ></ic-menu>\n )}\n </div>\n </ic-input-container>\n <div\n aria-live=\"polite\"\n role=\"status\"\n class=\"search-results-status\"\n ></div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as e,h as r,H as c,g as i}from"./p-6b5e91e2.js";import{C as t}from"./p-3b185c32.js";import{i as o,d as a}from"./p-
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as e,h as r,H as c,g as i}from"./p-6b5e91e2.js";import{C as t}from"./p-3b185c32.js";import{i as o,d as a}from"./p-eafa4df2.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"]) .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(.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}@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=class{constructor(c){e(this,c);this.renderDefaultBreadcrumb=(e,c,i,t)=>{const n=c!==null&&a(c)&&c!=="";if(e&&n){return r("span",{class:{"current-page-container":e}},o(this.el,"icon")&&r("slot",{name:"icon"}),c)}return r("ic-link",{theme:this.theme,monochrome:this.monochrome,href:t,class:"breadcrumb-link","aria-describedby":this.showBackIcon&&i&&i},this.showBackIcon&&r("div",{class:"back-icon",innerHTML:s}),o(this.el,"icon")&&r("slot",{name:"icon"}),c)};this.setSlottedCurrentPageClass=()=>{const e=this.el.querySelector("ic-link");const r="current-page";if(e){e.classList.remove(r);if(this.current){const c=e.classList.contains(r);if(!c){e.classList.add("breadcrumb-link",r)}}}};this.current=false;this.href=undefined;this.monochrome=false;this.pageTitle=undefined;this.showBackIcon=false;this.theme="inherit"}componentWillRender(){this.setSlottedCurrentPageClass()}async setFocus(){if(this.el.shadowRoot.querySelector("ic-link")){this.el.shadowRoot.querySelector("ic-link").focus()}}render(){const{current:e,href:i,pageTitle:o}=this;const s=`${o&&o.toLowerCase().replace(" ","-")}-describedby`;const n=o!==null&&a(o)&&o!=="";const l=i!==null&&a(i)&&i!=="";return r(c,{class:{"ic-breadcrumb-back":this.showBackIcon,[`ic-theme-${this.theme}`]:this.theme!=="inherit","ic-breadcrumb-monochrome":this.monochrome},"aria-current":e&&"page",role:"listitem"},r("div",{class:"breadcrumb"},r("span",{innerHTML:t,class:"chevron","aria-hidden":"true"}),this.showBackIcon&&s&&r("span",{id:s,class:"hide"},`Back to ${o}`),n&&l?this.renderDefaultBreadcrumb(e,o,s,i):r("slot",null)))}static get delegatesFocus(){return true}get el(){return i(this)}};l.style=n;export{l as ic_breadcrumb};
|
2
|
+
//# sourceMappingURL=p-34e89ebf.entry.js.map
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as i,c as t,h as e,f as a,H as n,g as o}from"./p-6b5e91e2.js";import{y as s,i as r,D as d,g as c,e as l,x as v}from"./p-eafa4df2.js";import{C as h}from"./p-3b185c32.js";import{O as g}from"./p-426ec638.js";const m='/*! 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;--navigation-link-colour:var(--ic-brand-text-color)}:host(:focus-within){z-index:var(--ic-z-index-navigation-item)}svg{width:var(--ic-space-xl);fill:var(--ic-brand-text-color)}.svg{margin-left:auto}.chevron-container svg,.chevron-container .svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chevron-container{flex-grow:1}:host(.expandable.navigation-item) .link,:host(.expandable.navigation-item) ::slotted(a){padding-right:0}:host(.navigation-item) .link,:host(.navigation-item) ::slotted(a){height:calc(100% - var(--ic-space-xxs));width:-moz-fit-content;width:fit-content;color:var(--navigation-link-colour);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md) var(--ic-space-xxs);text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative;white-space:nowrap}:host(.navigation-item) ::slotted(a){height:100%;font:var(--ic-font-label) !important;letter-spacing:var(--ic-font-letter-spacing-0pt025) !important;padding:0 var(--ic-space-md) !important}:host(.navigation-item-selected) .link::after,:host(.navigation-item-selected) ::slotted(a.active)::after,:host(.navigation-item-top-nav) ::slotted(a.active)::after{content:"";height:0.25rem;width:100%;position:absolute;bottom:0;background-color:var(--ic-top-navigation-theme)}:host(.navigation-item-selected.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-selected.navigation-item-page-header) .link::after,:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-top-nav-child) ::slotted(a.active)::after{content:none}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){box-shadow:none}:host(.navigation-item) .link:hover:not(:focus){background-color:var(--ic-brand-hover);cursor:pointer}:host(.navigation-item:not(.navigation-item-page-header,.navigation-item-side-menu)) ::slotted(a:hover:not(:focus)){background-color:var(--ic-brand-hover) !important}:host(.navigation-item:not(.navigation-item-top-nav-child,.navigation-item-side-menu,.navigation-item-top-nav-child-selected .navigation-item-side-menu-selected)) .focus-indicator:focus-within{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius)}:host(.navigation-item) .link:focus,:host(.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected) .link:focus,:host(.navigation-item) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected.dark) .link:focus,:host(.navigation-item.dark) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item) .link:active:not(:focus),:host(.navigation-item) ::slotted(a:active:not(:focus)){background-color:var(--ic-brand-active)}:host(.navigation-item-side-menu) .link,:host(.navigation-item-side-menu) ::slotted(a){min-height:2.5rem;height:auto;width:100%;box-sizing:border-box;color:var(--ic-top-navigation-nav-item);--ic-typography-color:var(--ic-top-navigation-nav-item);display:flex;align-items:center;justify-content:flex-start;text-decoration:none;text-wrap:wrap;white-space:normal;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast)}:host(.navigation-item-side-menu) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important;transition:box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast)}:host(.navigation-item-side-menu) .link:hover:not(:focus){background-color:var(--ic-top-navigation-nav-item-hover)}:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)){background-color:var(--ic-top-navigation-nav-item-hover) !important}:host(.navigation-item-side-menu) .focus-indicator:focus-within{box-shadow:none}:host(.navigation-item-side-menu) .link:focus,:host(.navigation-item-side-menu) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset) !important;width:auto;border-radius:var(--ic-border-radius-inset) !important}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu-selected) ::slotted(a){transition:box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow)}:host(.navigation-item-side-menu-selected) .link:focus,:host(.navigation-item-side-menu) ::slotted(a.active:focus),:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){margin-left:var(--ic-space-xs) !important;padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child) .link,:host(.navigation-item-top-nav-child) ::slotted(a){height:2.5rem;width:-moz-fit-content;width:fit-content;min-width:9.063rem;color:var(--ic-top-navigation-nav-item);display:flex;align-items:center;justify-content:flex-start;padding:0 var(--ic-space-md) !important;text-decoration:none;position:relative;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow)}:host(.navigation-item-top-nav-child) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important}:host(.navigation-item-top-nav-child) .link:hover:not(:focus){background-color:var(--ic-top-navigation-nav-item-hover) !important}:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus){background-color:var(--ic-top-navigation-nav-item-hover) !important}:host(.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-top-nav-child) ::slotted(a:focus){z-index:1;outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius-inset);box-shadow:var(--ic-border-focus-inset);transition:border-radius 0s, box-shadow var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}:host(.navigation-item-side-menu) .link:active:not(:focus){background-color:var(--ic-top-navigation-nav-item-pressed)}:host(.navigation-item-top-nav-child) .link:active:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus){outline:var(--ic-hc-focus-outline);background-color:var(--ic-top-navigation-nav-item-pressed)}:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus){background-color:var(--ic-top-navigation-nav-item-pressed) !important}:host(.navigation-item-side-menu-selected) *,:host(.navigation-item-top-nav-child-selected) *,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){font-weight:700 !important}:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{content:"";position:absolute;left:0;width:var(--ic-space-xs);height:inherit;min-height:2.5rem;background-color:var(--ic-top-navigation-nav-item-banner);transition:left 0s}:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu-selected) .link:focus::before{margin-top:0.25rem}:host(.navigation-item-top-nav-child-selected) .link:focus{margin-left:var(--ic-space-xs);margin-right:calc(-1 * var(--ic-space-xs));padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child-selected) .link:focus::before{left:calc(-1 * var(--ic-space-xs));z-index:1}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{z-index:1}:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before{left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-side-menu-selected) .link::after{display:none}:host(.navigation-item-side-nav-collapsed) .link{height:100%}:host(.navigation-item-side-nav-collapsed) ::slotted(svg),:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg){margin:auto;pointer-events:none}:host(.navigation-item-side-nav-collapsed) .icon,:host(.navigation-item-side-nav-collapsed-with-label) .icon,:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{align-items:center;padding:0;margin:auto 0;width:-moz-fit-content;width:fit-content;pointer-events:none}:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}:host(.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;padding:var(--ic-space-xs) !important;gap:var(--ic-space-xxs)}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){height:auto !important;gap:0;width:auto;padding:var(--ic-space-xs) !important}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block;text-align:center}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link ic-typography{opacity:1;min-width:-moz-min-content;min-width:min-content}:host(.navigation-item-side-nav-collapsed) svg,:host(.navigation-item-side-nav-collapsed-with-label) svg{display:none}::slotted(svg){fill:var(--ic-brand-text-color);height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}.icon{height:1.5rem;width:var(--ic-space-xxl);margin-left:calc(-1 * var(--ic-space-md));flex:0 1 0%;position:relative}.icon>::slotted(*){margin-left:var(--ic-space-md) !important}:host(.navigation-item-side-nav-collapsed) .icon>::slotted(*){margin:auto !important}:host(.navigation-item-side-nav) .link,:host(.navigation-item-side-nav) ::slotted(a){height:var(--navigation-item-height, 4rem);min-height:var(--navigation-item-min-height);width:var(--navigation-item-width, auto);justify-content:var(--navigation-item-justify-content);display:flex;gap:var(--ic-space-xs);box-sizing:border-box;color:var(--navigation-item-child-color) !important;text-decoration:none !important;white-space:nowrap;padding:0 var(--ic-space-md);text-wrap:wrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a){height:var(--navigation-item-child-height);width:var(--navigation-group-width);color:var(--navigation-item-child-color) !important;display:flex;gap:0.625rem;box-sizing:border-box;min-width:0;transition:box-shadow var(--ic-easing-transition-fast);text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:focus){box-shadow:var(--ic-border-focus-dark)}:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active{background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:active){background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav) a.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) a.link ic-typography,:host(.navigation-item-side-nav) div.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) div.link ic-typography,.navigation-item-side-nav-slotted-text{opacity:var(--navigation-item-label-opacity);transition:opacity var(--ic-easing-transition-slow);white-space:wrap;text-overflow:ellipsis;overflow:hidden}:host(.navigation-item-side-nav.navigation-item-selected) .link,:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active){box-shadow:inset 0.313rem 0 0 var(--ic-brand-text-color)}:host(.navigation-item-side-nav.navigation-item-selected) .link::before,:host(.navigation-item-side-nav) ::slotted(a.active)::before{content:"";display:block;position:absolute;inset:0 0 0 0.313rem;border-radius:0.688rem !important;transition:var(--ic-easing-transition-slow)}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before{box-shadow:var(--ic-border-focus-inset)}:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link{opacity:var(--navigation-item-label-opacity);height:auto}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){min-width:var(--navigation-group-item-min-width);padding:var(--ic-space-xs) !important;height:auto;gap:0}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block}:host(.navigation-item-side-nav.navigation-item-selected) .link::after,:host(.navigation-item-side-nav) ::slotted(a.active)::after{display:none}:host(.navigation-item-side-nav.navigation-item) .link:focus,:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,:host(.navigation-item-side-nav) ::slotted(a.active:focus){margin:0 auto;box-shadow:inset 0.313rem 0 0 var(--ic-brand-text-color);border-radius:0}:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus){background-color:var(--ic-brand-hover) !important}:host(.navigation-item-page-header).link,:host(.navigation-item-page-header) a,:host(.navigation-item-page-header) ::slotted(a){height:2.5rem !important;color:var(--ic-color-text-primary) !important;transition:all var(--ic-easing-transition-fast) !important;box-shadow:rgba(23 89 188 / 0%) !important}:host(.navigation-item-page-header.navigation-item-selected) .link::after,:host(.navigation-item-page-header) ::slotted(a.active)::after{content:" " !important;position:absolute;bottom:0;left:0;right:0;height:var(--ic-space-xxs);background-color:var(--ic-action-default) !important}:host(.navigation-item-page-header) .link:hover,:host(.navigation-item-page-header) ::slotted(.link:hover),:host(.navigation-item-page-header) ::slotted(a:hover),:host(.navigation-item-page-header) .link:hover:not(:focus){background-color:var(--ic-action-default-bg-hover) !important;cursor:pointer}:host(.navigation-item-page-header) .link:focus,:host(.navigation-item-page-header) ::slotted(a:focus){box-shadow:var(--ic-border-focus)}:host(.navigation-item-page-header) .link:active,:host(.navigation-item-page-header) ::slotted(a:active){background-color:var(--ic-action-default-bg-pressed) !important}:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,:host(.navigation-item-page-header) ::slotted(a.active:focus)::after{border-bottom-left-radius:var(--ic-border-radius);border-bottom-right-radius:var(--ic-border-radius)}:host(.navigation-item-page-header.navigation-item-selected.with-transition) .link,:host(.navigation-item-page-header.navigation-item-selected.with-transition) ::slotted(a.active){transition:all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast)}:host(.navigation-item-page-header) ::slotted(a.active)::before,:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,:host(.navigation-item-page-header.navigation-item-selected) .link:focus::before{display:none}.open-in-new-icon{flex:1}.open-in-new-icon svg{margin-top:var(--ic-space-xxs);padding-left:var(--ic-space-xxs)}:host(.navigation-item-side-nav) .open-in-new-icon{margin-left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-top-nav) .open-in-new-icon svg,:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-side-nav) .open-in-new-icon svg{height:0.875rem;width:0.875rem}:host(.navigation-item-side-menu) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg{height:var(--ic-space-md);width:var(--ic-space-md)}:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg,:host(.navigation-item-side-menu) .open-in-new-icon svg{fill:var(--ic-color-text-primary)}@media (forced-colors: active){.open-in-new-icon svg{fill:currentcolor}}';const p=class{constructor(n){i(this,n);this.childBlur=t(this,"childBlur",7);this.navItemClicked=t(this,"navItemClicked",7);this.isInitialRender=true;this.hostMutationObserver=null;this.ANIMATION_DURATION=parseInt(s("--ic-transition-duration-slow"))||0;this.ARIA_LABEL_STRING="aria-label";this.displayDefaultNavigationItem=(i,t,a,n,o,s,d)=>{const c=this.isTopNavChild||this.inTopNavSideMenu?"body":"label";const l=this.expandable&&e("div",{class:{svg:true},innerHTML:h});const v=this.el.querySelector('[slot="icon"]')&&e("div",{class:"icon"},e("slot",{name:"icon"}),r(this.el,"badge")&&e("slot",{name:"badge"}));if(i!==""){return e("a",{href:i,target:a,rel:n,hreflang:t,referrerPolicy:o,download:s!==false?s:null,class:"link",ref:i=>this.itemEl=i,part:"link","aria-label":this.ariaLabel?this.ariaLabel:null},v,e("ic-typography",{variant:c},d),e("div",{class:"chevron-container"},l),a==="_blank"&&e("span",{class:"open-in-new-icon",innerHTML:g}))}return e("div",{tabindex:"0",class:"link",ref:i=>this.itemEl=i},v,e("ic-typography",{variant:c},d),l)};this.topNavResizedHandler=({detail:i})=>{var t;const{size:e}=i;if(e!==this.deviceSize){this.deviceSize=e;this.inTopNavSideMenu=e<=(((t=this.parentEl)===null||t===void 0?void 0:t.customMobileBreakpoint)||d.L)}};this.sideNavExpandHandler=({detail:i})=>{const{sideNavExpanded:t,sideNavMobile:e}=i;this.sideNavExpanded=t;this.isSideNavMobile=e;this.sideNavToggleTooltip(!(t||e))};this.handleBlur=({relatedTarget:i})=>{if(i===null||i.tagName!=="IC-NAVIGATION-ITEM"){this.childBlur.emit()}};this.handleClick=()=>{this.navItemClicked.emit()};this.hostMutationCallback=i=>{let t=false;i.forEach((({attributeName:i})=>{if(i===this.ARIA_LABEL_STRING){this.ariaLabel=this.el.getAttribute(i);t=true}}));if(t){a(this)}};this.generateTooltipLabel=()=>{if(this.label){return this.label}if(this.navigationSlot){return this.navigationSlot.textContent}if(this.el.children[0]){return this.el.children[0].textContent}return""};this.renderNavigationItemContent=()=>{if(this.label){return this.displayDefaultNavigationItem(this.href,this.hreflang,this.target,this.rel,this.referrerpolicy,this.download,this.label)}if(this.navigationSlot){return e("slot",{name:"navigation-item"})}return e("slot",null)};this.sideNavToggleTooltip=i=>{const t=this.el.shadowRoot.querySelector("ic-tooltip");const e="tooltip-navigation-item-side-nav-collapsed";let a;if(t){if(i){t.displayTooltip(false);a=setTimeout((()=>{t.classList.add(e)}),this.ANIMATION_DURATION)}else{clearTimeout(a);t.classList.remove(e)}}};this.deviceSize=d.XL;this.focusStyle=c();this.inTopNavSideMenu=false;this.isSideNavMobile=false;this.isTopNavChild=false;this.navigationType=undefined;this.parentEl=undefined;this.sideNavExpanded=false;this.ariaLabel="";this.collapsedIconLabel=false;this.displayNavigationTooltip=false;this.download=false;this.expandable=false;this.href="";this.hreflang=undefined;this.label=undefined;this.rel=undefined;this.referrerpolicy=undefined;this.selected=false;this.target=undefined;this.theme="inherit"}disconnectedCallback(){var i;if(this.navigationType==="side"){this.parentEl.removeEventListener("icSideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.removeEventListener("icTopNavResized",this.topNavResizedHandler)}(i=this.hostMutationObserver)===null||i===void 0?void 0:i.disconnect()}componentWillLoad(){var i,t;const{navType:e,parent:a}=v(this.el);this.navigationType=e;this.parentEl=a;this.deviceSize=l();this.sideNavExpanded=((i=this.parentEl)===null||i===void 0?void 0:i.classList.contains("sm-expanded"))||((t=this.parentEl)===null||t===void 0?void 0:t.classList.contains("xs-menu-open"));if(this.navigationType==="side"){this.parentEl.addEventListener("icSideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.addEventListener("icTopNavResized",this.topNavResizedHandler);if(this.el.parentElement.tagName==="IC-NAVIGATION-GROUP")this.isTopNavChild=true;if(this.deviceSize<=this.parentEl.customMobileBreakpoint)this.inTopNavSideMenu=true}this.navigationSlot=this.el.querySelector('[slot="navigation-item"]');if(this.navigationSlot){this.navigationSlot.ariaLabel=this.navigationSlot.textContent.trim()}if(this.el.hasAttribute(this.ARIA_LABEL_STRING)){this.ariaLabel=this.el.getAttribute(this.ARIA_LABEL_STRING)}}componentDidLoad(){this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{attributes:true})}componentDidUpdate(){this.isInitialRender=false}brandChangeHandler({detail:i}){this.focusStyle=i.mode}async setFocus(){var i;(i=this.itemEl)===null||i===void 0?void 0:i.focus()}render(){const{inTopNavSideMenu:i,isTopNavChild:t,selected:a}=this;return e(n,{class:{["navigation-item"]:true,["navigation-item-top-nav"]:!i&&this.navigationType==="top",["navigation-item-top-nav-child-selected"]:t&&!i&&a,[this.focusStyle]:!i&&!t||this.navigationType==="side"&&t,["navigation-item-selected"]:!t&&a,["navigation-item-side-menu"]:i,["navigation-item-side-menu-selected"]:i&&a,["navigation-item-top-nav-child"]:t&&!i,["navigation-item-page-header"]:this.navigationType==="page-header",["with-transition"]:!this.isInitialRender,["navigation-item-side-nav"]:this.navigationType==="side",["navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["navigation-item-side-nav-collapsed-with-label"]:!this.sideNavExpanded&&this.navigationType==="side"&&this.collapsedIconLabel&&!this.isSideNavMobile,["expandable"]:this.expandable,[`ic-theme-${this.theme}`]:this.theme!=="inherit"},onBlur:t&&!i?this.handleBlur:null,onClick:this.handleClick,"aria-current":a?"page":null,role:"listitem"},e("ic-tooltip",{label:this.generateTooltipLabel(),target:"navigation-item",placement:"right",class:{["tooltip-navigation-item"]:true,["tooltip-navigation-item-side-nav-collapsed"]:this.displayNavigationTooltip&&this.navigationType==="side",["tooltip-long-label-navigation-item-side-nav-expanded"]:this.el.hasAttribute("[display-navigation-tooltip = 'true']")}},this.renderNavigationItemContent()))}static get delegatesFocus(){return true}get el(){return o(this)}};p.style=m;export{p as ic_navigation_item};
|
2
|
+
//# sourceMappingURL=p-353893b7.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["icNavigationItemCss","NavigationItem","this","isInitialRender","hostMutationObserver","ANIMATION_DURATION","parseInt","getCssProperty","ARIA_LABEL_STRING","displayDefaultNavigationItem","href","hreflang","target","rel","referrerpolicy","download","label","variant","isTopNavChild","inTopNavSideMenu","ChevronIconComponent","expandable","h","class","svg","innerHTML","chevronIcon","IconComponent","el","querySelector","name","isSlotUsed","referrerPolicy","ref","itemEl","part","ariaLabel","OpenInNew","tabindex","topNavResizedHandler","detail","size","deviceSize","_a","parentEl","customMobileBreakpoint","DEVICE_SIZES","L","sideNavExpandHandler","sideNavExpanded","sideNavMobile","isSideNavMobile","sideNavToggleTooltip","handleBlur","relatedTarget","tagName","childBlur","emit","handleClick","navItemClicked","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","getAttribute","forceUpdate","generateTooltipLabel","navigationSlot","textContent","children","renderNavigationItemContent","showTooltip","tooltip","shadowRoot","collapsedClass","timer","displayTooltip","setTimeout","classList","add","clearTimeout","remove","XL","getBrandForegroundAppearance","disconnectedCallback","navigationType","removeEventListener","disconnect","componentWillLoad","navType","parent","getNavItemParentDetails","getCurrentDeviceSize","contains","_b","addEventListener","parentElement","trim","hasAttribute","componentDidLoad","MutationObserver","observe","attributes","componentDidUpdate","brandChangeHandler","focusStyle","mode","setFocus","focus","render","selected","Host","displayNavigationTooltip","collapsedIconLabel","theme","onBlur","onClick","role","placement"],"sources":["src/components/ic-navigation-item/ic-navigation-item.css?tag=ic-navigation-item&encapsulation=shadow","src/components/ic-navigation-item/ic-navigation-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-navigation-item: z-index of navigation item\n */\n\n:host {\n display: block;\n\n --navigation-link-colour: var(--ic-brand-text-color);\n}\n\n:host(:focus-within) {\n z-index: var(--ic-z-index-navigation-item);\n}\n\n/* chevron */\nsvg {\n width: var(--ic-space-xl);\n fill: var(--ic-brand-text-color);\n}\n\n.svg {\n margin-left: auto;\n}\n\n.chevron-container svg,\n.chevron-container .svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chevron-container {\n flex-grow: 1;\n}\n\n:host(.expandable.navigation-item) .link,\n:host(.expandable.navigation-item) ::slotted(a) {\n padding-right: 0;\n}\n\n:host(.navigation-item) .link,\n:host(.navigation-item) ::slotted(a) {\n height: calc(100% - var(--ic-space-xxs));\n width: fit-content;\n color: var(--navigation-link-colour);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n white-space: nowrap;\n}\n\n:host(.navigation-item) ::slotted(a) {\n height: 100%;\n font: var(--ic-font-label) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n content: \"\";\n height: 0.25rem;\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-top-navigation-theme);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-brand-hover);\n cursor: pointer;\n}\n\n:host(\n .navigation-item:not(\n .navigation-item-page-header,\n .navigation-item-side-menu\n )\n )\n ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-brand-hover) !important;\n}\n\n:host(\n .navigation-item:not(\n .navigation-item-top-nav-child,\n .navigation-item-side-menu,\n .navigation-item-top-nav-child-selected\n .navigation-item-side-menu-selected\n )\n )\n .focus-indicator:focus-within {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected.dark) .link:focus,\n:host(.navigation-item.dark) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-brand-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n min-height: 2.5rem;\n height: auto;\n width: 100%;\n box-sizing: border-box;\n color: var(--ic-top-navigation-nav-item);\n\n --ic-typography-color: var(--ic-top-navigation-nav-item);\n\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-decoration: none;\n text-wrap: wrap;\n white-space: normal;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n background-color: var(--ic-top-navigation-nav-item-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-top-navigation-nav-item-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset) !important;\n width: auto;\n border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n transition: box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n margin-left: var(--ic-space-xs) !important;\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n height: 2.5rem;\n width: fit-content;\n min-width: 9.063rem;\n color: var(--ic-top-navigation-nav-item);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) !important;\n text-decoration: none;\n position: relative;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus) {\n background-color: var(--ic-top-navigation-nav-item-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus) {\n background-color: var(--ic-top-navigation-nav-item-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n z-index: 1;\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius-inset);\n box-shadow: var(--ic-border-focus-inset);\n transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n background-color: var(--ic-top-navigation-nav-item-pressed);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus) {\n outline: var(--ic-hc-focus-outline);\n background-color: var(--ic-top-navigation-nav-item-pressed);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),\n:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus) {\n background-color: var(--ic-top-navigation-nav-item-pressed) !important;\n}\n\n:host(.navigation-item-side-menu-selected) *,\n:host(.navigation-item-top-nav-child-selected) *,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: var(--ic-space-xs);\n height: inherit;\n min-height: 2.5rem;\n background-color: var(--ic-top-navigation-nav-item-banner);\n transition: left 0s;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before {\n margin-top: 0.25rem;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus {\n margin-left: var(--ic-space-xs);\n margin-right: calc(-1 * var(--ic-space-xs));\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus::before {\n left: calc(-1 * var(--ic-space-xs));\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before {\n left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-side-menu-selected) .link::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .link {\n height: 100%;\n}\n\n:host(.navigation-item-side-nav-collapsed) ::slotted(svg),\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg) {\n margin: auto;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n align-items: center;\n padding: 0;\n margin: auto 0;\n width: fit-content;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) .link,\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a) {\n display: flex;\n flex-direction: column;\n height: fit-content;\n padding: var(--ic-space-xs) !important;\n gap: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n height: auto !important;\n gap: 0;\n width: auto;\n padding: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link\n ic-typography {\n opacity: 1;\n min-width: min-content;\n}\n\n:host(.navigation-item-side-nav-collapsed) svg,\n:host(.navigation-item-side-nav-collapsed-with-label) svg {\n display: none;\n}\n\n::slotted(svg) {\n fill: var(--ic-brand-text-color);\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n.icon {\n height: 1.5rem;\n width: var(--ic-space-xxl);\n margin-left: calc(-1 * var(--ic-space-md));\n flex: 0 1 0%;\n position: relative;\n}\n\n.icon > ::slotted(*) {\n margin-left: var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon > ::slotted(*) {\n margin: auto !important;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n height: var(--navigation-item-height, 4rem);\n min-height: var(--navigation-item-min-height);\n width: var(--navigation-item-width, auto);\n justify-content: var(--navigation-item-justify-content);\n display: flex;\n gap: var(--ic-space-xs);\n box-sizing: border-box;\n color: var(--navigation-item-child-color) !important;\n text-decoration: none !important;\n white-space: nowrap;\n padding: 0 var(--ic-space-md);\n text-wrap: wrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a) {\n height: var(--navigation-item-child-height);\n width: var(--navigation-group-width);\n color: var(--navigation-item-child-color) !important;\n display: flex;\n gap: 0.625rem;\n box-sizing: border-box;\n min-width: 0;\n transition: box-shadow var(--ic-easing-transition-fast);\n text-decoration: none !important;\n white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:active) {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav) a.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n a.link\n ic-typography,\n:host(.navigation-item-side-nav) div.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n div.link\n ic-typography,\n.navigation-item-side-nav-slotted-text {\n opacity: var(--navigation-item-label-opacity);\n transition: opacity var(--ic-easing-transition-slow);\n white-space: wrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {\n box-shadow: inset 0.313rem 0 0 var(--ic-brand-text-color);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0 0 0 0.313rem;\n border-radius: 0.688rem !important;\n transition: var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before {\n box-shadow: var(--ic-border-focus-inset);\n}\n\n:host(\n :not(\n .navigation-item-side-nav-collapsed\n ).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label\n )\n .link {\n opacity: var(--navigation-item-label-opacity);\n height: auto;\n}\n\n:host(\n .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n )\n .link,\n:host(\n .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n )\n ::slotted(a) {\n min-width: var(--navigation-group-item-min-width);\n padding: var(--ic-space-xs) !important;\n height: auto;\n gap: 0;\n}\n\n:host(\n .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n )\n ::slotted(a) {\n display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n margin: 0 auto;\n box-shadow: inset 0.313rem 0 0 var(--ic-brand-text-color);\n border-radius: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-brand-hover) !important;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n height: 2.5rem !important;\n color: var(--ic-color-text-primary) !important;\n transition: all var(--ic-easing-transition-fast) !important;\n box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link::after,\n:host(.navigation-item-page-header) ::slotted(a.active)::after {\n content: \" \" !important;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ic-space-xxs);\n background-color: var(--ic-action-default) !important;\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n background-color: var(--ic-action-default-bg-hover) !important;\n cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n background-color: var(--ic-action-default-bg-pressed) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::after {\n border-bottom-left-radius: var(--ic-border-radius);\n border-bottom-right-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n ::slotted(a.active) {\n transition: all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n .link:focus::before {\n display: none;\n}\n\n.open-in-new-icon {\n flex: 1;\n}\n\n.open-in-new-icon svg {\n margin-top: var(--ic-space-xxs);\n padding-left: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav) .open-in-new-icon {\n margin-left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-top-nav) .open-in-new-icon svg,\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-side-nav) .open-in-new-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n:host(.navigation-item-side-menu) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg,\n:host(.navigation-item-side-menu) .open-in-new-icon svg {\n fill: var(--ic-color-text-primary);\n}\n\n@media (forced-colors: active) {\n .open-in-new-icon svg {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n forceUpdate,\n Listen,\n Method,\n h,\n Host,\n Prop,\n State,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCssProperty,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getNavItemParentDetails,\n isSlotUsed,\n} from \"../../utils/helpers\";\nimport {\n IcNavType,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundNoDefault,\n IcThemeMode,\n} from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { IcExpandedDetail } from \"../ic-side-navigation/ic-side-navigation.types\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n * @slot badge - Badge component overlaying the top right of the icon.\n * @slot icon - Content will be displayed to the left of the label for expanded navigation items, and in replacement of the label for collapsed navigation items.\n */\n\n@Component({\n tag: \"ic-navigation-item\",\n styleUrl: \"ic-navigation-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationItem {\n private navigationSlot: HTMLElement;\n private isInitialRender: boolean = true;\n private itemEl: HTMLElement;\n private hostMutationObserver: MutationObserver = null;\n private ANIMATION_DURATION =\n parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n private ARIA_LABEL_STRING = \"aria-label\";\n\n @Element() el: HTMLIcNavigationItemElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() focusStyle: IcBrandForegroundNoDefault | IcBrandForeground =\n getBrandForegroundAppearance();\n @State() inTopNavSideMenu: boolean = false;\n @State() isSideNavMobile: boolean = false;\n @State() isTopNavChild: boolean = false;\n @State() navigationType: IcNavType | \"\";\n @State() parentEl: HTMLElement;\n @State() sideNavExpanded: boolean = false;\n @State() ariaLabel: string = \"\";\n\n /**\n * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n */\n @Prop() collapsedIconLabel: boolean = false;\n\n /**\n * @internal If `true`, the navigation item will be displayed within a tooltip.\n */\n @Prop() displayNavigationTooltip: boolean = false;\n\n /**\n * If `true`, the user can save the linked URL instead of navigating to it.\n */\n @Prop() download?: string | boolean = false;\n\n /**\n * @internal If `true`, the navigation item will be expandable.\n */\n @Prop() expandable: boolean = false;\n\n /**\n * The destination of the navigation item.\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 of the navigation item.\n */\n @Prop() label: string;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * If `true`, the navigation item will be set in a selected state.\n */\n @Prop() selected: boolean = false;\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 * 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 - Emitted when item loses focus.\n */\n @Event() childBlur: EventEmitter<void>;\n\n /**\n * @internal - Emitted when navigation item clicked.\n */\n @Event() navItemClicked: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.navigationType === \"side\") {\n this.parentEl.removeEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.removeEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler\n );\n }\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n const { navType, parent } = getNavItemParentDetails(this.el);\n this.navigationType = navType;\n this.parentEl = parent;\n this.deviceSize = getCurrentDeviceSize();\n\n this.sideNavExpanded =\n this.parentEl?.classList.contains(\"sm-expanded\") ||\n this.parentEl?.classList.contains(\"xs-menu-open\");\n\n if (this.navigationType === \"side\") {\n this.parentEl.addEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.addEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler\n );\n if (this.el.parentElement.tagName === \"IC-NAVIGATION-GROUP\")\n this.isTopNavChild = true;\n if (\n this.deviceSize <=\n (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint\n )\n this.inTopNavSideMenu = true;\n }\n\n this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n if (this.navigationSlot) {\n this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n }\n\n if (this.el.hasAttribute(this.ARIA_LABEL_STRING)) {\n this.ariaLabel = this.el.getAttribute(this.ARIA_LABEL_STRING);\n }\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.focusStyle = detail.mode;\n }\n\n /**\n * Sets focus on the nav item.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.itemEl?.focus();\n }\n\n private displayDefaultNavigationItem = (\n href: string,\n hreflang: string,\n target: string,\n rel: string,\n referrerpolicy: ReferrerPolicy,\n download: string | boolean,\n label: string\n ): HTMLElement => {\n const variant =\n this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n const ChevronIconComponent = this.expandable && (\n <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n );\n const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n <div class=\"icon\">\n <slot name=\"icon\"></slot>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n );\n\n if (href !== \"\") {\n return (\n <a\n href={href}\n target={target}\n rel={rel}\n hreflang={hreflang}\n referrerPolicy={referrerpolicy}\n download={download !== false ? download : null}\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n part=\"link\"\n aria-label={this.ariaLabel ? this.ariaLabel : null}\n >\n {IconComponent}\n\n <ic-typography variant={variant}>{label}</ic-typography>\n <div class=\"chevron-container\">{ChevronIconComponent}</div>\n {target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n );\n }\n\n return (\n <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n </div>\n );\n };\n\n private topNavResizedHandler = ({\n detail,\n }: CustomEvent<{ size: number }>): void => {\n const { size } = detail;\n if (size !== this.deviceSize) {\n this.deviceSize = size;\n this.inTopNavSideMenu =\n size <=\n ((this.parentEl as HTMLIcTopNavigationElement)\n ?.customMobileBreakpoint || DEVICE_SIZES.L);\n }\n };\n\n private sideNavExpandHandler = ({\n detail,\n }: CustomEvent<IcExpandedDetail>): void => {\n const { sideNavExpanded, sideNavMobile } = detail;\n this.sideNavExpanded = sideNavExpanded;\n this.isSideNavMobile = sideNavMobile;\n this.sideNavToggleTooltip(!(sideNavExpanded || sideNavMobile));\n };\n\n private handleBlur = ({ relatedTarget }: FocusEvent) => {\n if (\n relatedTarget === null ||\n (relatedTarget as HTMLElement).tagName !== \"IC-NAVIGATION-ITEM\"\n ) {\n this.childBlur.emit();\n }\n };\n\n private handleClick = () => {\n this.navItemClicked.emit();\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (attributeName === this.ARIA_LABEL_STRING) {\n this.ariaLabel = this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private generateTooltipLabel = () => {\n if (this.label) {\n return this.label;\n }\n\n if (this.navigationSlot) {\n return this.navigationSlot.textContent;\n }\n\n if (this.el.children[0]) {\n return this.el.children[0].textContent;\n }\n\n return \"\";\n };\n\n private renderNavigationItemContent = () => {\n if (this.label) {\n return this.displayDefaultNavigationItem(\n this.href,\n this.hreflang,\n this.target,\n this.rel,\n this.referrerpolicy,\n this.download,\n this.label\n );\n }\n\n if (this.navigationSlot) {\n return <slot name=\"navigation-item\"></slot>;\n }\n return <slot></slot>;\n };\n\n // Displays tooltip only once the collapsing animation is finished\n private sideNavToggleTooltip = (showTooltip: boolean) => {\n const tooltip = this.el.shadowRoot.querySelector(\"ic-tooltip\");\n const collapsedClass = \"tooltip-navigation-item-side-nav-collapsed\";\n let timer;\n\n if (tooltip) {\n if (showTooltip) {\n tooltip.displayTooltip(false); // Hides tooltip for when mouse is hovering over icon\n timer = setTimeout(() => {\n tooltip.classList.add(collapsedClass);\n }, this.ANIMATION_DURATION);\n } else {\n clearTimeout(timer);\n tooltip.classList.remove(collapsedClass);\n }\n }\n };\n\n render() {\n const { inTopNavSideMenu, isTopNavChild, selected } = this;\n\n return (\n <Host\n class={{\n [\"navigation-item\"]: true,\n [\"navigation-item-top-nav\"]:\n !inTopNavSideMenu && this.navigationType === \"top\",\n [\"navigation-item-top-nav-child-selected\"]:\n isTopNavChild && !inTopNavSideMenu && selected,\n [this.focusStyle]:\n (!inTopNavSideMenu && !isTopNavChild) ||\n (this.navigationType === \"side\" && isTopNavChild),\n [\"navigation-item-selected\"]: !isTopNavChild && selected,\n [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n [\"navigation-item-page-header\"]:\n this.navigationType === \"page-header\",\n [\"with-transition\"]: !this.isInitialRender,\n [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed-with-label\"]:\n !this.sideNavExpanded &&\n this.navigationType === \"side\" &&\n this.collapsedIconLabel &&\n !this.isSideNavMobile,\n [\"expandable\"]: this.expandable,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n onClick={this.handleClick}\n aria-current={selected ? \"page\" : null}\n role=\"listitem\"\n >\n {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n <ic-tooltip\n label={this.generateTooltipLabel()}\n target=\"navigation-item\"\n placement=\"right\"\n class={{\n [\"tooltip-navigation-item\"]: true,\n [\"tooltip-navigation-item-side-nav-collapsed\"]:\n this.displayNavigationTooltip && this.navigationType === \"side\",\n [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n }}\n >\n {this.renderNavigationItemContent()}\n </ic-tooltip>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as t,c as e,h as o,H as i,g as n}from"./p-6b5e91e2.js";import{r as s}from"./p-eafa4df2.js";const r='/*! 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}:root{display:block}:host{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;min-width:-moz-min-content;min-width:min-content;border:var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);border-radius:var(--ic-border-radius)}:host(.ic-toggle-button-group-full-width){width:100%;max-width:100%}:host(.ic-toggle-button-group-loading){min-width:-moz-max-content;min-width:max-content}:host(:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast);outline:none}::slotted(ic-toggle-button){flex-grow:1;width:-moz-min-content;width:min-content;--toggle-button-border:none !important;--toggle-button-border-hover:none !important;--toggle-button-border-active:none !important}::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border)}:host(.ic-toggle-button-group-disabled){border:var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);pointer-events:none}:host(.ic-toggle-button-group-disabled) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled)}:host(.ic-toggle-button-group-monochrome){border:var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome)}:host(.ic-toggle-button-group-monochrome) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome)}:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome){border:var(--ic-border-width) dashed\n var(--ic-toggle-button-unselected-border-disabled-monochrome)}:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-disabled-monochrome)}';const a="IC-TOGGLE-BUTTON-GROUP";const l=class{constructor(o){t(this,o);this.icChange=e(this,"icChange",7);this.keyListener=t=>{this.lastKeyPressed={key:t.key,shift:t.shiftKey}};this.setSlottedAria=t=>{const e=t.shadowRoot.querySelector("ic-button").shadowRoot.querySelector("button");let o=e.getAttribute("aria-label");o+=", ";o+=this.accessibleLabel;e.setAttribute("aria-label",o)};this.handleHostFocus=t=>{if(this.loading||this.disabled){return null}const e=t.target;const o=t.relatedTarget;const i=Array.from(e.querySelectorAll("ic-toggle-button"));if((i.every((t=>!t.checked))||this.selectType!=="single")&&this.lastKeyPressed.shift===false||i.every((t=>!t.checked))&&this.lastKeyPressed.shift===true&&o.tagName==a){i[0].focus()}else if(this.lastKeyPressed.shift===false||this.lastKeyPressed.shift===true&&o.tagName==a){const t=i.filter((t=>t.checked));t[0].focus()}};this.handleKeyDown=t=>{const e=this.getAllToggleButtons();const o=e.indexOf(e.filter((t=>t===document.activeElement))[0]);switch(t.key){case"ArrowDown":case"ArrowRight":this.selectMethod==="auto"?this.proxySelectHandler(e[this.getNextItemToSelect(o,true)]):e[this.getNextItemToSelect(o,true)].focus();break;case"ArrowUp":case"ArrowLeft":this.selectMethod==="auto"?this.proxySelectHandler(e[this.getNextItemToSelect(o,false)]):e[this.getNextItemToSelect(o,false)].focus();break}};this.getNextItemToSelect=(t,e)=>{const o=this.getAllToggleButtons();const i=o.length-1;if(t<1){t=0}let n=e?t+1:t-1;if(n<0){n=i}else if(n>i){n=0}if(o[n].disabled){n=this.getNextItemToSelect(n,e)}return n};this.lastKeyPressed={key:null,shift:false};this.accessibleLabel="Toggle button group";this.disabled=false;this.fullWidth=false;this.iconPlacement=undefined;this.loading=false;this.monochrome=false;this.selectMethod="manual";this.selectType="single";this.size="medium";this.theme="inherit";this.variant="default"}watchDisabledHandler(){this.getAllToggleButtons().forEach((t=>{t.disabled=this.disabled}));s(this.disabled,this.el)}watchMonochromeHandler(){this.getAllToggleButtons().forEach((t=>{t.monochrome=this.monochrome}))}watchThemeHandler(){this.getAllToggleButtons().forEach((t=>{t.theme=this.theme}))}selectHandler(t,e){const o=this.getAllToggleButtons();let i=t.target;e&&e.focus();if(this.selectType==="single"){if(!i){i=e}o.forEach((t=>{if(t.id!==i.id&&t.checked){t.checked=false}}));this.icChange.emit({checked:t.detail.checked,selectedOption:i})}else{const t=this.getAllToggleButtons().filter((t=>t.checked&&!t.disabled));this.icChange.emit({checked:t.map((t=>t.checked)),toggledOptions:t.map((t=>({toggleButton:t}))),selectedOption:i})}}componentWillLoad(){this.selectType==="multi"&&(this.selectMethod="manual");document.addEventListener("keydown",this.keyListener);s(this.disabled,this.el)}componentDidLoad(){this.getAllToggleButtons().forEach(((t,e)=>{this.setSlottedAria(t);t.size=this.size;t.loading=this.loading;t.iconPlacement=this.iconPlacement;t.disabled?null:t.disabled=this.disabled;t.theme=this.theme;t.monochrome=this.monochrome;t.variant=this.variant;t.fullWidth=this.fullWidth;t.id=e.toString();t.tabIndex=-1;t.addEventListener("keydown",(t=>{this.handleKeyDown(t)}));t.classList.add("expand-toggle-group-child")}))}disconnectedCallback(){document===null||document===void 0?void 0:document.removeEventListener("keydown",this.keyListener)}proxySelectHandler(t){t.checked=true;const e=new CustomEvent("icToggleChecked",{detail:{checked:t.checked}});this.selectHandler(e,t)}getAllToggleButtons(){return Array.from(this.el.querySelectorAll("ic-toggle-button"))}render(){return o(i,{role:"group","aria-label":this.accessibleLabel,"aria-disabled":this.disabled?"true":"false",tabindex:0,class:{[`ic-theme-${this.theme}`]:this.theme!=="inherit",["ic-toggle-button-group-full-width"]:this.fullWidth,["ic-toggle-button-group-loading"]:this.loading,["ic-toggle-button-group-disabled"]:this.disabled,[`ic-toggle-button-group-monochrome`]:this.monochrome,[`ic-theme-${this.theme}`]:this.theme!=="inherit"},onFocus:this.handleHostFocus},o("slot",null))}get el(){return n(this)}static get watchers(){return{disabled:["watchDisabledHandler"],monochrome:["watchMonochromeHandler"],theme:["watchThemeHandler"]}}};l.style=r;export{l as ic_toggle_button_group};
|
2
|
+
//# sourceMappingURL=p-3645c4e6.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["icToggleButtonGroupCss","TOGGLE_GROUP","ToggleButtonGroup","this","keyListener","ev","lastKeyPressed","key","shift","shiftKey","setSlottedAria","el","btn","shadowRoot","querySelector","aria","getAttribute","accessibleLabel","setAttribute","handleHostFocus","loading","disabled","target","relEl","relatedTarget","toggleButtons","Array","from","querySelectorAll","every","checked","selectType","tagName","focus","toggledButton","filter","handleKeyDown","event","toggleButtonOptions","getAllToggleButtons","focussedChild","indexOf","document","activeElement","selectMethod","proxySelectHandler","getNextItemToSelect","currentItem","movingDown","numToggles","length","nextItem","watchDisabledHandler","forEach","removeDisabledFalse","watchMonochromeHandler","monochrome","watchThemeHandler","theme","selectHandler","tabTarget","allToggles","clickedToggle","id","icChange","emit","detail","selectedOption","toggledOptions","map","opt","toggleButton","componentWillLoad","addEventListener","componentDidLoad","i","size","iconPlacement","variant","fullWidth","toString","tabIndex","classList","add","disconnectedCallback","removeEventListener","toggle","customEv","CustomEvent","render","h","Host","role","tabindex","class","onFocus"],"sources":["src/components/ic-toggle-button-group/ic-toggle-button-group.css?tag=ic-toggle-button-group&encapsulation=shadow","src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* PARENT HOST */\n\n:root {\n display: block;\n}\n\n:host {\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: min-content;\n border: var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.ic-toggle-button-group-full-width) {\n width: 100%;\n max-width: 100%;\n}\n\n:host(.ic-toggle-button-group-loading) {\n min-width: max-content;\n}\n\n:host(:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n}\n\n/* CHILDREN SLOTTED */\n\n::slotted(ic-toggle-button) {\n flex-grow: 1;\n width: min-content;\n\n --toggle-button-border: none !important;\n --toggle-button-border-hover: none !important;\n --toggle-button-border-active: none !important;\n}\n\n::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border);\n}\n\n/* DISABLED */\n:host(.ic-toggle-button-group-disabled) {\n border: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n pointer-events: none;\n}\n\n:host(.ic-toggle-button-group-disabled)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n}\n\n:host(.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) dashed\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcSizes,\n IcSelectTypes,\n IcSelectMethodTypes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\nimport { removeDisabledFalse } from \"../../utils/helpers\";\n\ninterface lastKey {\n key: string | null;\n shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n tag: \"ic-toggle-button-group\",\n styleUrl: \"ic-toggle-button-group.css\",\n shadow: true,\n})\nexport class ToggleButtonGroup {\n @Element() el: HTMLIcToggleButtonGroupElement;\n\n @State() lastKeyPressed: lastKey = {\n key: null,\n shift: false,\n };\n\n /**\n * The accessible label of the toggle button group component to provide context for screen reader users.\n */\n @Prop() accessibleLabel?: string = \"Toggle button group\";\n\n /**\n * If `true`, the toggle button group will be set to the disabled state.\n */\n @Prop() disabled: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.disabled = this.disabled;\n });\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * If `true`, the toggle button group will fill the width of the container.\n */\n @Prop() fullWidth?: boolean = false;\n\n /**\n * The placement of the icons in relation to the toggle button labels.\n */\n @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n /**\n * If `true`, the toggle button group will be in loading state.\n */\n @Prop() loading?: boolean = false;\n\n /**\n * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.\n */\n @Prop() monochrome?: boolean = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.monochrome = this.monochrome;\n });\n }\n\n /**\n * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n */\n @Prop({ mutable: true }) selectMethod?: IcSelectMethodTypes = \"manual\";\n\n /**\n * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n */\n @Prop() selectType?: IcSelectTypes = \"single\";\n\n /**\n * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible 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(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.theme = this.theme;\n });\n }\n\n /**\n * The variant of the toggle button.\n */\n @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n /**\n * Emitted when a toggle button is selected.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icToggleChecked\")\n selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n const allToggles = this.getAllToggleButtons();\n let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n // tabTarget used in proxySelectHandler\n tabTarget && tabTarget.focus();\n if (this.selectType === \"single\") {\n if (!clickedToggle) {\n clickedToggle = tabTarget;\n }\n allToggles.forEach((el) => {\n if (el.id !== clickedToggle.id && el.checked) {\n el.checked = false;\n }\n });\n\n this.icChange.emit({\n checked: ev.detail.checked,\n selectedOption: clickedToggle,\n });\n } else {\n const toggledOptions = this.getAllToggleButtons().filter(\n (el) => el.checked && !el.disabled\n );\n\n this.icChange.emit({\n checked: toggledOptions.map((opt) => opt.checked),\n toggledOptions: toggledOptions.map((opt) => ({\n toggleButton: opt,\n })),\n selectedOption: clickedToggle,\n });\n }\n }\n\n componentWillLoad(): void {\n this.selectType === \"multi\" && (this.selectMethod = \"manual\");\n this.selectMethod === \"auto\" && this.selectType === \"single\";\n document.addEventListener(\"keydown\", this.keyListener);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.getAllToggleButtons().forEach((el, i) => {\n this.setSlottedAria(el);\n el.size = this.size;\n el.loading = this.loading;\n el.iconPlacement = this.iconPlacement;\n el.disabled ? null : (el.disabled = this.disabled);\n el.theme = this.theme;\n el.monochrome = this.monochrome;\n el.variant = this.variant;\n el.fullWidth = this.fullWidth;\n el.id = i.toString();\n el.tabIndex = -1;\n el.addEventListener(\"keydown\", (ev) => {\n this.handleKeyDown(ev);\n });\n el.classList.add(\"expand-toggle-group-child\");\n });\n }\n\n disconnectedCallback(): void {\n document?.removeEventListener(\"keydown\", this.keyListener);\n }\n\n private keyListener = (ev: KeyboardEvent) => {\n this.lastKeyPressed = {\n key: ev.key,\n shift: ev.shiftKey,\n };\n };\n\n private setSlottedAria = (el: HTMLIcToggleButtonElement) => {\n const btn = el.shadowRoot\n .querySelector(\"ic-button\")\n .shadowRoot.querySelector(\"button\") as HTMLButtonElement;\n let aria = btn.getAttribute(\"aria-label\");\n aria += \", \";\n aria += this.accessibleLabel;\n btn.setAttribute(\"aria-label\", aria);\n };\n\n private handleHostFocus = (ev: FocusEvent): void => {\n if (this.loading || this.disabled) {\n return null;\n }\n const el = ev.target as HTMLIcToggleButtonGroupElement;\n const relEl = ev.relatedTarget as HTMLIcToggleButtonElement;\n const toggleButtons = Array.from(el.querySelectorAll(\"ic-toggle-button\"));\n if (\n ((toggleButtons.every((el) => !el.checked) ||\n this.selectType !== \"single\") &&\n this.lastKeyPressed.shift === false) ||\n (toggleButtons.every((el) => !el.checked) &&\n this.lastKeyPressed.shift === true &&\n relEl.tagName == TOGGLE_GROUP)\n ) {\n toggleButtons[0].focus();\n } else if (\n this.lastKeyPressed.shift === false ||\n (this.lastKeyPressed.shift === true && relEl.tagName == TOGGLE_GROUP)\n ) {\n // if checked is true and selectMethod is \"single\", focus that toggle\n const toggledButton = toggleButtons.filter((el) => el.checked);\n toggledButton[0].focus();\n }\n };\n\n // trigger selectHandler when unable to add 'target'\n private proxySelectHandler(toggle: HTMLIcToggleButtonElement): void {\n toggle.checked = true;\n const customEv = new CustomEvent(\"icToggleChecked\", {\n detail: {\n checked: toggle.checked,\n },\n });\n this.selectHandler(customEv, toggle);\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const focussedChild = toggleButtonOptions.indexOf(\n toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.selectMethod === \"auto\"\n ? this.proxySelectHandler(\n toggleButtonOptions[this.getNextItemToSelect(focussedChild, true)]\n )\n : toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, true)\n ].focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.selectMethod === \"auto\"\n ? this.proxySelectHandler(\n toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, false)\n ]\n )\n : toggleButtonOptions[\n this.getNextItemToSelect(focussedChild, false)\n ].focus();\n break;\n case \"Tab\":\n break;\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const numToggles = toggleButtonOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = numToggles;\n } else if (nextItem > numToggles) {\n nextItem = 0;\n }\n\n if (toggleButtonOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private getAllToggleButtons(): HTMLIcToggleButtonElement[] {\n return Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n }\n\n render() {\n return (\n <Host\n role=\"group\"\n aria-label={this.accessibleLabel}\n aria-disabled={this.disabled ? \"true\" : \"false\"}\n tabindex={0}\n class={{\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n [\"ic-toggle-button-group-full-width\"]: this.fullWidth,\n [\"ic-toggle-button-group-loading\"]: this.loading,\n [\"ic-toggle-button-group-disabled\"]: this.disabled,\n [`ic-toggle-button-group-monochrome`]: this.monochrome,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n onFocus={this.handleHostFocus}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as e,c as t,f as i,h as s,H as a,g as r}from"./p-6b5e91e2.js";import{F as n,r as o,C as l,k as c,v as d,j as h,b as u,J as p,n as b,l as f,m,i as x,K as v,w as g}from"./p-eafa4df2.js";const y='/*! 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;--ic-input-label-helpertext-padding:var(--ic-space-xxs);--border-color:var(--ic-text-field-border-neutral);--border-color-hover:var(--ic-text-field-border-neutral-hover);--border-color-pressed:var(--ic-text-field-border-neutral-pressed);--border-color-disabled:var(--ic-text-field-border-disabled);--border-color-error:var(--ic-text-field-border-error);--border-color-error-hover:var(--ic-text-field-border-error-hover);--border-color-error-pressed:var(--ic-text-field-border-error-pressed);--border-color-success:var(--ic-text-field-border-success);--border-color-success-hover:var(--ic-text-field-border-success-hover);--border-color-success-pressed:var(--ic-text-field-border-success-pressed);--border-color-warning:var(--ic-text-field-border-warning);--border-color-warning-hover:var(--ic-text-field-border-warning-hover);--border-color-warning-pressed:var(--ic-text-field-border-warning-pressed);--ic-input-label-text-color:var(--ic-text-field-label);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle);--ic-input-validation-status-text-color:var(--ic-text-field-state-text);--ic-input-validation-error:var(--ic-text-field-state-icon-error);--ic-input-validation-warning-icon-color:var(\n --ic-text-field-state-icon-warning\n );--ic-input-validation-success-icon-color:var(\n --ic-text-field-state-icon-success\n );--ic-input-component-container-success-icon-inline-color:var(\n --ic-text-field-state-icon-success\n )}:host(.ic-text-field-disabled){--ic-input-label-text-color:var(--ic-text-field-label-disabled);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle-disabled);--text-field-placeholder-color:var(\n --ic-text-field-text-area-placeholder-text-disabled\n )}:host(.ic-text-field-full-width){width:100%}::-moz-placeholder{color:var(\n --text-field-placeholder-color,\n var(--ic-text-field-placeholder-text)\n );opacity:1}::placeholder{color:var(\n --text-field-placeholder-color,\n var(--ic-text-field-placeholder-text)\n );opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);color:var(--text-field-text-color, var(--ic-text-field-text));background-color:var(--input-bg-color, var(--ic-text-field-background));line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs);caret-color:var(\n --text-field-typing-cursor,\n var(--ic-text-field-typing-cursor)\n )}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:0.375rem}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(\n --text-field-disabled-text-color,\n var(--ic-text-field-text-disabled)\n )}input.readonly,textarea.readonly{color:var(--ic-text-field-read-only-input-text-internal)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type="number"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.char-count-text{--ic-typography-color:var(--ic-text-field-character-limit);padding-right:var(--ic-space-xxxs)}:host(.ic-text-field-disabled) .char-count-text{--ic-typography-color:var(--ic-text-field-character-limit-disabled)}.no-left-pad{padding-left:0}::slotted([slot="icon"]){fill:var(--ic-text-field-text-disabled)}.has-value ::slotted([slot="icon"]){fill:var(--ic-text-field-input-internal-icon)}.char-count{margin-right:calc(-1 * var(--ic-space-xxxs))}.remaining-char-count-desc{position:absolute;left:-9999px}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}input[type="search"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot="icon"]){fill:currentcolor}}';let w=0;const k=[...g,"title"];const z=class{constructor(s){e(this,s);this.getValidationText=t(this,"getValidationText",7);this.icBlur=t(this,"icBlur",7);this.icChange=t(this,"icChange",7);this.icFocus=t(this,"icFocus",7);this.icInput=t(this,"icInput",7);this.icKeydown=t(this,"icKeydown",7);this.inheritedAttributes={};this.hostMutationObserver=null;this.checkChildHydration=()=>{var e;const t=(e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector("ic-typography");if(t&&t.classList.contains("hydrated")){this.setFocus();clearInterval(this.interval)}};this.getNumberOfCharacters=e=>e!==null&&e!==undefined?e.length:0;this.getMaxValueExceeded=e=>{this.numChars=this.getNumberOfCharacters(e);if(this.type==="number"){this.minValueUnattained=e&&Number(e)<Number(this.min);this.maxValueExceeded=Number(e)>Number(this.max)}};this.getMaxCharactersReached=e=>{this.numChars=this.getNumberOfCharacters(e);this.maxCharactersReached=this.maxCharacters>0?this.numChars>=this.maxCharacters:false;if(this.maxCharactersWarning&&!this.maxCharactersReached){this.maxCharactersWarning=false}};this.onInput=e=>{this.value=e.target.value;this.icInput.emit({value:this.value})};this.onBlur=e=>{const t=e.target.value;this.numChars=t.length;this.minCharactersUnattained=this.minCharacters>0?this.numChars<this.minCharacters:false;this.icBlur.emit({value:t})};this.onFocus=e=>{this.icFocus.emit({value:e.target.value})};this.hasStatus=e=>e!==""&&!this.disabled;this.handleFormReset=()=>{this.value=this.initialValue};this.hostMutationCallback=e=>{let t=false;e.forEach((({attributeName:e,type:i,addedNodes:s,removedNodes:a})=>{if(k.includes(e)){this.inheritedAttributes[e]=this.el.getAttribute(e);t=true}else if(i==="childList"){t=n(s,a,"icon")}}));if(t){i(this)}};this.numChars=0;this.maxCharactersReached=false;this.maxCharactersWarning=false;this.minCharactersUnattained=false;this.maxValueExceeded=false;this.minValueUnattained=false;this.ariaActiveDescendant=undefined;this.ariaAutocomplete=undefined;this.ariaExpanded=undefined;this.ariaOwns=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.disabled=false;this.fullWidth=false;this.helperText="";this.hideCharCount=false;this.hideLabel=false;this.hiddenInput=true;this.inputId=`ic-text-field-input-${w++}`;this.inputmode="text";this.label=undefined;this.max=undefined;this.maxCharacters=0;this.min=undefined;this.minCharacters=0;this.name=this.inputId;this.placeholder="";this.readonly=false;this.required=false;this.resize=false;this.role=undefined;this.rows=1;this.size="medium";this.spellcheck=false;this.theme="inherit";this.truncateValue=undefined;this.type="text";this.validationInline=false;this.validationInlineInternal=false;this.validationStatus="";this.validationText="";this.debounce=0;this.value="";this.initialValue=this.value}watchDisabledHandler(){o(this.disabled,this.el)}debounceChanged(){this.icChange=l(this.icChange,this.debounce)}watchValueHandler(e){let t;if(this.maxCharacters>0){t=e.substring(0,this.maxCharacters);this.value=t}else{t=e}if(this.inputEl&&this.inputEl.value!==t){this.inputEl.value=t}this.getMaxValueExceeded(t);this.getMaxCharactersReached(t);this.icChange.emit({value:t})}connectedCallback(){this.debounceChanged()}disconnectedCallback(){var e;c(this.el,this.handleFormReset);(e=this.hostMutationObserver)===null||e===void 0?void 0:e.disconnect()}componentWillLoad(){if(this.value!==this.initialValue){this.watchValueHandler(this.value)}else if(this.maxCharacters>0){this.value=this.value.substring(0,this.maxCharacters)}this.getMaxValueExceeded(this.value);this.getMaxCharactersReached(this.value);this.inheritedAttributes=d(this.el,k);if(this.readonly){this.maxValueExceeded=false;this.minValueUnattained=false}h(this.el,this.handleFormReset);o(this.disabled,this.el)}componentDidLoad(){u([{prop:this.label,propName:"label"}],"Text Field");if(this.validationInlineInternal){this.getValidationText.emit({value:this.validationText})}this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{attributes:true,childList:true});if(this.autofocus&&!this.disabled&&!this.readonly){this.interval=setInterval(this.checkChildHydration,50)}}handleKeyDown(e){this.icKeydown.emit({event:e});this.maxCharactersWarning=this.maxCharactersReached}async setFocus(){var e;(e=this.inputEl)===null||e===void 0?void 0:e.focus()}render(){const{inputId:e,name:t,label:i,required:r,size:n,placeholder:o,helperText:l,hideCharCount:c,rows:d,resize:h,disabled:u,value:g,min:y,max:w,numChars:k,readonly:z,maxCharacters:C,maxCharactersWarning:I,maxCharactersReached:$,minCharacters:N,minCharactersUnattained:j,minValueUnattained:F,maxValueExceeded:L,validationStatus:M,validationText:T,validationInline:q,validationInlineInternal:V,spellcheck:H,inputmode:W,fullWidth:B,truncateValue:D,hiddenInput:K,theme:O}=this;const S=z||u;const U=L||F||j||I?I?p.Warning:p.Error:M;const _=I?`Maximum input is ${C} characters`:L?`Maximum value of ${w} exceeded`:F?`Minimum value of ${y} not met`:j?`Minimum input is ${N} characters`:T;const E=z?0:C;const J=I||L||F||U===p.Error?"assertive":"polite";const R=this.hasStatus(U)&&!(U==p.Success&&q)&&!V;const A=d>1;const G=E-k;const P=`${G} character${G===1?"":"s"} remaining.`;const Q=C>0?`${e}-char-count-desc`:"";const X=`${Q} ${b(e,l!=="",R)}`.trim();const Y=S&&!z;const Z=!!this.el.querySelector(`[slot="icon"]`)&&!Y;const ee=`${U===p.Error}`;K?f(true,this.el,t,g,S):m(this.el);return s(a,{class:{"ic-text-field-full-width":B,[`ic-theme-${O}`]:O!=="inherit","ic-text-field-disabled":S}},s("ic-input-container",{readonly:z,disabled:S},!this.hideLabel&&s("ic-input-label",{for:e,label:i,helperText:l,required:r,disabled:Y,readonly:z}),s("ic-input-component-container",{size:n,validationStatus:U,multiLine:A,disabled:S,readonly:z,validationInline:q,fullWidth:B},Z&&s("span",{class:{readonly:z,"has-value":this.getNumberOfCharacters(g)>0},slot:"left-icon"},s("slot",{name:"icon"})),!A?s("input",Object.assign({id:e,name:t,ref:e=>this.inputEl=e,type:this.type,min:y,max:w,value:g,class:{"no-left-pad":!Z&&z,readonly:z,"truncate-value":D},placeholder:o?o:"",required:r,disabled:S,readonly:z,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":i,"aria-describedby":X,"aria-invalid":ee,"aria-activedescendant":this.ariaActiveDescendant,"aria-expanded":this.ariaExpanded,"aria-owns":this.ariaOwns,autocomplete:this.autocomplete,autocapitalize:this.autocapitalize,spellcheck:H,inputmode:W,role:this.role,maxlength:$?C:null,minlength:j?N:null},this.inheritedAttributes)):s("textarea",Object.assign({id:e,class:{"no-resize":h===false||z,"no-left-pad":!Z&&z,readonly:z},name:t,ref:e=>this.inputEl=e,value:g,rows:d,required:r,disabled:S,placeholder:o?o:"",readonly:z,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":i,"aria-describedby":X,"aria-invalid":ee,autocapitalize:this.autocapitalize,spellcheck:H,inputmode:W,maxlength:$?C:null,minlength:j?N:null},this.inheritedAttributes)),x(this.el,"clear-button")&&s("slot",{name:"clear-button"}),x(this.el,"search-submit-button")&&s("slot",{name:"search-submit-button"})),x(this.el,"menu")&&s("slot",{name:"menu"}),(!v(M)||!v(T)||E>0||L||I||j||F)&&!V&&s("ic-input-validation",{status:this.hasStatus(U)===false||U===p.Success&&q||V?"":U,message:R?_:"",ariaLiveMode:J,for:e,fullWidth:B},!z&&E>0&&s("div",{slot:"validation-message-adornment"},!c&&s("ic-typography",{variant:"caption",class:"char-count-text"},s("span",{class:"char-count"},k,"/",E)),s("span",{class:"remaining-char-count-desc","aria-live":"polite"},P),s("span",{hidden:true,id:Q},"Field can contain a maximum of ",E," characters.")))))}get el(){return r(this)}static get watchers(){return{disabled:["watchDisabledHandler"],debounce:["debounceChanged"],value:["watchValueHandler"]}}};z.style=y;export{z as ic_text_field};
|
2
|
+
//# sourceMappingURL=p-369ff74c.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["icTextFieldCss","inputIds","MUTABLE_ATTRIBUTES","IC_INHERITED_ARIA","TextField","this","inheritedAttributes","hostMutationObserver","checkChildHydration","el","_a","shadowRoot","querySelector","classList","contains","setFocus","clearInterval","interval","getNumberOfCharacters","value","undefined","length","getMaxValueExceeded","numChars","type","minValueUnattained","Number","min","maxValueExceeded","max","getMaxCharactersReached","maxCharactersReached","maxCharacters","maxCharactersWarning","onInput","ev","target","icInput","emit","onBlur","minCharactersUnattained","minCharacters","icBlur","onFocus","icFocus","hasStatus","status","disabled","handleFormReset","initialValue","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","addedNodes","removedNodes","includes","getAttribute","checkSlotInChildMutations","forceUpdate","inputId","watchDisabledHandler","removeDisabledFalse","debounceChanged","icChange","debounceEvent","debounce","watchValueHandler","newValue","substring","inputEl","connectedCallback","disconnectedCallback","removeFormResetListener","disconnect","componentWillLoad","inheritAttributes","readonly","addFormResetListener","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","validationInlineInternal","getValidationText","validationText","MutationObserver","observe","attributes","childList","autofocus","setInterval","handleKeyDown","icKeydown","event","focus","render","name","required","size","placeholder","helperText","hideCharCount","rows","resize","validationStatus","validationInline","spellcheck","inputmode","fullWidth","truncateValue","hiddenInput","theme","disabledMode","currentStatus","IcInformationStatus","Warning","Error","currentValidationText","maxNumChars","messageAriaLive","showStatusText","Success","multiline","charsRemaining","hiddenRemainingCharCountDesc","hiddenCharCountDescId","describedBy","getInputDescribedByText","trim","disabledText","showLeftIcon","invalid","renderHiddenInput","removeHiddenInput","h","Host","class","hideLabel","for","multiLine","slot","Object","assign","id","ref","ariaActiveDescendant","ariaExpanded","ariaOwns","autocomplete","autocapitalize","role","maxlength","minlength","isSlotUsed","isEmptyString","message","ariaLiveMode","variant","hidden"],"sources":["src/components/ic-text-field/ic-text-field.css?tag=ic-text-field&encapsulation=shadow","src/components/ic-text-field/ic-text-field.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n /**\n * @prop --input-width: Width of the input field\n */\n display: block;\n\n --ic-input-label-helpertext-padding: var(--ic-space-xxs);\n --border-color: var(--ic-text-field-border-neutral);\n --border-color-hover: var(--ic-text-field-border-neutral-hover);\n --border-color-pressed: var(--ic-text-field-border-neutral-pressed);\n --border-color-disabled: var(--ic-text-field-border-disabled);\n --border-color-error: var(--ic-text-field-border-error);\n --border-color-error-hover: var(--ic-text-field-border-error-hover);\n --border-color-error-pressed: var(--ic-text-field-border-error-pressed);\n --border-color-success: var(--ic-text-field-border-success);\n --border-color-success-hover: var(--ic-text-field-border-success-hover);\n --border-color-success-pressed: var(--ic-text-field-border-success-pressed);\n --border-color-warning: var(--ic-text-field-border-warning);\n --border-color-warning-hover: var(--ic-text-field-border-warning-hover);\n --border-color-warning-pressed: var(--ic-text-field-border-warning-pressed);\n --ic-input-label-text-color: var(--ic-text-field-label);\n --ic-input-label-helper-text-color: var(--ic-text-field-subtitle);\n --ic-input-validation-status-text-color: var(--ic-text-field-state-text);\n --ic-input-validation-error: var(--ic-text-field-state-icon-error);\n --ic-input-validation-warning-icon-color: var(\n --ic-text-field-state-icon-warning\n );\n --ic-input-validation-success-icon-color: var(\n --ic-text-field-state-icon-success\n );\n --ic-input-component-container-success-icon-inline-color: var(\n --ic-text-field-state-icon-success\n );\n}\n\n:host(.ic-text-field-disabled) {\n --ic-input-label-text-color: var(--ic-text-field-label-disabled);\n --ic-input-label-helper-text-color: var(--ic-text-field-subtitle-disabled);\n --text-field-placeholder-color: var(\n --ic-text-field-text-area-placeholder-text-disabled\n );\n}\n\n:host(.ic-text-field-full-width) {\n width: 100%;\n}\n\n::placeholder {\n color: var(\n --text-field-placeholder-color,\n var(--ic-text-field-placeholder-text)\n );\n opacity: 1;\n}\n\ninput,\ntextarea {\n border: 0;\n border-radius: var(--ic-border-radius);\n color: var(--text-field-text-color, var(--ic-text-field-text));\n background-color: var(--input-bg-color, var(--ic-text-field-background));\n line-height: 1.5rem;\n letter-spacing: 0.005rem;\n width: 100%;\n padding-right: var(--ic-space-xs);\n padding-left: var(--ic-space-xs);\n caret-color: var(\n --text-field-typing-cursor,\n var(--ic-text-field-typing-cursor)\n );\n}\n\ntextarea {\n min-height: var(--ic-space-lg);\n resize: vertical;\n padding-top: 0.375rem;\n}\n\ninput:focus,\ntextarea:focus {\n border: 0;\n outline: 0;\n}\n\ninput:disabled,\ntextarea:disabled {\n color: var(\n --text-field-disabled-text-color,\n var(--ic-text-field-text-disabled)\n );\n}\n\ninput.readonly,\ntextarea.readonly {\n color: var(--ic-text-field-read-only-input-text-internal);\n}\n\n/* Chrome, Safari, Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n/* Firefox */\ninput[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\ntextarea.no-resize {\n resize: none;\n}\n\n.char-count-text {\n --ic-typography-color: var(--ic-text-field-character-limit);\n\n padding-right: var(--ic-space-xxxs);\n}\n\n:host(.ic-text-field-disabled) .char-count-text {\n --ic-typography-color: var(--ic-text-field-character-limit-disabled);\n}\n\n.no-left-pad {\n padding-left: 0;\n}\n\n::slotted([slot=\"icon\"]) {\n fill: var(--ic-text-field-text-disabled);\n}\n\n.has-value ::slotted([slot=\"icon\"]) {\n fill: var(--ic-text-field-input-internal-icon);\n}\n\n.char-count {\n margin-right: calc(-1 * var(--ic-space-xxxs));\n}\n\n.remaining-char-count-desc {\n position: absolute;\n left: -9999px;\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n}\n\ninput[type=\"search\"].truncate-value {\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n@media (forced-colors: active) {\n input.readonly,\n textarea.readonly {\n color: canvastext;\n }\n\n .has-value ::slotted([slot=\"icon\"]) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport {\n IcInformationStatus,\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n IcSizesNoLarge,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n isSlotUsed,\n removeDisabledFalse,\n checkSlotInChildMutations,\n removeHiddenInput,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcAriaAutocompleteTypes,\n IcTextFieldInputModes,\n IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n tag: \"ic-text-field\",\n styleUrl: \"ic-text-field.css\",\n shadow: true,\n})\nexport class TextField {\n private inheritedAttributes: { [k: string]: string } = {};\n private inputEl: HTMLInputElement | HTMLTextAreaElement;\n private hostMutationObserver: MutationObserver = null;\n private interval: ReturnType<typeof setInterval>;\n\n @Element() el: HTMLIcTextFieldElement;\n\n @State() numChars: number = 0;\n @State() maxCharactersReached: boolean = false;\n @State() maxCharactersWarning: boolean = false;\n @State() minCharactersUnattained: boolean = false;\n @State() maxValueExceeded: boolean = false;\n @State() minValueUnattained: boolean = false;\n\n /**\n * @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n * @slot menu - an ic-menu component will appear below the input.\n */\n\n /**\n * @internal The active element when focus is on the ic-menu items.\n */\n @Prop() ariaActiveDescendant?: string;\n\n /**\n * @internal Used to identify whether inputting any text triggers more predictions\n */\n @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n /**\n * @internal Used to identify if the slotted menu is rendered\n */\n @Prop() ariaExpanded: string;\n\n /**\n * @internal Used to identify any related child component\n */\n @Prop() ariaOwns: string;\n\n /**\n * The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n */\n @Prop() autocapitalize = \"off\";\n\n /**\n * The state of autocompletion the browser can apply on the text value.\n */\n @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n /**\n * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n */\n @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n /**\n * If `true`, the form control will have input focus when the page loads.\n */\n @Prop() autofocus = false;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * Specify whether the text field fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n */\n @Prop() fullWidth: boolean = false;\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 character count which is displayed when `maxCharacters` is set will be visually hidden.\n */\n @Prop() hideCharCount: boolean = false;\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 * @internal If `true`, the hidden form input will stop rendering for form submission.\n */\n @Prop() hiddenInput: boolean = true;\n\n /**\n * The ID for the input.\n */\n @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n /**\n * A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n */\n @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n /**\n * The label for the input.\n */\n @Prop() label!: string;\n\n /**\n * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n */\n @Prop() max: string | number = undefined;\n\n /**\n * The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)\n */\n @Prop() maxCharacters: number = 0;\n\n /**\n * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n */\n @Prop() min: string | number = undefined;\n\n /**\n * The minimum number of characters that can be entered in the field.\n */\n @Prop() minCharacters: number = 0;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The placeholder value to be displayed.\n */\n @Prop() placeholder: string = \"\";\n\n /**\n * If `true`, the read only state will be set.\n */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /**\n * If `true`, the input will require a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the multiline text area will be resizeable.\n */\n @Prop() resize: boolean = false;\n\n /**\n * @internal Used to set the role if not default textbox;\n */\n @Prop() role: string;\n\n /**\n * The number of rows to transform the text field into a text area with a specific height.\n */\n @Prop() rows: number = 1;\n\n /**\n * The size of the text field component.\n */\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /**\n * If `true`, the value of the text field will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\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 * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n */\n @Prop() truncateValue?: boolean;\n\n /**\n * The type of control to display. The default type is text.\n */\n @Prop() type: IcTextFieldTypes = \"text\";\n\n /**\n * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n */\n @Prop() validationInline: boolean = false;\n\n /**\n * @internal If `true`, the validation will display inline.\n */\n @Prop() validationInlineInternal: boolean = false;\n\n /**\n * The validation state - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The validation state - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationText: string = \"\";\n\n /**\n * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n */\n @Prop() debounce: number = 0;\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /**\n * The value of the text field.\n */\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n @State() initialValue = this.value;\n\n @Watch(\"value\")\n private watchValueHandler(newValue: string): void {\n let value;\n\n if (this.maxCharacters > 0) {\n value = newValue.substring(0, this.maxCharacters);\n this.value = value;\n } else {\n value = newValue;\n }\n\n if (this.inputEl && this.inputEl.value !== value) {\n this.inputEl.value = value;\n }\n\n this.getMaxValueExceeded(value);\n\n this.getMaxCharactersReached(value);\n\n this.icChange.emit({ value });\n }\n\n /**\n * @internal Emitted when the validationInlineInternal is `true`\n */\n @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when input loses focus.\n */\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when input gains focus.\n */\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when a keydown event occurred.\n */\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n if (this.value !== this.initialValue) {\n this.watchValueHandler(this.value);\n } else if (this.maxCharacters > 0) {\n this.value = this.value.substring(0, this.maxCharacters);\n }\n\n this.getMaxValueExceeded(this.value);\n this.getMaxCharactersReached(this.value);\n\n this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n\n if (this.readonly) {\n this.maxValueExceeded = false;\n this.minValueUnattained = false;\n }\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n if (this.validationInlineInternal) {\n this.getValidationText.emit({ value: this.validationText });\n }\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n childList: true,\n });\n\n if (this.autofocus && !this.disabled && !this.readonly) {\n this.interval = setInterval(this.checkChildHydration, 50);\n }\n }\n\n private checkChildHydration = () => {\n const el = this.el.shadowRoot?.querySelector(\"ic-typography\");\n if (el && el.classList.contains(\"hydrated\")) {\n this.setFocus();\n clearInterval(this.interval);\n }\n };\n\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({ event: ev });\n this.maxCharactersWarning = this.maxCharactersReached;\n }\n\n /**\n * Sets focus on the native `input`.\n */\n\n @Method()\n async setFocus() {\n this.inputEl?.focus();\n }\n\n private getNumberOfCharacters = (value: string) =>\n value !== null && value !== undefined ? value.length : 0;\n\n private getMaxValueExceeded = (value: string) => {\n this.numChars = this.getNumberOfCharacters(value);\n\n if (this.type === \"number\") {\n this.minValueUnattained = value && Number(value) < Number(this.min);\n this.maxValueExceeded = Number(value) > Number(this.max);\n }\n };\n\n private getMaxCharactersReached = (value: string) => {\n this.numChars = this.getNumberOfCharacters(value);\n\n this.maxCharactersReached =\n this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;\n\n if (this.maxCharactersWarning && !this.maxCharactersReached) {\n this.maxCharactersWarning = false;\n }\n };\n\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n private onBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.numChars = value.length;\n this.minCharactersUnattained =\n this.minCharacters > 0 ? this.numChars < this.minCharacters : false;\n this.icBlur.emit({ value: value });\n };\n\n private onFocus = (ev: Event) => {\n this.icFocus.emit({ value: (ev.target as HTMLInputElement).value });\n };\n\n private hasStatus = (status: IcInformationStatusOrEmpty) =>\n status !== \"\" && !this.disabled;\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(\n ({ attributeName, type, addedNodes, removedNodes }) => {\n if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n this.inheritedAttributes[attributeName] =\n this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n } else if (type === \"childList\") {\n forceComponentUpdate = checkSlotInChildMutations(\n addedNodes,\n removedNodes,\n \"icon\"\n );\n }\n }\n );\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n size,\n placeholder,\n helperText,\n hideCharCount,\n rows,\n resize,\n disabled,\n value,\n min,\n max,\n numChars,\n readonly,\n maxCharacters,\n maxCharactersWarning,\n maxCharactersReached,\n minCharacters,\n minCharactersUnattained,\n minValueUnattained,\n maxValueExceeded,\n validationStatus,\n validationText,\n validationInline,\n validationInlineInternal,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n theme,\n } = this;\n\n const disabledMode = readonly || disabled;\n\n const currentStatus =\n maxValueExceeded ||\n minValueUnattained ||\n minCharactersUnattained ||\n maxCharactersWarning\n ? maxCharactersWarning\n ? IcInformationStatus.Warning\n : IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxCharactersWarning\n ? `Maximum input is ${maxCharacters} characters`\n : maxValueExceeded\n ? `Maximum value of ${max} exceeded`\n : minValueUnattained\n ? `Minimum value of ${min} not met`\n : minCharactersUnattained\n ? `Minimum input is ${minCharacters} characters`\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxCharacters;\n const messageAriaLive =\n maxCharactersWarning ||\n maxValueExceeded ||\n minValueUnattained ||\n currentStatus === IcInformationStatus.Error\n ? \"assertive\"\n : \"polite\";\n\n const showStatusText =\n this.hasStatus(currentStatus) &&\n !(currentStatus == IcInformationStatus.Success && validationInline) &&\n !validationInlineInternal;\n\n const multiline = rows > 1;\n\n const charsRemaining = maxNumChars - numChars;\n const hiddenRemainingCharCountDesc = `${charsRemaining} character${\n charsRemaining === 1 ? \"\" : \"s\"\n } remaining.`;\n const hiddenCharCountDescId =\n maxCharacters > 0 ? `${inputId}-char-count-desc` : \"\";\n\n const describedBy = `${hiddenCharCountDescId} ${getInputDescribedByText(\n inputId,\n helperText !== \"\",\n showStatusText\n )}`.trim();\n\n const disabledText = disabledMode && !readonly;\n const showLeftIcon =\n !!this.el.querySelector(`[slot=\"icon\"]`) && !disabledText;\n\n const invalid = `${currentStatus === IcInformationStatus.Error}`;\n\n hiddenInput\n ? renderHiddenInput(true, this.el, name, value, disabledMode)\n : removeHiddenInput(this.el);\n\n return (\n <Host\n class={{\n \"ic-text-field-full-width\": fullWidth,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n \"ic-text-field-disabled\": disabledMode,\n }}\n >\n <ic-input-container readonly={readonly} disabled={disabledMode}>\n {!this.hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n ></ic-input-label>\n )}\n\n <ic-input-component-container\n size={size}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {showLeftIcon && (\n <span\n class={{\n readonly,\n \"has-value\": this.getNumberOfCharacters(value) > 0,\n }}\n slot=\"left-icon\"\n >\n <slot name=\"icon\" />\n </span>\n )}\n\n {!multiline ? (\n <input\n id={inputId}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLInputElement)}\n type={this.type}\n min={min}\n max={max}\n value={value}\n class={{\n \"no-left-pad\": !showLeftIcon && readonly,\n readonly,\n \"truncate-value\": truncateValue,\n }}\n placeholder={placeholder ? placeholder : \"\"}\n required={required}\n disabled={disabledMode}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n aria-activedescendant={this.ariaActiveDescendant}\n aria-expanded={this.ariaExpanded}\n aria-owns={this.ariaOwns}\n autocomplete={this.autocomplete}\n autocapitalize={this.autocapitalize}\n spellcheck={spellcheck}\n inputmode={inputmode}\n role={this.role}\n maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\n {...this.inheritedAttributes}\n ></input>\n ) : (\n <textarea\n id={inputId}\n class={{\n \"no-resize\": resize === false || readonly,\n \"no-left-pad\": !showLeftIcon && readonly,\n readonly,\n }}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n value={value}\n rows={rows}\n required={required}\n disabled={disabledMode}\n placeholder={placeholder ? placeholder : \"\"}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n autocapitalize={this.autocapitalize}\n spellcheck={spellcheck}\n inputmode={inputmode}\n maxlength={maxCharactersReached ? maxCharacters : null}\n minlength={minCharactersUnattained ? minCharacters : null}\n {...this.inheritedAttributes}\n ></textarea>\n )}\n {isSlotUsed(this.el, \"clear-button\") && (\n <slot name=\"clear-button\"></slot>\n )}\n {isSlotUsed(this.el, \"search-submit-button\") && (\n <slot name=\"search-submit-button\"></slot>\n )}\n </ic-input-component-container>\n {isSlotUsed(this.el, \"menu\") && <slot name=\"menu\"></slot>}\n {(!isEmptyString(validationStatus) ||\n !isEmptyString(validationText) ||\n maxNumChars > 0 ||\n maxValueExceeded ||\n maxCharactersWarning ||\n minCharactersUnattained ||\n minValueUnattained) &&\n !validationInlineInternal && (\n <ic-input-validation\n status={\n this.hasStatus(currentStatus) === false ||\n (currentStatus === IcInformationStatus.Success &&\n validationInline) ||\n validationInlineInternal\n ? \"\"\n : currentStatus\n }\n message={showStatusText ? currentValidationText : \"\"}\n ariaLiveMode={messageAriaLive}\n for={inputId}\n fullWidth={fullWidth}\n >\n {!readonly && maxNumChars > 0 && (\n <div slot=\"validation-message-adornment\">\n {!hideCharCount && (\n <ic-typography variant=\"caption\" class=\"char-count-text\">\n <span class=\"char-count\">\n {numChars}/{maxNumChars}\n </span>\n </ic-typography>\n )}\n <span class=\"remaining-char-count-desc\" aria-live=\"polite\">\n {hiddenRemainingCharCountDesc}\n </span>\n <span hidden={true} id={hiddenCharCountDescId}>\n Field can contain a maximum of {maxNumChars} characters.\n </span>\n </div>\n )}\n </ic-input-validation>\n )}\n </ic-input-container>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as e,c as i,h as t,H as r,g as a}from"./p-6b5e91e2.js";import{c as n}from"./p-f074ef5b.js";import{a as o,i as s,V as c,I as l}from"./p-eafa4df2.js";const d='/*! 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}:host ::slotted(ic-typography){--ic-typography-color:var(--ic-alert-description)}.container{min-height:3.5rem;border-radius:var(--ic-space-xxs) var(--ic-space-xxxs) var(--ic-space-xxxs)\n var(--ic-space-xxs);position:relative;display:flex;align-items:center}.container-neutral{background-color:var(--ic-alert-background-neutral);border:var(--ic-space-xxxs) solid var(--ic-alert-border-neutral)}.container-info{background-color:var(--ic-alert-background-info);border:var(--ic-space-xxxs) solid var(--ic-alert-border-info)}.container-warning{background-color:var(--ic-alert-background-warning);border:var(--ic-space-xxxs) solid var(--ic-alert-border-warning)}.container-error{background-color:var(--ic-alert-background-error);border:var(--ic-space-xxxs) solid var(--ic-alert-border-error)}.container-success{background-color:var(--ic-alert-background-success);border:var(--ic-space-xxxs) solid var(--ic-alert-border-success)}.alert-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);position:absolute}.divider-neutral{background-color:var(--ic-alert-status-type-neutral)}.divider-info{background-color:var(--ic-alert-status-type-info)}.divider-warning{background-color:var(--ic-alert-status-type-warning)}.divider-error{background-color:var(--ic-alert-status-type-error)}.divider-success{background-color:var(--ic-alert-status-type-success)}.alert-icon{height:var(--ic-space-lg);width:1.375rem;margin-left:1.125rem}.icon-placeholder{margin-left:var(--ic-space-xs)}.alert-icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}:host([showdefaulticon="false"]) .icon-neutral{visibility:hidden;width:0;margin-left:0.625rem}.icon-neutral>svg,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block;fill:var(--ic-alert-icon-neutral)}:host([variant="info"]) .alert-icon svg{fill:var(--ic-alert-icon-info)}:host([variant="warning"]) .alert-icon svg{fill:var(--ic-alert-icon-warning)}:host([variant="error"]) .alert-icon svg{fill:var(--ic-alert-icon-error)}:host([variant="success"]) .alert-icon svg{fill:var(--ic-alert-icon-success)}.alert-content{display:flex;align-items:center;margin-left:0.625rem;width:100%}.alert-message{display:flex;align-items:center;padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;flex:1;--ic-typography-color:var(--ic-alert-description)}.alert-message-title-above{display:inline}.alert-title{margin-right:var(--ic-space-xs);--ic-typography-color:var(--ic-alert-title)}.alert-title-above{white-space:normal}.alert-action-container{margin-right:var(--ic-space-xs);display:flex;align-items:center}.dismiss-icon{margin-right:var(--ic-space-xxxs);margin-left:-0.375rem;padding:0.375rem;border:none;border-radius:50%;background-color:inherit;display:flex;align-items:center;justify-content:center}.dismiss-icon>svg{color:var(--ic-alert-icon-dismissible)}.dismiss-icon:hover{cursor:pointer}@media (max-width: 628px){.alert-content{display:flex;flex-direction:column;align-items:flex-start}.alert-message{display:flex;flex-direction:column;align-items:flex-start}.alert-title{white-space:normal}.alert-action-container{margin-bottom:var(--ic-space-xs)}}@media (forced-colors: active){.container{border:var(--ic-border-hc)}}';const p=class{constructor(t){e(this,t);this.icDismiss=i(this,"icDismiss",7);this.hostMutationObserver=null;this.dismissAction=()=>{this.icDismiss.emit()};this.alertTitleWrap=false;this.visible=true;this.announced=true;this.dismissible=false;this.heading="";this.message=undefined;this.showDefaultIcon=true;this.theme="inherit";this.titleAbove=false;this.variant="neutral"}disconnectedCallback(){var e;(e=this.hostMutationObserver)===null||e===void 0?void 0:e.disconnect()}componentDidLoad(){this.alertTitleShouldWrap();this.hostMutationObserver=new MutationObserver((e=>o(e,"action",this)));this.hostMutationObserver.observe(this.el,{childList:true})}handleClick(){this.visible=!this.visible}alertTitleShouldWrap(){var e;const i=(e=this.el.shadowRoot.querySelector(".alert-title"))===null||e===void 0?void 0:e.clientHeight;if(i>24)this.alertTitleWrap=true}render(){const{variant:e,heading:i,message:a,titleAbove:o,dismissible:d,announced:p,visible:u,showDefaultIcon:b,theme:m}=this;return u&&t(r,{role:p?"alert":null,class:{[l.Dark]:true,[`ic-theme-${m}`]:m!=="inherit"}},t("div",{class:{["container"]:true,[`container-${e}`]:true}},t("div",{class:"alert-icon-container"},t("div",{class:{["divider"]:true,[`divider-${e}`]:true}}),e==="neutral"?s(this.el,"neutral-icon")?t("div",{class:"alert-icon svg-container icon-neutral"},t("slot",{name:"neutral-icon"})):b?t("span",{class:{["alert-icon"]:true,["svg-container"]:true,[`icon-${e}`]:true},innerHTML:c[e].icon}):t("div",{class:"icon-placeholder"}):t("span",{class:{["alert-icon"]:true,["svg-container"]:true,[`icon-${e}`]:true},innerHTML:c[e].icon})),t("div",{class:"alert-content"},t("div",{class:{["alert-message"]:true,["alert-message-title-above"]:o||this.alertTitleWrap}},i&&t("ic-typography",{class:{["alert-title"]:true,["alert-title-above"]:o||this.alertTitleWrap},variant:"subtitle-large"},t("p",null,i)),t("slot",{name:"message"},t("ic-typography",{variant:"body"},a))),s(this.el,"action")&&t("div",{class:"alert-action-container"},t("slot",{name:"action"}))),t("div",{class:"dismiss-icon-container"},d&&t("ic-button",{class:{["svg-container"]:true,["dismiss-icon"]:true},innerHTML:n,onClick:this.dismissAction,variant:"icon",theme:"dark",title:"Dismiss"}))))}get el(){return a(this)}};p.style=d;export{p as ic_alert};
|
2
|
+
//# sourceMappingURL=p-46dd7413.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["icAlertCss","Alert","this","hostMutationObserver","dismissAction","icDismiss","emit","disconnectedCallback","_a","disconnect","componentDidLoad","alertTitleShouldWrap","MutationObserver","mutationList","renderDynamicChildSlots","observe","el","childList","handleClick","visible","titleHeight","shadowRoot","querySelector","clientHeight","alertTitleWrap","render","variant","heading","message","titleAbove","dismissible","announced","showDefaultIcon","theme","h","Host","role","class","IcBrandForegroundEnum","Dark","isSlotUsed","name","innerHTML","VARIANT_ICONS","icon","closeIcon","onClick","title"],"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n:host ::slotted(ic-typography) {\n --ic-typography-color: var(--ic-alert-description);\n}\n\n.container {\n min-height: 3.5rem;\n border-radius: var(--ic-space-xxs) var(--ic-space-xxxs) var(--ic-space-xxxs)\n var(--ic-space-xxs);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.container-neutral {\n background-color: var(--ic-alert-background-neutral);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-neutral);\n}\n\n.container-info {\n background-color: var(--ic-alert-background-info);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-info);\n}\n\n.container-warning {\n background-color: var(--ic-alert-background-warning);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-warning);\n}\n\n.container-error {\n background-color: var(--ic-alert-background-error);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-error);\n}\n\n.container-success {\n background-color: var(--ic-alert-background-success);\n border: var(--ic-space-xxxs) solid var(--ic-alert-border-success);\n}\n\n.alert-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n position: absolute;\n}\n\n.divider-neutral {\n background-color: var(--ic-alert-status-type-neutral);\n}\n\n.divider-info {\n background-color: var(--ic-alert-status-type-info);\n}\n\n.divider-warning {\n background-color: var(--ic-alert-status-type-warning);\n}\n\n.divider-error {\n background-color: var(--ic-alert-status-type-error);\n}\n\n.divider-success {\n background-color: var(--ic-alert-status-type-success);\n}\n\n.alert-icon {\n height: var(--ic-space-lg);\n width: 1.375rem;\n margin-left: 1.125rem;\n}\n\n.icon-placeholder {\n margin-left: var(--ic-space-xs);\n}\n\n.alert-icon > svg {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n}\n\n/* required for Gatsby as prop does not seem to work when set to false */\n:host([showdefaulticon=\"false\"]) .icon-neutral {\n visibility: hidden;\n width: 0;\n margin-left: 0.625rem;\n}\n\n.icon-neutral > svg,\n::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n fill: var(--ic-alert-icon-neutral);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-warning);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n fill: var(--ic-alert-icon-success);\n}\n\n.alert-content {\n display: flex;\n align-items: center;\n margin-left: 0.625rem;\n width: 100%;\n}\n\n.alert-message {\n display: flex;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n flex: 1;\n --ic-typography-color: var(--ic-alert-description);\n}\n\n.alert-message-title-above {\n display: inline;\n}\n\n.alert-title {\n margin-right: var(--ic-space-xs);\n --ic-typography-color: var(--ic-alert-title);\n}\n\n.alert-title-above {\n white-space: normal;\n}\n\n.alert-action-container {\n margin-right: var(--ic-space-xs);\n display: flex;\n align-items: center;\n}\n\n.dismiss-icon {\n margin-right: var(--ic-space-xxxs);\n margin-left: -0.375rem;\n padding: 0.375rem;\n border: none;\n border-radius: 50%;\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dismiss-icon > svg {\n color: var(--ic-alert-icon-dismissible);\n}\n\n.dismiss-icon:hover {\n cursor: pointer;\n}\n\n@media (max-width: 628px) {\n .alert-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-message {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-title {\n white-space: normal;\n }\n\n .alert-action-container {\n margin-bottom: var(--ic-space-xs);\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-border-hc);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, renderDynamicChildSlots } from \"../../utils/helpers\";\nimport {\n IcBrandForegroundEnum,\n IcStatusVariants,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/**\n * @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n */\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /**\n * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n */\n @Prop() announced?: boolean = true;\n\n /**\n * If `true`, the alert will have a close icon at the end to dismiss it.\n */\n @Prop() dismissible?: boolean = false;\n\n /**\n * The optional title to display at the start of the alert.\n */\n @Prop() heading?: string = \"\";\n\n /**\n * The main body message of the alert.\n */\n @Prop() message?: string;\n\n /**\n * If `true`, the default icon for the neutral variant will appear on the left of the alert.\n */\n @Prop() showDefaultIcon: boolean = true;\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 * If `true`, the title and message will appear above and below instead of inline.\n */\n @Prop() titleAbove?: boolean = false;\n\n /**\n * The variant of the alert which will be rendered.\n */\n @Prop() variant?: IcStatusVariants = \"neutral\";\n\n /**\n * Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"action\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight > 24) this.alertTitleWrap = true;\n }\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n showDefaultIcon,\n theme,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [IcBrandForegroundEnum.Dark]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n isSlotUsed(this.el, \"neutral-icon\") ? (\n <div class=\"alert-icon svg-container icon-neutral\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n ) : showDefaultIcon ? (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n ) : (\n <div class=\"icon-placeholder\"></div>\n )\n ) : (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove || this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove || this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n theme=\"dark\"\n title=\"Dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"],"mappings":"6JAAA,MAAMA,EAAa,snL,MC8BNC,EAAK,M,8DACRC,KAAAC,qBAAyC,KAwEzCD,KAAAE,cAAgB,KACtBF,KAAKG,UAAUC,MAAM,E,oBArEY,M,aACP,K,eAKE,K,iBAKE,M,aAKL,G,4CAUQ,K,WAKL,U,gBAKC,M,aAKM,S,CAOrC,oBAAAC,G,OACEC,EAAAN,KAAKC,wBAAoB,MAAAK,SAAA,SAAAA,EAAEC,Y,CAG7B,gBAAAC,GACER,KAAKS,uBAELT,KAAKC,qBAAuB,IAAIS,kBAAkBC,GAChDC,EAAwBD,EAAc,SAAUX,QAElDA,KAAKC,qBAAqBY,QAAQb,KAAKc,GAAI,CACzCC,UAAW,M,CAKf,WAAAC,GACEhB,KAAKiB,SAAWjB,KAAKiB,O,CAOf,oBAAAR,G,MACN,MAAMS,GACJZ,EAAAN,KAAKc,GAAGK,WAAWC,cAAc,mBAAe,MAAAd,SAAA,SAAAA,EAAEe,aACpD,GAAIH,EAAc,GAAIlB,KAAKsB,eAAiB,I,CAG9C,MAAAC,GACE,MAAMC,QACJA,EAAOC,QACPA,EAAOC,QACPA,EAAOC,WACPA,EAAUC,YACVA,EAAWC,UACXA,EAASZ,QACTA,EAAOa,gBACPA,EAAeC,MACfA,GACE/B,KAEJ,OACEiB,GACEe,EAACC,EAAI,CACHC,KAAML,EAAY,QAAU,KAC5BM,MAAO,CACL,CAACC,EAAsBC,MAAO,KAC9B,CAAC,YAAYN,KAAUA,IAAU,YAGnCC,EAAA,OACEG,MAAO,CACL,CAAC,aAAc,KACf,CAAC,aAAaX,KAAY,OAG5BQ,EAAA,OAAKG,MAAM,wBACTH,EAAA,OACEG,MAAO,CACL,CAAC,WAAY,KACb,CAAC,WAAWX,KAAY,QAG3BA,IAAY,UACXc,EAAWtC,KAAKc,GAAI,gBAClBkB,EAAA,OAAKG,MAAM,yCACTH,EAAA,QAAMO,KAAK,kBAEXT,EACFE,EAAA,QACEG,MAAO,CACL,CAAC,cAAe,KAChB,CAAC,iBAAkB,KACnB,CAAC,QAAQX,KAAY,MAEvBgB,UAAWC,EAAcjB,GAASkB,OAGpCV,EAAA,OAAKG,MAAM,qBAGbH,EAAA,QACEG,MAAO,CACL,CAAC,cAAe,KAChB,CAAC,iBAAkB,KACnB,CAAC,QAAQX,KAAY,MAEvBgB,UAAWC,EAAcjB,GAASkB,QAIxCV,EAAA,OAAKG,MAAM,iBACTH,EAAA,OACEG,MAAO,CACL,CAAC,iBAAkB,KACnB,CAAC,6BACCR,GAAc3B,KAAKsB,iBAGtBG,GACCO,EAAA,iBACEG,MAAO,CACL,CAAC,eAAgB,KACjB,CAAC,qBAAsBR,GAAc3B,KAAKsB,gBAE5CE,QAAQ,kBAERQ,EAAA,SAAIP,IAGRO,EAAA,QAAMO,KAAK,WACTP,EAAA,iBAAeR,QAAQ,QAAQE,KAGlCY,EAAWtC,KAAKc,GAAI,WACnBkB,EAAA,OAAKG,MAAM,0BACTH,EAAA,QAAMO,KAAK,aAIjBP,EAAA,OAAKG,MAAM,0BACRP,GACCI,EAAA,aACEG,MAAO,CACL,CAAC,iBAAkB,KACnB,CAAC,gBAAiB,MAEpBK,UAAWG,EACXC,QAAS5C,KAAKE,cACdsB,QAAQ,OACRO,MAAM,OACNc,MAAM,c"}
|