@ukic/web-components 2.1.0-beta.10 → 2.1.0-beta.12
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/chevron-icon-2bb3a907.js +10 -0
- package/dist/cjs/chevron-icon-2bb3a907.js.map +1 -0
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/{helpers-6eb26e7a.js → helpers-2021e212.js} +3 -2
- package/dist/cjs/helpers-2021e212.js.map +1 -0
- package/dist/cjs/ic-alert.cjs.entry.js +2 -2
- package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-back-to-top.cjs.entry.js +2 -2
- package/dist/cjs/ic-back-to-top.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 +4 -4
- package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +38 -10
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card.cjs.entry.js +5 -5
- package/dist/cjs/ic-card.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +3 -3
- package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +4 -3
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-chip.cjs.entry.js +2 -2
- package/dist/cjs/ic-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-entity.cjs.entry.js +1 -1
- package/dist/cjs/ic-data-entity.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +2 -2
- package/dist/cjs/ic-data-row.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +2 -2
- package/dist/cjs/ic-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js +2 -2
- package/dist/cjs/ic-footer-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer.cjs.entry.js +1 -1
- package/dist/cjs/ic-hero.cjs.entry.js +4 -2
- package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +10 -4
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +14 -8
- 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 +3 -3
- package/dist/cjs/ic-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-menu-group.cjs.entry.js +24 -0
- package/dist/cjs/ic-menu-group.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-menu-item.cjs.entry.js +120 -0
- package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-navigation-button.cjs.entry.js +2 -2
- package/dist/cjs/ic-navigation-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +4 -4
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +5 -4
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-menu.cjs.entry.js +2 -2
- package/dist/cjs/ic-navigation-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +2 -2
- package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +237 -0
- package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-radio-group.cjs.entry.js +3 -3
- package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js +3 -3
- package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +5 -3
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-select.cjs.entry.js +16 -23
- 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 +2 -2
- package/dist/cjs/ic-status-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +1 -1
- package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +2 -2
- package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-context.cjs.entry.js +41 -4
- package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +3 -2
- package/dist/cjs/ic-tab-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js +10 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab.cjs.entry.js +13 -1
- package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-text-field.cjs.entry.js +37 -9
- package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-theme.cjs.entry.js +1 -1
- package/dist/cjs/ic-toast.cjs.entry.js +6 -2
- package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +6 -2
- 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/ic-typography.cjs.entry.js.map +1 -1
- package/dist/cjs/index-f79a4e53.js +12 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/types-3eb02246.js.map +1 -1
- package/dist/collection/collection-manifest.json +3 -0
- package/dist/collection/components/ic-alert/ic-alert.css +1 -1
- package/dist/collection/components/ic-back-to-top/ic-back-to-top.css +3 -3
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.css +19 -4
- package/dist/collection/components/ic-button/ic-button.css +1 -1
- package/dist/collection/components/ic-button/ic-button.js +120 -2
- package/dist/collection/components/ic-button/ic-button.js.map +1 -1
- package/dist/collection/components/ic-card/ic-card.css +30 -9
- package/dist/collection/components/ic-card/ic-card.js +2 -2
- package/dist/collection/components/ic-card/ic-card.js.map +1 -1
- package/dist/collection/components/ic-checkbox/ic-checkbox.css +7 -7
- package/dist/collection/components/ic-checkbox/ic-checkbox.js +20 -1
- package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.css +3 -3
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +1 -1
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
- package/dist/collection/components/ic-chip/ic-chip.css +11 -10
- package/dist/collection/components/ic-data-entity/ic-data-entity.css +1 -1
- package/dist/collection/components/ic-data-row/ic-data-row.css +1 -1
- package/dist/collection/components/ic-divider/ic-divider.css +1 -1
- package/dist/collection/components/ic-footer-link/ic-footer-link.css +16 -3
- package/dist/collection/components/ic-hero/ic-hero.css +23 -22
- package/dist/collection/components/ic-hero/ic-hero.js +2 -0
- package/dist/collection/components/ic-hero/ic-hero.js.map +1 -1
- package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.css +4 -8
- package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js +8 -2
- 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.css +6 -5
- package/dist/collection/components/ic-link/ic-link.css +16 -3
- package/dist/collection/components/ic-link/ic-link.js +6 -3
- package/dist/collection/components/ic-link/ic-link.js.map +1 -1
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css +4 -4
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js +11 -3
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js.map +1 -1
- package/dist/collection/components/ic-menu/ic-menu.css +9 -9
- package/dist/collection/components/ic-menu/ic-menu.js +12 -6
- package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
- package/dist/collection/components/ic-menu-group/ic-menu-group.css +465 -0
- package/dist/collection/components/ic-menu-group/ic-menu-group.js +45 -0
- package/dist/collection/components/ic-menu-group/ic-menu-group.js.map +1 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.css +633 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.js +392 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.js.map +1 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.types.js +2 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.types.js.map +1 -0
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.css +4 -0
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.css +2 -2
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.css +2 -2
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +1 -0
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
- package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.css +18 -14
- package/dist/collection/components/ic-page-header/ic-page-header.css +1 -1
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.css +535 -0
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +433 -0
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map +1 -0
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.test.a11y.js +13 -0
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.test.a11y.js.map +1 -0
- package/dist/collection/components/ic-radio-group/ic-radio-group.css +4 -4
- package/dist/collection/components/ic-radio-group/ic-radio-group.js +1 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
- package/dist/collection/components/ic-radio-option/ic-radio-option.css +6 -6
- package/dist/collection/components/ic-radio-option/ic-radio-option.js +1 -1
- 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 +6 -6
- package/dist/collection/components/ic-search-bar/ic-search-bar.js +3 -1
- package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select.css +17 -17
- package/dist/collection/components/ic-select/ic-select.js +19 -23
- package/dist/collection/components/ic-select/ic-select.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation-test-examples.js +90 -0
- package/dist/collection/components/ic-side-navigation/ic-side-navigation-test-examples.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.css +7 -4
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
- package/dist/collection/components/ic-status-tag/ic-status-tag.css +8 -7
- package/dist/collection/components/ic-step/ic-step.css +1 -1
- package/dist/collection/components/ic-switch/ic-switch.css +4 -4
- package/dist/collection/components/ic-tab/ic-tab.css +4 -4
- package/dist/collection/components/ic-tab/ic-tab.js +50 -0
- package/dist/collection/components/ic-tab/ic-tab.js.map +1 -1
- package/dist/collection/components/ic-tab-context/ic-tab-context.js +79 -4
- package/dist/collection/components/ic-tab-context/ic-tab-context.js.map +1 -1
- package/dist/collection/components/ic-tab-group/ic-tab-group.css +1 -1
- package/dist/collection/components/ic-tab-group/ic-tab-group.js +6 -2
- package/dist/collection/components/ic-tab-group/ic-tab-group.js.map +1 -1
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.css +0 -4
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.js +56 -3
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.js.map +1 -1
- package/dist/collection/components/ic-text-field/ic-text-field.css +2 -3
- package/dist/collection/components/ic-text-field/ic-text-field.js +73 -7
- package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
- package/dist/collection/components/ic-toast/ic-toast.css +5 -0
- package/dist/collection/components/ic-toast/ic-toast.js +7 -3
- package/dist/collection/components/ic-toast/ic-toast.js.map +1 -1
- package/dist/collection/components/ic-tooltip/ic-tooltip.js +6 -2
- package/dist/collection/components/ic-tooltip/ic-tooltip.js.map +1 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.css +12 -15
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js +4 -0
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js.map +1 -1
- package/dist/collection/components/ic-typography/ic-typography.css +19 -1
- package/dist/collection/components/ic-typography/ic-typography.js +1 -1
- package/dist/collection/utils/helpers.js +1 -1
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/components/helpers.js +2 -2
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/ic-alert.js +1 -1
- package/dist/components/ic-alert.js.map +1 -1
- package/dist/components/ic-back-to-top.js +1 -1
- package/dist/components/ic-back-to-top.js.map +1 -1
- package/dist/components/ic-breadcrumb2.js +1 -1
- package/dist/components/ic-breadcrumb2.js.map +1 -1
- package/dist/components/ic-button2.js +25 -3
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-card.js +3 -3
- package/dist/components/ic-card.js.map +1 -1
- package/dist/components/ic-checkbox-group.js +2 -2
- package/dist/components/ic-checkbox-group.js.map +1 -1
- package/dist/components/ic-checkbox.js +4 -2
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/components/ic-chip.js +1 -1
- package/dist/components/ic-chip.js.map +1 -1
- package/dist/components/ic-data-entity.js +1 -1
- package/dist/components/ic-data-entity.js.map +1 -1
- package/dist/components/ic-data-row.js +1 -1
- package/dist/components/ic-data-row.js.map +1 -1
- package/dist/components/ic-divider2.js +1 -1
- package/dist/components/ic-divider2.js.map +1 -1
- package/dist/components/ic-footer-link.js +1 -1
- package/dist/components/ic-footer-link.js.map +1 -1
- package/dist/components/ic-hero.js +3 -1
- package/dist/components/ic-hero.js.map +1 -1
- package/dist/components/ic-horizontal-scroll2.js +10 -4
- package/dist/components/ic-horizontal-scroll2.js.map +1 -1
- package/dist/components/ic-input-component-container2.js +1 -1
- package/dist/components/ic-input-component-container2.js.map +1 -1
- package/dist/components/ic-link2.js +2 -2
- package/dist/components/ic-link2.js.map +1 -1
- package/dist/components/ic-loading-indicator2.js +12 -4
- package/dist/components/ic-loading-indicator2.js.map +1 -1
- package/dist/components/ic-menu-group.d.ts +11 -0
- package/dist/components/ic-menu-group.js +46 -0
- package/dist/components/ic-menu-group.js.map +1 -0
- package/dist/components/ic-menu-item.d.ts +11 -0
- package/dist/components/ic-menu-item.js +8 -0
- package/dist/components/ic-menu-item.js.map +1 -0
- package/dist/components/ic-menu-item2.js +167 -0
- package/dist/components/ic-menu-item2.js.map +1 -0
- package/dist/components/ic-menu2.js +13 -8
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-button.js +1 -1
- package/dist/components/ic-navigation-button.js.map +1 -1
- package/dist/components/ic-navigation-group.js +1 -1
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/components/ic-navigation-item.js +2 -1
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-navigation-menu2.js +2 -2
- package/dist/components/ic-navigation-menu2.js.map +1 -1
- package/dist/components/ic-page-header.js +1 -1
- package/dist/components/ic-page-header.js.map +1 -1
- package/dist/components/ic-popover-menu.d.ts +11 -0
- package/dist/components/ic-popover-menu.js +291 -0
- package/dist/components/ic-popover-menu.js.map +1 -0
- package/dist/components/ic-radio-group.js +2 -2
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-radio-option.js +3 -3
- package/dist/components/ic-radio-option.js.map +1 -1
- package/dist/components/ic-search-bar.js +5 -3
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-select.js +16 -23
- package/dist/components/ic-select.js.map +1 -1
- package/dist/components/ic-side-navigation.js +3 -3
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-status-tag.js +1 -1
- package/dist/components/ic-status-tag.js.map +1 -1
- package/dist/components/ic-step.js +1 -1
- package/dist/components/ic-step.js.map +1 -1
- package/dist/components/ic-stepper.js +1 -1
- package/dist/components/ic-switch.js +1 -1
- package/dist/components/ic-switch.js.map +1 -1
- package/dist/components/ic-tab-context.js +44 -6
- package/dist/components/ic-tab-context.js.map +1 -1
- package/dist/components/ic-tab-group.js +2 -1
- package/dist/components/ic-tab-group.js.map +1 -1
- package/dist/components/ic-tab-panel.js +11 -2
- package/dist/components/ic-tab-panel.js.map +1 -1
- package/dist/components/ic-tab.js +13 -1
- package/dist/components/ic-tab.js.map +1 -1
- package/dist/components/ic-text-field2.js +41 -9
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-theme.js +1 -1
- package/dist/components/ic-toast.js +9 -5
- package/dist/components/ic-toast.js.map +1 -1
- package/dist/components/ic-tooltip2.js +6 -2
- package/dist/components/ic-tooltip2.js.map +1 -1
- package/dist/components/ic-top-navigation.js +6 -2
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/components/ic-typography2.js +1 -1
- package/dist/components/ic-typography2.js.map +1 -1
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.js +3 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/types.js.map +1 -1
- package/dist/core/core.css +8 -3
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/{p-24240e11.js → p-06321d19.js} +2 -2
- package/dist/core/p-08535d97.entry.js +2 -0
- package/dist/core/p-08535d97.entry.js.map +1 -0
- package/dist/core/{p-284970bc.entry.js → p-0a463a65.entry.js} +2 -2
- package/dist/core/p-0d4ccf6a.entry.js +2 -0
- package/dist/core/p-0d4ccf6a.entry.js.map +1 -0
- package/dist/core/{p-3dda76db.entry.js → p-0f0dfa16.entry.js} +2 -2
- package/dist/core/p-0f0dfa16.entry.js.map +1 -0
- package/dist/core/p-186ecccd.entry.js +2 -0
- package/dist/core/p-186ecccd.entry.js.map +1 -0
- package/dist/core/{p-c9068822.entry.js → p-1bd4d07e.entry.js} +2 -2
- package/dist/core/p-1bd4d07e.entry.js.map +1 -0
- package/dist/core/{p-7fd50355.entry.js → p-1e0174dc.entry.js} +2 -2
- package/dist/core/p-1e0174dc.entry.js.map +1 -0
- package/dist/core/p-28b2158b.entry.js +2 -0
- package/dist/core/p-28b2158b.entry.js.map +1 -0
- package/dist/core/p-3453aa9c.entry.js +2 -0
- package/dist/core/p-3453aa9c.entry.js.map +1 -0
- package/dist/core/p-3d84a743.entry.js +2 -0
- package/dist/core/p-3d84a743.entry.js.map +1 -0
- package/dist/core/{p-1724000c.js → p-3dea2867.js} +2 -2
- package/dist/core/p-3dea2867.js.map +1 -0
- package/dist/core/{p-35a03442.entry.js → p-41459307.entry.js} +2 -2
- package/dist/core/p-41459307.entry.js.map +1 -0
- package/dist/core/p-4269584a.entry.js +2 -0
- package/dist/core/p-4269584a.entry.js.map +1 -0
- package/dist/core/p-4d8392fe.entry.js +2 -0
- package/dist/core/p-4d8392fe.entry.js.map +1 -0
- package/dist/core/p-58ff516f.entry.js +2 -0
- package/dist/core/p-58ff516f.entry.js.map +1 -0
- package/dist/core/p-65b94ddb.entry.js +2 -0
- package/dist/core/p-65b94ddb.entry.js.map +1 -0
- package/dist/core/p-68c84039.entry.js +2 -0
- package/dist/core/p-68c84039.entry.js.map +1 -0
- package/dist/core/p-6c9ce0ec.entry.js +2 -0
- package/dist/core/p-6c9ce0ec.entry.js.map +1 -0
- package/dist/core/p-6e1f5022.entry.js +2 -0
- package/dist/core/p-6e1f5022.entry.js.map +1 -0
- package/dist/core/p-6f57b13c.js.map +1 -1
- package/dist/core/{p-7a9bc7f2.entry.js → p-741b4ea3.entry.js} +2 -2
- package/dist/core/{p-ed6cf9b9.entry.js → p-74a768bc.entry.js} +2 -2
- package/dist/core/p-74a768bc.entry.js.map +1 -0
- package/dist/core/p-759c80a3.entry.js +2 -0
- package/dist/core/p-759c80a3.entry.js.map +1 -0
- package/dist/core/p-7c2b09c8.entry.js +2 -0
- package/dist/core/p-7c2b09c8.entry.js.map +1 -0
- package/dist/core/{p-41e239cb.entry.js → p-7e309c50.entry.js} +2 -2
- package/dist/core/p-7e309c50.entry.js.map +1 -0
- package/dist/core/p-8959dd7d.entry.js +2 -0
- package/dist/core/p-8959dd7d.entry.js.map +1 -0
- package/dist/core/{p-c4a7c734.entry.js → p-8c9cc4d5.entry.js} +2 -2
- package/dist/core/p-90d6dbd6.entry.js +2 -0
- package/dist/core/p-90d6dbd6.entry.js.map +1 -0
- package/dist/core/{p-ba8d6c23.entry.js → p-977af213.entry.js} +2 -2
- package/dist/core/p-977af213.entry.js.map +1 -0
- package/dist/core/p-9daae2ae.entry.js +2 -0
- package/dist/core/p-9daae2ae.entry.js.map +1 -0
- package/dist/core/p-9e578e82.entry.js +2 -0
- package/dist/core/p-9e578e82.entry.js.map +1 -0
- package/dist/core/p-a8e969ea.entry.js +2 -0
- package/dist/core/p-a8e969ea.entry.js.map +1 -0
- package/dist/core/p-b5b03f86.entry.js +2 -0
- package/dist/core/p-b5b03f86.entry.js.map +1 -0
- package/dist/core/{p-b35ae170.entry.js → p-b7fc1f35.entry.js} +2 -2
- package/dist/core/p-bb505d2a.entry.js +2 -0
- package/dist/core/p-bb505d2a.entry.js.map +1 -0
- package/dist/core/{p-6a397882.entry.js → p-cc62d065.entry.js} +2 -2
- package/dist/core/p-cc62d065.entry.js.map +1 -0
- package/dist/core/p-ce96a494.entry.js +2 -0
- package/dist/core/p-ce96a494.entry.js.map +1 -0
- package/dist/core/{p-eba373bf.entry.js → p-d27dbb63.entry.js} +2 -2
- package/dist/core/p-d27dbb63.entry.js.map +1 -0
- package/dist/core/p-dc4ba6a0.entry.js +2 -0
- package/dist/core/p-dc4ba6a0.entry.js.map +1 -0
- package/dist/core/{p-691ea0f2.entry.js → p-dd71a986.entry.js} +2 -2
- package/dist/core/p-deada16f.entry.js +2 -0
- package/dist/core/p-deada16f.entry.js.map +1 -0
- package/dist/core/p-e17eea34.entry.js +2 -0
- package/dist/core/p-e17eea34.entry.js.map +1 -0
- package/dist/core/p-e4390415.entry.js +2 -0
- package/dist/core/p-e4390415.entry.js.map +1 -0
- package/dist/core/p-eb7599cc.entry.js +2 -0
- package/dist/core/p-eb7599cc.entry.js.map +1 -0
- package/dist/core/p-eeefddb5.entry.js +2 -0
- package/dist/core/p-eeefddb5.entry.js.map +1 -0
- package/dist/core/p-f0244b5a.entry.js +2 -0
- package/dist/core/p-f0244b5a.entry.js.map +1 -0
- package/dist/core/{p-b4234318.entry.js → p-f777679c.entry.js} +2 -2
- package/dist/core/p-ff15c756.entry.js +2 -0
- package/dist/core/p-ff15c756.entry.js.map +1 -0
- package/dist/esm/chevron-icon-7927f709.js +8 -0
- package/dist/esm/chevron-icon-7927f709.js.map +1 -0
- package/dist/esm/core.js +1 -1
- package/dist/esm/{helpers-c332acf8.js → helpers-b2b47a7d.js} +3 -3
- package/dist/esm/helpers-b2b47a7d.js.map +1 -0
- package/dist/esm/ic-alert.entry.js +2 -2
- package/dist/esm/ic-alert.entry.js.map +1 -1
- package/dist/esm/ic-back-to-top.entry.js +2 -2
- package/dist/esm/ic-back-to-top.entry.js.map +1 -1
- package/dist/esm/ic-breadcrumb-group.entry.js +1 -1
- package/dist/esm/ic-breadcrumb.entry.js +4 -4
- package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ic-button_3.entry.js +38 -10
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card.entry.js +5 -5
- package/dist/esm/ic-card.entry.js.map +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +3 -3
- package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
- package/dist/esm/ic-checkbox.entry.js +4 -3
- package/dist/esm/ic-checkbox.entry.js.map +1 -1
- package/dist/esm/ic-chip.entry.js +2 -2
- package/dist/esm/ic-chip.entry.js.map +1 -1
- package/dist/esm/ic-data-entity.entry.js +1 -1
- package/dist/esm/ic-data-entity.entry.js.map +1 -1
- package/dist/esm/ic-data-row.entry.js +2 -2
- package/dist/esm/ic-data-row.entry.js.map +1 -1
- package/dist/esm/ic-divider.entry.js +2 -2
- package/dist/esm/ic-divider.entry.js.map +1 -1
- package/dist/esm/ic-footer-link-group.entry.js +1 -1
- package/dist/esm/ic-footer-link.entry.js +2 -2
- package/dist/esm/ic-footer-link.entry.js.map +1 -1
- package/dist/esm/ic-footer.entry.js +1 -1
- package/dist/esm/ic-hero.entry.js +4 -2
- package/dist/esm/ic-hero.entry.js.map +1 -1
- package/dist/esm/ic-horizontal-scroll.entry.js +10 -4
- package/dist/esm/ic-horizontal-scroll.entry.js.map +1 -1
- package/dist/esm/ic-input-component-container_3.entry.js +14 -8
- 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 +3 -3
- package/dist/esm/ic-link.entry.js.map +1 -1
- package/dist/esm/ic-menu-group.entry.js +20 -0
- package/dist/esm/ic-menu-group.entry.js.map +1 -0
- package/dist/esm/ic-menu-item.entry.js +116 -0
- package/dist/esm/ic-menu-item.entry.js.map +1 -0
- package/dist/esm/ic-navigation-button.entry.js +2 -2
- package/dist/esm/ic-navigation-button.entry.js.map +1 -1
- package/dist/esm/ic-navigation-group.entry.js +4 -4
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +5 -4
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-menu.entry.js +2 -2
- package/dist/esm/ic-navigation-menu.entry.js.map +1 -1
- package/dist/esm/ic-page-header.entry.js +2 -2
- package/dist/esm/ic-page-header.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +233 -0
- package/dist/esm/ic-popover-menu.entry.js.map +1 -0
- package/dist/esm/ic-radio-group.entry.js +3 -3
- package/dist/esm/ic-radio-group.entry.js.map +1 -1
- package/dist/esm/ic-radio-option.entry.js +3 -3
- package/dist/esm/ic-radio-option.entry.js.map +1 -1
- package/dist/esm/ic-search-bar.entry.js +5 -3
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-select.entry.js +16 -23
- 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 +2 -2
- package/dist/esm/ic-status-tag.entry.js.map +1 -1
- package/dist/esm/ic-step.entry.js +1 -1
- package/dist/esm/ic-step.entry.js.map +1 -1
- package/dist/esm/ic-stepper.entry.js +1 -1
- package/dist/esm/ic-switch.entry.js +2 -2
- package/dist/esm/ic-switch.entry.js.map +1 -1
- package/dist/esm/ic-tab-context.entry.js +41 -4
- package/dist/esm/ic-tab-context.entry.js.map +1 -1
- package/dist/esm/ic-tab-group.entry.js +3 -2
- package/dist/esm/ic-tab-group.entry.js.map +1 -1
- package/dist/esm/ic-tab-panel.entry.js +11 -2
- package/dist/esm/ic-tab-panel.entry.js.map +1 -1
- package/dist/esm/ic-tab.entry.js +13 -1
- package/dist/esm/ic-tab.entry.js.map +1 -1
- package/dist/esm/ic-text-field.entry.js +37 -9
- package/dist/esm/ic-text-field.entry.js.map +1 -1
- package/dist/esm/ic-theme.entry.js +1 -1
- package/dist/esm/ic-toast.entry.js +6 -2
- package/dist/esm/ic-toast.entry.js.map +1 -1
- package/dist/esm/ic-top-navigation.entry.js +6 -2
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/ic-typography.entry.js +1 -1
- package/dist/esm/ic-typography.entry.js.map +1 -1
- package/dist/esm/index-90721b3c.js +12 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/types-dd515332.js.map +1 -1
- package/dist/types/components/ic-button/ic-button.d.ts +24 -0
- package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +4 -0
- package/dist/types/components/ic-link/ic-link.d.ts +1 -1
- package/dist/types/components/ic-loading-indicator/ic-loading-indicator.d.ts +2 -0
- package/dist/types/components/ic-menu-group/ic-menu-group.d.ts +8 -0
- package/dist/types/components/ic-menu-item/ic-menu-item.d.ts +74 -0
- package/dist/types/components/ic-menu-item/ic-menu-item.types.d.ts +1 -0
- package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts +58 -0
- package/dist/types/components/ic-popover-menu/ic-popover-menu.test.a11y.d.ts +1 -0
- package/dist/types/components/ic-select/ic-select.d.ts +1 -3
- package/dist/types/components/ic-side-navigation/ic-side-navigation-test-examples.d.ts +1 -0
- package/dist/types/components/ic-tab/ic-tab.d.ts +11 -0
- package/dist/types/components/ic-tab-context/ic-tab-context.d.ts +13 -6
- package/dist/types/components/ic-tab-group/ic-tab-group.d.ts +2 -1
- package/dist/types/components/ic-tab-panel/ic-tab-panel.d.ts +25 -5
- package/dist/types/components/ic-text-field/ic-text-field.d.ts +10 -0
- package/dist/types/components/ic-toast/ic-toast.d.ts +1 -0
- package/dist/types/components.d.ts +254 -8
- package/dist/types/utils/types.d.ts +1 -1
- package/hydrate/index.js +649 -100
- package/package.json +3 -3
- package/dist/cjs/chevron-icon-2645d6b0.js +0 -10
- package/dist/cjs/chevron-icon-2645d6b0.js.map +0 -1
- package/dist/cjs/helpers-6eb26e7a.js.map +0 -1
- package/dist/core/p-1724000c.js.map +0 -1
- package/dist/core/p-18ae4b6d.entry.js +0 -2
- package/dist/core/p-18ae4b6d.entry.js.map +0 -1
- package/dist/core/p-18bf3cb0.entry.js +0 -2
- package/dist/core/p-18bf3cb0.entry.js.map +0 -1
- package/dist/core/p-31a595c1.entry.js +0 -2
- package/dist/core/p-31a595c1.entry.js.map +0 -1
- package/dist/core/p-35a03442.entry.js.map +0 -1
- package/dist/core/p-360adc51.entry.js +0 -2
- package/dist/core/p-360adc51.entry.js.map +0 -1
- package/dist/core/p-3dda76db.entry.js.map +0 -1
- package/dist/core/p-41e239cb.entry.js.map +0 -1
- package/dist/core/p-44c9612c.entry.js +0 -2
- package/dist/core/p-44c9612c.entry.js.map +0 -1
- package/dist/core/p-4a73728b.entry.js +0 -2
- package/dist/core/p-4a73728b.entry.js.map +0 -1
- package/dist/core/p-521be4e2.entry.js +0 -2
- package/dist/core/p-521be4e2.entry.js.map +0 -1
- package/dist/core/p-5b083ce5.entry.js +0 -2
- package/dist/core/p-5b083ce5.entry.js.map +0 -1
- package/dist/core/p-6a397882.entry.js.map +0 -1
- package/dist/core/p-7818d958.entry.js +0 -2
- package/dist/core/p-7818d958.entry.js.map +0 -1
- package/dist/core/p-7a0bf893.entry.js +0 -2
- package/dist/core/p-7a0bf893.entry.js.map +0 -1
- package/dist/core/p-7fd50355.entry.js.map +0 -1
- package/dist/core/p-897e967a.entry.js +0 -2
- package/dist/core/p-897e967a.entry.js.map +0 -1
- package/dist/core/p-8f1176c6.entry.js +0 -2
- package/dist/core/p-8f1176c6.entry.js.map +0 -1
- package/dist/core/p-91a8db51.entry.js +0 -2
- package/dist/core/p-91a8db51.entry.js.map +0 -1
- package/dist/core/p-a09d853e.entry.js +0 -2
- package/dist/core/p-a09d853e.entry.js.map +0 -1
- package/dist/core/p-a10da430.entry.js +0 -2
- package/dist/core/p-a10da430.entry.js.map +0 -1
- package/dist/core/p-a667e329.entry.js +0 -2
- package/dist/core/p-a667e329.entry.js.map +0 -1
- package/dist/core/p-b40bd77c.entry.js +0 -2
- package/dist/core/p-b40bd77c.entry.js.map +0 -1
- package/dist/core/p-ba8d6c23.entry.js.map +0 -1
- package/dist/core/p-bd819f68.entry.js +0 -2
- package/dist/core/p-bd819f68.entry.js.map +0 -1
- package/dist/core/p-c72e4b75.entry.js +0 -2
- package/dist/core/p-c72e4b75.entry.js.map +0 -1
- package/dist/core/p-c7b86643.entry.js +0 -2
- package/dist/core/p-c7b86643.entry.js.map +0 -1
- package/dist/core/p-c7c5d2c5.entry.js +0 -2
- package/dist/core/p-c7c5d2c5.entry.js.map +0 -1
- package/dist/core/p-c8f07be6.entry.js +0 -2
- package/dist/core/p-c8f07be6.entry.js.map +0 -1
- package/dist/core/p-c9068822.entry.js.map +0 -1
- package/dist/core/p-cccbf2bf.entry.js +0 -2
- package/dist/core/p-cccbf2bf.entry.js.map +0 -1
- package/dist/core/p-d37b9695.entry.js +0 -2
- package/dist/core/p-d37b9695.entry.js.map +0 -1
- package/dist/core/p-d86b0d0e.entry.js +0 -2
- package/dist/core/p-d86b0d0e.entry.js.map +0 -1
- package/dist/core/p-dea3d5f0.entry.js +0 -2
- package/dist/core/p-dea3d5f0.entry.js.map +0 -1
- package/dist/core/p-e0d88c31.entry.js +0 -2
- package/dist/core/p-e0d88c31.entry.js.map +0 -1
- package/dist/core/p-e9202767.entry.js +0 -2
- package/dist/core/p-e9202767.entry.js.map +0 -1
- package/dist/core/p-eba373bf.entry.js.map +0 -1
- package/dist/core/p-ed6cf9b9.entry.js.map +0 -1
- package/dist/esm/chevron-icon-98c98242.js +0 -8
- package/dist/esm/chevron-icon-98c98242.js.map +0 -1
- package/dist/esm/helpers-c332acf8.js.map +0 -1
- /package/dist/core/{p-24240e11.js.map → p-06321d19.js.map} +0 -0
- /package/dist/core/{p-284970bc.entry.js.map → p-0a463a65.entry.js.map} +0 -0
- /package/dist/core/{p-7a9bc7f2.entry.js.map → p-741b4ea3.entry.js.map} +0 -0
- /package/dist/core/{p-c4a7c734.entry.js.map → p-8c9cc4d5.entry.js.map} +0 -0
- /package/dist/core/{p-b35ae170.entry.js.map → p-b7fc1f35.entry.js.map} +0 -0
- /package/dist/core/{p-691ea0f2.entry.js.map → p-dd71a986.entry.js.map} +0 -0
- /package/dist/core/{p-b4234318.entry.js.map → p-f777679c.entry.js.map} +0 -0
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as t,c as i,h as e,H as s,g as a}from"./p-5450cebf.js";import{x as n,w as o,m as h,d as l,a as r,r as c,e as d,h as u,j as p,y as b,n as f}from"./p-3dea2867.js";import{I as m,a as v}from"./p-6f57b13c.js";const g=`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n<path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor" />\n</svg>\n`;const w=`<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.6666 4.27334L11.7266 3.33334L7.99998 7.06001L4.27331 3.33334L3.33331 4.27334L7.05998 8.00001L3.33331 11.7267L4.27331 12.6667L7.99998 8.94001L11.7266 12.6667L12.6666 11.7267L8.93998 8.00001L12.6666 4.27334Z" fill="currentColor" />\n</svg>\n`;const x='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{position:relative}:host(.full-width){width:100%}ic-input-component-container:hover{--border-color:var(--ic-action-dark-hover)}ic-input-component-container:active{--border-color:var(--ic-action-dark-active);color:var(--ic-action-dark-active)}ic-input-component-container.menu-open{--border-color:var(--ic-architectural-400);color:var(--ic-action-dark)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}ic-input-label{margin-bottom:var(--ic-space-xs) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:0.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 0.375rem center;background-image:url("data:image/svg+xml;utf8,<svg fill=\'black\' height=\'24\' viewBox=\'0 0 24 24\' width=\'24\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M7 10l5 5 5-5z\'/><path d=\'M0 0h24v24H0z\' fill=\'none\'/></svg>")}select option,.select-option-selected{color:var(--ic-color-primary-text)}select:disabled{color:var(--ic-architectural-200);background-image:url("data:image/svg+xml;utf8,<svg fill=\'grey\' height=\'24\' viewBox=\'0 0 24 24\' width=\'24\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M7 10l5 5 5-5z\'/><path d=\'M0 0h24v24H0z\' fill=\'none\'/></svg>")}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-container{width:100%;display:flex;align-items:center;position:relative}.select-input{width:100%;height:100%;padding:0 0.375rem;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none}.select-input:focus{outline:var(--ic-hc-focus-outline)}:host(:not(.disabled)) ic-input-component-container:hover .select-input{background-color:var(--ic-architectural-white)}.select-input[disabled]{pointer-events:none}:host(.searchable) .select-input{cursor:auto}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xs);color:var(--ic-action-dark)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.disabled) .expand-icon,:host(.disabled) .expand-icon>svg>path{color:var(--ic-architectural-200)}:host(.searchable) .expand-icon{padding-left:var(--ic-space-xxs);height:2.25rem}:host(.searchable) .expand-icon>svg{height:2.25rem;padding:0 0.375rem}:host(.searchable:not(.disabled)) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-action-dark)}.expand-icon-filled{color:var(--ic-action-dark)}.expand-icon-open,:host(.searchable) .expand-icon-open{transform:rotateX(180deg)}:host(.disabled) .value-text,.placeholder{color:var(--ic-color-tertiary-text)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;gap:var(--ic-space-xxs);padding-left:2.375rem}:host(.small) .clear-button-container{padding-left:1.875rem}.divider{width:var(--ic-space-1px);background-color:var(--ic-architectural-400);margin:var(--ic-space-xxs) 0;border-radius:var(--ic-space-1px);height:var(--ic-space-lg)}:host(.small) .divider{height:var(--ic-space-md)}.clear-button{position:absolute;right:2.75rem;border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition)}.clear-button:focus{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus *{fill:white}.searchable-select-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}';let y=0;const k=class{constructor(e){t(this,e);this.icChange=i(this,"icChange",7);this.icClear=i(this,"icClear",7);this.icFocus=i(this,"icFocus",7);this.icBlur=i(this,"icBlur",7);this.icOptionSelect=i(this,"icOptionSelect",7);this.icInput=i(this,"icInput",7);this.inputId=`ic-select-input-${y++}`;this.menuId=`${this.inputId}-menu`;this.ungroupedOptions=[];this.inheritedAttributes={};this.hasSetDefaultValue=false;this.initialOptionsEmpty=false;this.emitIcChange=t=>{this.value=t;clearTimeout(this.debounceIcChange);this.debounceIcChange=window.setTimeout((()=>{this.icChange.emit({value:t})}),this.currDebounce)};this.emitImmediateIcChange=t=>{this.value=t;clearTimeout(this.debounceIcChange);this.icChange.emit({value:t})};this.isMenuEnabled=()=>this.searchableSelectInputValue!==null||this.searchableSelectInputValue!=="";this.setOptionsValuesFromLabels=()=>{if(this.options.length>0&&this.options.map){this.options.map((t=>{if(!t.value){t.value=t.label}}))}};this.setUngroupedOptions=t=>{this.ungroupedOptions=t.detail.options};this.setTextColor=()=>{if(this.nativeSelectElement.selectedIndex===0){this.nativeSelectElement.className="placeholder"}else{this.nativeSelectElement.className="select-option-selected"}};this.setMenuChange=t=>{if(this.open!==t){this.open=t}};this.getLabelFromValue=t=>n(t,this.options);this.getValueFromLabel=t=>{var i;const e=(i=this.options.find((i=>i.label===t)))===null||i===void 0?void 0:i.value;return e};this.getFilteredChildMenuOptions=t=>{let i=t.children;if(this.searchable){i=o(t.children,this.includeDescriptionsInSearch,this.searchableSelectInputValue,this.searchMatchPosition)}else{i=o(t.children,false,this.pressedCharacters,"start")}const e=Object.assign({},t);e.children=i;return e};this.handleNativeSelectChange=()=>{this.icOptionSelect.emit({value:this.nativeSelectElement.value});this.emitImmediateIcChange(this.nativeSelectElement.value);this.setTextColor()};this.handleCustomSelectChange=t=>{if(this.searchable&&t.detail.label===this.emptyOptionListText){this.searchableSelectElement.focus();return}if(this.searchable){this.searchableSelectInputValue=this.getLabelFromValue(t.detail.value)}this.ariaActiveDescendant=t.detail.optionId;this.icOptionSelect.emit({value:t.detail.value});this.emitIcChange(t.detail.value)};this.handleMenuChange=t=>{this.open=t.detail.open;this.pressedCharacters="";this.searchable&&this.handleFocusIndicatorDisplay()};this.handleMenuKeyPress=t=>{t.cancelBubble=true;this.handleCharacterKeyDown(t.detail.key)};this.handleFocusIndicatorDisplay=()=>{const t=this.host.shadowRoot.querySelector(".focus-indicator");if(this.open){t.classList.add("focus-indicator-enabled")}else{t.classList.remove("focus-indicator-enabled")}};this.handleMouseDown=t=>{if(!this.open){t.preventDefault()}};this.isExternalFiltering=()=>this.searchable&&this.disableFilter;this.handleClick=t=>{if(this.isExternalFiltering()){this.menu.options=this.filteredOptions}else{this.noOptions=null;this.menu.options=this.options}if(t.detail!==0&&this.isMenuEnabled()){this.menu.handleClickOpen()}};this.handleExpandIconMouseDown=t=>{if(!this.disabled){t.preventDefault();this.searchableSelectElement.focus();this.handleClick(t)}};this.handleClear=t=>{t.stopPropagation();this.noOptions=null;this.emitImmediateIcChange(null);this.icClear.emit();if(this.searchable){this.searchableSelectElement.value=null;this.searchableSelectInputValue=null;this.menu.options=this.options;this.searchableSelectElement.focus();if(!this.isMenuEnabled()){this.setMenuChange(false)}}else{this.customSelectElement.focus()}};this.handleCharacterKeyDown=t=>{if(this.open&&t===" "&&this.pressedCharacters.length===0){this.setMenuChange(false)}if(t.length===1&&!this.searchable){window.clearTimeout(this.characterKeyPressTimer);this.characterKeyPressTimer=window.setTimeout((()=>this.pressedCharacters=""),1e3);this.pressedCharacters+=t;this.handleFilter();if(!this.noOptions){this.emitImmediateIcChange(this.filteredOptions[0].value)}}else{this.pressedCharacters=""}};this.handleNativeSelectKeyDown=t=>{t.cancelBubble=true;this.handleCharacterKeyDown(t.key)};this.handleKeyDown=t=>{t.cancelBubble=true;const i=t.key==="ArrowDown"||t.key==="ArrowUp";if(!this.open){if(this.isExternalFiltering()&&(t.key==="Enter"||i)){this.menu.options=this.filteredOptions}else{this.noOptions=null;this.menu.options=this.options}}if(this.open&&t.key==="Enter"){this.setMenuChange(false)}else{if(!(i&&this.noOptions!==null)&&this.isMenuEnabled()){if(!(t.key===" "&&this.pressedCharacters.length>0)){this.menu.handleKeyboardOpen(t)}this.handleCharacterKeyDown(t.key)}}};this.handleClearButtonFocus=()=>{this.clearButtonFocused=true};this.handleClearButtonBlur=()=>{this.clearButtonFocused=false};this.handleFilter=()=>{const t=this.searchable?[...this.options]:this.ungroupedOptions;let i=false;let e=[];t.map((t=>{if(t.children)i=true}));let s;if(this.searchable){s=o(t,this.includeDescriptionsInSearch,this.searchableSelectInputValue,this.searchMatchPosition)}else{s=o(t,false,this.pressedCharacters,"start")}if(!i){e=s}else{t.map((t=>{if(this.includeGroupTitlesInSearch){if(s.indexOf(t)!==-1){e.push(t)}else{e.push(this.getFilteredChildMenuOptions(t))}}else{e.push(this.getFilteredChildMenuOptions(t))}}))}let a=false;if(i){a=true;e.map((t=>{if(t.children.length>0){a=false}}))}const n=[{label:this.emptyOptionListText,value:""}];if(e.length>0&&!a){this.noOptions=null;this.filteredOptions=e}else{this.noOptions=n;this.filteredOptions=this.noOptions}};this.handleSearchableSelectInput=t=>{this.searchableSelectInputValue=t.target.value;this.icInput.emit({value:this.searchableSelectInputValue});if(this.disableFilter){this.emitIcChange(this.searchableSelectInputValue)}else if(this.getValueFromLabel(this.searchableSelectInputValue)===undefined){this.emitIcChange(null)}if(this.isMenuEnabled()){this.setMenuChange(true)}else{this.setMenuChange(false)}if(!this.disableFilter){this.handleFilter();this.debounceAriaLiveUpdate()}};this.updateSearchableSelectResultAriaLive=()=>{const t=this.host.shadowRoot.querySelector(".searchable-select-results-status");if(t){if(this.noOptions!==null){t.innerText=this.emptyOptionListText}else{t.innerText=""}}};this.getDefaultValue=t=>this.getLabelFromValue(t)||t||null;this.onFocus=()=>{this.icFocus.emit()};this.onBlur=t=>{const i=this.searchable&&t.relatedTarget!==this.menu&&!Array.from(this.menu.querySelectorAll("[role='option']")).includes(t.relatedTarget)&&!(this.clearButton&&t.relatedTarget===this.clearButton);if(i){this.setMenuChange(false);this.handleFocusIndicatorDisplay()}this.icBlur.emit()};this.handleFormReset=()=>{this.value=this.initialValue;if(this.searchable){this.searchableSelectInputValue=this.getDefaultValue(this.value)}};this.label=undefined;this.options=[];this.required=false;this.hideLabel=false;this.disabled=false;this.readonly=false;this.placeholder="Select an option";this.helperText="";this.small=false;this.fullWidth=false;this.validationStatus="";this.validationText="";this.value=undefined;this.debounce=0;this.name=this.inputId;this.showClearButton=false;this.searchable=false;this.includeDescriptionsInSearch=false;this.includeGroupTitlesInSearch=false;this.searchMatchPosition="anywhere";this.charactersUntilSuggestions=0;this.emptyOptionListText="No results found";this.disableFilter=false;this.open=false;this.clearButtonFocused=false;this.searchableSelectInputValue=null;this.filteredOptions=this.options;this.ariaActiveDescendant=undefined;this.noOptions=null;this.initialValue=this.value;this.currDebounce=this.debounce;this.currValue=this.value;this.debounceIcChange=undefined;this.pressedCharacters=""}watchOptionsHandler(){if(this.isExternalFiltering()){if(this.options.length>0){this.setOptionsValuesFromLabels();this.noOptions=null;this.filteredOptions=this.options}else if(this.isMenuEnabled()){this.noOptions=[{label:this.emptyOptionListText,value:""}];this.filteredOptions=this.noOptions}this.updateSearchableSelectResultAriaLive();this.setDefaultValue()}else{this.setOptionsValuesFromLabels();this.filteredOptions=this.options;if(this.initialOptionsEmpty){this.setDefaultValue();this.initialOptionsEmpty=false}}}debounceChangedHandler(t){this.updateOnChangeDebounce(t)}valueChangedHandler(){if(this.value!==this.currValue){this.currValue=this.value}}async setFocus(){if(this.nativeSelectElement){this.nativeSelectElement.focus()}else if(this.customSelectElement){this.customSelectElement.focus()}else if(this.searchableSelectElement){this.searchableSelectElement.focus()}}updateOnChangeDebounce(t){if(this.currDebounce!==t){this.currDebounce=t}}debounceAriaLiveUpdate(){clearTimeout(this.debounceAria);window.setTimeout((()=>{this.updateSearchableSelectResultAriaLive()}),800)}setDefaultValue(){if(!this.hasSetDefaultValue&&this.currValue){this.searchableSelectInputValue=this.getDefaultValue(this.currValue);this.initialValue=this.currValue;this.hasSetDefaultValue=true}}componentWillLoad(){this.inheritedAttributes=h(this.host,[...f,"tabindex","title"]);this.setOptionsValuesFromLabels();l(this.host,this.handleFormReset);if(!this.options.length){this.initialOptionsEmpty=true}else if(!this.disableFilter){this.setDefaultValue()}}componentDidRender(){if(this.nativeSelectElement&&!this.disabled){this.setTextColor()}}componentDidLoad(){r([{prop:this.label,propName:"label"}],"Select")}disconnectedCallback(){c(this.host,this.handleFormReset)}render(){const{small:t,disabled:i,fullWidth:a,helperText:n,hideLabel:o,label:h,menuId:l,name:r,options:c,placeholder:f,readonly:x,required:y,searchable:k,showClearButton:z,validationStatus:L,validationText:C,currValue:M}=this;d(true,this.host,r,M,i);const H=L===v.Error?"true":"false";const B=u(this.inputId,n!=="",p(this.validationStatus,this.disabled)).trim();return e(s,{class:{disabled:i,searchable:k,small:t,"full-width":a}},e("ic-input-container",{readonly:x},!o&&e("ic-input-label",{for:this.inputId,label:h,helperText:n,required:y,disabled:i,readonly:x}),e("ic-input-component-container",{ref:t=>this.anchorEl=t,class:{"menu-open":this.open},small:t,fullWidth:a,disabled:i,readonly:x,validationStatus:L},x?e("ic-typography",null,e("p",null,this.getLabelFromValue(M))):b()?e("select",Object.assign({ref:t=>this.nativeSelectElement=t,disabled:i,onChange:this.handleNativeSelectChange,required:y,id:this.inputId,"aria-label":h,"aria-describedby":B,"aria-invalid":H,onBlur:this.onBlur,onFocus:this.onFocus,onKeyDown:this.handleNativeSelectKeyDown},this.inheritedAttributes),e("option",{value:"",selected:true,disabled:!z},f),c.map((t=>{if(t.children){return e("optgroup",{label:t.label},t.children.map((t=>e("option",{value:t.value,disabled:t.disabled,selected:t.value===M},t.label))))}else{return e("option",{value:t.value,disabled:t.disabled,selected:t.value===M},t.label)}}))):k?e("div",{class:"searchable-select-container"},e("input",{class:"select-input",role:"combobox",autocomplete:"off","aria-label":h,"aria-describedby":B,"aria-activedescendant":this.ariaActiveDescendant,"aria-autocomplete":"list","aria-expanded":this.open?"true":"false","aria-invalid":H,"aria-required":y?"true":"false","aria-controls":l,ref:t=>this.searchableSelectElement=t,id:this.inputId,value:this.searchableSelectInputValue,placeholder:f,disabled:i,onInput:this.handleSearchableSelectInput,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onFocus:this.onFocus,onBlur:this.onBlur}),this.searchableSelectInputValue&&(z||k)&&e("div",{class:"clear-button-container"},e("ic-button",{id:"clear-button",ref:t=>this.clearButton=t,"aria-label":this.searchableSelectInputValue&&M===null?"Clear input":"Clear selection",class:"clear-button",innerHTML:w,onClick:this.handleClear,onFocus:this.handleClearButtonFocus,onBlur:this.handleClearButtonBlur,size:t?"small":"default",variant:"icon",appearance:this.clearButtonFocused?m.Light:m.Dark}),e("div",{class:"divider"})),e("span",{onMouseDown:this.handleExpandIconMouseDown,class:{"expand-icon":true,"expand-icon-open":this.open,"expand-icon-filled":!(M==null||M==="")},innerHTML:g,"aria-hidden":"true"}),e("div",{"aria-live":"polite",role:"status",class:"searchable-select-results-status"})):e("div",{class:"select-container"},e("button",{class:"select-input",ref:t=>this.customSelectElement=t,id:this.inputId,"aria-label":`${h}, ${this.getLabelFromValue(M)||f}${y?", required":""}`,"aria-describedby":B,"aria-invalid":H,"aria-haspopup":"listbox","aria-expanded":this.open?"true":"false","aria-owns":l,"aria-controls":l,disabled:i,onBlur:this.onBlur,onFocus:this.onFocus,onClick:this.handleClick,onMouseDown:this.handleMouseDown,onKeyDown:this.handleKeyDown},e("ic-typography",{variant:"body",class:{"value-text":true,placeholder:this.getLabelFromValue(M)===undefined}},e("p",null,this.getLabelFromValue(M)||f)),e("div",{class:"select-input-end"},M&&z&&e("div",{class:"divider"}),e("span",{class:{"expand-icon":true,"expand-icon-open":this.open,"expand-icon-filled":!(M==null||M==="")},innerHTML:g,"aria-hidden":"true"}))),M&&z&&e("ic-button",{id:"clear-button","aria-label":"Clear selection",class:"clear-button",innerHTML:w,onClick:this.handleClear,onFocus:this.handleClearButtonFocus,onBlur:this.handleClearButtonBlur,size:t?"small":"default",variant:"icon",appearance:this.clearButtonFocused?m.Light:m.Dark}))),!b()&&e("ic-menu",{class:{"no-results":this.noOptions!==null&&this.searchable},ref:t=>this.menu=t,inputEl:k?this.searchableSelectElement:this.customSelectElement,inputLabel:h,anchorEl:this.anchorEl,small:t,menuId:l,open:this.open,options:k?this.filteredOptions:c,value:M,fullWidth:a,onMenuStateChange:this.handleMenuChange,onMenuOptionSelect:this.handleCustomSelectChange,onMenuKeyPress:this.handleMenuKeyPress,onUngroupedOptionsSet:this.setUngroupedOptions,parentEl:this.host}),p(this.validationStatus,this.disabled)&&e("ic-input-validation",{class:{"menu-open":this.open},ariaLiveMode:"polite",status:L,message:C,for:this.inputId})))}static get delegatesFocus(){return true}get host(){return a(this)}static get watchers(){return{options:["watchOptionsHandler"],debounce:["debounceChangedHandler"],value:["valueChangedHandler"]}}};k.style=x;export{k as ic_select};
|
2
|
+
//# sourceMappingURL=p-ce96a494.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["src/components/ic-select/ic-select.css?tag=ic-select&encapsulation=shadow","src/components/ic-select/ic-select.tsx"],"names":["icSelectCss","inputIds","Select","this","inputId","menuId","ungroupedOptions","inheritedAttributes","hasSetDefaultValue","initialOptionsEmpty","emitIcChange","value","clearTimeout","debounceIcChange","window","setTimeout","icChange","emit","currDebounce","emitImmediateIcChange","isMenuEnabled","searchableSelectInputValue","setOptionsValuesFromLabels","options","length","map","option","label","setUngroupedOptions","event","detail","setTextColor","nativeSelectElement","selectedIndex","className","setMenuChange","open","getLabelFromValue","getValueFromLabel","_a","find","getFilteredChildMenuOptions","children","searchable","getFilteredMenuOptions","includeDescriptionsInSearch","searchMatchPosition","pressedCharacters","newOption","Object","assign","handleNativeSelectChange","icOptionSelect","handleCustomSelectChange","emptyOptionListText","searchableSelectElement","focus","ariaActiveDescendant","optionId","handleMenuChange","handleFocusIndicatorDisplay","handleMenuKeyPress","ev","cancelBubble","handleCharacterKeyDown","key","focusIndicator","host","shadowRoot","querySelector","classList","add","remove","handleMouseDown","preventDefault","isExternalFiltering","disableFilter","handleClick","menu","filteredOptions","noOptions","handleClickOpen","handleExpandIconMouseDown","disabled","handleClear","stopPropagation","icClear","customSelectElement","characterKeyPressTimer","handleFilter","handleNativeSelectKeyDown","handleKeyDown","isArrowKey","handleKeyboardOpen","handleClearButtonFocus","clearButtonFocused","handleClearButtonBlur","isGrouped","newFilteredOptions","menuOptionsFiltered","includeGroupTitlesInSearch","indexOf","push","noChildOptionsWhenFiltered","handleSearchableSelectInput","target","icInput","undefined","debounceAriaLiveUpdate","updateSearchableSelectResultAriaLive","searchableSelectResultsStatusEl","innerText","getDefaultValue","onFocus","icFocus","onBlur","isSearchableAndNoFocusedInternalElements","relatedTarget","Array","from","querySelectorAll","includes","clearButton","icBlur","handleFormReset","initialValue","debounce","[object Object]","setDefaultValue","newValue","updateOnChangeDebounce","currValue","debounceAria","inheritAttributes","IC_INHERITED_ARIA","addFormResetListener","onComponentRequiredPropUndefined","prop","propName","removeFormResetListener","small","fullWidth","helperText","hideLabel","name","placeholder","readonly","required","showClearButton","validationStatus","validationText","renderHiddenInput","invalid","IcInformationStatus","Error","describedBy","getInputDescribedByText","hasValidationStatus","trim","h","Host","class","full-width","for","ref","el","anchorEl","menu-open","isMobileOrTablet","onChange","id","aria-label","aria-describedby","aria-invalid","onKeyDown","selected","role","autocomplete","aria-activedescendant","aria-autocomplete","aria-expanded","aria-required","aria-controls","onInput","onClick","innerHTML","Clear","size","variant","appearance","IcThemeForegroundEnum","Light","Dark","onMouseDown","expand-icon","expand-icon-open","expand-icon-filled","Expand","aria-hidden","aria-live","aria-haspopup","aria-owns","value-text","no-results","inputEl","inputLabel","onMenuStateChange","onMenuOptionSelect","onMenuKeyPress","onUngroupedOptionsSet","parentEl","ariaLiveMode","status","message"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --input-width: Width of the input field\n * @prop --ic-z-index-menu: z-index of select menu\n */\n\n:host {\n position: relative;\n}\n\n:host(.full-width) {\n width: 100%;\n}\n\nic-input-component-container:hover {\n --border-color: var(--ic-action-dark-hover);\n}\n\nic-input-component-container:active {\n --border-color: var(--ic-action-dark-active);\n\n color: var(--ic-action-dark-active);\n}\n\nic-input-component-container.menu-open {\n --border-color: var(--ic-architectural-400);\n\n color: var(--ic-action-dark);\n}\n\nic-input-validation .status-icon,\nic-input-validation .statustext {\n visibility: visible;\n}\n\nic-input-validation.menu-open .status-icon,\nic-input-validation.menu-open .statustext {\n visibility: hidden;\n transition: visibility 0s;\n}\n\nic-input-label {\n margin-bottom: var(--ic-space-xs) !important;\n}\n\nselect {\n border: 0;\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n color: var(--ic-color-primary-text);\n line-height: 1.5rem;\n letter-spacing: 0.005rem;\n width: 100%;\n height: 100%;\n padding-left: 0.375rem;\n appearance: none;\n background-repeat: no-repeat;\n background-position: right 0.375rem center;\n background-image: url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect option,\n.select-option-selected {\n color: var(--ic-color-primary-text);\n}\n\nselect:disabled {\n color: var(--ic-architectural-200);\n background-image: url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect:focus {\n border: 0;\n outline: 0;\n}\n\nselect:not([disabled]) {\n cursor: pointer;\n}\n\n.select-container {\n width: 100%;\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.select-input {\n width: 100%;\n height: 100%;\n padding: 0 0.375rem;\n display: flex;\n cursor: pointer;\n align-items: center;\n justify-content: space-between;\n background: none;\n border: none;\n}\n\n.select-input:focus {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(:not(.disabled)) ic-input-component-container:hover .select-input {\n background-color: var(--ic-architectural-white);\n}\n\n.select-input[disabled] {\n pointer-events: none;\n}\n\n:host(.searchable) .select-input {\n cursor: auto;\n}\n\n.searchable-select-container {\n align-items: center;\n display: flex;\n width: 100%;\n position: relative;\n}\n\n.expand-icon {\n height: var(--ic-space-lg);\n padding-left: var(--ic-space-xs);\n color: var(--ic-action-dark);\n}\n\n.expand-icon > svg {\n display: inline-block;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host(.disabled) .expand-icon,\n:host(.disabled) .expand-icon > svg > path {\n color: var(--ic-architectural-200);\n}\n\n:host(.searchable) .expand-icon {\n padding-left: var(--ic-space-xxs);\n height: 2.25rem;\n}\n\n:host(.searchable) .expand-icon > svg {\n height: 2.25rem;\n padding: 0 0.375rem;\n}\n\n:host(.searchable:not(.disabled)) .expand-icon > svg {\n cursor: pointer;\n}\n\n.expand-icon-open {\n color: var(--ic-action-dark);\n}\n\n.expand-icon-filled {\n color: var(--ic-action-dark);\n}\n\n.expand-icon-open,\n:host(.searchable) .expand-icon-open {\n transform: rotateX(180deg);\n}\n\n:host(.disabled) .value-text,\n.placeholder {\n color: var(--ic-color-tertiary-text);\n}\n\n.select-input-end {\n display: flex;\n align-items: center;\n}\n\n.clear-button-container {\n display: flex;\n gap: var(--ic-space-xxs);\n padding-left: 2.375rem;\n}\n\n:host(.small) .clear-button-container {\n padding-left: 1.875rem;\n}\n\n.divider {\n width: var(--ic-space-1px);\n background-color: var(--ic-architectural-400);\n margin: var(--ic-space-xxs) 0;\n border-radius: var(--ic-space-1px);\n height: var(--ic-space-lg);\n}\n\n:host(.small) .divider {\n height: var(--ic-space-md);\n}\n\n.clear-button {\n position: absolute;\n right: 2.75rem;\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 background-color: var(--ic-focus-blue);\n box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow);\n border-radius: 0.25rem;\n}\n\n.clear-button:focus * {\n fill: white;\n}\n\n.searchable-select-results-status {\n border: 0;\n clip: rect(0, 0, 0, 0, 0);\n height: 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","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n h,\n State,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n getInputDescribedByText,\n getLabelFromValue,\n hasValidationStatus,\n inheritAttributes,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n isMobileOrTablet,\n getFilteredMenuOptions,\n addFormResetListener,\n removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n IcThemeForegroundEnum,\n IcMenuOption,\n IcSearchMatchPositions,\n} from \"../../utils/types\";\nimport Expand from \"./assets/Expand.svg\";\nimport Clear from \"./assets/Clear.svg\";\nimport { IcValueEventDetail } from \"../../interface\";\nimport { IcOptionSelectEventDetail } from \"../ic-menu/ic-menu.types\";\n\nlet inputIds = 0;\n\n@Component({\n tag: \"ic-select\",\n styleUrl: \"ic-select.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Select {\n private nativeSelectElement: HTMLSelectElement;\n private customSelectElement: HTMLButtonElement;\n private searchableSelectElement: HTMLInputElement;\n private menu: HTMLIcMenuElement;\n private anchorEl: HTMLElement;\n private clearButton: HTMLIcButtonElement;\n\n private inputId = `ic-select-input-${inputIds++}`;\n private menuId = `${this.inputId}-menu`;\n\n private ungroupedOptions: IcMenuOption[] = [];\n\n private inheritedAttributes: { [k: string]: unknown } = {};\n\n private debounceAria: number;\n private hasSetDefaultValue = false;\n private initialOptionsEmpty = false;\n\n private characterKeyPressTimer: number;\n\n /**\n * The label for the select.\n */\n @Prop() label!: string;\n\n /**\n * The possible selection options.\n */\n @Prop() options?: IcMenuOption[] = [];\n\n /**\n * If `true`, the select will require a value.\n */\n @Prop() required?: 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 * If `true`, the disabled state will be set.\n */\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /**\n * If `true`, the readonly state will be set.\n */\n @Prop() readonly?: boolean = false;\n\n /**\n * The placeholder value to be displayed.\n */\n @Prop() placeholder?: string = \"Select an option\";\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 small styling will be applied to the select.\n */\n @Prop() small?: boolean = false;\n\n /**\n * If `true`, the select element will fill the width of the container.\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * The validation status - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The text to display as the validation message.\n */\n @Prop() validationText?: string = \"\";\n\n /**\n * The value of the currently selected option.\n */\n @Prop({ mutable: true }) value?: 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 /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name?: string = this.inputId;\n\n /**\n * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.\n */\n @Prop() showClearButton?: boolean = false;\n\n /**\n * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.\n */\n @Prop() searchable?: boolean = false;\n\n /**\n * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.\n */\n @Prop() includeDescriptionsInSearch?: boolean = false;\n\n /**\n * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.\n */\n @Prop() includeGroupTitlesInSearch?: boolean = false;\n\n /**\n * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.\n */\n @Prop() searchMatchPosition?: IcSearchMatchPositions = \"anywhere\";\n\n /**\n * @deprecated This prop should not be used anymore.\n */\n @Prop() charactersUntilSuggestions?: number = 0;\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 * Specify whether to disable the built in filtering for a searchable variant. For example, if options will already be filtered from external source.\n */\n @Prop() disableFilter?: boolean = false;\n\n @State() open: boolean = false;\n\n @State() clearButtonFocused: boolean = false;\n\n @State() searchableSelectInputValue: string = null;\n\n @State() filteredOptions: IcMenuOption[] = this.options;\n\n @State() ariaActiveDescendant: string;\n\n @State() noOptions: IcMenuOption[] = null;\n\n @State() initialValue = this.value;\n\n @State() currDebounce = this.debounce;\n\n @State() currValue = this.value;\n\n @State() debounceIcChange: number;\n\n @State() pressedCharacters: string = \"\";\n\n @Watch(\"options\")\n watchOptionsHandler(): void {\n if (this.isExternalFiltering()) {\n if (this.options.length > 0) {\n this.setOptionsValuesFromLabels();\n this.noOptions = null;\n this.filteredOptions = this.options;\n } else if (this.isMenuEnabled()) {\n this.noOptions = [{ label: this.emptyOptionListText, value: \"\" }];\n this.filteredOptions = this.noOptions;\n }\n\n this.updateSearchableSelectResultAriaLive();\n this.setDefaultValue();\n } else {\n this.setOptionsValuesFromLabels();\n this.filteredOptions = this.options;\n\n if (this.initialOptionsEmpty) {\n this.setDefaultValue();\n this.initialOptionsEmpty = false;\n }\n }\n }\n\n @Watch(\"debounce\")\n debounceChangedHandler(newValue: number) {\n this.updateOnChangeDebounce(newValue);\n }\n\n @Watch(\"value\")\n valueChangedHandler() {\n if (this.value !== this.currValue) {\n this.currValue = this.value;\n }\n }\n\n /**\n * Emitted when the value changes.\n */\n @Event() icChange!: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when clear button clicked.\n */\n @Event() icClear!: EventEmitter<void>;\n\n /**\n * Emitted when select gains focus.\n */\n @Event() icFocus!: EventEmitter<void>;\n\n /**\n * Emitted when select loses focus.\n */\n @Event() icBlur!: EventEmitter<void>;\n\n /**\n * Emitted when option is highlighted within the menu.\n * Highlighting a menu item will trigger an `icChange/onIcChange` due to the value being updated.\n */\n @Event() icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n\n @Element() host!: HTMLIcSelectElement;\n\n /**\n * Sets focus on the input box.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.nativeSelectElement) {\n this.nativeSelectElement.focus();\n } else if (this.customSelectElement) {\n this.customSelectElement.focus();\n } else if (this.searchableSelectElement) {\n this.searchableSelectElement.focus();\n }\n }\n\n private updateOnChangeDebounce(newValue: number) {\n if (this.currDebounce !== newValue) {\n this.currDebounce = newValue;\n }\n }\n\n private emitIcChange = (value: string) => {\n this.value = value;\n clearTimeout(this.debounceIcChange);\n this.debounceIcChange = window.setTimeout(() => {\n this.icChange.emit({ value: value });\n }, this.currDebounce);\n };\n\n private emitImmediateIcChange = (value: string) => {\n this.value = value;\n clearTimeout(this.debounceIcChange);\n this.icChange.emit({ value: value });\n };\n\n private isMenuEnabled = () => {\n return (\n this.searchableSelectInputValue !== null ||\n this.searchableSelectInputValue !== \"\"\n );\n };\n\n private setOptionsValuesFromLabels = (): void => {\n if (this.options.length > 0 && this.options.map) {\n this.options.map((option) => {\n if (!option.value) {\n option.value = option.label;\n }\n });\n }\n };\n\n private setUngroupedOptions = (event: CustomEvent): void => {\n this.ungroupedOptions = event.detail.options;\n };\n\n private setTextColor = (): void => {\n if (this.nativeSelectElement.selectedIndex === 0) {\n this.nativeSelectElement.className = \"placeholder\";\n } else {\n this.nativeSelectElement.className = \"select-option-selected\";\n }\n };\n\n private setMenuChange = (open: boolean) => {\n if (this.open !== open) {\n this.open = open;\n }\n };\n\n private getLabelFromValue = (value: string): string | undefined => {\n return getLabelFromValue(value, this.options);\n };\n\n private getValueFromLabel = (label: string): string | undefined => {\n const value = this.options.find((option) => option.label === label)?.value;\n return value;\n };\n\n private getFilteredChildMenuOptions = (option: IcMenuOption) => {\n let children = option.children;\n\n if (this.searchable) {\n children = getFilteredMenuOptions(\n option.children,\n this.includeDescriptionsInSearch,\n this.searchableSelectInputValue,\n this.searchMatchPosition\n );\n } else {\n children = getFilteredMenuOptions(\n option.children,\n false,\n this.pressedCharacters,\n \"start\"\n );\n }\n\n const newOption = { ...option };\n newOption.children = children;\n return newOption;\n };\n\n private handleNativeSelectChange = (): void => {\n this.icOptionSelect.emit({ value: this.nativeSelectElement.value });\n this.emitImmediateIcChange(this.nativeSelectElement.value);\n this.setTextColor();\n };\n\n private handleCustomSelectChange = (event: CustomEvent): void => {\n if (this.searchable && event.detail.label === this.emptyOptionListText) {\n this.searchableSelectElement.focus();\n return;\n }\n\n if (this.searchable) {\n this.searchableSelectInputValue = this.getLabelFromValue(\n event.detail.value\n );\n }\n\n this.ariaActiveDescendant = event.detail.optionId;\n this.icOptionSelect.emit({ value: event.detail.value });\n this.emitIcChange(event.detail.value);\n };\n\n private handleMenuChange = (event: CustomEvent): void => {\n this.open = event.detail.open;\n this.pressedCharacters = \"\";\n\n this.searchable && this.handleFocusIndicatorDisplay();\n };\n\n // clears the debounce delay when navigating the menu with arrow keys etc\n // to prevent delay in change event, which should only occur when typing in input\n private handleMenuKeyPress = (ev: CustomEvent): void => {\n ev.cancelBubble = true;\n this.handleCharacterKeyDown(ev.detail.key);\n };\n\n private handleFocusIndicatorDisplay = () => {\n const focusIndicator =\n this.host.shadowRoot.querySelector(\".focus-indicator\");\n\n if (this.open) {\n focusIndicator.classList.add(\"focus-indicator-enabled\");\n } else {\n focusIndicator.classList.remove(\"focus-indicator-enabled\");\n }\n };\n\n private handleMouseDown = (event: Event): void => {\n if (!this.open) {\n event.preventDefault();\n }\n };\n\n private isExternalFiltering = (): boolean =>\n this.searchable && this.disableFilter;\n\n private handleClick = (event: MouseEvent): void => {\n if (this.isExternalFiltering()) {\n this.menu.options = this.filteredOptions;\n } else {\n this.noOptions = null;\n this.menu.options = this.options;\n }\n\n if (event.detail !== 0 && this.isMenuEnabled()) {\n this.menu.handleClickOpen();\n }\n };\n\n private handleExpandIconMouseDown = (event: MouseEvent) => {\n if (!this.disabled) {\n event.preventDefault();\n this.searchableSelectElement.focus();\n this.handleClick(event);\n }\n };\n\n private handleClear = (event: Event): void => {\n event.stopPropagation();\n this.noOptions = null;\n this.emitImmediateIcChange(null);\n this.icClear.emit();\n\n if (this.searchable) {\n this.searchableSelectElement.value = null;\n this.searchableSelectInputValue = null;\n this.menu.options = this.options;\n this.searchableSelectElement.focus();\n\n if (!this.isMenuEnabled()) {\n this.setMenuChange(false);\n }\n } else {\n this.customSelectElement.focus();\n }\n };\n\n private handleCharacterKeyDown = (key: string) => {\n // Only close menu when space is pressed if not being used alongside character keys to quickly select options\n if (this.open && key === \" \" && this.pressedCharacters.length === 0) {\n this.setMenuChange(false);\n }\n\n if (key.length === 1 && !this.searchable) {\n window.clearTimeout(this.characterKeyPressTimer);\n this.characterKeyPressTimer = window.setTimeout(\n () => (this.pressedCharacters = \"\"),\n 1000\n );\n\n this.pressedCharacters += key;\n this.handleFilter();\n\n if (!this.noOptions) {\n this.emitImmediateIcChange(this.filteredOptions[0].value);\n }\n } else {\n this.pressedCharacters = \"\";\n }\n };\n\n private handleNativeSelectKeyDown = (event: KeyboardEvent) => {\n event.cancelBubble = true;\n this.handleCharacterKeyDown(event.key);\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n event.cancelBubble = true;\n const isArrowKey = event.key === \"ArrowDown\" || event.key === \"ArrowUp\";\n\n if (!this.open) {\n if (this.isExternalFiltering() && (event.key === \"Enter\" || isArrowKey)) {\n this.menu.options = this.filteredOptions;\n } else {\n this.noOptions = null;\n this.menu.options = this.options;\n }\n }\n\n if (this.open && event.key === \"Enter\") {\n this.setMenuChange(false);\n } else {\n if (!(isArrowKey && this.noOptions !== null) && this.isMenuEnabled()) {\n if (!(event.key === \" \" && this.pressedCharacters.length > 0)) {\n this.menu.handleKeyboardOpen(event);\n }\n this.handleCharacterKeyDown(event.key);\n }\n }\n };\n\n private handleClearButtonFocus = (): void => {\n this.clearButtonFocused = true;\n };\n\n private handleClearButtonBlur = (): void => {\n this.clearButtonFocused = false;\n };\n\n private handleFilter = (): void => {\n const options = this.searchable ? [...this.options] : this.ungroupedOptions;\n\n let isGrouped = false;\n let newFilteredOptions: IcMenuOption[] = [];\n\n options.map((option) => {\n if (option.children) isGrouped = true;\n });\n\n let menuOptionsFiltered: IcMenuOption[];\n\n if (this.searchable) {\n menuOptionsFiltered = getFilteredMenuOptions(\n options,\n this.includeDescriptionsInSearch,\n this.searchableSelectInputValue,\n this.searchMatchPosition\n );\n } else {\n menuOptionsFiltered = getFilteredMenuOptions(\n options,\n false,\n this.pressedCharacters,\n \"start\"\n );\n }\n\n if (!isGrouped) {\n newFilteredOptions = menuOptionsFiltered;\n } else {\n options.map((option) => {\n if (this.includeGroupTitlesInSearch) {\n if (menuOptionsFiltered.indexOf(option) !== -1) {\n newFilteredOptions.push(option);\n } else {\n newFilteredOptions.push(this.getFilteredChildMenuOptions(option));\n }\n } else {\n newFilteredOptions.push(this.getFilteredChildMenuOptions(option));\n }\n });\n }\n\n let noChildOptionsWhenFiltered = false;\n\n if (isGrouped) {\n noChildOptionsWhenFiltered = true;\n newFilteredOptions.map((option) => {\n if (option.children.length > 0) {\n noChildOptionsWhenFiltered = false;\n }\n });\n }\n\n const noOptions = [{ label: this.emptyOptionListText, value: \"\" }];\n\n if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {\n this.noOptions = null;\n this.filteredOptions = newFilteredOptions;\n } else {\n this.noOptions = noOptions;\n this.filteredOptions = this.noOptions;\n }\n };\n\n private handleSearchableSelectInput = (event: Event): void => {\n this.searchableSelectInputValue = (event.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.searchableSelectInputValue });\n\n if (this.disableFilter) {\n this.emitIcChange(this.searchableSelectInputValue);\n } else if (\n this.getValueFromLabel(this.searchableSelectInputValue) === undefined\n ) {\n this.emitIcChange(null);\n }\n\n if (this.isMenuEnabled()) {\n this.setMenuChange(true);\n } else {\n this.setMenuChange(false);\n }\n\n if (!this.disableFilter) {\n this.handleFilter();\n this.debounceAriaLiveUpdate();\n }\n };\n\n private updateSearchableSelectResultAriaLive = (): void => {\n const searchableSelectResultsStatusEl = this.host.shadowRoot.querySelector(\n \".searchable-select-results-status\"\n ) as HTMLDivElement;\n\n if (searchableSelectResultsStatusEl) {\n if (this.noOptions !== null) {\n searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;\n } else {\n searchableSelectResultsStatusEl.innerText = \"\";\n }\n }\n };\n\n private debounceAriaLiveUpdate() {\n clearTimeout(this.debounceAria);\n\n window.setTimeout(() => {\n this.updateSearchableSelectResultAriaLive();\n }, 800);\n }\n\n private getDefaultValue = (value: string): string | null =>\n this.getLabelFromValue(value) || value || null;\n\n private setDefaultValue() {\n if (!this.hasSetDefaultValue && this.currValue) {\n this.searchableSelectInputValue = this.getDefaultValue(this.currValue);\n this.initialValue = this.currValue;\n this.hasSetDefaultValue = true;\n }\n }\n\n private onFocus = (): void => {\n this.icFocus.emit();\n };\n\n private onBlur = (event: FocusEvent): void => {\n const isSearchableAndNoFocusedInternalElements =\n this.searchable &&\n event.relatedTarget !== this.menu &&\n !Array.from(this.menu.querySelectorAll(\"[role='option']\")).includes(\n event.relatedTarget as Element\n ) &&\n !(this.clearButton && event.relatedTarget === this.clearButton);\n\n if (isSearchableAndNoFocusedInternalElements) {\n this.setMenuChange(false);\n this.handleFocusIndicatorDisplay();\n }\n\n this.icBlur.emit();\n };\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n if (this.searchable) {\n this.searchableSelectInputValue = this.getDefaultValue(this.value);\n }\n };\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.host, [\n ...IC_INHERITED_ARIA,\n \"tabindex\",\n \"title\",\n ]);\n\n this.setOptionsValuesFromLabels();\n\n addFormResetListener(this.host, this.handleFormReset);\n\n if (!this.options.length) {\n this.initialOptionsEmpty = true;\n } else if (!this.disableFilter) {\n this.setDefaultValue();\n }\n }\n\n componentDidRender(): void {\n if (this.nativeSelectElement && !this.disabled) {\n this.setTextColor();\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Select\"\n );\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.host, this.handleFormReset);\n }\n\n render() {\n const {\n small,\n disabled,\n fullWidth,\n helperText,\n hideLabel,\n label,\n menuId,\n name,\n options,\n placeholder,\n readonly,\n required,\n searchable,\n showClearButton,\n validationStatus,\n validationText,\n currValue,\n } = this;\n\n renderHiddenInput(true, this.host, name, currValue, disabled);\n\n const invalid =\n validationStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n\n const describedBy = getInputDescribedByText(\n this.inputId,\n helperText !== \"\",\n hasValidationStatus(this.validationStatus, this.disabled)\n ).trim();\n\n return (\n <Host\n class={{\n disabled: disabled,\n searchable: searchable,\n small: small,\n \"full-width\": fullWidth,\n }}\n >\n <ic-input-container readonly={readonly}>\n {!hideLabel && (\n <ic-input-label\n for={this.inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n readonly={readonly}\n ></ic-input-label>\n )}\n <ic-input-component-container\n ref={(el) => (this.anchorEl = el)}\n class={{ \"menu-open\": this.open }}\n small={small}\n fullWidth={fullWidth}\n disabled={disabled}\n readonly={readonly}\n validationStatus={validationStatus}\n >\n {readonly ? (\n <ic-typography>\n <p>{this.getLabelFromValue(currValue)}</p>\n </ic-typography>\n ) : isMobileOrTablet() ? (\n <select\n ref={(el) => (this.nativeSelectElement = el)}\n disabled={disabled}\n onChange={this.handleNativeSelectChange}\n required={required}\n id={this.inputId}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onKeyDown={this.handleNativeSelectKeyDown}\n {...this.inheritedAttributes}\n >\n <option value=\"\" selected disabled={!showClearButton}>\n {placeholder}\n </option>\n {options.map((option) => {\n if (option.children) {\n return (\n <optgroup label={option.label}>\n {option.children.map((option) => (\n <option\n value={option.value}\n disabled={option.disabled}\n selected={option.value === currValue}\n >\n {option.label}\n </option>\n ))}\n </optgroup>\n );\n } else {\n return (\n <option\n value={option.value}\n disabled={option.disabled}\n selected={option.value === currValue}\n >\n {option.label}\n </option>\n );\n }\n })}\n </select>\n ) : searchable ? (\n <div class=\"searchable-select-container\">\n <input\n class=\"select-input\"\n role=\"combobox\"\n autocomplete=\"off\"\n aria-label={label}\n aria-describedby={describedBy}\n aria-activedescendant={this.ariaActiveDescendant}\n aria-autocomplete=\"list\"\n aria-expanded={this.open ? \"true\" : \"false\"}\n aria-invalid={invalid}\n aria-required={required ? \"true\" : \"false\"}\n aria-controls={menuId}\n ref={(el) => (this.searchableSelectElement = el)}\n id={this.inputId}\n value={this.searchableSelectInputValue}\n placeholder={placeholder}\n disabled={disabled}\n onInput={this.handleSearchableSelectInput}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></input>\n {this.searchableSelectInputValue &&\n (showClearButton || searchable) && (\n <div class=\"clear-button-container\">\n <ic-button\n id=\"clear-button\"\n ref={(el) => (this.clearButton = el)}\n aria-label={\n this.searchableSelectInputValue && currValue === null\n ? \"Clear input\"\n : \"Clear selection\"\n }\n class=\"clear-button\"\n innerHTML={Clear}\n onClick={this.handleClear}\n onFocus={this.handleClearButtonFocus}\n onBlur={this.handleClearButtonBlur}\n size={small ? \"small\" : \"default\"}\n variant=\"icon\"\n appearance={\n this.clearButtonFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Dark\n }\n ></ic-button>\n <div class=\"divider\"></div>\n </div>\n )}\n <span\n onMouseDown={this.handleExpandIconMouseDown}\n class={{\n \"expand-icon\": true,\n \"expand-icon-open\": this.open,\n \"expand-icon-filled\": !(\n currValue == null || currValue === \"\"\n ),\n }}\n innerHTML={Expand}\n aria-hidden=\"true\"\n />\n <div\n aria-live=\"polite\"\n role=\"status\"\n class=\"searchable-select-results-status\"\n ></div>\n </div>\n ) : (\n <div class=\"select-container\">\n <button\n class=\"select-input\"\n ref={(el) => (this.customSelectElement = el)}\n id={this.inputId}\n aria-label={`${label}, ${\n this.getLabelFromValue(currValue) || placeholder\n }${required ? \", required\" : \"\"}`}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n aria-haspopup=\"listbox\"\n aria-expanded={this.open ? \"true\" : \"false\"}\n aria-owns={menuId}\n aria-controls={menuId}\n disabled={disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onClick={this.handleClick}\n onMouseDown={this.handleMouseDown}\n onKeyDown={this.handleKeyDown}\n >\n <ic-typography\n variant=\"body\"\n class={{\n \"value-text\": true,\n placeholder:\n this.getLabelFromValue(currValue) === undefined,\n }}\n >\n <p>{this.getLabelFromValue(currValue) || placeholder}</p>\n </ic-typography>\n <div class=\"select-input-end\">\n {currValue && showClearButton && (\n <div class=\"divider\"></div>\n )}\n <span\n class={{\n \"expand-icon\": true,\n \"expand-icon-open\": this.open,\n \"expand-icon-filled\": !(\n currValue == null || currValue === \"\"\n ),\n }}\n innerHTML={Expand}\n aria-hidden=\"true\"\n />\n </div>\n </button>\n {currValue && showClearButton && (\n <ic-button\n id=\"clear-button\"\n aria-label=\"Clear selection\"\n class=\"clear-button\"\n innerHTML={Clear}\n onClick={this.handleClear}\n onFocus={this.handleClearButtonFocus}\n onBlur={this.handleClearButtonBlur}\n size={small ? \"small\" : \"default\"}\n variant=\"icon\"\n appearance={\n this.clearButtonFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Dark\n }\n ></ic-button>\n )}\n </div>\n )}\n </ic-input-component-container>\n {!isMobileOrTablet() && (\n <ic-menu\n class={{\n \"no-results\": this.noOptions !== null && this.searchable,\n }}\n ref={(el) => (this.menu = el)}\n inputEl={\n searchable\n ? this.searchableSelectElement\n : this.customSelectElement\n }\n inputLabel={label}\n anchorEl={this.anchorEl}\n small={small}\n menuId={menuId}\n open={this.open}\n options={searchable ? this.filteredOptions : options}\n value={currValue}\n fullWidth={fullWidth}\n onMenuStateChange={this.handleMenuChange}\n onMenuOptionSelect={this.handleCustomSelectChange}\n onMenuKeyPress={this.handleMenuKeyPress}\n onUngroupedOptionsSet={this.setUngroupedOptions}\n parentEl={this.host}\n ></ic-menu>\n )}\n {hasValidationStatus(this.validationStatus, this.disabled) && (\n <ic-input-validation\n class={{ \"menu-open\": this.open }}\n ariaLiveMode=\"polite\"\n status={validationStatus}\n message={validationText}\n for={this.inputId}\n ></ic-input-validation>\n )}\n </ic-input-container>\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as e,c as i,h as t,H as a,g as r}from"./p-5450cebf.js";import{
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as e,c as i,h as t,H as a,g as r}from"./p-5450cebf.js";import{u as c,d as o,a as n,r as s}from"./p-3dea2867.js";import"./p-6f57b13c.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:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}:host([additional-field-display="static"]) ::slotted(ic-text-field){margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}:host(.disabled){color:var(--ic-architectural-200)}.container input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:transparent;border:var(--ic-space-1px) solid #a7acb3;border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-space-1px) solid var(--ic-action-default)}.container:active input~.checkmark{background-color:var(--ic-action-default-bg-active);border:var(--ic-space-1px) solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark{background-color:var(--ic-action-default-bg-active);border:0.125rem solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark::after{background-color:var(--ic-action-default-active)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-action-default)}.container input:checked:disabled~.checkmark{background-color:transparent;border:0.125rem solid var(--ic-architectural-200)}.container input:disabled~.checkmark{border:var(--ic-space-1px) dashed var(--ic-architectural-200)}.container input:disabled~.checkmark::after{background:var(--ic-architectural-200)}.container:hover input:disabled~.checkmark{background-color:transparent;box-shadow:none;border:0.125rem solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-architectural-200)}.container .checkmark::after{content:"";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-action-default)}.radio-label{margin-left:var(--ic-space-md)}.additional-field-wrapper{margin-left:var(--ic-space-xs)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default);margin-left:calc(-1 * var(--ic-space-1px))}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){::slotted(ic-text-field){--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}';const l=class{constructor(t){e(this,t);this.radioOptionSelect=i(this,"radioOptionSelect",7);this.icCheck=i(this,"icCheck",7);this.defaultRadioValue="";this.skipFocus=false;this.handleClick=()=>{if(!this.disabled){if(this.skipFocus===false){this.radioElement.focus()}this.skipFocus=false;if(this.hasAdditionalField){const e=this.host.querySelector("ic-text-field");this.value=e.value!==""?e.value:this.defaultRadioValue}this.icCheck.emit({value:this.value});this.radioOptionSelect.emit({value:this.value})}};this.swallowClick=e=>{e.stopPropagation()};this.hasAdditionalField=false;this.handleFormReset=()=>{this.skipFocus=true;this.selected=this.initiallySelected};this.selected=false;this.disabled=false;this.label=undefined;this.value=undefined;this.name=undefined;this.groupLabel=undefined;this.dynamicText="This selection requires additional answers";this.additionalFieldDisplay="static";this.initiallySelected=this.selected}selectedChangeHandler(e){if(e){this.handleClick()}}async setFocus(){if(this.host.shadowRoot.querySelector("input")){this.host.shadowRoot.querySelector("input").focus()}}componentWillLoad(){const e=c(this.host,"additional-field");if(e!==null){this.hasAdditionalField=true;const i=e[0];if(i.tagName==="IC-TEXT-FIELD"){const e=i;e.hiddenInput=false}}this.defaultRadioValue=this.value;o(this.host,this.handleFormReset)}textfieldValueHandler(e){const i=e.detail.value;if(this.selected){if(i!==""){this.value=e.detail.value;this.icCheck.emit({value:this.value});this.radioOptionSelect.emit({value:this.value})}else{this.value=this.defaultRadioValue;this.icCheck.emit({value:this.defaultRadioValue});this.radioOptionSelect.emit({value:this.defaultRadioValue})}}}componentDidLoad(){n([{prop:this.value,propName:"value"}],"Radio Option")}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.host.querySelector("ic-text-field");if(!this.selected){e&&e.setAttribute("disabled","")}else{e&&e.removeAttribute("disabled")}}}disconnectedCallback(){s(this.host,this.handleFormReset)}render(){const e=`ic-radio-option-${this.label!==undefined?this.label:this.value}-${this.groupLabel}`;return t(a,{onClick:this.handleClick,class:{disabled:this.disabled}},t("div",{class:{["container"]:true,["disabled"]:this.disabled}},t("div",null,t("input",{role:"radio",tabindex:this.selected?"0":"-1",type:"radio",name:this.name,id:e,value:this.value,disabled:this.disabled?true:null,checked:this.selected,ref:e=>this.radioElement=e}),t("span",{class:"checkmark"})),t("ic-typography",{class:"radio-label",variant:"body"},t("label",{htmlFor:e},this.label))),this.hasAdditionalField&&t("div",{onClick:this.swallowClick,class:{"dynamic-container":true,hidden:this.additionalFieldDisplay==="dynamic"&&!this.selected}},this.additionalFieldDisplay==="dynamic"&&t("div",{class:"branch-corner"}),t("div",null,this.additionalFieldDisplay==="dynamic"&&t("ic-typography",{variant:"caption"},t("p",{class:"dynamic-text"},this.dynamicText)),t("div",{class:{"additional-field-wrapper":this.additionalFieldDisplay==="static"}},t("slot",{name:"additional-field"})))))}static get delegatesFocus(){return true}get host(){return r(this)}static get watchers(){return{selected:["selectedChangeHandler"]}}};l.style=d;export{l as ic_radio_option};
|
2
|
+
//# sourceMappingURL=p-d27dbb63.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","src/components/ic-radio-option/ic-radio-option.tsx"],"names":["icRadioOptionCss","RadioOption","this","defaultRadioValue","skipFocus","handleClick","disabled","radioElement","focus","hasAdditionalField","textfield","host","querySelector","value","icCheck","emit","radioOptionSelect","swallowClick","event","stopPropagation","handleFormReset","selected","initiallySelected","[object Object]","shadowRoot","additonalFieldContent","getSlotContent","Element","tagName","textField","hiddenInput","addFormResetListener","textFieldValue","detail","onComponentRequiredPropUndefined","prop","propName","additionalFieldDisplay","setAttribute","removeAttribute","removeFormResetListener","id","label","undefined","groupLabel","h","Host","onClick","class","role","tabindex","type","name","checked","ref","el","variant","htmlFor","dynamic-container","hidden","dynamicText","additional-field-wrapper"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: flex;\n flex-direction: column;\n width: fit-content;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-text-field) {\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled */\n:host(.disabled) {\n color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n.container {\n display: grid;\n grid-template-columns: min-content auto;\n position: relative;\n cursor: pointer;\n align-items: center;\n margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-block;\n position: absolute;\n cursor: pointer;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n border-radius: 50%;\n border: none;\n}\n\n/* Create a custom radio button */\n.checkmark {\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: transparent;\n border: var(--ic-space-1px) solid #a7acb3;\n border-radius: 50%;\n transition: var(--ic-easing-transition-fast);\n box-sizing: border-box;\n}\n\n/* Show the indicator (dot/circle) when checked */\n.container input:checked ~ .checkmark::after {\n display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n.container:hover input ~ .checkmark {\n background-color: var(--ic-action-default-bg-hover);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n border: var(--ic-space-1px) solid var(--ic-action-default);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n background-color: var(--ic-action-default-bg-active);\n border: var(--ic-space-1px) solid var(--ic-action-default-active);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n background-color: var(--ic-action-default-bg-active);\n border: 0.125rem solid var(--ic-action-default-active);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n background-color: var(--ic-action-default-active);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-action-default);\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n background-color: transparent;\n border: 0.125rem solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n border: var(--ic-space-1px) dashed var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n background: var(--ic-architectural-200);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n background-color: transparent;\n box-shadow: none;\n border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n background-color: var(--ic-architectural-200);\n}\n\n/* Style the indicator (dot/circle) */\n.container .checkmark::after {\n content: \"\";\n position: absolute;\n display: none;\n top: calc(50% - var(--ic-space-xs));\n left: calc(50% - var(--ic-space-xs));\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n border-radius: 50%;\n background: var(--ic-action-default);\n}\n\n.radio-label {\n margin-left: var(--ic-space-md);\n}\n\n.additional-field-wrapper {\n margin-left: var(--ic-space-xs);\n}\n\n/* The line */\n.branch-corner {\n color: var(--ic-action-default);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-action-default);\n border-left: 0.125rem solid var(--ic-action-default);\n margin-left: calc(-1 * var(--ic-space-1px));\n}\n\n/* The dynamic container */\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n display: none;\n}\n\n.dynamic-text {\n color: var(--ic-action-default);\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n /* Styles here only apply to Forced Colors Mode */\n\n .container input:checked ~ .checkmark,\n .container:active input:checked ~ .checkmark {\n border-color: Highlight;\n }\n\n .container input:checked ~ .checkmark::after,\n .container:active input:checked ~ .checkmark::after {\n background-color: Highlight;\n }\n\n .container input:disabled ~ .checkmark,\n .container input:checked:disabled ~ .checkmark {\n border-color: GrayText;\n }\n\n .container input:disabled ~ .checkmark::after,\n .container:active input:disabled ~ .checkmark::after {\n background-color: GrayText;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Listen,\n Watch,\n State,\n Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n getSlotContent,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcValueEventDetail } from \"../../interface\";\n@Component({\n tag: \"ic-radio-option\",\n styleUrl: \"ic-radio-option.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class RadioOption {\n private radioElement: HTMLInputElement;\n /**\n * If `true`, the radio option will be displayed in a selected state.\n */\n @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n /**\n * The label for the radio option.\n */\n @Prop() label?: string;\n /**\n * The value for the radio option.\n */\n @Prop({ mutable: true }) value!: string;\n /**\n * The name for the radio option.\n */\n @Prop() name: string;\n /**\n * The group label for the radio option.\n */\n @Prop() groupLabel: string;\n /**\n * The text to be displayed when dynamic.\n */\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /**\n * The style of additionalField that will be displayed if used.\n */\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n @State() initiallySelected = this.selected;\n\n @Element() host: HTMLIcRadioOptionElement;\n\n /**\n * @deprecated This event should not be used anymore. Use icCheck instead.\n */\n @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when a radio is selected.\n */\n @Event() icCheck: EventEmitter<IcValueEventDetail>;\n\n @Watch(\"selected\")\n selectedChangeHandler(selected: boolean): void {\n if (selected) {\n this.handleClick();\n }\n }\n\n /**\n * Sets focus on the radio option.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.host.shadowRoot.querySelector(\"input\")) {\n this.host.shadowRoot.querySelector(\"input\").focus();\n }\n }\n\n private defaultRadioValue: string = \"\";\n private skipFocus = false;\n\n private handleClick = () => {\n if (!this.disabled) {\n if (this.skipFocus === false) {\n this.radioElement.focus();\n }\n this.skipFocus = false;\n\n if (this.hasAdditionalField) {\n const textfield = this.host.querySelector(\"ic-text-field\");\n this.value =\n textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n }\n\n this.icCheck.emit({\n value: this.value,\n });\n\n this.radioOptionSelect.emit({\n value: this.value,\n });\n }\n };\n\n private swallowClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n private hasAdditionalField: boolean = false;\n componentWillLoad(): void {\n const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n if (additonalFieldContent !== null) {\n this.hasAdditionalField = true;\n const Element = additonalFieldContent[0] as HTMLElement;\n if (Element.tagName === \"IC-TEXT-FIELD\") {\n const textField = Element as HTMLIcTextFieldElement;\n textField.hiddenInput = false;\n }\n }\n\n this.defaultRadioValue = this.value;\n\n addFormResetListener(this.host, this.handleFormReset);\n }\n\n private handleFormReset = (): void => {\n this.skipFocus = true;\n this.selected = this.initiallySelected;\n };\n\n @Listen(\"icChange\")\n textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n const textFieldValue = event.detail.value;\n\n if (this.selected) {\n if (textFieldValue !== \"\") {\n this.value = event.detail.value;\n this.icCheck.emit({\n value: this.value,\n });\n this.radioOptionSelect.emit({\n value: this.value,\n });\n } else {\n this.value = this.defaultRadioValue;\n this.icCheck.emit({\n value: this.defaultRadioValue,\n });\n this.radioOptionSelect.emit({\n value: this.defaultRadioValue,\n });\n }\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.value, propName: \"value\" }],\n \"Radio Option\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.host.querySelector(\"ic-text-field\");\n if (!this.selected) {\n textfield && textfield.setAttribute(\"disabled\", \"\");\n } else {\n textfield && textfield.removeAttribute(\"disabled\");\n }\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.host, this.handleFormReset);\n }\n\n render() {\n const id = `ic-radio-option-${\n this.label !== undefined ? this.label : this.value\n }-${this.groupLabel}`;\n\n return (\n <Host onClick={this.handleClick} class={{ disabled: this.disabled }}>\n <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n <div>\n <input\n role=\"radio\"\n tabindex={this.selected ? \"0\" : \"-1\"}\n type=\"radio\"\n name={this.name}\n id={id}\n value={this.value}\n disabled={this.disabled ? true : null}\n checked={this.selected}\n ref={(el) => (this.radioElement = el)}\n ></input>\n <span class=\"checkmark\"></span>\n </div>\n <ic-typography class=\"radio-label\" variant=\"body\">\n <label htmlFor={id}>{this.label}</label>\n </ic-typography>\n </div>\n\n {this.hasAdditionalField && (\n <div\n onClick={this.swallowClick}\n class={{\n \"dynamic-container\": true,\n hidden:\n this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n }}\n >\n {this.additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {this.additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\">{this.dynamicText}</p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n this.additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as e,h as t,H as n,g as i}from"./p-5450cebf.js";import{I as o}from"./p-6f57b13c.js";import{k as a,s as r,a as s}from"./p-3dea2867.js";const c='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-theme-tertiary);color:var(--ic-theme-text);--hero-heading-bottom-margin:var(--ic-space-md)}:host(.dark){background-color:var(--ic-theme-secondary)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg);flex-wrap:wrap}.secondary-container{display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--ic-theme-text)}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned="left"]) .left-container,:host([content-aligned="left"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned="center"]) .left-container,:host([content-aligned="center"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host(.small),:host(.small) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.small),:host(.small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.small),:host(.small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}.right-container{margin-left:3.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host(.small),:host(.small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:17.5rem}:host(.secondary-heading) .section-container,:host(.small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host(.small),:host(.small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:16.5rem}:host(.secondary-heading) .section-container,:host(.small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}';const d=class{constructor(t){e(this,t);this.heading=undefined;this.subheading=undefined;this.secondaryHeading=undefined;this.secondarySubheading=undefined;this.backgroundImage=undefined;this.disableBackgroundParallax=false;this.aligned="left";this.contentAligned="left";this.small=false;this.rightContent=false;this.scrollFactor="right -100px";this.leftContentFullWidth=!this.rightContent&&this.secondaryHeading===undefined;this.foregroundColor=a()}themeChangeHandler(e){const t=e.detail;this.foregroundColor=t.mode}doScroll(){if(this.disableBackgroundParallax){return}const e=document.scrollingElement.scrollTop;const t=.4;const n=-100+e*t;this.scrollFactor="right "+n+"px"}componentWillLoad(){this.rightContent=r(this.el,"secondary")}componentDidLoad(){s([{prop:this.heading,propName:"heading"}],"Hero")}componentWillRender(){this.rightContent=r(this.el,"secondary")}render(){const{aligned:e,small:i,heading:a,subheading:r,secondaryHeading:s,secondarySubheading:c,foregroundColor:d,backgroundImage:h,scrollFactor:l}=this;let m={};if(h!==undefined){m={"background-image":"url("+h+")","background-position":l}}return t(n,{class:{[o.Dark]:d===o.Dark,["has-background-image"]:h!==undefined,["small"]:i,["secondary-heading"]:!!s},style:m},t("ic-section-container",{aligned:e,fullHeight:true,class:"section-container"},t("div",{class:{["left-container"]:true,["left-container-full-width"]:this.leftContentFullWidth}},t("div",{class:"heading"},t("slot",{name:"heading"},t("ic-typography",{variant:i?"h2":"h1",class:{["heading-bottom-spacing"]:!i}},a))),t("div",{class:"subheading"},t("slot",{name:"subheading"},t("ic-typography",{variant:"body"},r))),t("div",{class:"interaction-container"},t("slot",{name:"interaction"}))),(s!==undefined||this.rightContent)&&t("div",{class:"right-container"},t("slot",{name:"secondary"},s&&t("div",{class:"secondary-container"},t("div",{class:"secondary-heading"},t("ic-typography",{variant:"h4"},s)),t("div",{class:"secondary-subheading"},t("ic-typography",{variant:"subtitle-small"},c)))))))}get el(){return i(this)}};d.style=c;export{d as ic_hero};
|
2
|
+
//# sourceMappingURL=p-dc4ba6a0.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"names":["icHeroCss","Hero","this","rightContent","secondaryHeading","undefined","getThemeForegroundColor","[object Object]","ev","theme","detail","foregroundColor","mode","disableBackgroundParallax","scrolltotop","document","scrollingElement","scrollTop","factor","y","scrollFactor","slotHasContent","el","onComponentRequiredPropUndefined","prop","heading","propName","aligned","small","subheading","secondarySubheading","backgroundImage","style","background-image","background-position","h","Host","class","IcThemeForegroundEnum","Dark","fullHeight","leftContentFullWidth","name","variant"],"mappings":"+IAAA,MAAMA,EAAY,yzMCkCLC,EAAI,iNA+B+B,mBAKf,2BAKmB,kBAKzB,wBAEQ,wBAED,0CAG7BC,KAAKC,cAAgBD,KAAKE,mBAAqBC,+BAEJC,IAG9CC,mBAAmBC,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BR,KAAKS,gBAAkBF,EAAMG,KAI/BL,WACE,GAAIL,KAAKW,0BAA2B,CAClC,OAGF,MAAMC,EAAcC,SAASC,iBAAiBC,UAC9C,MAAMC,EAAS,GACf,MAAMC,GAAK,IAAML,EAAcI,EAC/BhB,KAAKkB,aAAe,SAAWD,EAAI,KAGrCZ,oBACEL,KAAKC,aAAekB,EAAenB,KAAKoB,GAAI,aAG9Cf,mBACEgB,EACE,CAAC,CAAEC,KAAMtB,KAAKuB,QAASC,SAAU,YACjC,QAIJnB,sBACEL,KAAKC,aAAekB,EAAenB,KAAKoB,GAAI,aAG9Cf,SACE,MAAMoB,QACJA,EAAOC,MACPA,EAAKH,QACLA,EAAOI,WACPA,EAAUzB,iBACVA,EAAgB0B,oBAChBA,EAAmBnB,gBACnBA,EAAeoB,gBACfA,EAAeX,aACfA,GACElB,KAEJ,IAAI8B,EAAQ,GAEZ,GAAID,IAAoB1B,UAAW,CACjC2B,EAAQ,CACNC,mBAAoB,OAASF,EAAkB,IAC/CG,sBAAuBd,GAI3B,OACEe,EAACC,EAAI,CACHC,MAAO,CACL9B,CAAC+B,EAAsBC,MACrB5B,IAAoB2B,EAAsBC,KAC5ChC,CAAC,wBAAyBwB,IAAoB1B,UAC9CE,CAAC,SAAUqB,EACXrB,CAAC,uBAAwBH,GAE3B4B,MAAOA,GAEPG,EAAA,uBAAA,CACER,QAASA,EACTa,WAAU,KACVH,MAAM,qBAENF,EAAA,MAAA,CACEE,MAAO,CACL9B,CAAC,kBAAmB,KACpBA,CAAC,6BAA8BL,KAAKuC,uBAGtCN,EAAA,MAAA,CAAKE,MAAM,WACTF,EAAA,OAAA,CAAMO,KAAK,WACTP,EAAA,gBAAA,CACEQ,QAASf,EAAQ,KAAO,KACxBS,MAAO,CAAE9B,CAAC,2BAA4BqB,IAErCH,KAIPU,EAAA,MAAA,CAAKE,MAAM,cACTF,EAAA,OAAA,CAAMO,KAAK,cACTP,EAAA,gBAAA,CAAeQ,QAAQ,QAAQd,KAGnCM,EAAA,MAAA,CAAKE,MAAM,yBACTF,EAAA,OAAA,CAAMO,KAAK,mBAGbtC,IAAqBC,WAAaH,KAAKC,eACvCgC,EAAA,MAAA,CAAKE,MAAM,mBACTF,EAAA,OAAA,CAAMO,KAAK,aACRtC,GACC+B,EAAA,MAAA,CAAKE,MAAM,uBACTF,EAAA,MAAA,CAAKE,MAAM,qBACTF,EAAA,gBAAA,CAAeQ,QAAQ,MACpBvC,IAGL+B,EAAA,MAAA,CAAKE,MAAM,wBACTF,EAAA,gBAAA,CAAeQ,QAAQ,kBACpBb","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n background-color: var(--ic-theme-tertiary);\n color: var(--ic-theme-text);\n\n --hero-heading-bottom-margin: var(--ic-space-md);\n}\n\n:host(.dark) {\n background-color: var(--ic-theme-secondary);\n}\n\n:host(.has-background-image) {\n background-repeat: no-repeat;\n background-position: right -6.25rem;\n background-size: auto calc(100% + 6.25rem);\n box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n :host(.has-background-image) {\n background-position: right -6.25rem !important;\n }\n}\n\nic-typography.heading-bottom-spacing {\n margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n display: flex;\n align-items: center;\n height: 100%;\n}\n\n.left-container {\n padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n flex-basis: 50%;\n}\n\n.left-container-full-width {\n width: 100%;\n}\n\n.right-container {\n flex-basis: 50%;\n}\n\n.interaction-container {\n display: flex;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-lg);\n flex-wrap: wrap;\n}\n\n.secondary-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-left: var(--ic-space-xxxs) solid var(--ic-theme-text);\n}\n\n.secondary-subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n justify-content: flex-start;\n text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n justify-content: center;\n text-align: center;\n}\n\n@media (min-width: 992px) {\n .left-container-full-width {\n width: 66.6%;\n }\n}\n\n@media (min-width: 1044px) {\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.small),\n :host(.small) .section-container {\n min-height: 10.813rem;\n }\n\n .left-container:not(.left-container-full-width) {\n flex-basis: 66.6%;\n }\n\n .left-container {\n min-height: 9rem;\n }\n\n .right-container {\n flex-basis: 33.3%;\n margin-left: 3.125rem;\n }\n\n .secondary-container {\n min-height: 9rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 3.938rem;\n }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.small),\n :host(.small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 5.922rem;\n }\n\n .right-container {\n margin-left: 3.125rem;\n }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.small),\n :host(.small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 2.125rem;\n }\n\n .right-container {\n margin-left: 3.125rem;\n }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.small),\n :host(.small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 17.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n\n .right-container {\n margin-bottom: 2.5rem;\n }\n}\n\n@media (max-width: 480px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 12rem;\n }\n\n :host,\n .right-container {\n margin-bottom: var(--ic-space-md);\n }\n\n :host(.small),\n :host(.small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 16.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcAlignment,\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n slotHasContent,\n getThemeForegroundColor,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n tag: \"ic-hero\",\n styleUrl: \"ic-hero.css\",\n shadow: true,\n})\nexport class Hero {\n @Element() el: HTMLIcHeroElement;\n\n /**\n * The heading of the hero.\n */\n @Prop() heading!: string;\n\n /**\n * The description for the hero.\n */\n @Prop() subheading?: string;\n\n /**\n * The optional secondary heading, replaced by slotted right content.\n */\n @Prop() secondaryHeading?: string;\n\n /**\n * The optional secondary subheading, replaced by slotted right content.\n */\n @Prop() secondarySubheading?: string;\n\n /**\n * The optional background image.\n */\n @Prop() backgroundImage?: string;\n\n /**\n * If `true`, the background image (if set) will not scroll using a parallax effect.\n */\n @Prop() disableBackgroundParallax?: boolean = false;\n\n /**\n * The alignment of the hero.\n */\n @Prop() aligned: IcAlignment = \"left\";\n\n /**\n * The alignment of the hero content.\n */\n @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n /**\n * If `true`, the small styling will be applied to the hero.\n */\n @Prop() small: boolean = false;\n\n @State() rightContent: boolean = false;\n\n @State() scrollFactor: string = \"right -100px\";\n\n @State() leftContentFullWidth: boolean =\n !this.rightContent && this.secondaryHeading === undefined;\n\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.foregroundColor = theme.mode;\n }\n\n @Listen(\"scroll\", { target: \"document\" })\n doScroll(): void {\n if (this.disableBackgroundParallax) {\n return;\n }\n\n const scrolltotop = document.scrollingElement.scrollTop;\n const factor = 0.4;\n const y = -100 + scrolltotop * factor;\n this.scrollFactor = \"right \" + y + \"px\";\n }\n\n componentWillLoad(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Hero\"\n );\n }\n\n componentWillRender(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n render() {\n const {\n aligned,\n small,\n heading,\n subheading,\n secondaryHeading,\n secondarySubheading,\n foregroundColor,\n backgroundImage,\n scrollFactor,\n } = this;\n\n let style = {};\n\n if (backgroundImage !== undefined) {\n style = {\n \"background-image\": \"url(\" + backgroundImage + \")\",\n \"background-position\": scrollFactor,\n };\n }\n\n return (\n <Host\n class={{\n [IcThemeForegroundEnum.Dark]:\n foregroundColor === IcThemeForegroundEnum.Dark,\n [\"has-background-image\"]: backgroundImage !== undefined,\n [\"small\"]: small,\n [\"secondary-heading\"]: !!secondaryHeading,\n }}\n style={style}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight\n class=\"section-container\"\n >\n <div\n class={{\n [\"left-container\"]: true,\n [\"left-container-full-width\"]: this.leftContentFullWidth,\n }}\n >\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography\n variant={small ? \"h2\" : \"h1\"}\n class={{ [\"heading-bottom-spacing\"]: !small }}\n >\n {heading}\n </ic-typography>\n </slot>\n </div>\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n <div class=\"interaction-container\">\n <slot name=\"interaction\"></slot>\n </div>\n </div>\n {(secondaryHeading !== undefined || this.rightContent) && (\n <div class=\"right-container\">\n <slot name=\"secondary\">\n {secondaryHeading && (\n <div class=\"secondary-container\">\n <div class=\"secondary-heading\">\n <ic-typography variant=\"h4\">\n {secondaryHeading}\n </ic-typography>\n </div>\n <div class=\"secondary-subheading\">\n <ic-typography variant=\"subtitle-small\">\n {secondarySubheading}\n </ic-typography>\n </div>\n </div>\n )}\n </slot>\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as s,h as i,H as t,g as e}from"./p-5450cebf.js";import{D as l,g as a,c as h}from"./p-
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as s,h as i,H as t,g as e}from"./p-5450cebf.js";import{D as l,g as a,c as h}from"./p-3dea2867.js";import"./p-6f57b13c.js";const c=":host{display:block}:host ol{display:flex;list-style-type:none;align-items:center;flex-wrap:wrap;padding:0;margin:0}:host(.back) ol ::slotted(ic-breadcrumb){display:none}:host(.back) ol ::slotted(ic-breadcrumb.show){display:flex}:host(.collapsed) ol ::slotted(ic-breadcrumb.hide){display:none;opacity:0;visibility:hidden}:host(.collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){display:block;opacity:0;transition:all var(--ic-easing-transition-slow)}:host(.collapsed) ol ::slotted(ic-breadcrumb.fade){opacity:1}";const o=class{constructor(i){s(this,i);this.ADD_CLASS_DELAY=50;this.setBackBreadcrumb=()=>{if(this.backBreadcrumbOnly){this.setBackBreadcrumbAttr()}};this.setBackBreadcrumbAttr=()=>{const s=this.getLastParentBreadcrumb();if(s){s.classList.add("show");s.setAttribute("show-back-icon","true")}};this.getLastParentBreadcrumb=()=>{const s=Array.from(this.el.querySelectorAll("ic-breadcrumb"));if(s.length===1){return null}this.breadcrumbs=s.filter((s=>!s.getAttribute("current")));this.breadcrumb=this.breadcrumbs[this.breadcrumbs.length-1];return this.breadcrumb};this.setDefaultBreadcrumbs=()=>{const s=Array.from(this.el.querySelectorAll("ic-breadcrumb"));s.forEach((s=>{s.setAttribute("show-back-icon","false")}))};this.setCollapsed=()=>{if(this.collapsed){const s=Array.from(this.el.querySelectorAll("ic-breadcrumb"));this.collapsedBreadcrumbs=s.splice(1,s.length-2).filter((s=>!s.classList.contains("collapsed-breadcrumb-wrapper")));this.collapsedBreadcrumbs.forEach((s=>s.classList.add("hide")));const i=s[0];if(i){i.insertAdjacentElement("afterend",this.collapsedBreadcrumbWrapper)}}};this.renderCollapsedBreadcrumb=()=>{this.collapsedBreadcrumbWrapper=document.createElement("ic-breadcrumb");this.collapsedBreadcrumbWrapper.classList.add("collapsed-breadcrumb-wrapper");const s=document.createElement("button");const i=document.createElement("span");i.id="collapsed-button-label";i.innerText="Collapsed breadcrumbs";i.className="hide";s.setAttribute("aria-labelledby","collapsed-button-label");const t=document.createElement("span");t.id="collapsed-button-described";t.innerText="Select to view collapsed breadcrumbs";t.className="hide";s.setAttribute("aria-describedby","collapsed-button-described");s.id="collapsed-ellipsis";s.innerText="...";s.classList.add("collapsed-breadcrumb");s.addEventListener("click",(()=>{this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper)}));this.collapsedBreadcrumbWrapper.append(t);this.collapsedBreadcrumbWrapper.append(i);this.collapsedBreadcrumbWrapper.append(s);return this.collapsedBreadcrumbWrapper};this.handleHiddenCollapsedBreadcrumbs=s=>{s.remove();this.collapsedBreadcrumbs.forEach((s=>{s.classList.add("visuallyhidden");s.classList.remove("hide");setTimeout((()=>{s.classList.add("fade")}),this.ADD_CLASS_DELAY);this.removeVisuallyHiddenClass(s)}));this.expandedBreadcrumbs=true};this.removeVisuallyHiddenClass=s=>{s.addEventListener("transitionend",(i=>{if(i.propertyName==="opacity"){s.classList.remove("visuallyhidden")}}))};this.setLastParentCollapsedBackBreadcrumb=()=>{const s=this.getLastParentBreadcrumb();this.setBackBreadcrumbAttr();s.classList.remove("hide")};this.revertLastParentCollapsedBreadcrumb=()=>{const s=this.getLastParentBreadcrumb();s.setAttribute("show-back-icon","false")};this.resizeObserver=null;this.resizeObserverCallback=s=>{if(s!==this.deviceSize){this.deviceSize=s;if(this.deviceSize<=l.S){this.el.setAttribute("back-breadcrumb-only","true");if(this.collapsed){this.setLastParentCollapsedBackBreadcrumb()}else{this.setBackBreadcrumb()}}else{this.el.setAttribute("back-breadcrumb-only","false");if(this.collapsed&&this.breadcrumbs&&this.breadcrumbs.length>2){this.revertLastParentCollapsedBreadcrumb();if(this.expandedBreadcrumbs){this.setDefaultBreadcrumbs()}else{this.setCollapsed()}}else{this.setDefaultBreadcrumbs()}}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const s=a();this.resizeObserverCallback(s)}));this.resizeObserver.observe(this.el)};this.backBreadcrumbOnly=false;this.collapsed=false;this.deviceSize=l.XL;this.expandedBreadcrumbs=false}componentWillLoad(){const s=Array.from(this.el.querySelectorAll("ic-breadcrumb"));if(this.backBreadcrumbOnly){this.setBackBreadcrumb()}else{h(this.runResizeObserver)}if(this.collapsed){this.collapsedBreadcrumbWrapper=this.renderCollapsedBreadcrumb();if(s.length>2){if(a()===l.S){this.setLastParentCollapsedBackBreadcrumb()}else{this.setCollapsed()}}}}render(){return i(t,{class:{back:this.backBreadcrumbOnly,collapsed:this.collapsed}},i("nav",{"aria-label":"breadcrumbs"},i("ol",null,i("slot",null))))}get el(){return e(this)}};o.style=c;export{o as ic_breadcrumb_group};
|
2
|
+
//# sourceMappingURL=p-dd71a986.entry.js.map
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as i,c as e,h as t,H as c,g as s}from"./p-5450cebf.js";import{d as a,a as o,r,e as n,h as l}from"./p-3dea2867.js";import"./p-6f57b13c.js";const h='/*! 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:inline-block}input{overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.ic-switch-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ic-space-xxs);cursor:pointer}.ic-switch-label{margin-left:var(--ic-space-xxs);margin-bottom:var(--ic-space-sm)}.ic-switch-label-small{margin-bottom:0.625rem}.ic-switch-toggle{display:flex;align-items:center;justify-content:space-around;width:4rem;height:var(--ic-space-xl);position:relative;border-radius:100vw;background-color:var(--ic-architectural-200);border:var(--ic-space-1px) solid var(--ic-architectural-700);box-sizing:border-box;transition:var(--ic-transition-duration-fast)}.ic-switch-line-break{flex:1 0 100%}.ic-switch-checked-status{padding-left:var(--ic-space-xxs)}.ic-switch-toggle::before{content:"";width:1.333rem;height:1.333rem;border-radius:50%;position:absolute;z-index:2;top:50%;left:0.333rem;transform:translate(0, -50%);background-color:var(--ic-architectural-700);transition:var(--ic-transition-duration-slow)}.ic-switch-icon{display:inline-block;vertical-align:middle;width:0.625rem;height:0.625rem}.ic-switch-icon-circle,.ic-switch-icon-line{stroke-width:1}.ic-switch-icon-circle{stroke:var(--ic-architectural-700)}.ic-switch-icon-line{stroke:var(--ic-architectural-white)}@media (prefers-reduced-motion: reduce){.ic-switch-toggle::before{transition-duration:0ms}}.ic-switch-input:checked+.ic-switch-toggle{background-color:var(--ic-action-default);border:none}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-xl), -50%);background-color:var(--ic-architectural-white)}.ic-switch-input:not([disabled])+.ic-switch-toggle:hover::before{box-shadow:0 0 0 0.75rem var(--ic-action-dark-bg-hover)}.ic-switch-input:not([disabled])+.ic-switch-toggle:active::before{box-shadow:0 0 0 0.75rem var(--ic-action-dark-bg-active)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:hover::before{box-shadow:0 0 0 0.75rem var(--ic-action-default-bg-hover)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:active::before{box-shadow:0 0 0 0.75rem var(--ic-action-default-bg-active)}.ic-switch-input:focus:not([disabled])+.ic-switch-toggle,.ic-switch-input:focus-visible:not([disabled])+.ic-switch-toggle{box-shadow:0 0 0 var(--ic-space-1px) var(--ic-architectural-white),\n 0 0 0 0.188rem var(--ic-action-default),\n 0 0 0 0.5rem var(--ic-action-default-active-alpha)}.ic-switch-disabled{cursor:default}.ic-switch-disabled .ic-switch-icon-circle{stroke:var(--ic-architectural-300)}.ic-switch-disabled .ic-switch-icon-line{stroke:var(--ic-action-default-bg-active)}.ic-switch-input:disabled+.ic-switch-toggle{background-color:var(--ic-architectural-80);border:var(--ic-space-1px) dashed var(--ic-architectural-300)}.ic-switch-input:disabled~.ic-switch-checked-status{color:var(--ic-architectural-300)}.ic-switch-input:disabled+.ic-switch-toggle::before{background-color:var(--ic-architectural-300)}.ic-switch-input:disabled:checked+.ic-switch-toggle{background-color:var(--ic-status-info-background);border:var(--ic-space-1px) dashed #98c9f5}.ic-switch-input:disabled:checked+.ic-switch-toggle::before{background-color:var(--ic-architectural-white)}.ic-switch-small{gap:var(--ic-space-xxxs)}.ic-switch-small .ic-switch-checked-status{padding-left:0.375rem}.ic-switch-small .ic-switch-toggle{width:var(--ic-space-xxl);height:var(--ic-space-lg)}.ic-switch-small .ic-switch-toggle::before{width:var(--ic-space-md);height:var(--ic-space-md);left:var(--ic-space-xxs)}.ic-switch-small .ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-lg), -50%)}::slotted(*){margin-left:var(--ic-space-sm)}::slotted(svg){fill:currentcolor}@media (forced-colors: active){.ic-switch-toggle::before,.ic-switch-input:checked+.ic-switch-toggle{border:var(--ic-hc-border)}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(calc(var(--ic-space-xl) - 0.125rem), -50%)}.ic-switch-input:disabled+.ic-switch-toggle,.ic-switch-input:disabled:checked+.ic-switch-toggle,.ic-switch-input:disabled+.ic-switch-toggle::before{border-color:GrayText}.ic-switch-input:disabled~.ic-switch-checked-status{color:GrayText}.ic-switch-disabled .ic-switch-icon-circle,.ic-switch-disabled .ic-switch-icon-line{stroke:GrayText}}';let d=0;const b=class{constructor(t){i(this,t);this.icChange=e(this,"icChange",7);this.icFocus=e(this,"icFocus",7);this.icBlur=e(this,"icBlur",7);this.inputId=`ic-switch-input-${d++}`;this.handleChange=()=>{this.checkedState=!this.checkedState;this.icChange.emit({checked:this.checkedState,value:this.value})};this.onFocus=()=>{this.icFocus.emit()};this.onBlur=()=>{this.icBlur.emit()};this.handleFormReset=()=>{this.checkedState=this.initiallyChecked};this.label=undefined;this.hideLabel=false;this.helperText="";this.checked=false;this.small=false;this.disabled=false;this.name=this.inputId;this.showState=false;this.value="on";this.checkedState=false;this.initiallyChecked=this.checked}async setFocus(){if(this.el.shadowRoot.querySelector("input")){this.el.shadowRoot.querySelector("input").focus()}}componentWillLoad(){this.checkedState=this.checked;a(this.el,this.handleFormReset)}componentDidLoad(){o([{prop:this.label,propName:"label"}],"Switch")}disconnectedCallback(){r(this.el,this.handleFormReset)}render(){const{label:i,checkedState:e,small:s,disabled:a,name:o,showState:r,value:h,hideLabel:d,helperText:b,inputId:p}=this;n(true,this.el,o,e?h:"",a);const u=l(p,b!=="",false);return t(c,null,t("label",{class:{["ic-switch-container"]:true,["ic-switch-disabled"]:a,["ic-switch-small"]:s},htmlFor:p},!d&&t("ic-input-label",{for:p,label:i,helperText:b,readonly:true,disabled:a,class:{["ic-switch-label"]:true,["ic-switch-label-small"]:s}}),!d&&t("span",{class:"ic-switch-line-break"}),t("input",{checked:e,disabled:a,"aria-label":i,"aria-checked":e?"true":"false","aria-describedby":u,role:"switch",class:"ic-switch-input",type:"checkbox",name:"toggle",id:p,onFocus:this.onFocus,onBlur:this.onBlur,onChange:this.handleChange}),t("span",{class:"ic-switch-toggle"},t("svg",{class:"ic-switch-icon","aria-hidden":"true",focusable:"false",viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},t("line",{class:"ic-switch-icon-line",x1:"9",y1:s?"2":"1",x2:"9",y2:s?"8":"9"})),t("svg",{class:"ic-switch-icon","aria-hidden":"true",focusable:"false",viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},t("circle",{class:"ic-switch-icon-circle",fill:"none",cx:"5",cy:"5",r:s?"3.335":"4.445"}))),t("slot",{name:"right-adornment"}),r&&t("ic-typography",{"aria-hidden":"true",variant:"label",class:"ic-switch-checked-status"},e?"On":"Off")))}static get delegatesFocus(){return true}get el(){return s(this)}};b.style=h;export{b as ic_switch};
|
2
|
+
//# sourceMappingURL=p-deada16f.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["src/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","src/components/ic-switch/ic-switch.tsx"],"names":["icSwitchCss","inputIds","Switch","this","inputId","handleChange","checkedState","icChange","emit","checked","value","onFocus","icFocus","onBlur","icBlur","handleFormReset","initiallyChecked","[object Object]","el","shadowRoot","querySelector","focus","addFormResetListener","onComponentRequiredPropUndefined","prop","label","propName","removeFormResetListener","small","disabled","name","showState","hideLabel","helperText","renderHiddenInput","describedBy","getInputDescribedByText","h","Host","class","htmlFor","for","readonly","aria-label","aria-checked","aria-describedby","role","type","id","onChange","aria-hidden","focusable","viewBox","xmlns","x1","y1","x2","y2","fill","cx","cy","r","variant"],"mappings":"mJAAA,MAAMA,EAAc,kiNCoBpB,IAAIC,EAAW,QAYFC,EAAM,kIACTC,KAAAC,QAAU,mBAAmBH,MAiE7BE,KAAAE,aAAe,KACrBF,KAAKG,cAAgBH,KAAKG,aAC1BH,KAAKI,SAASC,KAAK,CACjBC,QAASN,KAAKG,aACdI,MAAOP,KAAKO,SAIRP,KAAAQ,QAAU,KAChBR,KAAKS,QAAQJ,QAGPL,KAAAU,OAAS,KACfV,KAAKW,OAAON,QAGNL,KAAAY,gBAAkB,KACxBZ,KAAKG,aAAeH,KAAKa,sDAtEG,sBAIA,gBAIF,iBAIF,oBAIG,gBAILb,KAAKC,uBAIC,iBASE,uBAiBC,4BACLD,KAAKM,QA0BjCQ,iBACE,GAAId,KAAKe,GAAGC,WAAWC,cAAc,SAAU,CAC7CjB,KAAKe,GAAGC,WAAWC,cAAc,SAASC,SAI9CJ,oBACEd,KAAKG,aAAeH,KAAKM,QACzBa,EAAqBnB,KAAKe,GAAIf,KAAKY,iBAGrCE,mBACEM,EACE,CAAC,CAAEC,KAAMrB,KAAKsB,MAAOC,SAAU,UAC/B,UAIJT,uBACEU,EAAwBxB,KAAKe,GAAIf,KAAKY,iBAGxCE,SACE,MAAMQ,MACJA,EAAKnB,aACLA,EAAYsB,MACZA,EAAKC,SACLA,EAAQC,KACRA,EAAIC,UACJA,EAASrB,MACTA,EAAKsB,UACLA,EAASC,WACTA,EAAU7B,QACVA,GACED,KAEJ+B,EAAkB,KAAM/B,KAAKe,GAAIY,EAAMxB,EAAeI,EAAQ,GAAImB,GAElE,MAAMM,EAAcC,EAClBhC,EACA6B,IAAe,GACf,OAGF,OACEI,EAACC,EAAI,KACHD,EAAA,QAAA,CACEE,MAAO,CACLtB,CAAC,uBAAwB,KACzBA,CAAC,sBAAuBY,EACxBZ,CAAC,mBAAoBW,GAEvBY,QAASpC,IAEP4B,GACAK,EAAA,iBAAA,CACEI,IAAKrC,EACLqB,MAAOA,EACPQ,WAAYA,EACZS,SAAU,KACVb,SAAUA,EACVU,MAAO,CACLtB,CAAC,mBAAoB,KACrBA,CAAC,yBAA0BW,MAI/BI,GAAaK,EAAA,OAAA,CAAME,MAAM,yBAC3BF,EAAA,QAAA,CACE5B,QAASH,EACTuB,SAAUA,EAAQc,aACNlB,EAAKmB,eACHtC,EAAe,OAAS,QAAOuC,mBAC3BV,EAClBW,KAAK,SACLP,MAAM,kBACNQ,KAAK,WACLjB,KAAK,SACLkB,GAAI5C,EACJO,QAASR,KAAKQ,QACdE,OAAQV,KAAKU,OACboC,SAAU9C,KAAKE,eAEjBgC,EAAA,OAAA,CAAME,MAAM,oBACVF,EAAA,MAAA,CACEE,MAAM,iBAAgBW,cACV,OACZC,UAAU,QACVC,QAAQ,YACRC,MAAM,8BAENhB,EAAA,OAAA,CACEE,MAAM,sBACNe,GAAG,IACHC,GAAI3B,EAAQ,IAAM,IAClB4B,GAAG,IACHC,GAAI7B,EAAQ,IAAM,OAGtBS,EAAA,MAAA,CACEE,MAAM,iBAAgBW,cACV,OACZC,UAAU,QACVC,QAAQ,YACRC,MAAM,8BAENhB,EAAA,SAAA,CACEE,MAAM,wBACNmB,KAAK,OACLC,GAAG,IACHC,GAAG,IACHC,EAAGjC,EAAQ,QAAU,YAI3BS,EAAA,OAAA,CAAMP,KAAK,oBACVC,GACCM,EAAA,gBAAA,CAAAa,cACc,OACZY,QAAQ,QACRvB,MAAM,4BAELjC,EAAe,KAAO","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n}\n\ninput {\n overflow: hidden;\n appearance: none;\n}\n\n.ic-switch-container {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--ic-space-xxs);\n cursor: pointer;\n}\n\n.ic-switch-label {\n margin-left: var(--ic-space-xxs);\n margin-bottom: var(--ic-space-sm);\n}\n\n.ic-switch-label-small {\n margin-bottom: 0.625rem;\n}\n\n.ic-switch-toggle {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: 4rem;\n height: var(--ic-space-xl);\n position: relative;\n border-radius: 100vw;\n background-color: var(--ic-architectural-200);\n border: var(--ic-space-1px) solid var(--ic-architectural-700);\n box-sizing: border-box;\n transition: var(--ic-transition-duration-fast);\n}\n\n.ic-switch-line-break {\n flex: 1 0 100%;\n}\n\n.ic-switch-checked-status {\n padding-left: var(--ic-space-xxs);\n}\n\n.ic-switch-toggle::before {\n content: \"\";\n width: 1.333rem;\n height: 1.333rem;\n border-radius: 50%;\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 0.333rem;\n transform: translate(0, -50%);\n background-color: var(--ic-architectural-700);\n transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-icon {\n display: inline-block;\n vertical-align: middle;\n width: 0.625rem;\n height: 0.625rem;\n}\n\n.ic-switch-icon-circle,\n.ic-switch-icon-line {\n stroke-width: 1;\n}\n\n.ic-switch-icon-circle {\n stroke: var(--ic-architectural-700);\n}\n\n.ic-switch-icon-line {\n stroke: var(--ic-architectural-white);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ic-switch-toggle::before {\n transition-duration: 0ms;\n }\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n background-color: var(--ic-action-default);\n border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(var(--ic-space-xl), -50%);\n background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-active);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n box-shadow: 0 0 0 var(--ic-space-1px) var(--ic-architectural-white),\n 0 0 0 0.188rem var(--ic-action-default),\n 0 0 0 0.5rem var(--ic-action-default-active-alpha);\n}\n\n.ic-switch-disabled {\n cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n stroke: var(--ic-architectural-300);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n stroke: var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n background-color: var(--ic-architectural-80);\n border: var(--ic-space-1px) dashed var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled ~ .ic-switch-checked-status {\n color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n background-color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n background-color: var(--ic-status-info-background);\n border: var(--ic-space-1px) dashed #98c9f5;\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-small {\n gap: var(--ic-space-xxxs);\n}\n\n.ic-switch-small .ic-switch-checked-status {\n padding-left: 0.375rem;\n}\n\n.ic-switch-small .ic-switch-toggle {\n width: var(--ic-space-xxl);\n height: var(--ic-space-lg);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n left: var(--ic-space-xxs);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(var(--ic-space-lg), -50%);\n}\n\n::slotted(*) {\n margin-left: var(--ic-space-sm);\n}\n\n::slotted(svg) {\n fill: currentcolor;\n}\n\n@media (forced-colors: active) {\n .ic-switch-toggle::before,\n .ic-switch-input:checked + .ic-switch-toggle {\n border: var(--ic-hc-border);\n }\n\n .ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);\n }\n\n .ic-switch-input:disabled + .ic-switch-toggle,\n .ic-switch-input:disabled:checked + .ic-switch-toggle,\n .ic-switch-input:disabled + .ic-switch-toggle::before {\n border-color: GrayText;\n }\n\n .ic-switch-input:disabled ~ .ic-switch-checked-status {\n color: GrayText;\n }\n\n .ic-switch-disabled .ic-switch-icon-circle,\n .ic-switch-disabled .ic-switch-icon-line {\n stroke: GrayText;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n Method,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot right-adornment - Content is placed to the right of switch before state label.\n */\n@Component({\n tag: \"ic-switch\",\n styleUrl: \"ic-switch.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Switch {\n private inputId = `ic-switch-input-${inputIds++}`;\n\n @Element() el: HTMLIcSwitchElement;\n\n /**\n * The aria-label applied to the switch when no visual 'name' is provided.\n */\n @Prop() label!: 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 * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText?: string = \"\";\n /**\n * If `true`, the switch will display as checked.\n */\n @Prop() checked?: boolean = false;\n /**\n * If `true`, the small styling will be applied to the switch.\n */\n @Prop() small?: boolean = false;\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name?: string = this.inputId;\n /**\n * If `true`, the switch will render the On/Off state text.\n */\n @Prop() showState?: boolean = false;\n\n /**\n * The value of the toggle does not mean if it's checked or not, use the `checked`\n * property for that.\n *\n * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n * it's only used when the toggle participates in a native `<form>`.\n */\n @Prop() value?: string | null = \"on\";\n\n /**\n * Emitted when the value property has changed.\n */\n @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n /**\n * Emitted when the toggle has focus.\n */\n @Event() icFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the toggle loses focus.\n */\n @Event() icBlur!: EventEmitter<void>;\n\n @State() checkedState: boolean = false;\n @State() initiallyChecked = this.checked;\n\n private handleChange = () => {\n this.checkedState = !this.checkedState;\n this.icChange.emit({\n checked: this.checkedState,\n value: this.value,\n });\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private handleFormReset = (): void => {\n this.checkedState = this.initiallyChecked;\n };\n\n /**\n * Sets focus on the switch.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"input\")) {\n this.el.shadowRoot.querySelector(\"input\").focus();\n }\n }\n\n componentWillLoad(): void {\n this.checkedState = this.checked;\n addFormResetListener(this.el, this.handleFormReset);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Switch\"\n );\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n render() {\n const {\n label,\n checkedState,\n small,\n disabled,\n name,\n showState,\n value,\n hideLabel,\n helperText,\n inputId,\n } = this;\n\n renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n );\n\n return (\n <Host>\n <label\n class={{\n [\"ic-switch-container\"]: true,\n [\"ic-switch-disabled\"]: disabled,\n [\"ic-switch-small\"]: small,\n }}\n htmlFor={inputId}\n >\n {!hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n readonly={true}\n disabled={disabled}\n class={{\n [\"ic-switch-label\"]: true,\n [\"ic-switch-label-small\"]: small,\n }}\n ></ic-input-label>\n )}\n {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n <input\n checked={checkedState}\n disabled={disabled}\n aria-label={label}\n aria-checked={checkedState ? \"true\" : \"false\"}\n aria-describedby={describedBy}\n role=\"switch\"\n class=\"ic-switch-input\"\n type=\"checkbox\"\n name=\"toggle\"\n id={inputId}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onChange={this.handleChange}\n />\n <span class=\"ic-switch-toggle\">\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n class=\"ic-switch-icon-line\"\n x1=\"9\"\n y1={small ? \"2\" : \"1\"}\n x2=\"9\"\n y2={small ? \"8\" : \"9\"}\n />\n </svg>\n <svg\n class=\"ic-switch-icon\"\n aria-hidden=\"true\"\n focusable=\"false\"\n viewBox=\"0 0 10 10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n class=\"ic-switch-icon-circle\"\n fill=\"none\"\n cx=\"5\"\n cy=\"5\"\n r={small ? \"3.335\" : \"4.445\"}\n />\n </svg>\n </span>\n <slot name=\"right-adornment\"></slot>\n {showState && (\n <ic-typography\n aria-hidden=\"true\"\n variant=\"label\"\n class=\"ic-switch-checked-status\"\n >\n {checkedState ? \"On\" : \"Off\"}\n </ic-typography>\n )}\n </label>\n </Host>\n );\n }\n}\n"]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as t,c as i,h as e,H as s,g as a}from"./p-5450cebf.js";import{c as o}from"./p-44512ebe.js";import{i as n,V as r,a as c,G as d}from"./p-3dea2867.js";import{I as l}from"./p-6f57b13c.js";const h='/*! 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{--bottom-position:var(--ic-space-xl);position:fixed;bottom:var(--bottom-position);left:50%;transform:translate(-50%);animation:fadein var(--ic-transition-duration-slow) ease-in-out;z-index:var(--ic-z-index-toast)}:host(.hidden){display:none;animation:fadeout var(--ic-transition-duration-slow) ease-in-out}.container{max-width:32.5rem;min-width:18rem;box-shadow:var(--ic-elevation-overlay);min-height:3.5rem;background-color:var(--ic-architectural-800);color:var(--ic-color-white-text);display:flex;align-items:center;position:relative;border-radius:var(--ic-border-radius)}.toast-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);position:absolute;border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs)}.divider-neutral{background-color:var(--ic-architectural-500)}.divider-info{background-color:var(--ic-status-info-contrast)}.divider-warning{background-color:var(--ic-status-warning-contrast)}.divider-error{background-color:var(--ic-status-error-contrast)}.divider-success{background-color:var(--ic-status-success-contrast)}.toast-icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}:host([variant="neutral"]) .toast-icon svg,::slotted(svg){fill:var(--ic-architectural-500)}:host([variant="info"]) .toast-icon svg{fill:var(--ic-status-info-contrast)}:host([variant="warning"]) .toast-icon svg{fill:var(--ic-status-warning-contrast)}:host([variant="error"]) .toast-icon svg{fill:var(--ic-status-error-contrast)}:host([variant="success"]) .toast-icon svg{fill:var(--ic-status-success-contrast)}.toast-content{margin-left:var(--ic-space-xs);width:100%}.no-icon{margin-left:var(--ic-space-md)}.toast-message{padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}.toast-action-container{padding-bottom:var(--ic-space-md)}ic-button,.toast-dismiss-timer{padding:var(--ic-space-xs)}@media (max-width: 576px){:host{--bottom-position:var(--ic-space-lg);width:calc(100% - 2 * var(--ic-space-md))}}@media (min-width: 993px){:host{--bottom-position:calc(var(--ic-space-xl) + var(--ic-space-xs))}}@media (forced-colors: active){.container{border:var(--ic-hc-border)}}@keyframes fadein{from{bottom:0;opacity:0}to{bottom:var(--bottom-position);opacity:1}}@keyframes fadeout{from{bottom:var(--bottom-position);opacity:1}to{bottom:0;opacity:0}}';const u=1e3;const m=70;const p=140;const b=class{constructor(e){t(this,e);this.icDismiss=i(this,"icDismiss",7);this.interactiveElements=[];this.dismissAction=()=>{this.icDismiss.emit()};this.handleProgressChange=()=>{this.timerProgress-=u/this.autoDismissTimeout*100};this.heading=undefined;this.variant=undefined;this.message=undefined;this.dismissMode="manual";this.autoDismissTimeout=5e3;this.neutralIconAriaLabel=undefined;this.dismissButtonAriaLabel="dismiss";this.visible=false;this.timerProgress=100}async setVisible(){if(!this.visible)this.visible=true;if(!this.isManual){this.dismissTimeout=window.setTimeout(this.dismissAction,this.autoDismissTimeout);this.timerRefreshInterval=window.setInterval(this.handleProgressChange,u);return null}else{window.setTimeout((()=>this.interactiveElements[0].setFocus()),200);return document.activeElement}}handleDismiss(){this.visible=false;clearInterval(this.timerRefreshInterval);this.timerProgress=100}handleKeyboard(t){if(this.isManual&&this.visible){switch(t.key){case"Tab":t.preventDefault();this.findNextInteractiveElement(t.shiftKey).setFocus();break;case"Escape":!t.repeat&&this.dismissAction();t.stopImmediatePropagation();break}}}handleTimer(t){if(!this.isManual){switch(t.type){case"mouseenter":window.clearTimeout(this.dismissTimeout);window.clearInterval(this.timerRefreshInterval);this.timerProgress=100;break;case"mouseleave":this.dismissTimeout=window.setTimeout(this.dismissAction,this.autoDismissTimeout);this.timerRefreshInterval=window.setInterval(this.handleProgressChange,u);break}}}handleLongText(t,i){if(i||t){console.error(`Too many characters in toast ${t?"heading":""}${t&&i?" and ":""}${i?"message":""}. Refer to character limits specified in the prop description`)}}findNextInteractiveElement(t){const i=this.interactiveElements[0];const e=this.interactiveElements[this.interactiveElements.length-1];const s=t?i:e;const a=t?e:i;if(this.isActive(s))return a;let o;const n=this.interactiveElements.some(((t,i)=>{if(!this.isActive(t))return false;o=i;return true}));if(!n)return i;return this.interactiveElements[o+(t?-1:1)]}isActive(t){if(t===this.el)return!!this.el.shadowRoot.activeElement;return document.activeElement===t}componentWillLoad(){var t,i;this.handleLongText(this.heading.length>m,((t=this.message)===null||t===void 0?void 0:t.length)>p);if(this.autoDismissTimeout<5e3)this.autoDismissTimeout=5e3;if(n(this.el,"action"))this.dismissMode="manual";this.isManual=this.dismissMode==="manual";if(n(this.el,"neutral-icon"))this.variant="neutral";if(this.variant==="neutral"){this.neutralVariantLabel=(i=this.neutralIconAriaLabel)!==null&&i!==void 0?i:r[this.variant].ariaLabel}if(this.isManual){this.el.setAttribute("aria-label",this.variant?this.neutralVariantLabel||r[this.variant].ariaLabel:this.heading);(this.variant||this.message)&&this.el.setAttribute("aria-description",this.variant?`${this.heading}${this.message!==undefined?`. ${this.message}`:""}`:this.message)}}componentDidLoad(){c([{prop:this.heading,propName:"heading"}],"Toast");const t=d(this.el,"action");const i=this.el.shadowRoot.querySelector("ic-button");if(t)this.interactiveElements.push(t);if(i)this.interactiveElements.push(i)}disconnectedCallback(){window.clearTimeout(this.dismissTimeout);window.clearInterval(this.timerRefreshInterval)}render(){const{variant:t,heading:i,message:a,visible:c,isManual:d,dismissButtonAriaLabel:h}=this;return e(s,{class:{["hidden"]:!c},role:d?"dialog":"status"},e("div",{class:"container"},t&&c&&e("div",{class:"toast-icon-container"},e("div",{class:{["divider"]:true,[`divider-${t}`]:true}}),t==="neutral"?e("slot",{name:"neutral-icon"}):e("span",{class:"toast-icon",innerHTML:r[t].icon})),e("div",{class:{["toast-content"]:true,["no-icon"]:t==="neutral"&&!n(this.el,"neutral-icon")}},e("div",{class:"toast-message"},e("ic-typography",{variant:"subtitle-large"},c&&e("h5",null,i)),a&&e("ic-typography",{variant:"body"},c&&e("p",null,a))),n(this.el,"action")&&e("div",{class:"toast-action-container"},e("slot",{name:"action"}))),!d?e("ic-loading-indicator",{class:"toast-dismiss-timer",appearance:"light",size:"icon",progress:this.timerProgress}):e("ic-button",{id:"dismiss-button",innerHTML:o,onClick:this.dismissAction,variant:"icon",appearance:l.Light,"aria-label":h})))}get el(){return a(this)}};b.style=h;export{b as ic_toast};
|
2
|
+
//# sourceMappingURL=p-e17eea34.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["src/components/ic-toast/ic-toast.css?tag=ic-toast&encapsulation=shadow","src/components/ic-toast/ic-toast.tsx"],"names":["icToastCss","AUTO_DISMISS_TIMER_REFRESH_RATE_MS","TOAST_HEADING_CHAR_LIMIT","TOAST_MESSAGE_CHAR_LIMIT","Toast","this","interactiveElements","dismissAction","icDismiss","emit","handleProgressChange","timerProgress","autoDismissTimeout","[object Object]","visible","isManual","dismissTimeout","window","setTimeout","timerRefreshInterval","setInterval","setFocus","document","activeElement","clearInterval","ev","key","preventDefault","findNextInteractiveElement","shiftKey","repeat","stopImmediatePropagation","type","clearTimeout","headingTooLong","messageTooLong","console","error","isBackwards","first","last","length","source","target","isActive","currentIndex","found","some","el","index","targetEl","shadowRoot","handleLongText","heading","_a","message","isSlotUsed","dismissMode","variant","neutralVariantLabel","_b","neutralIconAriaLabel","VARIANT_ICONS","ariaLabel","setAttribute","undefined","onComponentRequiredPropUndefined","prop","propName","actionContent","getSlot","dismissButton","querySelector","push","dismissButtonAriaLabel","h","Host","class","role","name","innerHTML","icon","appearance","size","progress","id","closeIcon","onClick","IcThemeForegroundEnum","Light","aria-label"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-toast: z-index of toast\n */\n\n:host {\n --bottom-position: var(--ic-space-xl);\n\n position: fixed;\n bottom: var(--bottom-position);\n left: 50%;\n transform: translate(-50%);\n animation: fadein var(--ic-transition-duration-slow) ease-in-out;\n z-index: var(--ic-z-index-toast);\n}\n\n:host(.hidden) {\n display: none;\n animation: fadeout var(--ic-transition-duration-slow) ease-in-out;\n}\n\n.container {\n max-width: 32.5rem;\n min-width: 18rem;\n box-shadow: var(--ic-elevation-overlay);\n min-height: 3.5rem;\n background-color: var(--ic-architectural-800);\n color: var(--ic-color-white-text);\n display: flex;\n align-items: center;\n position: relative;\n border-radius: var(--ic-border-radius);\n}\n\n.toast-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 position: absolute;\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n}\n\n.divider-neutral {\n background-color: var(--ic-architectural-500);\n}\n\n.divider-info {\n background-color: var(--ic-status-info-contrast);\n}\n\n.divider-warning {\n background-color: var(--ic-status-warning-contrast);\n}\n\n.divider-error {\n background-color: var(--ic-status-error-contrast);\n}\n\n.divider-success {\n background-color: var(--ic-status-success-contrast);\n}\n\n.toast-icon,\n::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n:host([variant=\"neutral\"]) .toast-icon svg,\n::slotted(svg) {\n fill: var(--ic-architectural-500);\n}\n\n:host([variant=\"info\"]) .toast-icon svg {\n fill: var(--ic-status-info-contrast);\n}\n\n:host([variant=\"warning\"]) .toast-icon svg {\n fill: var(--ic-status-warning-contrast);\n}\n\n:host([variant=\"error\"]) .toast-icon svg {\n fill: var(--ic-status-error-contrast);\n}\n\n:host([variant=\"success\"]) .toast-icon svg {\n fill: var(--ic-status-success-contrast);\n}\n\n.toast-content {\n margin-left: var(--ic-space-xs);\n width: 100%;\n}\n\n.no-icon {\n margin-left: var(--ic-space-md);\n}\n\n.toast-message {\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n.toast-action-container {\n padding-bottom: var(--ic-space-md);\n}\n\nic-button,\n.toast-dismiss-timer {\n padding: var(--ic-space-xs);\n}\n\n@media (max-width: 576px) {\n :host {\n --bottom-position: var(--ic-space-lg);\n\n width: calc(100% - 2 * var(--ic-space-md));\n }\n}\n\n@media (min-width: 993px) {\n :host {\n --bottom-position: calc(var(--ic-space-xl) + var(--ic-space-xs));\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-hc-border);\n }\n}\n\n@keyframes fadein {\n from {\n bottom: 0;\n opacity: 0;\n }\n\n to {\n bottom: var(--bottom-position);\n opacity: 1;\n }\n}\n\n@keyframes fadeout {\n from {\n bottom: var(--bottom-position);\n opacity: 1;\n }\n\n to {\n bottom: 0;\n opacity: 0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n getSlot,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n IcActivationTypes,\n IcStatusVariants,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/**\n * @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n */\n@Component({\n tag: \"ic-toast\",\n styleUrl: \"ic-toast.css\",\n shadow: true,\n})\nexport class Toast {\n @Element() el: HTMLIcToastElement;\n /**\n * The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n */\n @Prop() heading!: string;\n /**\n * The variant of the toast being rendered\n */\n @Prop({ mutable: true }) variant?: IcStatusVariants;\n /**\n * The main body message of the toast. (NOTE: Should be no more than `140` characters)\n */\n @Prop() message?: string;\n /**\n * How the toast will be dismissed. If manual will display a dismiss button.\n */\n @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n /**\n * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n * (NOTE: Has a minimum value of `5000ms`)\n */\n @Prop({ mutable: true }) autoDismissTimeout? = 5000;\n /**\n * Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n */\n @Prop() neutralIconAriaLabel?: string;\n /**\n * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n */\n @Prop() dismissButtonAriaLabel? = \"dismiss\";\n /**\n * Is emitted when the user dismisses the toast\n */\n @Event() icDismiss: EventEmitter<void>;\n\n @State() visible = false;\n @State() timerProgress = 100;\n\n dismissTimeout: number;\n timerRefreshInterval: number;\n isManual: boolean;\n interactiveElements: ActionAreaElementTypes[] = [];\n neutralVariantLabel: string;\n\n /**\n * Used to display the individual toast\n * @returns The element that previously had focus before the toast appeared\n */\n @Method()\n async setVisible() {\n if (!this.visible) this.visible = true;\n if (!this.isManual) {\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n return null;\n } else {\n window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n return document.activeElement as HTMLElement;\n }\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleDismiss(): void {\n this.visible = false;\n clearInterval(this.timerRefreshInterval);\n this.timerProgress = 100;\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyboard(ev: KeyboardEvent): void {\n if (this.isManual && this.visible) {\n switch (ev.key) {\n case \"Tab\":\n ev.preventDefault();\n this.findNextInteractiveElement(ev.shiftKey).setFocus();\n break;\n case \"Escape\":\n !ev.repeat && this.dismissAction();\n ev.stopImmediatePropagation();\n break;\n }\n }\n }\n\n @Listen(\"mouseenter\")\n @Listen(\"mouseleave\")\n handleTimer(ev: MouseEvent): void {\n if (!this.isManual) {\n switch (ev.type) {\n case \"mouseenter\":\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n this.timerProgress = 100;\n break;\n case \"mouseleave\":\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n break;\n }\n }\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private handleProgressChange = () => {\n this.timerProgress -=\n (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;\n };\n\n private handleLongText(\n headingTooLong: boolean,\n messageTooLong?: boolean\n ): void {\n if (messageTooLong || headingTooLong) {\n console.error(\n `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n headingTooLong && messageTooLong ? \" and \" : \"\"\n }${\n messageTooLong ? \"message\" : \"\"\n }. Refer to character limits specified in the prop description`\n );\n }\n }\n\n private findNextInteractiveElement(\n isBackwards: boolean\n ): ActionAreaElementTypes {\n const first = this.interactiveElements[0];\n const last = this.interactiveElements[this.interactiveElements.length - 1];\n\n const source = isBackwards ? first : last;\n const target = isBackwards ? last : first;\n if (this.isActive(source)) return target;\n\n let currentIndex: number;\n const found = this.interactiveElements.some((el, index) => {\n if (!this.isActive(el)) return false;\n currentIndex = index;\n return true;\n });\n\n if (!found) return first;\n return this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)];\n }\n\n private isActive(targetEl: HTMLElement): boolean {\n if (targetEl === this.el) return !!this.el.shadowRoot.activeElement;\n return document.activeElement === targetEl;\n }\n\n componentWillLoad() {\n this.handleLongText(\n this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n );\n\n if (this.autoDismissTimeout < 5000) this.autoDismissTimeout = 5000;\n\n if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n this.isManual = this.dismissMode === \"manual\";\n\n if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n if (this.variant === \"neutral\") {\n this.neutralVariantLabel =\n this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n }\n\n if (this.isManual) {\n this.el.setAttribute(\n \"aria-label\",\n this.variant\n ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel\n : this.heading\n );\n (this.variant || this.message) &&\n this.el.setAttribute(\n \"aria-description\",\n this.variant\n ? `${this.heading}${\n this.message !== undefined ? `. ${this.message}` : \"\"\n }`\n : this.message\n );\n }\n }\n\n componentDidLoad() {\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Toast\"\n );\n const actionContent = getSlot(this.el, \"action\") as ActionAreaElementTypes;\n const dismissButton = this.el.shadowRoot.querySelector(\"ic-button\");\n if (actionContent) this.interactiveElements.push(actionContent);\n if (dismissButton) this.interactiveElements.push(dismissButton);\n }\n\n disconnectedCallback() {\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n }\n\n render() {\n const {\n variant,\n heading,\n message,\n visible,\n isManual,\n dismissButtonAriaLabel,\n } = this;\n return (\n <Host\n class={{ [\"hidden\"]: !visible }}\n role={isManual ? \"dialog\" : \"status\"}\n >\n <div class=\"container\">\n {variant && visible && (\n <div class=\"toast-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n <slot name=\"neutral-icon\" />\n ) : (\n <span\n class=\"toast-icon\"\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n )}\n <div\n class={{\n [\"toast-content\"]: true,\n [\"no-icon\"]:\n variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n }}\n >\n <div class=\"toast-message\">\n <ic-typography variant=\"subtitle-large\">\n {visible && <h5>{heading}</h5>}\n </ic-typography>\n {message && (\n <ic-typography variant=\"body\">\n {visible && <p>{message}</p>}\n </ic-typography>\n )}\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"toast-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n {!isManual ? (\n <ic-loading-indicator\n class=\"toast-dismiss-timer\"\n appearance=\"light\"\n size=\"icon\"\n progress={this.timerProgress}\n ></ic-loading-indicator>\n ) : (\n <ic-button\n id=\"dismiss-button\"\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n appearance={IcThemeForegroundEnum.Light}\n aria-label={dismissButtonAriaLabel}\n ></ic-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as i,h as e,H as t,g as s,c as n}from"./p-5450cebf.js";import{a as c}from"./p-6f57b13c.js";import{i as o,L as a,a as r}from"./p-3dea2867.js";import{C as u}from"./p-8c7f4343.js";import{c as h}from"./p-ec26fc38.js";const l="ic-input-component-container{display:flex;border:var(--ic-space-1px) solid\n var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--ic-architectural-white);box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.fullwidth{width:100%}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-space-1px) dashed var(--ic-architectural-200)}ic-input-component-container.readonly,ic-input-component-container.readonly:hover{border:none;padding:0}ic-input-component-container.error{border:var(--ic-space-xxxs) solid var(--ic-status-error);padding:0}ic-input-component-container.warning{border:var(--ic-space-xxxs) solid var(--ic-status-warning-mid);padding:0}ic-input-component-container.success{border:var(--ic-space-xxxs) solid var(--ic-status-success);padding:0}ic-input-component-container.small{height:var(--ic-space-xl)}ic-input-component-container.multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:0.438rem;display:flex;align-items:center}ic-input-component-container.multiline .icon-container,ic-input-component-container.multiline.small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.readonly .icon-container{margin-left:-0.313rem}ic-input-component-container.disabled ::-moz-placeholder{display:none}ic-input-component-container.disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 0.375rem;display:flex;align-items:center}ic-input-component-container.dark:hover{--border-color:var(--ic-architectural-400)}ic-input-component-container .inline-success>svg{fill:var(--ic-status-success);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border-color:var(--ic-action-dark-hover);color:var(--ic-action-dark-hover)}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.dark:focus-within{box-shadow:var(--ic-border-focus)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:var(--ic-space-1px) solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-space-1px) dashed GrayText}}";const m=class{constructor(e){i(this,e);this.disabled=false;this.readonly=false;this.validationStatus="";this.small=false;this.multiLine=false;this.validationInline=false;this.dark=false;this.fullWidth=false}render(){const{small:i,validationStatus:s,disabled:n,readonly:r,multiLine:u,fullWidth:h,dark:l,validationInline:m}=this;const d=this.validationStatus!==""&&!this.disabled&&!this.readonly?true:false;return e(t,{class:{["small"]:i,[s]:d,["disabled"]:n,["readonly"]:r,["multiline"]:u,["fullwidth"]:h,["dark"]:l}},e("div",{class:{"focus-indicator":true,dark:l}},o(this.host,"left-icon")&&e("div",{class:{["icon-container"]:true}},e("slot",{name:"left-icon"})),e("slot",null),m&&s===c.Success&&e("span",{class:{["inline-success"]:true},innerHTML:a})))}get host(){return s(this)}};m.style=l;const d="ic-input-container .component-container{display:flex;flex-direction:column}";const p=class{constructor(e){i(this,e);this.disabled=false;this.readonly=false}render(){return e(t,null,e("div",{class:{["component-container"]:true,["disabled"]:this.disabled,["readonly"]:this.readonly}},e("slot",null)))}};p.style=d;const f='html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type="button"].sc-ic-menu,[type="reset"].sc-ic-menu,[type="submit"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type="button"].sc-ic-menu::-moz-focus-inner,[type="reset"].sc-ic-menu::-moz-focus-inner,[type="submit"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type="button"].sc-ic-menu:-moz-focusring,[type="reset"].sc-ic-menu:-moz-focusring,[type="submit"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type="checkbox"].sc-ic-menu,[type="radio"].sc-ic-menu{box-sizing:border-box;padding:0}[type="number"].sc-ic-menu::-webkit-inner-spin-button,[type="number"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type="search"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type="search"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.open.sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{border-radius:var(--ic-border-radius);max-height:0;width:var(--input-width, 20rem);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay)}.sc-ic-menu-h:not(.no-focus):focus-within{box-shadow:var(--ic-border-focus)}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border:var(--ic-space-1px) solid var(--ic-architectural-400);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;max-height:0;overflow-y:hidden}.menu-scroll.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}.open.sc-ic-menu-h{max-height:none;display:block}.open.sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:20.125rem}.full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:0.5rem 0.438rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.small.sc-ic-menu-h .option.sc-ic-menu{padding:0.25rem 0.438rem}.option.sc-ic-menu:last-child{border-radius:0 0 var(--ic-space-1px) var(--ic-space-1px)}.option.sc-ic-menu:first-child{border-radius:var(--ic-space-1px) var(--ic-space-1px) 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-active)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{color:var(--ic-color-secondary-text)}.option-text-container.sc-ic-menu{pointer-events:none}.check-icon.sc-ic-menu{height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:0.5rem;pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:1.5rem 0.438rem 0.5rem;color:var(--ic-color-tertiary-text)}.small.sc-ic-menu-h .option-group-title.sc-ic-menu{padding:0.75rem 0.438rem 0.25rem}.last-recommended-option.sc-ic-menu{border-bottom:var(--ic-space-1px) solid var(--ic-architectural-400)}.disabled-option.sc-ic-menu{color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-focus-blue) !important;color:var(--ic-color-white-text) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}}';const b=class{constructor(t){i(this,t);this.menuOptionSelect=n(this,"menuOptionSelect",7);this.menuStateChange=n(this,"menuStateChange",7);this.menuOptionId=n(this,"menuOptionId",7);this.menuKeyPress=n(this,"menuKeyPress",7);this.ungroupedOptionsSet=n(this,"ungroupedOptionsSet",7);this.handleClearListener=()=>{this.optionHighlighted=""};this.handleSubmitSearch=()=>{const i=this.options.findIndex((i=>i.value===this.optionHighlighted));this.setInputValue(i)};this.ungroupedOptions=[];this.preventClickOpen=false;this.isSearchBar=false;this.handleMenuChange=(i,e)=>{if(!i)this.popperInstance.destroy();this.menuStateChange.emit({open:i,focusInput:e});if(!i&&e!==false){this.inputEl.focus();this.preventClickOpen=false}};this.setNextOptionValue=i=>{if(this.ungroupedOptions[i+1]){this.menuOptionSelect.emit({value:this.ungroupedOptions[i+1].value,optionId:this.getOptionId(this.ungroupedOptions[i+1].value)})}else{this.menuOptionSelect.emit({value:this.ungroupedOptions[0].value,optionId:this.getOptionId(this.ungroupedOptions[0].value)})}};this.setPreviousOptionValue=i=>{if(this.ungroupedOptions[i-1]){this.menuOptionSelect.emit({value:this.ungroupedOptions[i-1].value,optionId:this.getOptionId(this.ungroupedOptions[i-1].value)})}else{this.menuOptionSelect.emit({value:this.ungroupedOptions[this.ungroupedOptions.length-1].value,optionId:this.getOptionId(this.ungroupedOptions[this.ungroupedOptions.length-1].value)})}};this.arrowBehaviour=i=>{i.preventDefault();this.handleMenuChange(true)};this.setHighlightedOption=i=>{this.optionHighlighted=this.options[i].value||undefined};this.autoSetInputValueKeyboardOpen=i=>{var e;const t=this.ungroupedOptions.findIndex((i=>i.value===this.value));this.keyboardNav=false;const s=((e=this.inputEl)===null||e===void 0?void 0:e.tagName)==="INPUT";switch(i.key){case"ArrowDown":this.keyboardNav=true;this.arrowBehaviour(i);this.setNextOptionValue(t);break;case"ArrowUp":this.keyboardNav=true;this.arrowBehaviour(i);this.setPreviousOptionValue(t);break;case" ":case"Enter":if(i.target.id!=="clear-button"){this.handleMenuChange(true)}break;case"Backspace":if(s){this.inputEl.focus()}break;default:if(s&&i.key!=="Tab"){this.inputEl.focus()}break}};this.manSetInputValueKeyboardOpen=i=>{const e=this.options.findIndex((i=>i.value===this.optionHighlighted));const t=i=>Array.from(this.host.querySelectorAll("li"))[i].id;switch(i.key){case"ArrowDown":this.arrowBehaviour(i);if(e<this.options.length-1){this.setHighlightedOption(e+1);this.menuOptionId.emit({optionId:t(e+1)})}else{this.setHighlightedOption(0);this.menuOptionId.emit({optionId:t(0)})}this.preventIncorrectTabOrder=false;this.focusFromSearchKeypress=false;break;case"ArrowUp":this.arrowBehaviour(i);if(e<=0||e>this.options.length+1){this.setHighlightedOption(this.options.length-1);this.menuOptionId.emit({optionId:t(this.options.length-1)})}else{this.setHighlightedOption(e-1);this.menuOptionId.emit({optionId:t(e-1)})}this.preventIncorrectTabOrder=false;this.focusFromSearchKeypress=false;break;case"Enter":i.preventDefault();this.setInputValue(e);break;case"Escape":this.handleMenuChange(false);this.menuOptionId.emit({optionId:undefined});break;case"Shift":case"Tab":this.preventIncorrectTabOrder=true;break;case"Backspace":if(this.isSearchBar){this.parentEl.setFocus();this.focusFromSearchKeypress=true;this.setHighlightedOption(0)}break;default:if(this.isSearchBar&&i.key!=="Tab"){this.parentEl.setFocus();this.focusFromSearchKeypress=true;this.setHighlightedOption(0)}break}};this.setInputValue=i=>{var e;if(this.options[i]){this.menuOptionSelect.emit({value:(e=this.options[i])===null||e===void 0?void 0:e.value});this.optionHighlighted=undefined;this.menuOptionId.emit({optionId:undefined})}this.handleMenuChange(false)};this.handleOptionClick=i=>{const{value:e,label:t}=i.target.dataset;this.menuOptionSelect.emit({value:e,label:t});this.handleMenuChange(false)};this.handleBlur=i=>{if(i.relatedTarget!==this.inputEl){if(!this.menu.contains(i.relatedTarget)){this.handleMenuChange(false,false)}}else{this.handleMenuChange(false);this.preventClickOpen=true}};this.handleMouseDown=i=>{i.preventDefault()};this.handleMenuKeyDown=i=>{if(this.activationType==="automatic"){this.autoSetValueOnMenuKeyDown(i)}};this.emitMenuKeyPress=(i,e)=>{this.menuKeyPress.emit({isNavKey:i,key:e})};this.autoSetValueOnMenuKeyDown=i=>{i.cancelBubble=true;const e=this.ungroupedOptions.findIndex((i=>i.value===this.value));const t=this.inputEl.tagName==="INPUT";this.keyboardNav=false;switch(i.key){case"ArrowUp":i.preventDefault();this.setPreviousOptionValue(e);this.keyboardNav=true;break;case"ArrowDown":i.preventDefault();this.setNextOptionValue(e);this.keyboardNav=true;break;case"Home":this.menuOptionSelect.emit({value:this.ungroupedOptions[0].value});this.keyboardNav=true;break;case"End":this.menuOptionSelect.emit({value:this.ungroupedOptions[this.ungroupedOptions.length-1].value});this.keyboardNav=true;break;case"Enter":case"Escape":this.handleMenuChange(false);break;case"Backspace":if(t){this.inputEl.focus()}break;case"Shift":break;default:if(t&&i.key!=="Tab"){this.inputEl.focus()}if(i.key.length===1){this.keyboardNav=true}break}this.emitMenuKeyPress(this.keyboardNav,i.key)};this.handleMenuKeyUp=i=>{if(i.key==="Tab"&&i.shiftKey){this.preventClickOpen=false}};this.getOptionId=i=>`${this.menuId}-${i}`;this.getOptionAriaLabel=(i,e)=>{let t=i.label;if(i.description){t=`${t}, ${i.description}`}if(e){return`${t}, ${e.label} group`}else{return t}};this.getSortedOptions=i=>{let e=[];if(i.sort){e=i.sort(((i,e)=>i.recommended&&!e.recommended?-1:0))}return e};this.isManualMode=this.activationType==="manual";this.scrollToSelected=i=>{const e=i.querySelector(".option[aria-selected]");if(e){const t=e.offsetTop+e.offsetHeight;if(t>i.scrollTop+i.offsetHeight||t<i.scrollTop+i.offsetHeight){i.scrollTop=e.offsetTop}e.focus()}};this.loadUngroupedOptions=()=>{if(this.options.length>0&&this.options.map){this.options.map((i=>{if(i.children){i.children.map((i=>!i.disabled&&this.ungroupedOptions.push(i)))}else if(!i.disabled){this.ungroupedOptions.push(i)}}))}this.ungroupedOptions=this.getSortedOptions(this.ungroupedOptions);this.ungroupedOptionsSet.emit({options:this.ungroupedOptions})};this.setMenuScrollbar=()=>{let i=0;this.host.querySelectorAll(".option").forEach((e=>i+=e.clientHeight));if(i>=320){this.menu.classList.add("menu-scroll")}};this.displayOption=(i,t,s)=>{const{open:n,value:c}=this;return e("li",{id:this.getOptionId(i.value),class:{option:true,"focused-option":this.isManualMode?(this.keyboardNav||this.initialOptionsListRender)&&i.value===this.optionHighlighted:this.keyboardNav&&i.value===c,"last-recommended-option":i.recommended&&this.options[t+1]&&!this.options[t+1].recommended,"disabled-option":i.disabled},role:"option",tabindex:n&&(i.value===c||i.value===this.optionHighlighted)&&this.keyboardNav?"0":"-1","aria-label":this.getOptionAriaLabel(i,s),"aria-selected":i.value===c,"aria-disabled":i.disabled?"true":"false",onClick:this.handleOptionClick,onBlur:this.handleBlur,onMouseDown:this.handleMouseDown,"data-value":i.value,"data-label":i.label},e("div",{class:"option-text-container"},e("ic-typography",{variant:"body","aria-hidden":"true"},e("p",null,i.label)),i.description&&e("ic-typography",{id:`${this.getOptionId(i.value)}-description`,class:"option-description",variant:"caption","aria-hidden":"true"},e("p",null,i.description))),(i===null||i===void 0?void 0:i.value.toLowerCase())===(c===null||c===void 0?void 0:c.toLowerCase())&&this.parentEl.tagName!=="IC-SEARCH-BAR"&&e("span",{class:"check-icon",innerHTML:u}))};this.open=undefined;this.options=undefined;this.small=false;this.menuId=undefined;this.value=undefined;this.activationType="automatic";this.inputEl=undefined;this.parentEl=undefined;this.inputLabel=undefined;this.anchorEl=undefined;this.fullWidth=false;this.autoFocusOnSelected=true;this.keyboardNav=false;this.optionHighlighted=undefined;this.focusFromSearchKeypress=false;this.initialOptionsListRender=false;this.preventIncorrectTabOrder=false}watchOptionsHandler(){this.ungroupedOptions=[];this.loadUngroupedOptions()}async handleClickOpen(){if(!this.preventClickOpen){this.menuStateChange.emit({open:!this.open});this.keyboardNav=false}this.preventClickOpen=false}async handleKeyboardOpen(i){this.keyboardNav=false;if(this.activationType==="automatic"){this.autoSetInputValueKeyboardOpen(i)}else{this.keyboardNav=true;this.manSetInputValueKeyboardOpen(i)}}async handleSetFirstOption(){this.setHighlightedOption(0)}connectedCallback(){var i;if(((i=this.parentEl)===null||i===void 0?void 0:i.tagName)==="IC-SEARCH-BAR"){this.setHighlightedOption(0);this.initialOptionsListRender=true}}componentWillLoad(){this.loadUngroupedOptions();this.isSearchBar=this.parentEl.tagName==="IC-SEARCH-BAR";this.parentEl.addEventListener("icClear",this.handleClearListener);this.parentEl.addEventListener("icSubmitSearch",this.handleSubmitSearch)}componentDidLoad(){if(this.isSearchBar&&this.parentEl.disableFilter){this.focusFromSearchKeypress=true}r([{prop:this.open,propName:"open"},{prop:this.options,propName:"options"},{prop:this.menuId,propName:"menu-id"},{prop:this.inputLabel,propName:"input-label"}],"Menu")}componentDidRender(){if(this.open){this.popperInstance=h(this.anchorEl,this.host,{placement:"bottom",modifiers:[{name:"offset",options:{offset:[0,7]}},{name:"flip",options:{fallbackPlacements:["top"],rootBoundary:"viewport"}}]})}if(this.open&&!!this.options.length){this.setMenuScrollbar()}}componentDidUpdate(){const i=this.options.some((i=>i.value===this.value));const e=this.optionHighlighted!==null&&this.optionHighlighted!==undefined&&this.optionHighlighted!=="";if(this.open&&this.options.length!==0){if(this.value&&this.keyboardNav&&i&&this.autoFocusOnSelected){this.scrollToSelected(this.menu)}else if(this.inputEl.tagName!=="IC-TEXT-FIELD"&&this.inputEl.tagName!=="INPUT"){this.menu.focus()}else if(e&&!this.focusFromSearchKeypress&&!this.preventIncorrectTabOrder){const i=this.host.querySelector(`li[data-value="${this.optionHighlighted}"]`);if(i){i.focus()}}}}disconnectedCallback(){this.parentEl.removeEventListener("icClear",this.handleClearListener);this.parentEl.removeEventListener("icSubmitSearch",this.handleSubmitSearch)}render(){var i,s;const{inputLabel:n,options:c,menuId:o,value:a,fullWidth:r}=this;return e(t,{class:{"full-width":r,"no-focus":((i=this.inputEl)===null||i===void 0?void 0:i.tagName)==="INPUT",small:this.small,open:this.open}},c.length!==0&&e("ul",{id:o,class:"menu",role:"listbox","aria-label":n,"aria-activedescendant":a!=null&&a!==""?this.getOptionId(a):"",tabindex:open&&!this.keyboardNav&&((s=this.inputEl)===null||s===void 0?void 0:s.tagName)!=="INPUT"?"0":"-1",ref:i=>this.menu=i,onKeyDown:this.handleMenuKeyDown,onKeyUp:this.handleMenuKeyUp,onBlur:this.handleBlur},this.getSortedOptions(c).map(((i,t)=>{if(i.children){if(i.children.length>0){return e("div",null,e("ic-typography",{class:"option-group-title",role:"presentation",variant:"subtitle-small"},e("p",null,i.label)),i.children.map((e=>this.displayOption(e,t,i))))}else{return null}}else{return this.displayOption(i,t)}}))))}get host(){return s(this)}static get watchers(){return{options:["watchOptionsHandler"]}}};b.style=f;export{m as ic_input_component_container,p as ic_input_container,b as ic_menu};
|
2
|
+
//# sourceMappingURL=p-e4390415.entry.js.map
|