@ukic/web-components 3.0.0-alpha.2 → 3.0.0-alpha.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/{helpers-f1cf5156.js → helpers-69219f14.js} +24 -1
- package/dist/cjs/helpers-69219f14.js.map +1 -0
- package/dist/cjs/ic-accordion-group.cjs.entry.js +10 -10
- package/dist/cjs/ic-accordion-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-accordion.cjs.entry.js +5 -5
- package/dist/cjs/ic-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-alert.cjs.entry.js +7 -5
- package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-back-to-top.cjs.entry.js +1 -1
- package/dist/cjs/ic-badge.cjs.entry.js +1 -1
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +2 -2
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card-vertical.cjs.entry.js +22 -24
- package/dist/cjs/ic-card-vertical.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +17 -6
- package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +6 -4
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-chip.cjs.entry.js +1 -1
- package/dist/cjs/ic-classification-banner.cjs.entry.js +1 -1
- package/dist/cjs/ic-classification-banner.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +1 -1
- package/dist/cjs/ic-dialog.cjs.entry.js +4 -2
- package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +71 -7
- package/dist/cjs/ic-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-empty-state.cjs.entry.js +1 -1
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-footer-link-group.cjs.entry.js.map +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 +2 -2
- package/dist/cjs/ic-footer.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-hero.cjs.entry.js +2 -2
- package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +4 -3
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +450 -167
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js +9 -7
- package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-link.cjs.entry.js +1 -1
- package/dist/cjs/ic-menu-group.cjs.entry.js +3 -3
- package/dist/cjs/ic-menu-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-menu-item.cjs.entry.js +11 -11
- package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-button.cjs.entry.js +1 -1
- package/dist/cjs/ic-navigation-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +5 -4
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +29 -2
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-menu.cjs.entry.js +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +5 -5
- package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-pagination-item.cjs.entry.js +8 -11
- package/dist/cjs/ic-pagination-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-pagination.cjs.entry.js +37 -15
- package/dist/cjs/ic-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +11 -11
- package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js +15 -6
- package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js +31 -22
- package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +12 -9
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-select.cjs.entry.js +147 -37
- package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +4 -3
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-status-tag.cjs.entry.js +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +7 -4
- package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-context.cjs.entry.js +2 -1
- package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/ic-tab.cjs.entry.js +1 -1
- package/dist/cjs/ic-text-field.cjs.entry.js +2 -2
- 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 +3 -3
- package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +1 -1
- 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/loader.cjs.js +1 -1
- package/dist/collection/ag-theme-icds.css +217 -0
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/ic-accordion/ic-accordion.css +21 -19
- package/dist/collection/components/ic-accordion/ic-accordion.js +27 -30
- package/dist/collection/components/ic-accordion/ic-accordion.js.map +1 -1
- package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js +3 -3
- package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js.map +1 -1
- package/dist/collection/components/ic-accordion-group/ic-accordion-group.css +2 -12
- package/dist/collection/components/ic-accordion-group/ic-accordion-group.js +18 -18
- package/dist/collection/components/ic-accordion-group/ic-accordion-group.js.map +1 -1
- package/dist/collection/components/ic-accordion-group/test/basic/ic-accordion-group.spec.js +3 -3
- package/dist/collection/components/ic-accordion-group/test/basic/ic-accordion-group.spec.js.map +1 -1
- package/dist/collection/components/ic-alert/ic-alert.css +25 -18
- package/dist/collection/components/ic-alert/ic-alert.js +48 -22
- package/dist/collection/components/ic-alert/ic-alert.js.map +1 -1
- package/dist/collection/components/ic-alert/test/basic/ic-alert.spec.js +1 -1
- package/dist/collection/components/ic-alert/test/basic/ic-alert.spec.js.map +1 -1
- package/dist/collection/components/ic-card-vertical/ic-card-vertical.css +98 -114
- package/dist/collection/components/ic-card-vertical/ic-card-vertical.js +46 -24
- package/dist/collection/components/ic-card-vertical/ic-card-vertical.js.map +1 -1
- package/dist/collection/components/ic-checkbox/ic-checkbox.css +47 -39
- package/dist/collection/components/ic-checkbox/ic-checkbox.js +29 -3
- package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.css +15 -2
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +40 -3
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
- package/dist/collection/components/ic-classification-banner/ic-classification-banner.css +13 -25
- package/dist/collection/components/ic-dialog/ic-dialog.css +16 -3
- package/dist/collection/components/ic-dialog/ic-dialog.js +26 -0
- package/dist/collection/components/ic-dialog/ic-dialog.js.map +1 -1
- package/dist/collection/components/ic-divider/ic-divider.css +341 -4
- package/dist/collection/components/ic-divider/ic-divider.js +235 -8
- package/dist/collection/components/ic-divider/ic-divider.js.map +1 -1
- package/dist/collection/components/ic-divider/ic-divider.types.js +2 -0
- package/dist/collection/components/ic-divider/ic-divider.types.js.map +1 -0
- package/dist/collection/components/ic-divider/test/basic/ic-divider.spec.js +89 -4
- package/dist/collection/components/ic-divider/test/basic/ic-divider.spec.js.map +1 -1
- package/dist/collection/components/ic-footer/ic-footer.css +20 -19
- package/dist/collection/components/ic-footer-link/ic-footer-link.css +2 -2
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.css +9 -21
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js.map +1 -1
- package/dist/collection/components/ic-hero/ic-hero.css +17 -2
- package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js +3 -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 +4 -2
- package/dist/collection/components/ic-input-label/ic-input-label.css +13 -1
- package/dist/collection/components/ic-input-label/ic-input-label.js +45 -4
- package/dist/collection/components/ic-input-label/ic-input-label.js.map +1 -1
- package/dist/collection/components/ic-input-label/test/basic/ic-input-label.spec.js +35 -49
- package/dist/collection/components/ic-input-label/test/basic/ic-input-label.spec.js.map +1 -1
- package/dist/collection/components/ic-input-validation/ic-input-validation.css +5 -1
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css +1 -0
- package/dist/collection/components/ic-menu/ic-menu.css +78 -14
- package/dist/collection/components/ic-menu/ic-menu.js +488 -194
- package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
- package/dist/collection/components/ic-menu/test/basic/ic-menu.spec.js +381 -33
- package/dist/collection/components/ic-menu/test/basic/ic-menu.spec.js.map +1 -1
- package/dist/collection/components/ic-menu-group/ic-menu-group.css +2 -2
- package/dist/collection/components/ic-menu-group/ic-menu-group.js +1 -1
- package/dist/collection/components/ic-menu-group/ic-menu-group.js.map +1 -1
- package/dist/collection/components/ic-menu-item/ic-menu-item.css +32 -28
- package/dist/collection/components/ic-menu-item/ic-menu-item.js +11 -11
- package/dist/collection/components/ic-menu-item/ic-menu-item.js.map +1 -1
- package/dist/collection/components/ic-menu-item/test/basic/ic-menu-item.spec.js +1 -1
- package/dist/collection/components/ic-menu-item/test/basic/ic-menu-item.spec.js.map +1 -1
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.js.map +1 -1
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.css +1 -1
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js +3 -2
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js.map +1 -1
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +31 -3
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
- package/dist/collection/components/ic-navigation-item/test/basic/ic-navigation-item.spec.js +12 -0
- package/dist/collection/components/ic-navigation-item/test/basic/ic-navigation-item.spec.js.map +1 -1
- package/dist/collection/components/ic-page-header/ic-page-header.css +5 -2
- package/dist/collection/components/ic-page-header/ic-page-header.js +3 -3
- package/dist/collection/components/ic-page-header/ic-page-header.js.map +1 -1
- package/dist/collection/components/ic-pagination/ic-pagination.css +15 -0
- package/dist/collection/components/ic-pagination/ic-pagination.js +77 -37
- package/dist/collection/components/ic-pagination/ic-pagination.js.map +1 -1
- package/dist/collection/components/ic-pagination/test/basic/ic-pagination.spec.js +1 -1
- package/dist/collection/components/ic-pagination/test/basic/ic-pagination.spec.js.map +1 -1
- package/dist/collection/components/ic-pagination-item/ic-pagination-item.css +26 -6
- package/dist/collection/components/ic-pagination-item/ic-pagination-item.js +48 -33
- package/dist/collection/components/ic-pagination-item/ic-pagination-item.js.map +1 -1
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.css +5 -5
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +33 -9
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map +1 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.css +17 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.js +38 -3
- package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
- package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js +2 -2
- package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js.map +1 -1
- package/dist/collection/components/ic-radio-option/ic-radio-option.css +35 -25
- package/dist/collection/components/ic-radio-option/ic-radio-option.js +54 -21
- 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 +41 -5
- package/dist/collection/components/ic-search-bar/ic-search-bar.js +34 -7
- package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select.css +37 -16
- package/dist/collection/components/ic-select/ic-select.js +191 -43
- package/dist/collection/components/ic-select/ic-select.js.map +1 -1
- package/dist/collection/components/ic-select/test/basic/ic-select.spec.js +160 -1
- package/dist/collection/components/ic-select/test/basic/ic-select.spec.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.css +0 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +2 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
- package/dist/collection/components/ic-switch/ic-switch.css +27 -30
- package/dist/collection/components/ic-switch/ic-switch.js +29 -2
- package/dist/collection/components/ic-switch/ic-switch.js.map +1 -1
- package/dist/collection/components/ic-tab-context/ic-tab-context.js +2 -1
- package/dist/collection/components/ic-tab-context/ic-tab-context.js.map +1 -1
- package/dist/collection/components/ic-text-field/ic-text-field.css +7 -4
- package/dist/collection/components/ic-toast/ic-toast.css +25 -16
- package/dist/collection/components/ic-toast/ic-toast.js +1 -2
- package/dist/collection/components/ic-toast/ic-toast.js.map +1 -1
- package/dist/collection/components/ic-toast/test/basic/ic-toast.spec.js +12 -12
- package/dist/collection/components/ic-toast/test/basic/ic-toast.spec.js.map +1 -1
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js +1 -1
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js.map +1 -1
- package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js +1 -0
- package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js.map +1 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js.map +1 -1
- package/dist/collection/utils/helpers.js +20 -0
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/components/helpers.js +22 -1
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/ic-accordion-group.js +11 -11
- package/dist/components/ic-accordion-group.js.map +1 -1
- package/dist/components/ic-accordion.js +5 -5
- package/dist/components/ic-accordion.js.map +1 -1
- package/dist/components/ic-alert.js +8 -5
- package/dist/components/ic-alert.js.map +1 -1
- package/dist/components/ic-card-vertical.js +23 -24
- package/dist/components/ic-card-vertical.js.map +1 -1
- package/dist/components/ic-checkbox-group.js +19 -6
- package/dist/components/ic-checkbox-group.js.map +1 -1
- package/dist/components/ic-checkbox.js +6 -3
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/components/ic-classification-banner.js +1 -1
- package/dist/components/ic-classification-banner.js.map +1 -1
- package/dist/components/ic-dialog.js +4 -1
- package/dist/components/ic-dialog.js.map +1 -1
- package/dist/components/ic-divider2.js +86 -9
- package/dist/components/ic-divider2.js.map +1 -1
- package/dist/components/ic-footer-link-group.js +1 -1
- package/dist/components/ic-footer-link-group.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-footer.js +1 -1
- package/dist/components/ic-footer.js.map +1 -1
- package/dist/components/ic-hero.js +1 -1
- package/dist/components/ic-hero.js.map +1 -1
- package/dist/components/ic-horizontal-scroll2.js +3 -2
- 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-input-label2.js +10 -6
- package/dist/components/ic-input-label2.js.map +1 -1
- package/dist/components/ic-input-validation2.js +1 -1
- package/dist/components/ic-input-validation2.js.map +1 -1
- package/dist/components/ic-loading-indicator2.js +1 -1
- package/dist/components/ic-loading-indicator2.js.map +1 -1
- package/dist/components/ic-menu-group.js +2 -2
- package/dist/components/ic-menu-group.js.map +1 -1
- package/dist/components/ic-menu-item2.js +11 -11
- package/dist/components/ic-menu-item2.js.map +1 -1
- package/dist/components/ic-menu2.js +453 -169
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-button.js.map +1 -1
- package/dist/components/ic-navigation-group.js +5 -4
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/components/ic-navigation-item.js +31 -3
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-navigation-menu2.js +1 -1
- package/dist/components/ic-page-header.js +4 -4
- package/dist/components/ic-page-header.js.map +1 -1
- package/dist/components/ic-pagination-item2.js +10 -12
- package/dist/components/ic-pagination-item2.js.map +1 -1
- package/dist/components/ic-pagination.js +38 -15
- package/dist/components/ic-pagination.js.map +1 -1
- package/dist/components/ic-popover-menu.js +11 -10
- package/dist/components/ic-popover-menu.js.map +1 -1
- package/dist/components/ic-radio-group.js +17 -6
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-radio-option.js +32 -22
- package/dist/components/ic-radio-option.js.map +1 -1
- package/dist/components/ic-search-bar.js +13 -9
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-select.js +148 -37
- package/dist/components/ic-select.js.map +1 -1
- package/dist/components/ic-side-navigation.js +4 -3
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-stepper.js +1 -1
- package/dist/components/ic-switch.js +7 -3
- package/dist/components/ic-switch.js.map +1 -1
- package/dist/components/ic-tab-context.js +2 -1
- package/dist/components/ic-tab-context.js.map +1 -1
- package/dist/components/ic-text-field2.js +2 -2
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-theme.js +1 -1
- package/dist/components/ic-toast.js +3 -3
- package/dist/components/ic-toast.js.map +1 -1
- package/dist/components/ic-toggle-button-group.js +1 -1
- package/dist/components/ic-toggle-button-group.js.map +1 -1
- package/dist/components/ic-top-navigation.js +1 -1
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/core/ag-theme-icds.css +217 -0
- package/dist/core/core.css +692 -10
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/{p-84526c3e.entry.js → p-13d5875c.entry.js} +2 -2
- package/dist/core/p-13d5875c.entry.js.map +1 -0
- package/dist/core/p-19872973.entry.js +2 -0
- package/dist/core/p-19872973.entry.js.map +1 -0
- package/dist/core/p-2140431c.entry.js +2 -0
- package/dist/core/p-2140431c.entry.js.map +1 -0
- package/dist/core/p-29767574.entry.js +2 -0
- package/dist/core/p-29767574.entry.js.map +1 -0
- package/dist/core/p-2e909738.entry.js +2 -0
- package/dist/core/p-2e909738.entry.js.map +1 -0
- package/dist/core/p-2eae9b27.entry.js +2 -0
- package/dist/core/p-2eae9b27.entry.js.map +1 -0
- package/dist/core/p-2ef46ead.entry.js +2 -0
- package/dist/core/p-2ef46ead.entry.js.map +1 -0
- package/dist/core/{p-355acffa.entry.js → p-37dea10d.entry.js} +2 -2
- package/dist/core/p-3d9726a3.entry.js +2 -0
- package/dist/core/{p-408344d3.entry.js.map → p-3d9726a3.entry.js.map} +1 -1
- package/dist/core/p-428f95f8.entry.js +2 -0
- package/dist/core/p-428f95f8.entry.js.map +1 -0
- package/dist/core/p-4973c563.entry.js +2 -0
- package/dist/core/p-4973c563.entry.js.map +1 -0
- package/dist/core/{p-93c23a35.entry.js → p-4a3b1f06.entry.js} +2 -2
- package/dist/core/{p-34db8aaf.entry.js → p-5cd016e1.entry.js} +2 -2
- package/dist/core/{p-d2f8e03f.entry.js → p-5ef8e106.entry.js} +2 -2
- package/dist/core/p-5f4a6555.entry.js +2 -0
- package/dist/core/p-5f4a6555.entry.js.map +1 -0
- package/dist/core/p-605c0c92.entry.js +2 -0
- package/dist/core/p-605c0c92.entry.js.map +1 -0
- package/dist/core/p-655a9e0f.entry.js +2 -0
- package/dist/core/p-655a9e0f.entry.js.map +1 -0
- package/dist/core/p-65a16de9.entry.js +2 -0
- package/dist/core/p-65a16de9.entry.js.map +1 -0
- package/dist/core/{p-0a808ec3.entry.js → p-690c5e80.entry.js} +2 -2
- package/dist/core/p-705eb610.entry.js +2 -0
- package/dist/core/p-705eb610.entry.js.map +1 -0
- package/dist/core/{p-f30f3a3e.entry.js → p-76263187.entry.js} +2 -2
- package/dist/core/p-78c1f1cc.entry.js +2 -0
- package/dist/core/p-78c1f1cc.entry.js.map +1 -0
- package/dist/core/p-79d0be03.entry.js +2 -0
- package/dist/core/p-79d0be03.entry.js.map +1 -0
- package/dist/core/{p-c06a3b97.entry.js → p-7b35de65.entry.js} +2 -2
- package/dist/core/p-7bff1e96.entry.js +2 -0
- package/dist/core/p-7bff1e96.entry.js.map +1 -0
- package/dist/core/{p-4055f22c.entry.js → p-806a0fab.entry.js} +2 -2
- package/dist/core/p-806a0fab.entry.js.map +1 -0
- package/dist/core/p-85173458.entry.js +2 -0
- package/dist/core/p-85173458.entry.js.map +1 -0
- package/dist/core/{p-1b573920.entry.js → p-922984cb.entry.js} +2 -2
- package/dist/core/{p-aab2c7aa.entry.js → p-95f603dd.entry.js} +2 -2
- package/dist/core/{p-b01ffa55.entry.js → p-96b4ca6e.entry.js} +2 -2
- package/dist/core/p-96b4ca6e.entry.js.map +1 -0
- package/dist/core/p-979c2792.entry.js +2 -0
- package/dist/core/p-979c2792.entry.js.map +1 -0
- package/dist/core/{p-e4b276b5.entry.js → p-97fb2bdf.entry.js} +2 -2
- package/dist/core/p-9ec7f96c.entry.js +2 -0
- package/dist/core/p-9ec7f96c.entry.js.map +1 -0
- package/dist/core/p-9fa93dfe.entry.js +2 -0
- package/dist/core/p-9fa93dfe.entry.js.map +1 -0
- package/dist/core/p-a9341313.entry.js +2 -0
- package/dist/core/p-a9341313.entry.js.map +1 -0
- package/dist/core/{p-e3ed9110.entry.js → p-acbd15ab.entry.js} +2 -2
- package/dist/core/{p-31fc8756.entry.js → p-ae0775aa.entry.js} +2 -2
- package/dist/core/p-ae0775aa.entry.js.map +1 -0
- package/dist/core/{p-312cacae.js → p-b7eb8ef9.js} +2 -2
- package/dist/core/p-b7eb8ef9.js.map +1 -0
- package/dist/core/{p-4ff6d16f.entry.js → p-ba6ecc15.entry.js} +2 -2
- package/dist/core/p-bbeb03ef.entry.js +2 -0
- package/dist/core/p-bbeb03ef.entry.js.map +1 -0
- package/dist/core/{p-0d30ffab.entry.js → p-c0fc3d02.entry.js} +2 -2
- package/dist/core/p-c396bd4d.entry.js +2 -0
- package/dist/core/p-c396bd4d.entry.js.map +1 -0
- package/dist/core/{p-f828a6e1.entry.js → p-c9cf932c.entry.js} +2 -2
- package/dist/core/p-cedc375e.entry.js +2 -0
- package/dist/core/p-cedc375e.entry.js.map +1 -0
- package/dist/core/{p-d58a10ec.entry.js → p-d4a83e25.entry.js} +2 -2
- package/dist/core/p-d4a83e25.entry.js.map +1 -0
- package/dist/core/p-d93bac01.entry.js +2 -0
- package/dist/core/p-d93bac01.entry.js.map +1 -0
- package/dist/core/{p-50ead56c.entry.js → p-df957570.entry.js} +2 -2
- package/dist/core/p-df957570.entry.js.map +1 -0
- package/dist/core/{p-0fb047e7.entry.js → p-eb3b4935.entry.js} +2 -2
- package/dist/core/{p-0fb047e7.entry.js.map → p-eb3b4935.entry.js.map} +1 -1
- package/dist/core/{p-60efd7fa.entry.js → p-ebafab37.entry.js} +2 -2
- package/dist/core/p-ebafab37.entry.js.map +1 -0
- package/dist/core/{p-82375dca.entry.js → p-ee6dd94c.entry.js} +2 -2
- package/dist/core/p-ef78bebc.entry.js +2 -0
- package/dist/core/p-ef78bebc.entry.js.map +1 -0
- package/dist/core/p-f0ae2b99.entry.js +2 -0
- package/dist/core/p-f0ae2b99.entry.js.map +1 -0
- package/dist/core/{p-49525194.entry.js → p-f24984c5.entry.js} +2 -2
- package/dist/core/p-f24984c5.entry.js.map +1 -0
- package/dist/core/{p-d8870804.entry.js → p-f5b2b26d.entry.js} +2 -2
- package/dist/core/{p-40e9e76a.entry.js → p-f71c00ce.entry.js} +2 -2
- package/dist/core/p-fdd0b732.entry.js +2 -0
- package/dist/core/p-fdd0b732.entry.js.map +1 -0
- package/dist/esm/core.js +1 -1
- package/dist/esm/{helpers-1c9151ef.js → helpers-e8797e8d.js} +23 -2
- package/dist/esm/helpers-e8797e8d.js.map +1 -0
- package/dist/esm/ic-accordion-group.entry.js +10 -10
- package/dist/esm/ic-accordion-group.entry.js.map +1 -1
- package/dist/esm/ic-accordion.entry.js +5 -5
- package/dist/esm/ic-accordion.entry.js.map +1 -1
- package/dist/esm/ic-alert.entry.js +7 -5
- package/dist/esm/ic-alert.entry.js.map +1 -1
- package/dist/esm/ic-back-to-top.entry.js +1 -1
- package/dist/esm/ic-badge.entry.js +1 -1
- package/dist/esm/ic-breadcrumb-group.entry.js +1 -1
- package/dist/esm/ic-breadcrumb.entry.js +1 -1
- package/dist/esm/ic-button_3.entry.js +2 -2
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card-vertical.entry.js +23 -25
- package/dist/esm/ic-card-vertical.entry.js.map +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +17 -6
- package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
- package/dist/esm/ic-checkbox.entry.js +6 -4
- package/dist/esm/ic-checkbox.entry.js.map +1 -1
- package/dist/esm/ic-chip.entry.js +1 -1
- package/dist/esm/ic-classification-banner.entry.js +1 -1
- package/dist/esm/ic-classification-banner.entry.js.map +1 -1
- package/dist/esm/ic-data-row.entry.js +1 -1
- package/dist/esm/ic-dialog.entry.js +4 -2
- package/dist/esm/ic-dialog.entry.js.map +1 -1
- package/dist/esm/ic-divider.entry.js +72 -8
- package/dist/esm/ic-divider.entry.js.map +1 -1
- package/dist/esm/ic-empty-state.entry.js +1 -1
- package/dist/esm/ic-footer-link-group.entry.js +2 -2
- package/dist/esm/ic-footer-link-group.entry.js.map +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 +2 -2
- package/dist/esm/ic-footer.entry.js.map +1 -1
- package/dist/esm/ic-hero.entry.js +2 -2
- package/dist/esm/ic-hero.entry.js.map +1 -1
- package/dist/esm/ic-horizontal-scroll.entry.js +4 -3
- package/dist/esm/ic-horizontal-scroll.entry.js.map +1 -1
- package/dist/esm/ic-input-component-container_3.entry.js +450 -167
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-input-label_2.entry.js +9 -7
- package/dist/esm/ic-input-label_2.entry.js.map +1 -1
- package/dist/esm/ic-link.entry.js +1 -1
- package/dist/esm/ic-menu-group.entry.js +3 -3
- package/dist/esm/ic-menu-group.entry.js.map +1 -1
- package/dist/esm/ic-menu-item.entry.js +11 -11
- package/dist/esm/ic-menu-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-button.entry.js +1 -1
- package/dist/esm/ic-navigation-button.entry.js.map +1 -1
- package/dist/esm/ic-navigation-group.entry.js +5 -4
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +30 -3
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-menu.entry.js +1 -1
- package/dist/esm/ic-page-header.entry.js +5 -5
- package/dist/esm/ic-page-header.entry.js.map +1 -1
- package/dist/esm/ic-pagination-item.entry.js +8 -11
- package/dist/esm/ic-pagination-item.entry.js.map +1 -1
- package/dist/esm/ic-pagination.entry.js +37 -15
- package/dist/esm/ic-pagination.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +11 -11
- package/dist/esm/ic-popover-menu.entry.js.map +1 -1
- package/dist/esm/ic-radio-group.entry.js +15 -6
- package/dist/esm/ic-radio-group.entry.js.map +1 -1
- package/dist/esm/ic-radio-option.entry.js +31 -22
- package/dist/esm/ic-radio-option.entry.js.map +1 -1
- package/dist/esm/ic-search-bar.entry.js +12 -9
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-select.entry.js +147 -37
- package/dist/esm/ic-select.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +4 -3
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-status-tag.entry.js +1 -1
- package/dist/esm/ic-step.entry.js +1 -1
- package/dist/esm/ic-stepper.entry.js +1 -1
- package/dist/esm/ic-switch.entry.js +7 -4
- package/dist/esm/ic-switch.entry.js.map +1 -1
- package/dist/esm/ic-tab-context.entry.js +2 -1
- package/dist/esm/ic-tab-context.entry.js.map +1 -1
- package/dist/esm/ic-tab-group.entry.js +1 -1
- package/dist/esm/ic-tab-panel.entry.js +1 -1
- package/dist/esm/ic-tab.entry.js +1 -1
- package/dist/esm/ic-text-field.entry.js +2 -2
- 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 +3 -3
- package/dist/esm/ic-toast.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button-group.entry.js +1 -1
- package/dist/esm/ic-toggle-button-group.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button.entry.js +1 -1
- package/dist/esm/ic-top-navigation.entry.js +1 -1
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/ic-typography.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-accordion/ic-accordion.d.ts +5 -5
- package/dist/types/components/ic-accordion-group/ic-accordion-group.d.ts +4 -4
- package/dist/types/components/ic-alert/ic-alert.d.ts +9 -5
- package/dist/types/components/ic-card-vertical/ic-card-vertical.d.ts +7 -3
- package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +6 -2
- package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts +7 -1
- package/dist/types/components/ic-dialog/ic-dialog.d.ts +5 -0
- package/dist/types/components/ic-divider/ic-divider.d.ts +31 -1
- package/dist/types/components/ic-divider/ic-divider.types.d.ts +3 -0
- package/dist/types/components/ic-footer-link-group/ic-footer-link-group.d.ts +2 -1
- package/dist/types/components/ic-input-label/ic-input-label.d.ts +8 -0
- package/dist/types/components/ic-menu/ic-menu.d.ts +43 -15
- package/dist/types/components/ic-menu-item/ic-menu-item.d.ts +1 -1
- package/dist/types/components/ic-navigation-button/ic-navigation-button.d.ts +2 -2
- package/dist/types/components/ic-navigation-group/ic-navigation-group.d.ts +2 -2
- package/dist/types/components/ic-navigation-item/ic-navigation-item.d.ts +7 -2
- package/dist/types/components/ic-pagination/ic-pagination.d.ts +13 -5
- package/dist/types/components/ic-pagination-item/ic-pagination-item.d.ts +9 -5
- package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts +5 -0
- package/dist/types/components/ic-radio-group/ic-radio-group.d.ts +6 -1
- package/dist/types/components/ic-radio-option/ic-radio-option.d.ts +8 -3
- package/dist/types/components/ic-search-bar/ic-search-bar.d.ts +5 -1
- package/dist/types/components/ic-select/ic-select.d.ts +24 -10
- package/dist/types/components/ic-switch/ic-switch.d.ts +5 -1
- package/dist/types/components.d.ts +242 -51
- package/dist/types/utils/helpers.d.ts +9 -2
- package/dist/types/utils/types.d.ts +1 -1
- package/hydrate/index.js +969 -380
- package/package.json +2 -2
- package/vscode-data.json +330 -55
- package/dist/cjs/helpers-f1cf5156.js.map +0 -1
- package/dist/core/p-0c872824.entry.js +0 -2
- package/dist/core/p-0c872824.entry.js.map +0 -1
- package/dist/core/p-1684c8d4.entry.js +0 -2
- package/dist/core/p-1684c8d4.entry.js.map +0 -1
- package/dist/core/p-1f1758a9.entry.js +0 -2
- package/dist/core/p-1f1758a9.entry.js.map +0 -1
- package/dist/core/p-21e5dd29.entry.js +0 -2
- package/dist/core/p-21e5dd29.entry.js.map +0 -1
- package/dist/core/p-244d6dba.entry.js +0 -2
- package/dist/core/p-244d6dba.entry.js.map +0 -1
- package/dist/core/p-312cacae.js.map +0 -1
- package/dist/core/p-31fc8756.entry.js.map +0 -1
- package/dist/core/p-322edabc.entry.js +0 -2
- package/dist/core/p-322edabc.entry.js.map +0 -1
- package/dist/core/p-363d6e88.entry.js +0 -2
- package/dist/core/p-363d6e88.entry.js.map +0 -1
- package/dist/core/p-4055f22c.entry.js.map +0 -1
- package/dist/core/p-408344d3.entry.js +0 -2
- package/dist/core/p-43f9a711.entry.js +0 -2
- package/dist/core/p-43f9a711.entry.js.map +0 -1
- package/dist/core/p-4502d3c1.entry.js +0 -2
- package/dist/core/p-4502d3c1.entry.js.map +0 -1
- package/dist/core/p-49525194.entry.js.map +0 -1
- package/dist/core/p-50ead56c.entry.js.map +0 -1
- package/dist/core/p-5deb9730.entry.js +0 -2
- package/dist/core/p-5deb9730.entry.js.map +0 -1
- package/dist/core/p-60efd7fa.entry.js.map +0 -1
- package/dist/core/p-6bd2e938.entry.js +0 -2
- package/dist/core/p-6bd2e938.entry.js.map +0 -1
- package/dist/core/p-6d40baa9.entry.js +0 -2
- package/dist/core/p-6d40baa9.entry.js.map +0 -1
- package/dist/core/p-7c89fc86.entry.js +0 -2
- package/dist/core/p-7c89fc86.entry.js.map +0 -1
- package/dist/core/p-84526c3e.entry.js.map +0 -1
- package/dist/core/p-9dba6823.entry.js +0 -2
- package/dist/core/p-9dba6823.entry.js.map +0 -1
- package/dist/core/p-aa0619ce.entry.js +0 -2
- package/dist/core/p-aa0619ce.entry.js.map +0 -1
- package/dist/core/p-af20322c.entry.js +0 -2
- package/dist/core/p-af20322c.entry.js.map +0 -1
- package/dist/core/p-b01ffa55.entry.js.map +0 -1
- package/dist/core/p-bf1f0ac7.entry.js +0 -2
- package/dist/core/p-bf1f0ac7.entry.js.map +0 -1
- package/dist/core/p-c86d48b6.entry.js +0 -2
- package/dist/core/p-c86d48b6.entry.js.map +0 -1
- package/dist/core/p-cbcd4427.entry.js +0 -2
- package/dist/core/p-cbcd4427.entry.js.map +0 -1
- package/dist/core/p-d1c9c32b.entry.js +0 -2
- package/dist/core/p-d1c9c32b.entry.js.map +0 -1
- package/dist/core/p-d2f89cb5.entry.js +0 -2
- package/dist/core/p-d2f89cb5.entry.js.map +0 -1
- package/dist/core/p-d58a10ec.entry.js.map +0 -1
- package/dist/core/p-da14cd3c.entry.js +0 -2
- package/dist/core/p-da14cd3c.entry.js.map +0 -1
- package/dist/core/p-dc83a0e9.entry.js +0 -2
- package/dist/core/p-dc83a0e9.entry.js.map +0 -1
- package/dist/core/p-de3a5423.entry.js +0 -2
- package/dist/core/p-de3a5423.entry.js.map +0 -1
- package/dist/core/p-e53309b0.entry.js +0 -2
- package/dist/core/p-e53309b0.entry.js.map +0 -1
- package/dist/core/p-f38bce8d.entry.js +0 -2
- package/dist/core/p-f38bce8d.entry.js.map +0 -1
- package/dist/core/p-fa1b7a80.entry.js +0 -2
- package/dist/core/p-fa1b7a80.entry.js.map +0 -1
- package/dist/core/p-fa587e6d.entry.js +0 -2
- package/dist/core/p-fa587e6d.entry.js.map +0 -1
- package/dist/esm/helpers-1c9151ef.js.map +0 -1
- /package/dist/core/{p-355acffa.entry.js.map → p-37dea10d.entry.js.map} +0 -0
- /package/dist/core/{p-93c23a35.entry.js.map → p-4a3b1f06.entry.js.map} +0 -0
- /package/dist/core/{p-34db8aaf.entry.js.map → p-5cd016e1.entry.js.map} +0 -0
- /package/dist/core/{p-d2f8e03f.entry.js.map → p-5ef8e106.entry.js.map} +0 -0
- /package/dist/core/{p-0a808ec3.entry.js.map → p-690c5e80.entry.js.map} +0 -0
- /package/dist/core/{p-f30f3a3e.entry.js.map → p-76263187.entry.js.map} +0 -0
- /package/dist/core/{p-c06a3b97.entry.js.map → p-7b35de65.entry.js.map} +0 -0
- /package/dist/core/{p-1b573920.entry.js.map → p-922984cb.entry.js.map} +0 -0
- /package/dist/core/{p-aab2c7aa.entry.js.map → p-95f603dd.entry.js.map} +0 -0
- /package/dist/core/{p-e4b276b5.entry.js.map → p-97fb2bdf.entry.js.map} +0 -0
- /package/dist/core/{p-e3ed9110.entry.js.map → p-acbd15ab.entry.js.map} +0 -0
- /package/dist/core/{p-4ff6d16f.entry.js.map → p-ba6ecc15.entry.js.map} +0 -0
- /package/dist/core/{p-0d30ffab.entry.js.map → p-c0fc3d02.entry.js.map} +0 -0
- /package/dist/core/{p-f828a6e1.entry.js.map → p-c9cf932c.entry.js.map} +0 -0
- /package/dist/core/{p-82375dca.entry.js.map → p-ee6dd94c.entry.js.map} +0 -0
- /package/dist/core/{p-d8870804.entry.js.map → p-f5b2b26d.entry.js.map} +0 -0
- /package/dist/core/{p-40e9e76a.entry.js.map → p-f71c00ce.entry.js.map} +0 -0
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icRadioGroupCss","RadioGroup","this","resizeObserver","ADDITIONAL_FIELD","RADIO_HORIZONTAL","RADIO_VERTICAL","runResizeObserver","ResizeObserver","checkOrientation","observe","el","handleKeyDown","event","key","radioOptions","getNextItemToSelect","selectedChild","click","preventDefault","currentItem","movingDown","numRadios","length","nextItem","disabled","addSlotChangeListener","radioContainer","addEventListener","setRadioOptions","setFirstRadioOptionTabIndex","value","setTabIndex","checkedValue","Array","from","querySelectorAll","forEach","radioOption","index","selected","name","groupLabel","label","initialOrientation","undefined","slotHasContent","currentOrientation","watchDisabledHandler","newValue","orientationChangeHandler","orientation","disconnectedCallback","_a","disconnect","_b","removeEventListener","componentWillLoad","removeDisabledFalse","componentDidLoad","checkResizeObserver","onComponentRequiredPropUndefined","prop","propName","selectHandler","detail","target","selectedOption","icChange","emit","radio","textFieldValue","querySelector","changeHandler","findIndex","totalWidth","isArray","clientWidth","i","arr","render","helperText","hideLabel","required","size","validationStatus","validationText","h","Host","onKeyDown","class","role","horizontal","ref","hasValidationStatus","ariaLiveMode","status","message"],"sources":["src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\nic-input-label.error {\n --ic-typography-color: var(--ic-status-error-default);\n}\n\nic-input-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small) ic-input-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-label ic-typography {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small) ic-input-label ic-typography {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host .radio-buttons-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xxs);\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container {\n gap: var(--ic-space-xxxs);\n}\n\n:host .radio-buttons-container.horizontal {\n display: flex;\n flex-direction: row;\n gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container.horizontal {\n gap: var(--ic-space-xl);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n slotHasContent,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n IcInformationStatusOrEmpty,\n IcOrientation,\n IcSizesNoLarge,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioContainer: HTMLDivElement;\n private radioOptions: HTMLIcRadioOptionElement[];\n private resizeObserver: ResizeObserver = null;\n private ADDITIONAL_FIELD = \"additional-field\";\n private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n @Element() el: HTMLIcRadioGroupElement;\n\n @State() checkedValue: string = \"\";\n @State() currentOrientation: IcOrientation;\n @State() initialOrientation: IcOrientation;\n @State() selectedChild: number = -1;\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled: boolean = false;\n\n @Watch(\"disabled\")\n watchDisabledHandler(newValue: boolean): void {\n this.radioOptions.forEach(\n (radioOption) => (radioOption.disabled = newValue)\n );\n }\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText: string;\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * The label for the radio group to be displayed.\n */\n @Prop() label!: string;\n\n /**\n * The name for the radio group to differentiate from other groups.\n */\n @Prop() name!: string;\n\n /**\n * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n */\n @Prop() orientation: IcOrientation = \"vertical\";\n\n /**\n * If `true`, the radio group will require a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * The size of the radio group component.\n */\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /**\n * The validation status - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /**\n * The validation text - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationText: string = \"\";\n\n @Watch(\"orientation\")\n orientationChangeHandler(): void {\n this.initialOrientation = this.orientation;\n this.checkOrientation();\n }\n\n /**\n * Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.radioContainer?.removeEventListener(\n \"slotchange\",\n this.setRadioOptions\n );\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.orientationChangeHandler();\n this.currentOrientation = this.initialOrientation;\n }\n\n componentDidLoad(): void {\n this.setRadioOptions();\n checkResizeObserver(this.runResizeObserver);\n this.addSlotChangeListener();\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n }\n\n @Listen(\"icCheck\")\n selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n this.checkedValue = detail.value;\n const selectedOption = target as HTMLIcRadioOptionElement;\n this.icChange.emit({\n value: this.checkedValue,\n selectedOption: {\n radio: selectedOption,\n textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n },\n });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = this.checkedValue === radioOption.value;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n }\n }\n\n @Listen(\"icSelectedChange\")\n changeHandler(): void {\n const selectedOption = this.radioOptions.findIndex(\n (radioOption) => radioOption.selected\n );\n if (selectedOption < 0) {\n this.setFirstRadioOptionTabIndex(0);\n this.selectedChild = selectedOption;\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOrientation();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkOrientation() {\n if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n let totalWidth = 0;\n if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n totalWidth += clientWidth;\n if (i < arr.length - 1) totalWidth += 40;\n });\n } else {\n totalWidth = 0;\n }\n\n if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n if (\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else {\n if (totalWidth >= this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else if (totalWidth < this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_HORIZONTAL;\n }\n }\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].click();\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].click();\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private addSlotChangeListener = () => {\n this.radioContainer.addEventListener(\"slotchange\", this.setRadioOptions);\n };\n\n private setFirstRadioOptionTabIndex = (value: number) => {\n this.radioOptions[0].setTabIndex(value);\n };\n\n private setRadioOptions = () => {\n this.selectedChild = -1;\n this.checkedValue = \"\";\n this.radioOptions = Array.from(this.el.querySelectorAll(\"ic-radio-option\"));\n if (this.radioOptions.length > 0) {\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n if (this.disabled) {\n radioOption.disabled = true;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n if (\n this.initialOrientation === this.RADIO_HORIZONTAL &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 ||\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n }\n }\n };\n\n render() {\n const {\n currentOrientation,\n disabled,\n handleKeyDown,\n helperText,\n hideLabel,\n label,\n required,\n size,\n validationStatus,\n validationText,\n } = this;\n\n return (\n <Host\n onKeyDown={handleKeyDown}\n class={{ \"ic-radio-group-small\": size === \"small\" }}\n >\n <div\n role=\"radiogroup\"\n aria-label={`${label}${required ? \", required\" : \"\"}`}\n >\n {!hideLabel && (\n <ic-input-label\n class={{ [`${validationStatus}`]: true }}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n ></ic-input-label>\n )}\n <div\n class={{\n \"radio-buttons-container\": true,\n horizontal: currentOrientation === this.RADIO_HORIZONTAL,\n }}\n ref={(el) => (this.radioContainer = el)}\n >\n <slot></slot>\n </div>\n </div>\n {hasValidationStatus(validationStatus, disabled) && (\n <ic-input-validation\n ariaLiveMode=\"polite\"\n status={validationStatus}\n message={validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,f as e,h as i,g as a}from"./p-6b5e91e2.js";import{c as o,r,i as n,a as s,h as c,I as d}from"./p-312cacae.js";import{C as l}from"./p-3b185c32.js";const b='/*! 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}a{text-decoration:none !important;color:var(--ic-architechtural-black) !important}button{border:none;background-color:transparent;outline:var(--ic-hc-focus-outline)}.card,.card.clickable{display:flex;flex-direction:column;border:var(--ic-border-default);border-radius:var(--ic-border-radius);box-sizing:border-box;padding:var(--ic-space-md);text-align:left;color:var(--ic-architechtural-black);transition:var(--ic-easing-transition-fast);position:relative;width:inherit;min-width:-moz-fit-content;min-width:fit-content;height:-moz-fit-content;height:fit-content;min-height:100%}.dark.card,.dark.card.clickable{border:var(--ic-border-width) solid var(--ic-architectural-700)}.card.clickable:hover{background-color:var(--ic-action-default-bg-hover);border:var(--ic-border-hover);cursor:pointer}.card.clickable:focus,.card.clickable.focussed{background-color:var(--ic-action-default-bg-hover);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);border:var(--ic-border-pressed-default)}.card.clickable:active{background-color:var(--ic-action-default-bg-active);box-shadow:var(--ic-border-focus)}.card.disabled{border:var(--ic-border-disabled)}.card.fullwidth{width:100%}.card-header{display:flex;align-items:center}.icon{display:flex;align-items:center;padding-right:var(--ic-space-xs)}.card.disabled ::slotted(svg){fill:var(--ic-color-text-tertiary)}.card.clickable .card-title{--ic-typography-color:var(--ic-color-hyperlink-default);color:var(--ic-color-hyperlink-default);text-decoration:underline;text-decoration-thickness:var(--ic-space-1px)}.card.clickable:hover .card-title,.card.clickable:focus .card-title,.card.clickable.focussed .card-title{display:inline-block;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}@supports (text-underline-offset: 25%){.card.clickable:hover .card-title,.card.clickable:focus .card-title,.card.clickable.focussed .card-title{text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}.card.clickable:active .card-title{text-decoration:none}.card.disabled .card-title{text-decoration:underline;text-decoration-thickness:var(--ic-space-1px);text-decoration-color:var(--ic-color-text-tertiary);color:var(--ic-color-text-tertiary);--ic-typography-color:var(--ic-color-text-tertiary)}.subheading{margin-top:var(--ic-space-xxs)}.adornment{margin-top:var(--ic-space-xxs)}.card-message{margin-top:var(--ic-space-md);align-items:left}.card.disabled .card-message,.card.disabled .subheading{--ic-typography-color:var(--ic-color-text-tertiary)}.interaction-button{margin-left:auto}.image-top{margin-bottom:var(--ic-space-md);display:flex;justify-content:center}.image-mid{margin-top:var(--ic-space-md);display:flex;justify-content:center}.interaction-area{display:flex;flex-grow:1;gap:var(--ic-space-md);margin-top:var(--ic-space-md);align-items:flex-end}.interaction-controls{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ic-space-sm)}.toggle-button{color:var(--ic-action-default);width:2.5rem;height:2.5rem;padding:var(--ic-space-xs);margin:var(--ic-space-1px) 0;min-width:0;cursor:pointer;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);display:inline-flex;flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}#ic-tooltip-expand-button{margin-left:auto;position:relative}.toggle-button:hover,.toggle-button:hover:focus{background-color:var(--ic-action-default-bg-hover);color:var(--ic-action-default-hover)}.toggle-button:focus{box-shadow:var(--ic-border-focus)}.toggle-button:active:not(:focus){background-color:var(--ic-action-default-bg-active);color:var(--ic-action-default-pressed)}.toggle-button svg{pointer-events:none;width:100% !important;height:100% !important;fill:currentcolor !important}.toggle-button-closed svg{transform:rotate(90deg)}.toggle-button-expanded svg{transform:rotate(-90deg)}.expanded-content{margin-top:var(--ic-space-md)}@media (forced-colors: active){.card ::slotted(svg){fill:currentcolor}.card.disabled ::slotted(svg){fill:GrayText !important}.card.disabled{border-color:GrayText !important}.card.disabled .card-message,.card.disabled .subheading,.card.disabled .card-title{color:GrayText;--ic-typography-color:GrayText}}';const h=class{constructor(i){t(this,i);this.hostMutationObserver=null;this.parentFocussed=()=>{this.isFocussed=true};this.parentBlurred=()=>{this.isFocussed=false};this.toggleExpanded=()=>{this.areaExpanded=!this.areaExpanded};this.hostMutationCallback=t=>{if(t.some((({type:t,addedNodes:e,removedNodes:i})=>t==="childList"?o(e,i,["message","adornment","expanded-content","image-top","image-mid","icon","interaction-button","badge","interaction-controls"]):false))){e(this)}};this.appearance="default";this.areaExpanded=false;this.isFocussed=false;this.parentEl=null;this.parentIsAnchorTag=false;this.clickable=false;this.disabled=false;this.expandable=false;this.fullWidth=false;this.heading=undefined;this.href=undefined;this.hreflang="";this.message="";this.referrerpolicy=undefined;this.rel=undefined;this.subheading=undefined;this.target=undefined}disconnectedCallback(){var t;if(this.parentIsAnchorTag){this.parentEl.removeEventListener("focus",this.parentFocussed);this.parentEl.removeEventListener("blur",this.parentBlurred)}(t=this.hostMutationObserver)===null||t===void 0?void 0:t.disconnect()}componentWillLoad(){this.parentEl=this.el.parentElement;if(this.parentEl.tagName==="A"){this.clickable=true;this.parentIsAnchorTag=true;this.parentEl.classList.add("ic-card-wrapper-link");this.parentEl.addEventListener("focus",this.parentFocussed);this.parentEl.addEventListener("blur",this.parentBlurred)}r(this.disabled,this.el)}componentDidLoad(){!n(this.el,"heading")&&s([{prop:this.heading,propName:"heading"}],"Card");this.updateTheme();this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{childList:true})}handleHostClick(t){if(this.disabled){t.stopImmediatePropagation()}}themeChangeHandler(t){const e=t.detail;this.updateTheme(e.mode)}async setFocus(){if(this.el.shadowRoot.querySelector("a")){this.el.shadowRoot.querySelector("a").focus()}else if(this.el.shadowRoot.querySelector("button")){this.el.shadowRoot.querySelector("button").focus()}}updateTheme(t=null){const e=c(this.el,t||null);if(e!==d.Default){this.appearance=e}}render(){const{clickable:t,disabled:e,expandable:a,heading:o,message:r,href:s,hreflang:c,referrerpolicy:b,rel:h,subheading:u,target:p,fullWidth:m,parentIsAnchorTag:g,isFocussed:f}=this;const v=g?"div":t?this.href===undefined?"button":"a":"div";const x=v=="a"&&{href:s,hrefLang:c,referrerPolicy:b,rel:h,target:p};return i(v,Object.assign({class:{["card"]:true,["clickable"]:t&&!e,["disabled"]:e,["fullwidth"]:m,["focussed"]:f,["dark"]:this.appearance===d.Dark},tabindex:t&&!g?0:null,"aria-disabled":e?"true":null,disabled:e?true:null},x),n(this.el,"image-top")&&i("div",{class:"image-top"},i("slot",{name:"image-top"})),i("div",{class:"card-header"},n(this.el,"icon")&&i("div",{class:"icon"},i("slot",{name:"icon"})),i("div",{class:"card-title"},i("slot",{name:"heading"},i("ic-typography",{variant:"h4"},i("p",null,o)))),n(this.el,"interaction-button")&&i("div",{class:"interaction-button"},i("slot",{name:"interaction-button"}))),(u||n(this.el,"subheading"))&&i("div",{class:"subheading"},i("slot",{name:"subheading"},i("ic-typography",{variant:"subtitle-small"},u))),n(this.el,"adornment")&&i("div",{class:"adornment"},i("slot",{name:"adornment"})),n(this.el,"image-mid")&&i("div",{class:"image-mid"},i("slot",{name:"image-mid"})),(r||n(this.el,"message"))&&i("div",{class:{["card-message"]:true}},r&&i("ic-typography",{variant:"body"},r),n(this.el,"message")&&i("slot",{name:"message"})),(n(this.el,"interaction-controls")||a)&&i("div",{class:"interaction-area"},i("div",{class:"interaction-controls"},i("slot",{name:"interaction-controls"})),a&&i("ic-tooltip",{id:"ic-tooltip-expand-button",label:"Toggle expandable area",silent:true},i("button",{class:{["toggle-button"]:true,[`toggle-button-${this.areaExpanded?"expanded":"closed"}`]:true},"aria-label":"Toggle expandable area","aria-expanded":`${this.areaExpanded}`,"aria-controls":this.areaExpanded?"expanded-content-area":null,onClick:this.toggleExpanded,innerHTML:l}))),n(this.el,"expanded-content")&&this.areaExpanded&&i("div",{class:"expanded-content",id:"expanded-content-area"},i("slot",{name:"expanded-content"})),n(this.el,"badge")&&i("slot",{name:"badge"}))}get el(){return a(this)}};h.style=b;export{h as ic_card_vertical};
|
2
|
-
//# sourceMappingURL=p-c86d48b6.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icCardVerticalCss","CardVertical","this","hostMutationObserver","parentFocussed","isFocussed","parentBlurred","toggleExpanded","areaExpanded","hostMutationCallback","mutationList","some","type","addedNodes","removedNodes","checkSlotInChildMutations","forceUpdate","disconnectedCallback","parentIsAnchorTag","parentEl","removeEventListener","_a","disconnect","componentWillLoad","el","parentElement","tagName","clickable","classList","add","addEventListener","removeDisabledFalse","disabled","componentDidLoad","isSlotUsed","onComponentRequiredPropUndefined","prop","heading","propName","updateTheme","MutationObserver","observe","childList","handleHostClick","event","stopImmediatePropagation","themeChangeHandler","ev","theme","detail","mode","setFocus","shadowRoot","querySelector","focus","newTheme","foregroundColor","getThemeFromContext","IcThemeForegroundEnum","Default","appearance","render","expandable","message","href","hreflang","referrerpolicy","rel","subheading","target","fullWidth","Component","undefined","attrs","hrefLang","referrerPolicy","h","Object","assign","class","Dark","tabindex","name","variant","id","label","silent","onClick","innerHTML","chevronIcon"],"sources":["src/components/ic-card-vertical/ic-card-vertical.css?tag=ic-card-vertical&encapsulation=shadow","src/components/ic-card-vertical/ic-card-vertical.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: flex;\n}\n\na {\n text-decoration: none !important;\n color: var(--ic-architechtural-black) !important;\n}\n\nbutton {\n border: none;\n background-color: transparent;\n outline: var(--ic-hc-focus-outline);\n}\n\n.card,\n.card.clickable {\n display: flex;\n flex-direction: column;\n border: var(--ic-border-default);\n border-radius: var(--ic-border-radius);\n box-sizing: border-box;\n padding: var(--ic-space-md);\n text-align: left;\n color: var(--ic-architechtural-black);\n transition: var(--ic-easing-transition-fast);\n position: relative;\n width: inherit;\n min-width: fit-content;\n height: fit-content;\n min-height: 100%;\n}\n\n.dark.card,\n.dark.card.clickable {\n border: var(--ic-border-width) solid var(--ic-architectural-700);\n}\n\n.card.clickable:hover {\n background-color: var(--ic-action-default-bg-hover);\n border: var(--ic-border-hover);\n cursor: pointer;\n}\n\n.card.clickable:focus,\n.card.clickable.focussed {\n background-color: var(--ic-action-default-bg-hover);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n border: var(--ic-border-pressed-default);\n}\n\n.card.clickable:active {\n background-color: var(--ic-action-default-bg-active);\n box-shadow: var(--ic-border-focus);\n}\n\n.card.disabled {\n border: var(--ic-border-disabled);\n}\n\n.card.fullwidth {\n width: 100%;\n}\n\n.card-header {\n display: flex;\n align-items: center;\n}\n\n.icon {\n display: flex;\n align-items: center;\n padding-right: var(--ic-space-xs);\n}\n\n.card.disabled ::slotted(svg) {\n fill: var(--ic-color-text-tertiary);\n}\n\n.card.clickable .card-title {\n --ic-typography-color: var(--ic-color-hyperlink-default);\n\n color: var(--ic-color-hyperlink-default);\n text-decoration: underline;\n text-decoration-thickness: var(--ic-space-1px);\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n display: inline-block;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n@supports (text-underline-offset: 25%) {\n .card.clickable:hover .card-title,\n .card.clickable:focus .card-title,\n .card.clickable.focussed .card-title {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n.card.clickable:active .card-title {\n text-decoration: none;\n}\n\n.card.disabled .card-title {\n text-decoration: underline;\n text-decoration-thickness: var(--ic-space-1px);\n text-decoration-color: var(--ic-color-text-tertiary);\n color: var(--ic-color-text-tertiary);\n\n --ic-typography-color: var(--ic-color-text-tertiary);\n}\n\n.subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n margin-top: var(--ic-space-md);\n align-items: left;\n}\n\n.card.disabled .card-message,\n.card.disabled .subheading {\n --ic-typography-color: var(--ic-color-text-tertiary);\n}\n\n.interaction-button {\n margin-left: auto;\n}\n\n.image-top {\n margin-bottom: var(--ic-space-md);\n display: flex;\n justify-content: center;\n}\n\n.image-mid {\n margin-top: var(--ic-space-md);\n display: flex;\n justify-content: center;\n}\n\n.interaction-area {\n display: flex;\n flex-grow: 1;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-md);\n align-items: flex-end;\n}\n\n.interaction-controls {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--ic-space-sm);\n}\n\n.toggle-button {\n color: var(--ic-action-default);\n width: 2.5rem;\n height: 2.5rem;\n padding: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n min-width: 0;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n border-radius: var(--ic-border-radius);\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background: none;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n vertical-align: middle;\n}\n\n#ic-tooltip-expand-button {\n margin-left: auto;\n position: relative;\n}\n\n.toggle-button:hover,\n.toggle-button:hover:focus {\n background-color: var(--ic-action-default-bg-hover);\n color: var(--ic-action-default-hover);\n}\n\n.toggle-button:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.toggle-button:active:not(:focus) {\n background-color: var(--ic-action-default-bg-active);\n color: var(--ic-action-default-pressed);\n}\n\n.toggle-button svg {\n pointer-events: none;\n width: 100% !important;\n height: 100% !important;\n fill: currentcolor !important;\n}\n\n.toggle-button-closed svg {\n transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n transform: rotate(-90deg);\n}\n\n.expanded-content {\n margin-top: var(--ic-space-md);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n .card ::slotted(svg) {\n fill: currentcolor;\n }\n\n .card.disabled ::slotted(svg) {\n fill: GrayText !important;\n }\n\n .card.disabled {\n border-color: GrayText !important;\n }\n\n .card.disabled .card-message,\n .card.disabled .subheading,\n .card.disabled .card-title {\n color: GrayText;\n\n --ic-typography-color: GrayText;\n }\n}\n\n/* Add back in after storybook has the `color-scheme: light dark` code */\n\n/* @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n ::slotted([slot=\"icon\"]) {\n fill: var(--ic-architectural-white);\n }\n} */\n","import {\n Component,\n Element,\n Listen,\n Prop,\n State,\n h,\n Method,\n forceUpdate,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n getThemeFromContext,\n removeDisabledFalse,\n checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n * @slot badge - Badge component overlaying the top right of the card.\n */\n@Component({\n tag: \"ic-card-vertical\",\n styleUrl: \"ic-card-vertical.css\",\n shadow: true,\n})\nexport class CardVertical {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcCardVerticalElement;\n\n @State() appearance?: IcThemeForeground = \"default\";\n @State() areaExpanded: boolean = false;\n @State() isFocussed: boolean = false;\n @State() parentEl: HTMLElement | null = null;\n @State() parentIsAnchorTag: boolean = false;\n\n /**\n * If `true`, the card will be a clickable variant, instead of static.\n */\n @Prop({ mutable: true }) clickable?: boolean = false;\n\n /**\n * If `true`, the card will be disabled if it is clickable.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * If `true`, the card will have an expandable area and expansion toggle button.\n */\n @Prop() expandable?: boolean = false;\n\n /**\n * If `true`, the card will fill the width of the container.\n */\n @Prop() fullWidth?: boolean = false;\n\n /**\n * The heading for the card. This is required, unless a slotted heading is used.\n */\n @Prop() heading?: string;\n\n /**\n * The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n */\n @Prop() href?: string | undefined;\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string = \"\";\n\n /**\n * The main body message of the card.\n */\n @Prop() message?: string = \"\";\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * The subheading for the card.\n */\n @Prop() subheading?: string;\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n disconnectedCallback(): void {\n if (this.parentIsAnchorTag) {\n this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n }\n\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.parentEl = this.el.parentElement;\n\n if (this.parentEl.tagName === \"A\") {\n this.clickable = true;\n this.parentIsAnchorTag = true;\n this.parentEl.classList.add(\"ic-card-wrapper-link\");\n this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n }\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Card\"\n );\n this.updateTheme();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n /**\n * Sets focus on the card.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"a\")) {\n this.el.shadowRoot.querySelector(\"a\").focus();\n } else if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n private parentFocussed = (): void => {\n this.isFocussed = true;\n };\n\n private parentBlurred = (): void => {\n this.isFocussed = false;\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n private toggleExpanded = (): void => {\n this.areaExpanded = !this.areaExpanded;\n };\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, [\n \"message\",\n \"adornment\",\n \"expanded-content\",\n \"image-top\",\n \"image-mid\",\n \"icon\",\n \"interaction-button\",\n \"badge\",\n \"interaction-controls\",\n ])\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n clickable,\n disabled,\n expandable,\n heading,\n message,\n href,\n hreflang,\n referrerpolicy,\n rel,\n subheading,\n target,\n fullWidth,\n parentIsAnchorTag,\n isFocussed,\n } = this;\n\n const Component = parentIsAnchorTag\n ? \"div\"\n : clickable\n ? this.href === undefined\n ? \"button\"\n : \"a\"\n : \"div\";\n\n const attrs = Component == \"a\" && {\n href: href,\n hrefLang: hreflang,\n referrerPolicy: referrerpolicy,\n rel: rel,\n target: target,\n };\n\n return (\n <Component\n class={{\n [\"card\"]: true,\n [\"clickable\"]: clickable && !disabled,\n [\"disabled\"]: disabled,\n [\"fullwidth\"]: fullWidth,\n [\"focussed\"]: isFocussed,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n }}\n tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n aria-disabled={disabled ? \"true\" : null}\n disabled={disabled ? true : null}\n {...attrs}\n >\n {isSlotUsed(this.el, \"image-top\") && (\n <div class=\"image-top\">\n <slot name=\"image-top\"></slot>\n </div>\n )}\n <div class=\"card-header\">\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <div class=\"card-title\">\n <slot name=\"heading\">\n <ic-typography variant=\"h4\">\n <p>{heading}</p>\n </ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"interaction-button\") && (\n <div class=\"interaction-button\">\n <slot name=\"interaction-button\"></slot>\n </div>\n )}\n </div>\n {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"subtitle-small\">\n {subheading}\n </ic-typography>\n </slot>\n </div>\n )}\n {isSlotUsed(this.el, \"adornment\") && (\n <div class=\"adornment\">\n <slot name=\"adornment\"></slot>\n </div>\n )}\n {isSlotUsed(this.el, \"image-mid\") && (\n <div class=\"image-mid\">\n <slot name=\"image-mid\"></slot>\n </div>\n )}\n {(message || isSlotUsed(this.el, \"message\")) && (\n <div\n class={{\n [\"card-message\"]: true,\n }}\n >\n {message && <ic-typography variant=\"body\">{message}</ic-typography>}\n {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n </div>\n )}\n {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n <div class=\"interaction-area\">\n <div class=\"interaction-controls\">\n <slot name=\"interaction-controls\"></slot>\n </div>\n {expandable && (\n <ic-tooltip\n id=\"ic-tooltip-expand-button\"\n label=\"Toggle expandable area\"\n silent\n >\n <button\n class={{\n [\"toggle-button\"]: true,\n [`toggle-button-${\n this.areaExpanded ? \"expanded\" : \"closed\"\n }`]: true,\n }}\n aria-label=\"Toggle expandable area\"\n aria-expanded={`${this.areaExpanded}`}\n aria-controls={\n this.areaExpanded ? \"expanded-content-area\" : null\n }\n onClick={this.toggleExpanded}\n innerHTML={chevronIcon}\n ></button>\n </ic-tooltip>\n )}\n </div>\n )}\n {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n <div class=\"expanded-content\" id=\"expanded-content-area\">\n <slot name=\"expanded-content\"></slot>\n </div>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </Component>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,c as t,h as i,g as o}from"./p-6b5e91e2.js";import{N as a,r}from"./p-312cacae.js";const n='/*! 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}a{text-align:center}.item-container{display:flex;justify-content:center;align-items:center;width:calc(var(--ic-space-xl) + var(--ic-space-sm));height:var(--ic-space-xl);margin:var(--ic-space-xxs) var(--ic-space-xxxs);cursor:pointer;text-decoration:none}button{background:none;border:none;outline:inherit;position:relative}.ellipsis{pointer-events:none;--ic-typography-color:var(--ic-color-text-secondary)}.item-container:focus{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.page{--ic-typography-color:var(--ic-action-default)}.simple-current{min-width:calc(var(--ic-space-xxl) + var(--ic-space-md));height:var(--ic-space-lg);cursor:default}.item-container.page:hover:not(.selected):not(:focus){border-radius:var(--ic-border-radius);background-color:var(--ic-action-default-bg-hover)}.item-container.page:active:not(.selected):not(:focus){background-color:var(--ic-action-default-bg-active)}.selected{pointer-events:none;outline:none}.selected::after{content:"";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-default)}.page-selected{--ic-typography-color:var(--ic-color-text-primary)}.item-container.page.light:hover:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-hover)}.item-container.page.light:active:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-pressed)}ic-typography.light,ic-typography.page-selected.light{--ic-typography-color:var(--ic-architectural-white)}.selected.light::after{content:"";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-light)}.item-container.page.dark:hover:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-hover)}.item-container.page.dark:active:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-pressed)}ic-typography.dark{--ic-typography-color:var(--ic-color-text-primary)}.selected.dark::after{content:"";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-dark)}.disabled{--ic-typography-color:var(--ic-architectural-200);pointer-events:none;cursor:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (forced-colors: active){.selected::after{background-color:Highlight}.selected.light::after{background-color:Highlight}.selected.dark::after{background-color:Highlight}.disabled{--ic-typography-color:GrayText}}';const c=class{constructor(i){e(this,i);this.paginationItemClick=t(this,"paginationItemClick",7);this.handleClick=()=>{this.paginationItemClick.emit({page:this.page})};this.capitalizedLabel=undefined;this.appearance="default";this.disabled=false;this.label="Page";this.page=undefined;this.selected=false;this.type=undefined}watchLabelHandler(){this.capitalizedLabel=a(this.label)}componentWillLoad(){this.watchLabelHandler();r(this.disabled,this.el)}render(){const{page:e,selected:t,type:o,disabled:a,appearance:r,label:n,capitalizedLabel:c}=this;return i("a",null,o==="ellipsis"?i("div",{class:{["item-container"]:true,["ellipsis"]:true,["disabled"]:a}},i("ic-typography",{class:{[`${r}`]:true},variant:"label"},"...")):o==="page"?i("button",{disabled:a,onClick:this.handleClick,tabindex:t?"-1":"0",role:"button","aria-current":t&&"page","aria-label":t?`${n}: ${e}`:`Go to ${n} ${e}`,class:{["selected"]:!a&&t,["disabled"]:a,["item-container"]:true,[`${r}`]:true,["page"]:o==="page"}},i("ic-typography",{variant:"label",class:{["page-selected"]:t,["disabled"]:a,[`${r}`]:true}},e)):i("ic-typography",{"aria-live":"polite",class:{[`simple-current ${r}`]:true,["disabled"]:a},variant:"label"},c," ",e))}get el(){return o(this)}static get watchers(){return{label:["watchLabelHandler"]}}};c.style=n;export{c as ic_pagination_item};
|
2
|
-
//# sourceMappingURL=p-cbcd4427.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icPaginationItemCss","PaginationItem","this","handleClick","paginationItemClick","emit","page","watchLabelHandler","capitalizedLabel","capitalize","label","componentWillLoad","removeDisabledFalse","disabled","el","render","selected","type","appearance","h","class","variant","onClick","tabindex","role"],"sources":["src/components/ic-pagination-item/ic-pagination-item.css?tag=ic-pagination-item&encapsulation=shadow","src/components/ic-pagination-item/ic-pagination-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\na {\n text-align: center;\n}\n\n.item-container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: calc(var(--ic-space-xl) + var(--ic-space-sm));\n height: var(--ic-space-xl);\n margin: var(--ic-space-xxs) var(--ic-space-xxxs);\n cursor: pointer;\n text-decoration: none;\n}\n\nbutton {\n background: none;\n border: none;\n outline: inherit;\n position: relative;\n}\n\n.ellipsis {\n pointer-events: none;\n\n --ic-typography-color: var(--ic-color-text-secondary);\n}\n\n.item-container:focus {\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-fast);\n}\n\n.page {\n --ic-typography-color: var(--ic-action-default);\n}\n\n.simple-current {\n min-width: calc(var(--ic-space-xxl) + var(--ic-space-md));\n height: var(--ic-space-lg);\n cursor: default;\n}\n\n/** DEFAULT STATES **/\n.item-container.page:hover:not(.selected):not(:focus) {\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-action-default-bg-hover);\n}\n\n.item-container.page:active:not(.selected):not(:focus) {\n background-color: var(--ic-action-default-bg-active);\n}\n\n.selected {\n pointer-events: none;\n outline: none;\n}\n\n.selected::after {\n content: \"\";\n height: var(--ic-space-xxs);\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-action-default);\n}\n\n.page-selected {\n --ic-typography-color: var(--ic-color-text-primary);\n}\n\n/** LIGHT STATES **/\n.item-container.page.light:hover:not(.selected):not(:focus) {\n background-color: var(--ic-action-light-bg-hover);\n}\n\n.item-container.page.light:active:not(.selected):not(:focus) {\n background-color: var(--ic-action-light-bg-pressed);\n}\n\nic-typography.light,\nic-typography.page-selected.light {\n --ic-typography-color: var(--ic-architectural-white);\n}\n\n.selected.light::after {\n content: \"\";\n height: var(--ic-space-xxs);\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-action-light);\n}\n\n/** DARK STATES **/\n.item-container.page.dark:hover:not(.selected):not(:focus) {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n.item-container.page.dark:active:not(.selected):not(:focus) {\n background-color: var(--ic-action-dark-bg-pressed);\n}\n\nic-typography.dark {\n --ic-typography-color: var(--ic-color-text-primary);\n}\n\n.selected.dark::after {\n content: \"\";\n height: var(--ic-space-xxs);\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-action-dark);\n}\n\n.disabled {\n --ic-typography-color: var(--ic-architectural-200);\n\n pointer-events: none;\n cursor: none;\n user-select: none;\n}\n\n@media (forced-colors: active) {\n .selected::after {\n background-color: Highlight;\n }\n\n .selected.light::after {\n background-color: Highlight;\n }\n\n .selected.dark::after {\n background-color: Highlight;\n }\n\n .disabled {\n --ic-typography-color: GrayText;\n }\n}\n","import {\n Component,\n Prop,\n State,\n Element,\n h,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport { IcPaginationItemType } from \"./ic-pagination-item.types\";\nimport { IcThemeForeground } from \"../../utils/types\";\nimport { removeDisabledFalse, capitalize } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-pagination-item\",\n styleUrl: \"ic-pagination-item.css\",\n shadow: true,\n})\nexport class PaginationItem {\n @Element() el: HTMLIcPaginationItemElement;\n\n @State() capitalizedLabel: string;\n\n /**\n * The appearance of the pagination, e.g. dark, light or the default.\n */\n @Prop() appearance: IcThemeForeground = \"default\";\n\n /**\n * If `true`, the pagination item will be disabled.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * The label for the pagination item (applicable when simple pagination is being used).\n */\n @Prop() label: string = \"Page\";\n\n @Watch(\"label\")\n watchLabelHandler(): void {\n this.capitalizedLabel = capitalize(this.label);\n }\n\n /**\n * The current page number.\n */\n @Prop() page: number | null;\n\n /**\n * If `true`, the pagination item will be selected.\n */\n @Prop() selected: boolean = false;\n\n /**\n * The type of pagination item - 'page' or 'ellipsis'.\n */\n @Prop() type: IcPaginationItemType;\n\n /**\n * @internal - Emitted when a pagination item is clicked.\n */\n @Event() paginationItemClick: EventEmitter<{ page: number }>;\n\n componentWillLoad(): void {\n this.watchLabelHandler();\n removeDisabledFalse(this.disabled, this.el);\n }\n\n private handleClick = () => {\n this.paginationItemClick.emit({ page: this.page });\n };\n\n render() {\n const {\n page,\n selected,\n type,\n disabled,\n appearance,\n label,\n capitalizedLabel,\n } = this;\n\n return (\n <a>\n {type === \"ellipsis\" ? (\n <div\n class={{\n [\"item-container\"]: true,\n [\"ellipsis\"]: true,\n [\"disabled\"]: disabled,\n }}\n >\n <ic-typography\n class={{\n [`${appearance}`]: true,\n }}\n variant=\"label\"\n >\n ...\n </ic-typography>\n </div>\n ) : type === \"page\" ? (\n <button\n disabled={disabled}\n onClick={this.handleClick}\n tabindex={selected ? \"-1\" : \"0\"}\n role=\"button\"\n aria-current={selected && \"page\"}\n aria-label={\n selected ? `${label}: ${page}` : `Go to ${label} ${page}`\n }\n class={{\n [\"selected\"]: !disabled && selected,\n [\"disabled\"]: disabled,\n [\"item-container\"]: true,\n [`${appearance}`]: true,\n [\"page\"]: type === \"page\",\n }}\n >\n <ic-typography\n variant=\"label\"\n class={{\n [\"page-selected\"]: selected,\n [\"disabled\"]: disabled,\n [`${appearance}`]: true,\n }}\n >\n {page}\n </ic-typography>\n </button>\n ) : (\n <ic-typography\n aria-live=\"polite\"\n class={{\n [`simple-current ${appearance}`]: true,\n [\"disabled\"]: disabled,\n }}\n variant=\"label\"\n >\n {capitalizedLabel} {page}\n </ic-typography>\n )}\n </a>\n );\n }\n}\n"],"mappings":"+FAAA,MAAMA,EAAsB,yyJ,MCmBfC,EAAc,M,kFAkDjBC,KAAAC,YAAc,KACpBD,KAAKE,oBAAoBC,KAAK,CAAEC,KAAMJ,KAAKI,MAAO,E,gDA3CZ,U,cAKZ,M,WAKJ,O,kCAeI,M,oBAZ5B,iBAAAC,GACEL,KAAKM,iBAAmBC,EAAWP,KAAKQ,M,CAuB1C,iBAAAC,GACET,KAAKK,oBACLK,EAAoBV,KAAKW,SAAUX,KAAKY,G,CAO1C,MAAAC,GACE,MAAMT,KACJA,EAAIU,SACJA,EAAQC,KACRA,EAAIJ,SACJA,EAAQK,WACRA,EAAUR,MACVA,EAAKF,iBACLA,GACEN,KAEJ,OACEiB,EAAA,SACGF,IAAS,WACRE,EAAA,OACEC,MAAO,CACL,CAAC,kBAAmB,KACpB,CAAC,YAAa,KACd,CAAC,YAAaP,IAGhBM,EAAA,iBACEC,MAAO,CACL,CAAC,GAAGF,KAAe,MAErBG,QAAQ,SAAO,QAKjBJ,IAAS,OACXE,EAAA,UACEN,SAAUA,EACVS,QAASpB,KAAKC,YACdoB,SAAUP,EAAW,KAAO,IAC5BQ,KAAK,SAAQ,eACCR,GAAY,OAAM,aAE9BA,EAAW,GAAGN,MAAUJ,IAAS,SAASI,KAASJ,IAErDc,MAAO,CACL,CAAC,aAAcP,GAAYG,EAC3B,CAAC,YAAaH,EACd,CAAC,kBAAmB,KACpB,CAAC,GAAGK,KAAe,KACnB,CAAC,QAASD,IAAS,SAGrBE,EAAA,iBACEE,QAAQ,QACRD,MAAO,CACL,CAAC,iBAAkBJ,EACnB,CAAC,YAAaH,EACd,CAAC,GAAGK,KAAe,OAGpBZ,IAILa,EAAA,6BACY,SACVC,MAAO,CACL,CAAC,kBAAkBF,KAAe,KAClC,CAAC,YAAaL,GAEhBQ,QAAQ,SAEPb,EAAgB,IAAGF,G"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,c as i,h as t,H as a,g as r}from"./p-6b5e91e2.js";import{k as o,i as c,j as n,r as s,a as d,s as l,d as h}from"./p-312cacae.js";const p='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}ic-radio-option{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}.additional-field-wrapper ic-text-field{margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}ic-radio-option.ic-radio-option-disabled{--ic-typography-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:var(--ic-architectural-white);border:var(--ic-border-default);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-no-alpha);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-border-width) solid var(--ic-action-default)}.container:active input~.checkmark{background-color:var(--ic-action-default-bg-active-no-alpha);border:var(--ic-border-width) solid var(--ic-action-default-pressed);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-pressed);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-pressed)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-action-default)}.container input:checked:disabled~.checkmark{background-color:var(--ic-architectural-white);border:0.125rem solid var(--ic-architectural-200)}.container input:disabled~.checkmark{border:var(--ic-border-width) dashed var(--ic-architectural-200)}.container input:disabled~.checkmark::after{background:var(--ic-architectural-200)}.container:hover input:disabled~.checkmark{background-color:var(--ic-architectural-white);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);--ic-typography-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){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 u="additional-field";const b="ic-text-field";const m=class{constructor(t){e(this,t);this.icCheck=i(this,"icCheck",7);this.icSelectedChange=i(this,"icSelectedChange",7);this.defaultRadioValue="";this.hasAdditionalField=false;this.skipFocus=false;this.handleClick=()=>{if(!this.disabled){if(this.skipFocus===false){this.radioElement.focus()}this.skipFocus=false;if(this.hasAdditionalField){this.value=this.el.querySelector(b).value||this.defaultRadioValue}this.icCheck.emit({value:this.value})}};this.swallowClick=e=>{e.stopPropagation()};this.handleFormReset=()=>{this.skipFocus=true;this.selected=this.initiallySelected};this.additionalFieldDisplay="static";this.disabled=false;this.dynamicText="This selection requires additional answers";this.form=undefined;this.groupLabel=undefined;this.label=undefined;this.name=undefined;this.value=undefined;this.selected=false;this.initiallySelected=this.selected}watchSelectedHandler(){this.icSelectedChange.emit()}disconnectedCallback(){o(this.el,this.handleFormReset)}componentWillLoad(){if(c(this.el,u)){this.hasAdditionalField=true;const e=this.el.querySelector(b);if(e)e.hiddenInput=false}this.defaultRadioValue=this.value;n(this.el,this.handleFormReset);s(this.disabled,this.el)}componentDidLoad(){d([{prop:this.value,propName:"value"}],"Radio Option")}componentWillRender(){const e=l(this.el,u);if(e&&!this.hasAdditionalField){this.hasAdditionalField=true;const e=this.el.querySelector(b);if(e)e.hiddenInput=false}else if(!e&&this.hasAdditionalField){this.hasAdditionalField=false}}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.el.querySelector(b);if(!this.selected||this.disabled){e===null||e===void 0?void 0:e.setAttribute("disabled","")}else{e===null||e===void 0?void 0:e.removeAttribute("disabled")}}}textfieldValueHandler(e){if(this.selected){this.value=e.detail.value||this.defaultRadioValue;this.icCheck.emit({value:this.value})}e.stopImmediatePropagation()}async setFocus(){var e;(e=this.radioElement)===null||e===void 0?void 0:e.focus()}async setTabIndex(e){this.radioElement.tabIndex=e}render(){const{additionalFieldDisplay:e,disabled:i,dynamicText:r,form:o,groupLabel:c,handleClick:n,hasAdditionalField:s,label:d,name:l,selected:p,swallowClick:b,value:m}=this;const f=`ic-radio-option-${h(d)||m}-${c}`;return t(a,{onClick:n,class:{["ic-radio-option-disabled"]:i}},t("div",{class:{container:true,disabled:i}},t("div",null,t("input",{tabindex:p?"0":"-1",type:"radio",name:l,id:f,value:m,disabled:i?true:null,checked:p,ref:e=>this.radioElement=e,form:o}),t("span",{class:"checkmark"})),t("ic-typography",{class:"radio-label",variant:"body"},t("label",{htmlFor:f},d))),s&&t("div",{onClick:b,class:{"dynamic-container":true,hidden:e==="dynamic"&&!p}},e==="dynamic"&&t("div",{class:"branch-corner"}),t("div",null,e==="dynamic"&&t("ic-typography",{variant:"caption"},t("p",{class:"dynamic-text"},r)),t("div",{class:{"additional-field-wrapper":e==="static"}},t("slot",{name:u})))))}get el(){return r(this)}static get watchers(){return{selected:["watchSelectedHandler"]}}};m.style=p;export{m as ic_radio_option};
|
2
|
-
//# sourceMappingURL=p-d1c9c32b.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icRadioOptionCss","ADDITIONAL_FIELD","TEXT_FIELD_SELECTOR","RadioOption","this","defaultRadioValue","hasAdditionalField","skipFocus","handleClick","disabled","radioElement","focus","value","el","querySelector","icCheck","emit","swallowClick","event","stopPropagation","handleFormReset","selected","initiallySelected","watchSelectedHandler","icSelectedChange","disconnectedCallback","removeFormResetListener","componentWillLoad","isSlotUsed","textField","hiddenInput","addFormResetListener","removeDisabledFalse","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","componentWillRender","hasSlot","slotHasContent","componentDidRender","additionalFieldDisplay","textfield","setAttribute","removeAttribute","textfieldValueHandler","detail","stopImmediatePropagation","setFocus","_a","setTabIndex","tabIndex","render","dynamicText","form","groupLabel","label","name","id","isPropDefined","h","Host","onClick","class","container","tabindex","type","checked","ref","variant","htmlFor","hidden"],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\nic-radio-option {\n display: flex;\n flex-direction: column;\n width: fit-content;\n}\n\n.additional-field-wrapper 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 */\nic-radio-option.ic-radio-option-disabled {\n --ic-typography-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: var(--ic-architectural-white);\n border: var(--ic-border-default);\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-no-alpha);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n border: var(--ic-border-width) 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-no-alpha);\n border: var(--ic-border-width) solid var(--ic-action-default-pressed);\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-pressed);\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-pressed);\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: var(--ic-architectural-white);\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-border-width) 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: var(--ic-architectural-white);\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\n --ic-typography-color: var(--ic-action-default);\n\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 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 State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcValueEventDetail } from \"../../utils/types\";\nimport {\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n isSlotUsed,\n slotHasContent,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\nconst TEXT_FIELD_SELECTOR = \"ic-text-field\";\n\n/**\n * @slot additional-field - Content to displayed alongside a radio option.\n */\n@Component({\n tag: \"ic-radio-option\",\n styleUrl: \"ic-radio-option.css\",\n})\nexport class RadioOption {\n private defaultRadioValue: string = \"\";\n private hasAdditionalField: boolean = false;\n private radioElement: HTMLInputElement;\n private skipFocus = false;\n\n @Element() el: HTMLIcRadioOptionElement;\n\n /**\n * The style of additionalField that will be displayed if used.\n */\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * The text to be displayed when dynamic.\n */\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /**\n * The <form> element to associate the radio with.\n */\n @Prop() form?: string;\n\n /**\n * The group label for the radio option.\n */\n @Prop() groupLabel: string;\n\n /**\n * The label for the radio option.\n */\n @Prop() label?: string;\n\n /**\n * The name for the radio option.\n */\n @Prop() name: string;\n\n /**\n * The value for the radio option.\n */\n @Prop({ mutable: true }) value!: string;\n\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 @State() initiallySelected = this.selected;\n\n @Watch(\"selected\")\n watchSelectedHandler(): void {\n this.icSelectedChange.emit();\n }\n\n /**\n * Emitted when the radio option is selected.\n */\n @Event() icCheck: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when the radio option is selected or deselected.\n */\n @Event() icSelectedChange: EventEmitter<void>;\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n componentWillLoad(): void {\n if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n this.hasAdditionalField = true;\n const textField = this.el.querySelector(TEXT_FIELD_SELECTOR);\n if (textField) textField.hiddenInput = false;\n }\n\n this.defaultRadioValue = this.value;\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.value, propName: \"value\" }],\n \"Radio Option\"\n );\n }\n\n componentWillRender(): void {\n const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);\n if (hasSlot && !this.hasAdditionalField) {\n this.hasAdditionalField = true;\n const textField = this.el.querySelector(TEXT_FIELD_SELECTOR);\n if (textField) textField.hiddenInput = false;\n } else if (!hasSlot && this.hasAdditionalField) {\n this.hasAdditionalField = false;\n }\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.el.querySelector(TEXT_FIELD_SELECTOR);\n if (!this.selected || this.disabled) {\n textfield?.setAttribute(\"disabled\", \"\");\n } else {\n textfield?.removeAttribute(\"disabled\");\n }\n }\n }\n\n @Listen(\"icChange\")\n textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n if (this.selected) {\n this.value = event.detail.value || this.defaultRadioValue;\n this.icCheck.emit({\n value: this.value,\n });\n }\n\n event.stopImmediatePropagation();\n }\n\n /**\n * Sets focus on the radio option.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.radioElement?.focus();\n }\n\n /**\n * @internal Sets the tabIndex of the radio option.\n */\n @Method()\n async setTabIndex(value: number): Promise<void> {\n this.radioElement.tabIndex = value;\n }\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 this.value =\n this.el.querySelector(TEXT_FIELD_SELECTOR).value ||\n this.defaultRadioValue;\n }\n\n this.icCheck.emit({\n value: this.value,\n });\n }\n };\n\n private swallowClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n private handleFormReset = (): void => {\n this.skipFocus = true;\n this.selected = this.initiallySelected;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n disabled,\n dynamicText,\n form,\n groupLabel,\n handleClick,\n hasAdditionalField,\n label,\n name,\n selected,\n swallowClick,\n value,\n } = this;\n\n const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;\n\n return (\n <Host\n onClick={handleClick}\n class={{ [\"ic-radio-option-disabled\"]: disabled }}\n >\n <div class={{ container: true, disabled }}>\n <div>\n <input\n tabindex={selected ? \"0\" : \"-1\"}\n type=\"radio\"\n name={name}\n id={id}\n value={value}\n disabled={disabled ? true : null}\n checked={selected}\n ref={(el) => (this.radioElement = el)}\n form={form}\n ></input>\n <span class=\"checkmark\"></span>\n </div>\n <ic-typography class=\"radio-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n </div>\n\n {hasAdditionalField && (\n <div\n onClick={swallowClick}\n class={{\n \"dynamic-container\": true,\n hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n }}\n >\n {additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\">{dynamicText}</p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n additionalFieldDisplay === \"static\",\n }}\n >\n <slot name={ADDITIONAL_FIELD}></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as i,h as e,H as s,g as a}from"./p-6b5e91e2.js";import{c as o}from"./p-f074ef5b.js";import{f as n,i as r,a as l}from"./p-312cacae.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{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;min-height:100% !important;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);opacity:0}:host(.ic-dialog-fade-in){opacity:1}:host(.disable-height-constraint){background:none;justify-content:unset;align-items:unset}.dialog.disable-height-constraint{max-height:none;position:relative}.dialog.disable-height-constraint .content-area{overflow-y:visible}@media (prefers-reduced-motion: no-preference){:host{transition:opacity var(--ic-easing-transition-slow)}.dialog{transform:translateY(-3rem);transition:transform 1000s}:host(.ic-dialog-fade-in) .dialog{transform:translateY(0);transition:transform var(--ic-easing-transition-slow)}}:host(.ic-dialog-hidden){display:none}.dialog{background-color:var(--ic-architectural-white);color:var(--ic-architectural-black);border:var(--ic-border-default);border-radius:var(--ic-border-radius);padding:var(--ic-space-xs) 0 var(--ic-space-md);display:flex;flex-direction:column;box-sizing:border-box;overflow-x:visible}.small{width:50%;max-width:25rem;min-height:11rem;max-height:70vh}.medium{width:70vw;max-width:44rem;min-height:12.5rem;max-height:70vh}.large{width:90vw;max-width:62.5rem;min-height:12.5rem;max-height:90vh}.heading-area{display:flex;margin-bottom:var(--ic-space-xs);padding:0 var(--ic-space-md)}.heading{overflow-wrap:break-word}.close-icon{margin-left:auto}.content-area{-ms-overflow-style:none;scrollbar-width:none;padding:0 var(--ic-space-md);margin:0;overflow-y:auto}.content-area::-webkit-scrollbar{display:none}#dialog-content{margin-bottom:var(--ic-space-sm)}#dialog-content ::slotted(ic-typography){overflow-wrap:break-word}#dialog-content ::slotted(*){position:relative}.dialog-controls{margin-top:auto;padding:var(--ic-space-xs) var(--ic-space-md) 0;display:flex;justify-content:flex-end;gap:var(--ic-space-md)}.dialog-control-button{width:-moz-fit-content;width:fit-content}.backdrop{overflow-y:auto;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);padding-top:16px;padding-bottom:16px}@media (min-width: 800px){:host([size="large"]) .dialog:not(.disable-width-constraint)>.content-area{width:75%}}@media (max-width: 576px){.dialog{width:100vw;height:100vh;transform:translateY(-5rem);max-width:none;max-height:none;box-sizing:border-box}.backdrop{padding:0}.dialog.disable-height-constraint{height:auto;min-height:100vh}}@media (max-width: 364px){.dialog-control-button{width:unset}}';const d=class{constructor(s){t(this,s);this.icDialogCancelled=i(this,"icDialogCancelled",7);this.icDialogClosed=i(this,"icDialogClosed",7);this.icDialogConfirmed=i(this,"icDialogConfirmed",7);this.icDialogOpened=i(this,"icDialogOpened",7);this.DATA_GETS_FOCUS="data-gets-focus";this.DATA_GETS_FOCUS_SELECTOR="[data-gets-focus]";this.DIALOG_CONTROLS="dialog-controls";this.dialogHeight=0;this.focusedElementIndex=0;this.IC_TEXT_FIELD="IC-TEXT-FIELD";this.IC_ACCORDION="IC-ACCORDION";this.IC_ACCORDION_GROUP="IC-ACCORDION-GROUP";this.resizeObserver=null;this.dialogOpened=()=>{var t;this.dialogRendered=true;if(this.disableHeightConstraint){this.dialogEl.show()}else{(t=this.dialogEl)===null||t===void 0?void 0:t.showModal()}setTimeout((()=>{this.fadeIn=true;if(this.disableHeightConstraint&&this.backdropEl.scrollTop!==0){this.backdropEl.scrollTop=0}}),10);setTimeout((()=>{this.setInitialFocus();n(this.runResizeObserver)}),75);setTimeout((()=>{this.getFocusedElementIndex();this.icDialogOpened.emit()}),80)};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{clearTimeout(this.resizeTimeout);this.resizeTimeout=window.setTimeout(this.resizeObserverCallback,80)}));this.resizeObserver.observe(this.dialogEl)};this.resizeObserverCallback=()=>{if(this.dialogEl.clientHeight!==this.dialogHeight){this.dialogHeight=this.dialogEl.clientHeight}};this.refreshInteractiveElementsOnSlotChange=()=>{this.contentArea=this.el.shadowRoot.querySelector("#dialog-content slot");this.contentArea.addEventListener("slotchange",this.getInteractiveElements)};this.removeSlotChangeListener=()=>{if(this.contentArea){this.contentArea.removeEventListener("slotchange",this.getInteractiveElements)}};this.setInitialFocus=()=>{this.sourceElement=document.activeElement;let t;if(this.el.querySelector(this.DATA_GETS_FOCUS_SELECTOR)!==null){t=this.el.querySelector(this.DATA_GETS_FOCUS_SELECTOR)}else{t=this.el.shadowRoot.querySelector(this.DATA_GETS_FOCUS_SELECTOR)}if(t.tagName===this.IC_TEXT_FIELD){t.setFocus()}else if(t.tagName===this.IC_ACCORDION_GROUP){t.setFocus()}else if(t.tagName===this.IC_ACCORDION){t.setFocus()}else{t.focus({preventScroll:this.disableHeightConstraint?true:false})}};this.getFocusedElementIndex=()=>{for(let t=0;t<this.interactiveElementList.length;t++){if(this.interactiveElementList[t]===(this.el.shadowRoot.activeElement||document.activeElement)){this.focusedElementIndex=t}}};this.closeIconClick=()=>{this.open=false};this.getInteractiveElements=()=>{this.interactiveElementList=Array.from(this.el.shadowRoot.querySelectorAll("ic-button"));const t=Array.from(this.el.querySelectorAll(`a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex="-1"]), \n ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group, \n ic-back-to-top, ic-breadcrumb, ic-chip[dismissible="true"], ic-footer-link, ic-link, ic-navigation-button, \n ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion`));if(t.length>0){if(t[0].slot!==this.DIALOG_CONTROLS){t[0].setAttribute(this.DATA_GETS_FOCUS,"")}else if(!this.destructive){t[t.length-1].setAttribute(this.DATA_GETS_FOCUS,"")}}for(let i=0;i<t.length;i++){this.interactiveElementList.splice(1+i,0,t[i])}};this.getNextFocusEl=t=>this.interactiveElementList[t];this.focusNextInteractiveElement=t=>{this.getFocusedElementIndex();this.setFocusIndexBasedOnShiftKey(t);this.loopNextFocusIndexIfLastElement();let i=this.getNextFocusEl(this.focusedElementIndex);const e=getComputedStyle(i).visibility==="hidden"||i.tagName===this.IC_ACCORDION_GROUP&&i.hasAttribute("single-expansion");if(i.tagName===this.IC_TEXT_FIELD){i.setFocus()}else{if(e){this.setFocusIndexBasedOnShiftKey(t);this.loopNextFocusIndexIfLastElement();i=this.getNextFocusEl(this.focusedElementIndex)}if(i.tagName===this.IC_ACCORDION_GROUP){i.setFocus()}else if(i.tagName===this.IC_ACCORDION){i.setFocus()}else{i.focus()}}};this.renderDialog=()=>{const{buttons:t,size:i,heading:s,label:a,destructive:n,dismissLabel:l,hideCloseButton:h}=this;return e("dialog",{class:{["dialog"]:true,[`${i}`]:true,["disable-height-constraint"]:this.disableHeightConstraint,["disable-width-constraint"]:this.disableWidthConstraint},"aria-labelledby":"dialog-label dialog-heading","aria-describedby":"dialog-alert dialog-content",ref:t=>this.dialogEl=t},e("div",{class:"heading-area"},e("div",{class:"heading-content"},e("div",{class:"label"},e("slot",{name:"label"},e("ic-typography",{variant:"label",id:"dialog-label"},a))),e("div",{class:"heading"},e("slot",{name:"heading"},e("ic-typography",{variant:"h4",id:"dialog-heading"},s)))),!h&&e("ic-button",{class:"close-icon",variant:"icon",innerHTML:o,"aria-label":l,onClick:this.closeIconClick,"data-gets-focus":n||!t?"":null})),e("div",{class:"content-area"},r(this.el,"alert")&&e("slot",{name:"alert"}),e("div",{id:"dialog-content"},e("slot",null))),t&&(r(this.el,this.DIALOG_CONTROLS)?e("div",{class:{[this.DIALOG_CONTROLS]:true}},e("slot",{name:this.DIALOG_CONTROLS})):e("div",{class:{[this.DIALOG_CONTROLS]:true}},e("ic-button",{variant:"tertiary",onClick:()=>this.cancelDialog(),class:"dialog-control-button","data-gets-focus":null},"Cancel"),e("ic-button",{variant:this.destructive?"destructive":"primary",onClick:()=>this.confirmDialog(),class:"dialog-control-button","data-gets-focus":""},"Confirm"))))};this.dialogRendered=false;this.fadeIn=false;this.buttons=true;this.closeOnBackdropClick=true;this.destructive=false;this.dismissLabel="Dismiss";this.disableHeightConstraint=false;this.disableWidthConstraint=false;this.hideCloseButton=false;this.heading=undefined;this.label=undefined;this.open=undefined;this.size="small"}watchOpenHandler(){if(this.open){this.dialogOpened()}else{this.fadeIn=false;if(this.resizeObserver!==null){this.resizeObserver.disconnect()}setTimeout((()=>{var t;this.dialogRendered=false;this.dialogEl.close();(t=this.sourceElement)===null||t===void 0?void 0:t.focus();this.dialogHeight=0;this.icDialogClosed.emit()}),80)}}disconnectedCallback(){this.removeSlotChangeListener()}componentDidLoad(){this.getInteractiveElements();this.refreshInteractiveElementsOnSlotChange();if(this.open){this.dialogOpened()}!r(this.el,"heading")&&l([{prop:this.heading,propName:"heading"}],"Dialog")}componentDidRender(){if(getComputedStyle(this.el).display!=="none"&&this.disableHeightConstraint){document.body.style.overflow="hidden"}else{document.body.style.overflow="auto"}}handleKeyboard(t){if(this.dialogRendered){switch(t.key){case"Tab":t.preventDefault();this.focusNextInteractiveElement(t.shiftKey);break;case"Escape":if(!t.repeat){this.open=false}t.stopImmediatePropagation();break}}}handleClick(t){const i=this.el.shadowRoot.querySelector("dialog");if(this.closeOnBackdropClick&&t.composedPath().indexOf(i)<=0){const i=this.dialogEl.getBoundingClientRect();const e=i.top<=t.clientY&&t.clientY<=i.top+i.height&&i.left<=t.clientX&&t.clientX<=i.left+i.width;if(!e){this.open=false}}}async cancelDialog(){this.icDialogCancelled.emit();this.open=false}async confirmDialog(){this.icDialogConfirmed.emit()}loopNextFocusIndexIfLastElement(){if(this.focusedElementIndex>this.interactiveElementList.length-1)this.focusedElementIndex=0;else if(this.focusedElementIndex<0){this.focusedElementIndex=this.interactiveElementList.length-1}}setFocusIndexBasedOnShiftKey(t){if(t){this.focusedElementIndex-=1}else{this.focusedElementIndex+=1}}render(){return e(s,{class:{["ic-dialog-hidden"]:!this.dialogRendered,["ic-dialog-fade-in"]:this.fadeIn,["disable-height-constraint"]:this.disableHeightConstraint}},this.disableHeightConstraint?e("div",{class:"backdrop",ref:t=>this.backdropEl=t},this.renderDialog()):this.renderDialog())}get el(){return a(this)}static get watchers(){return{open:["watchOpenHandler"]}}};d.style=h;export{d as ic_dialog};
|
2
|
-
//# sourceMappingURL=p-d2f89cb5.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icDialogCss","Dialog","this","DATA_GETS_FOCUS","DATA_GETS_FOCUS_SELECTOR","DIALOG_CONTROLS","dialogHeight","focusedElementIndex","IC_TEXT_FIELD","IC_ACCORDION","IC_ACCORDION_GROUP","resizeObserver","dialogOpened","dialogRendered","disableHeightConstraint","dialogEl","show","_a","showModal","setTimeout","fadeIn","backdropEl","scrollTop","setInitialFocus","checkResizeObserver","runResizeObserver","getFocusedElementIndex","icDialogOpened","emit","ResizeObserver","clearTimeout","resizeTimeout","window","resizeObserverCallback","observe","clientHeight","refreshInteractiveElementsOnSlotChange","contentArea","el","shadowRoot","querySelector","addEventListener","getInteractiveElements","removeSlotChangeListener","removeEventListener","sourceElement","document","activeElement","focusedElement","tagName","setFocus","focus","preventScroll","i","interactiveElementList","length","closeIconClick","open","Array","from","querySelectorAll","slottedInteractiveElements","slot","setAttribute","destructive","splice","getNextFocusEl","focusNextInteractiveElement","shiftKey","setFocusIndexBasedOnShiftKey","loopNextFocusIndexIfLastElement","nextFocusEl","isHidden","getComputedStyle","visibility","hasAttribute","renderDialog","buttons","size","heading","label","dismissLabel","hideCloseButton","h","class","disableWidthConstraint","ref","name","variant","id","innerHTML","closeIcon","onClick","isSlotUsed","cancelDialog","confirmDialog","undefined","watchOpenHandler","disconnect","close","icDialogClosed","disconnectedCallback","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","componentDidRender","display","body","style","overflow","handleKeyboard","ev","key","preventDefault","repeat","stopImmediatePropagation","handleClick","dialogElement","closeOnBackdropClick","composedPath","indexOf","rect","getBoundingClientRect","isInDialog","top","clientY","height","left","clientX","width","icDialogCancelled","icDialogConfirmed","render","Host"],"sources":["src/components/ic-dialog/ic-dialog.css?tag=ic-dialog&encapsulation=shadow","src/components/ic-dialog/ic-dialog.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-dialog: z-index of dialog \n */\n\n:host {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100% !important;\n background: rgb(0 0 0 / 60%);\n z-index: var(--ic-z-index-dialog);\n opacity: 0;\n}\n\n:host(.ic-dialog-fade-in) {\n opacity: 1;\n}\n\n:host(.disable-height-constraint) {\n background: none;\n justify-content: unset;\n align-items: unset;\n}\n\n.dialog.disable-height-constraint {\n max-height: none;\n position: relative;\n}\n\n.dialog.disable-height-constraint .content-area {\n overflow-y: visible;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n :host {\n transition: opacity var(--ic-easing-transition-slow);\n }\n\n .dialog {\n transform: translateY(-3rem);\n transition: transform 1000s;\n }\n\n :host(.ic-dialog-fade-in) .dialog {\n transform: translateY(0);\n transition: transform var(--ic-easing-transition-slow);\n }\n}\n\n:host(.ic-dialog-hidden) {\n display: none;\n}\n\n.dialog {\n background-color: var(--ic-architectural-white);\n color: var(--ic-architectural-black);\n border: var(--ic-border-default);\n border-radius: var(--ic-border-radius);\n padding: var(--ic-space-xs) 0 var(--ic-space-md);\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n overflow-x: visible;\n}\n\n.small {\n width: 50%;\n max-width: 25rem;\n min-height: 11rem;\n max-height: 70vh;\n}\n\n.medium {\n width: 70vw;\n max-width: 44rem;\n min-height: 12.5rem;\n max-height: 70vh;\n}\n\n.large {\n width: 90vw;\n max-width: 62.5rem;\n min-height: 12.5rem;\n max-height: 90vh;\n}\n\n.heading-area {\n display: flex;\n margin-bottom: var(--ic-space-xs);\n padding: 0 var(--ic-space-md);\n}\n\n.heading {\n overflow-wrap: break-word;\n}\n\n.close-icon {\n margin-left: auto;\n}\n\n.content-area {\n -ms-overflow-style: none;\n scrollbar-width: none;\n padding: 0 var(--ic-space-md);\n margin: 0;\n overflow-y: auto;\n}\n\n.content-area::-webkit-scrollbar {\n display: none;\n}\n\n#dialog-content {\n margin-bottom: var(--ic-space-sm);\n}\n\n#dialog-content ::slotted(ic-typography) {\n overflow-wrap: break-word;\n}\n\n#dialog-content ::slotted(*) {\n position: relative;\n}\n\n.dialog-controls {\n margin-top: auto;\n padding: var(--ic-space-xs) var(--ic-space-md) 0;\n display: flex;\n justify-content: flex-end;\n gap: var(--ic-space-md);\n}\n\n.dialog-control-button {\n width: fit-content;\n}\n\n.backdrop {\n overflow-y: auto;\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgb(0 0 0 / 60%);\n z-index: var(--ic-z-index-dialog);\n padding-top: 16px;\n padding-bottom: 16px;\n}\n\n@media (min-width: 800px) {\n :host([size=\"large\"]) .dialog:not(.disable-width-constraint) > .content-area {\n width: 75%;\n }\n}\n\n@media (max-width: 576px) {\n .dialog {\n width: 100vw;\n height: 100vh;\n transform: translateY(-5rem);\n max-width: none;\n max-height: none;\n box-sizing: border-box;\n }\n\n .backdrop {\n padding: 0;\n }\n\n .dialog.disable-height-constraint {\n height: auto;\n min-height: 100vh;\n }\n}\n\n@media (max-width: 364px) {\n .dialog-control-button {\n width: unset;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Method,\n Listen,\n Watch,\n h,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport {\n isSlotUsed,\n checkResizeObserver,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot dialog-controls - Content will be place at the bottom of the dialog.\n * @slot heading - Content will be placed at the top of the dialog.\n * @slot label - Content will be placed above the dialog heading.\n * @slot alert - Content will be placed at the top of the content area of the dialog.\n */\n@Component({\n tag: \"ic-dialog\",\n styleUrl: \"ic-dialog.css\",\n shadow: true,\n})\nexport class Dialog {\n private backdropEl: HTMLDivElement;\n private contentArea: HTMLSlotElement;\n private DATA_GETS_FOCUS: string = \"data-gets-focus\";\n private DATA_GETS_FOCUS_SELECTOR: string = \"[data-gets-focus]\";\n private DIALOG_CONTROLS: string = \"dialog-controls\";\n private dialogEl: HTMLDialogElement;\n private dialogHeight: number = 0;\n private focusedElementIndex = 0;\n private IC_TEXT_FIELD: string = \"IC-TEXT-FIELD\";\n private IC_ACCORDION: string = \"IC-ACCORDION\";\n private IC_ACCORDION_GROUP: string = \"IC-ACCORDION-GROUP\";\n private interactiveElementList: HTMLElement[];\n private resizeObserver: ResizeObserver = null;\n private resizeTimeout: number;\n private sourceElement: HTMLElement;\n\n @Element() el: HTMLIcDialogElement;\n\n @State() dialogRendered: boolean = false;\n @State() fadeIn: boolean = false;\n\n /**\n * If set to `false`, default buttons or slotted dialog controls will not be displayed.\n */\n @Prop() buttons?: boolean = true;\n\n /**\n * If set to `false`, the dialog will not close when the backdrop is clicked.\n */\n @Prop() closeOnBackdropClick?: boolean = true;\n\n /**\n * If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.\n */\n @Prop() destructive?: boolean = false;\n\n /**\n * Sets the dismiss label tooltip and aria label.\n */\n @Prop() dismissLabel?: string = \"Dismiss\";\n\n /**\n * If set to `true`, the content area max height and overflow properties are removed allowing the dialog to stretch below the fold.\n * This prop also prevents popover elements from being cut off within the content area.\n */\n @Prop() disableHeightConstraint?: boolean = false;\n\n /**\n * If set to `true`, the content area width property is removed, allowing content to take the full width of the dialog when using the large variant.\n */\n @Prop() disableWidthConstraint?: boolean = false;\n\n /**\n * If `true`, the close button will not be displayed.\n */\n @Prop() hideCloseButton?: boolean = false;\n\n /**\n * Sets the heading for the dialog.\n */\n @Prop() heading: string;\n\n /**\n * Sets the optional label for the dialog which appears above the heading.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the dialog will be displayed.\n */\n @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n if (this.open) {\n this.dialogOpened();\n } else {\n this.fadeIn = false;\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n setTimeout(() => {\n this.dialogRendered = false;\n this.dialogEl.close();\n this.sourceElement?.focus();\n this.dialogHeight = 0;\n this.icDialogClosed.emit();\n }, 80);\n }\n }\n\n /**\n * Sets the maximum and minimum height and width for the dialog.\n */\n @Prop() size?: \"small\" | \"medium\" | \"large\" = \"small\";\n\n /**\n * Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called.\n */\n @Event() icDialogCancelled: EventEmitter<void>;\n\n /**\n * Emitted when dialog has closed.\n */\n @Event() icDialogClosed: EventEmitter<void>;\n\n /**\n * Confirmation event emitted when default 'Confirm' primary button clicked or 'confirmDialog' method is called.\n */\n @Event() icDialogConfirmed: EventEmitter<void>;\n\n /**\n * Emitted when dialog has opened.\n */\n @Event() icDialogOpened: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.removeSlotChangeListener();\n }\n\n componentDidLoad(): void {\n this.getInteractiveElements();\n\n this.refreshInteractiveElementsOnSlotChange();\n\n if (this.open) {\n this.dialogOpened();\n }\n\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Dialog\"\n );\n }\n\n componentDidRender(): void {\n if (\n getComputedStyle(this.el).display !== \"none\" &&\n this.disableHeightConstraint\n ) {\n document.body.style.overflow = \"hidden\";\n } else {\n document.body.style.overflow = \"auto\";\n }\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyboard(ev: KeyboardEvent): void {\n if (this.dialogRendered) {\n switch (ev.key) {\n case \"Tab\":\n ev.preventDefault();\n this.focusNextInteractiveElement(ev.shiftKey);\n break;\n case \"Escape\":\n if (!ev.repeat) {\n this.open = false;\n }\n ev.stopImmediatePropagation();\n break;\n }\n }\n }\n\n @Listen(\"click\", {})\n handleClick(ev: MouseEvent): void {\n const dialogElement = this.el.shadowRoot.querySelector(\"dialog\");\n if (\n this.closeOnBackdropClick &&\n ev.composedPath().indexOf(dialogElement) <= 0\n ) {\n const rect = this.dialogEl.getBoundingClientRect();\n const isInDialog =\n rect.top <= ev.clientY &&\n ev.clientY <= rect.top + rect.height &&\n rect.left <= ev.clientX &&\n ev.clientX <= rect.left + rect.width;\n if (!isInDialog) {\n this.open = false;\n }\n }\n }\n\n /**\n * Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.\n */\n @Method()\n async cancelDialog(): Promise<void> {\n this.icDialogCancelled.emit();\n this.open = false;\n }\n\n /**\n * Confirms the dialog. Used by the default 'Confirm' button or can be called manually to trigger confirming of dialog.\n */\n @Method()\n async confirmDialog(): Promise<void> {\n this.icDialogConfirmed.emit();\n }\n\n private dialogOpened = () => {\n this.dialogRendered = true;\n\n if (this.disableHeightConstraint) {\n this.dialogEl.show();\n } else {\n this.dialogEl?.showModal();\n }\n\n setTimeout(() => {\n this.fadeIn = true;\n\n /**\n * This is required to set scroll back to top if:\n * - dialog content goes below the fold\n * - is closed using cancel or confirm and reopened.\n *\n * Without this, the scroll bar will start from the dialog's last scroll-x coordinate.\n */\n if (this.disableHeightConstraint && this.backdropEl.scrollTop !== 0) {\n this.backdropEl.scrollTop = 0;\n }\n }, 10);\n\n setTimeout(() => {\n this.setInitialFocus();\n checkResizeObserver(this.runResizeObserver);\n }, 75);\n\n setTimeout(() => {\n this.getFocusedElementIndex();\n this.icDialogOpened.emit();\n }, 80);\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n clearTimeout(this.resizeTimeout);\n this.resizeTimeout = window.setTimeout(this.resizeObserverCallback, 80);\n });\n this.resizeObserver.observe(this.dialogEl);\n };\n\n private resizeObserverCallback = () => {\n if (this.dialogEl.clientHeight !== this.dialogHeight) {\n this.dialogHeight = this.dialogEl.clientHeight;\n }\n };\n\n private refreshInteractiveElementsOnSlotChange = () => {\n this.contentArea = this.el.shadowRoot.querySelector(\"#dialog-content slot\");\n\n this.contentArea.addEventListener(\n \"slotchange\",\n this.getInteractiveElements\n );\n };\n\n private removeSlotChangeListener = () => {\n if (this.contentArea) {\n this.contentArea.removeEventListener(\n \"slotchange\",\n this.getInteractiveElements\n );\n }\n };\n\n private setInitialFocus = () => {\n this.sourceElement = document.activeElement as HTMLElement;\n\n let focusedElement;\n\n if (this.el.querySelector(this.DATA_GETS_FOCUS_SELECTOR) !== null) {\n focusedElement = this.el.querySelector(\n this.DATA_GETS_FOCUS_SELECTOR\n ) as HTMLElement;\n } else {\n focusedElement = this.el.shadowRoot.querySelector(\n this.DATA_GETS_FOCUS_SELECTOR\n ) as HTMLElement;\n }\n if (focusedElement.tagName === this.IC_TEXT_FIELD) {\n (focusedElement as HTMLIcTextFieldElement).setFocus();\n } else if (focusedElement.tagName === this.IC_ACCORDION_GROUP) {\n (focusedElement as HTMLIcAccordionGroupElement).setFocus();\n } else if (focusedElement.tagName === this.IC_ACCORDION) {\n (focusedElement as HTMLIcAccordionElement).setFocus();\n } else {\n focusedElement.focus({\n preventScroll: this.disableHeightConstraint ? true : false,\n });\n }\n };\n\n private getFocusedElementIndex = () => {\n for (let i = 0; i < this.interactiveElementList.length; i++) {\n if (\n (this.interactiveElementList[i] as HTMLElement) ===\n (this.el.shadowRoot.activeElement || document.activeElement)\n ) {\n this.focusedElementIndex = i;\n }\n }\n };\n\n private closeIconClick = () => {\n this.open = false;\n };\n\n private getInteractiveElements = () => {\n this.interactiveElementList = Array.from(\n this.el.shadowRoot.querySelectorAll(\"ic-button\")\n );\n const slottedInteractiveElements = Array.from(\n this.el.querySelectorAll(\n `a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), \n ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group, \n ic-back-to-top, ic-breadcrumb, ic-chip[dismissible=\"true\"], ic-footer-link, ic-link, ic-navigation-button, \n ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion`\n )\n );\n if (slottedInteractiveElements.length > 0) {\n if (slottedInteractiveElements[0].slot !== this.DIALOG_CONTROLS) {\n slottedInteractiveElements[0].setAttribute(this.DATA_GETS_FOCUS, \"\");\n } else if (!this.destructive) {\n slottedInteractiveElements[\n slottedInteractiveElements.length - 1\n ].setAttribute(this.DATA_GETS_FOCUS, \"\");\n }\n }\n for (let i = 0; i < slottedInteractiveElements.length; i++) {\n this.interactiveElementList.splice(\n 1 + i,\n 0,\n slottedInteractiveElements[i] as HTMLElement\n );\n }\n };\n\n private getNextFocusEl = (focusedElementIndex: number) =>\n this.interactiveElementList[focusedElementIndex];\n\n private focusNextInteractiveElement = (shiftKey: boolean) => {\n this.getFocusedElementIndex();\n this.setFocusIndexBasedOnShiftKey(shiftKey);\n this.loopNextFocusIndexIfLastElement();\n\n let nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);\n\n const isHidden =\n getComputedStyle(nextFocusEl).visibility === \"hidden\" ||\n (nextFocusEl.tagName === this.IC_ACCORDION_GROUP &&\n nextFocusEl.hasAttribute(\"single-expansion\"));\n\n if (nextFocusEl.tagName === this.IC_TEXT_FIELD) {\n (nextFocusEl as HTMLIcTextFieldElement).setFocus();\n } else {\n if (isHidden) {\n this.setFocusIndexBasedOnShiftKey(shiftKey);\n this.loopNextFocusIndexIfLastElement();\n\n nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);\n }\n if (nextFocusEl.tagName === this.IC_ACCORDION_GROUP) {\n (nextFocusEl as HTMLIcAccordionGroupElement).setFocus();\n } else if (nextFocusEl.tagName === this.IC_ACCORDION) {\n (nextFocusEl as HTMLIcAccordionElement).setFocus();\n } else {\n (nextFocusEl as HTMLElement).focus();\n }\n }\n };\n\n private loopNextFocusIndexIfLastElement() {\n if (this.focusedElementIndex > this.interactiveElementList.length - 1)\n this.focusedElementIndex = 0;\n else if (this.focusedElementIndex < 0) {\n this.focusedElementIndex = this.interactiveElementList.length - 1;\n }\n }\n\n private setFocusIndexBasedOnShiftKey(shiftKey: boolean) {\n if (shiftKey) {\n this.focusedElementIndex -= 1;\n } else {\n this.focusedElementIndex += 1;\n }\n }\n\n private renderDialog = () => {\n const {\n buttons,\n size,\n heading,\n label,\n destructive,\n dismissLabel,\n hideCloseButton,\n } = this;\n\n return (\n <dialog\n class={{\n [\"dialog\"]: true,\n [`${size}`]: true,\n [\"disable-height-constraint\"]: this.disableHeightConstraint,\n [\"disable-width-constraint\"]: this.disableWidthConstraint,\n }}\n aria-labelledby=\"dialog-label dialog-heading\"\n aria-describedby=\"dialog-alert dialog-content\"\n ref={(el) => (this.dialogEl = el)}\n >\n <div class=\"heading-area\">\n <div class=\"heading-content\">\n <div class=\"label\">\n <slot name=\"label\">\n <ic-typography variant=\"label\" id=\"dialog-label\">\n {label}\n </ic-typography>\n </slot>\n </div>\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography variant=\"h4\" id=\"dialog-heading\">\n {heading}\n </ic-typography>\n </slot>\n </div>\n </div>\n {!hideCloseButton && (\n <ic-button\n class=\"close-icon\"\n variant=\"icon\"\n innerHTML={closeIcon}\n aria-label={dismissLabel}\n onClick={this.closeIconClick}\n data-gets-focus={destructive || !buttons ? \"\" : null}\n ></ic-button>\n )}\n </div>\n <div class=\"content-area\">\n {isSlotUsed(this.el, \"alert\") && <slot name=\"alert\"></slot>}\n <div id=\"dialog-content\">\n <slot></slot>\n </div>\n </div>\n {buttons &&\n (isSlotUsed(this.el, this.DIALOG_CONTROLS) ? (\n <div\n class={{\n [this.DIALOG_CONTROLS]: true,\n }}\n >\n <slot name={this.DIALOG_CONTROLS}></slot>\n </div>\n ) : (\n <div\n class={{\n [this.DIALOG_CONTROLS]: true,\n }}\n >\n <ic-button\n variant=\"tertiary\"\n onClick={() => this.cancelDialog()}\n class=\"dialog-control-button\"\n data-gets-focus={null}\n >\n Cancel\n </ic-button>\n <ic-button\n variant={this.destructive ? \"destructive\" : \"primary\"}\n onClick={() => this.confirmDialog()}\n class=\"dialog-control-button\"\n data-gets-focus=\"\"\n >\n Confirm\n </ic-button>\n </div>\n ))}\n </dialog>\n );\n };\n\n render() {\n return (\n <Host\n class={{\n [\"ic-dialog-hidden\"]: !this.dialogRendered,\n [\"ic-dialog-fade-in\"]: this.fadeIn,\n [\"disable-height-constraint\"]: this.disableHeightConstraint,\n }}\n >\n {this.disableHeightConstraint ? (\n <div class=\"backdrop\" ref={(el) => (this.backdropEl = el)}>\n {this.renderDialog()}\n </div>\n ) : (\n this.renderDialog()\n )}\n </Host>\n );\n }\n}\n"],"mappings":"sJAAA,MAAMA,EAAc,y0J,MC+BPC,EAAM,M,iOAGTC,KAAAC,gBAA0B,kBAC1BD,KAAAE,yBAAmC,oBACnCF,KAAAG,gBAA0B,kBAE1BH,KAAAI,aAAuB,EACvBJ,KAAAK,oBAAsB,EACtBL,KAAAM,cAAwB,gBACxBN,KAAAO,aAAuB,eACvBP,KAAAQ,mBAA6B,qBAE7BR,KAAAS,eAAiC,KA6LjCT,KAAAU,aAAe,K,MACrBV,KAAKW,eAAiB,KAEtB,GAAIX,KAAKY,wBAAyB,CAChCZ,KAAKa,SAASC,M,KACT,EACLC,EAAAf,KAAKa,YAAQ,MAAAE,SAAA,SAAAA,EAAEC,W,CAGjBC,YAAW,KACTjB,KAAKkB,OAAS,KASd,GAAIlB,KAAKY,yBAA2BZ,KAAKmB,WAAWC,YAAc,EAAG,CACnEpB,KAAKmB,WAAWC,UAAY,C,IAE7B,IAEHH,YAAW,KACTjB,KAAKqB,kBACLC,EAAoBtB,KAAKuB,kBAAkB,GAC1C,IAEHN,YAAW,KACTjB,KAAKwB,yBACLxB,KAAKyB,eAAeC,MAAM,GACzB,GAAG,EAGA1B,KAAAuB,kBAAoB,KAC1BvB,KAAKS,eAAiB,IAAIkB,gBAAe,KACvCC,aAAa5B,KAAK6B,eAClB7B,KAAK6B,cAAgBC,OAAOb,WAAWjB,KAAK+B,uBAAwB,GAAG,IAEzE/B,KAAKS,eAAeuB,QAAQhC,KAAKa,SAAS,EAGpCb,KAAA+B,uBAAyB,KAC/B,GAAI/B,KAAKa,SAASoB,eAAiBjC,KAAKI,aAAc,CACpDJ,KAAKI,aAAeJ,KAAKa,SAASoB,Y,GAI9BjC,KAAAkC,uCAAyC,KAC/ClC,KAAKmC,YAAcnC,KAAKoC,GAAGC,WAAWC,cAAc,wBAEpDtC,KAAKmC,YAAYI,iBACf,aACAvC,KAAKwC,uBACN,EAGKxC,KAAAyC,yBAA2B,KACjC,GAAIzC,KAAKmC,YAAa,CACpBnC,KAAKmC,YAAYO,oBACf,aACA1C,KAAKwC,uB,GAKHxC,KAAAqB,gBAAkB,KACxBrB,KAAK2C,cAAgBC,SAASC,cAE9B,IAAIC,EAEJ,GAAI9C,KAAKoC,GAAGE,cAActC,KAAKE,4BAA8B,KAAM,CACjE4C,EAAiB9C,KAAKoC,GAAGE,cACvBtC,KAAKE,yB,KAEF,CACL4C,EAAiB9C,KAAKoC,GAAGC,WAAWC,cAClCtC,KAAKE,yB,CAGT,GAAI4C,EAAeC,UAAY/C,KAAKM,cAAe,CAChDwC,EAA0CE,U,MACtC,GAAIF,EAAeC,UAAY/C,KAAKQ,mBAAoB,CAC5DsC,EAA+CE,U,MAC3C,GAAIF,EAAeC,UAAY/C,KAAKO,aAAc,CACtDuC,EAA0CE,U,KACtC,CACLF,EAAeG,MAAM,CACnBC,cAAelD,KAAKY,wBAA0B,KAAO,O,GAKnDZ,KAAAwB,uBAAyB,KAC/B,IAAK,IAAI2B,EAAI,EAAGA,EAAInD,KAAKoD,uBAAuBC,OAAQF,IAAK,CAC3D,GACGnD,KAAKoD,uBAAuBD,MAC5BnD,KAAKoC,GAAGC,WAAWQ,eAAiBD,SAASC,eAC9C,CACA7C,KAAKK,oBAAsB8C,C,IAKzBnD,KAAAsD,eAAiB,KACvBtD,KAAKuD,KAAO,KAAK,EAGXvD,KAAAwC,uBAAyB,KAC/BxC,KAAKoD,uBAAyBI,MAAMC,KAClCzD,KAAKoC,GAAGC,WAAWqB,iBAAiB,cAEtC,MAAMC,EAA6BH,MAAMC,KACvCzD,KAAKoC,GAAGsB,iBACN,qZAMJ,GAAIC,EAA2BN,OAAS,EAAG,CACzC,GAAIM,EAA2B,GAAGC,OAAS5D,KAAKG,gBAAiB,CAC/DwD,EAA2B,GAAGE,aAAa7D,KAAKC,gBAAiB,G,MAC5D,IAAKD,KAAK8D,YAAa,CAC5BH,EACEA,EAA2BN,OAAS,GACpCQ,aAAa7D,KAAKC,gBAAiB,G,EAGzC,IAAK,IAAIkD,EAAI,EAAGA,EAAIQ,EAA2BN,OAAQF,IAAK,CAC1DnD,KAAKoD,uBAAuBW,OAC1B,EAAIZ,EACJ,EACAQ,EAA2BR,G,GAKzBnD,KAAAgE,eAAkB3D,GACxBL,KAAKoD,uBAAuB/C,GAEtBL,KAAAiE,4BAA+BC,IACrClE,KAAKwB,yBACLxB,KAAKmE,6BAA6BD,GAClClE,KAAKoE,kCAEL,IAAIC,EAAcrE,KAAKgE,eAAehE,KAAKK,qBAE3C,MAAMiE,EACJC,iBAAiBF,GAAaG,aAAe,UAC5CH,EAAYtB,UAAY/C,KAAKQ,oBAC5B6D,EAAYI,aAAa,oBAE7B,GAAIJ,EAAYtB,UAAY/C,KAAKM,cAAe,CAC7C+D,EAAuCrB,U,KACnC,CACL,GAAIsB,EAAU,CACZtE,KAAKmE,6BAA6BD,GAClClE,KAAKoE,kCAELC,EAAcrE,KAAKgE,eAAehE,KAAKK,oB,CAEzC,GAAIgE,EAAYtB,UAAY/C,KAAKQ,mBAAoB,CAClD6D,EAA4CrB,U,MACxC,GAAIqB,EAAYtB,UAAY/C,KAAKO,aAAc,CACnD8D,EAAuCrB,U,KACnC,CACJqB,EAA4BpB,O,IAqB3BjD,KAAA0E,aAAe,KACrB,MAAMC,QACJA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,MACPA,EAAKhB,YACLA,EAAWiB,aACXA,EAAYC,gBACZA,GACEhF,KAEJ,OACEiF,EAAA,UACEC,MAAO,CACL,CAAC,UAAW,KACZ,CAAC,GAAGN,KAAS,KACb,CAAC,6BAA8B5E,KAAKY,wBACpC,CAAC,4BAA6BZ,KAAKmF,wBACpC,kBACe,8BAA6B,mBAC5B,8BACjBC,IAAMhD,GAAQpC,KAAKa,SAAWuB,GAE9B6C,EAAA,OAAKC,MAAM,gBACTD,EAAA,OAAKC,MAAM,mBACTD,EAAA,OAAKC,MAAM,SACTD,EAAA,QAAMI,KAAK,SACTJ,EAAA,iBAAeK,QAAQ,QAAQC,GAAG,gBAC/BT,KAIPG,EAAA,OAAKC,MAAM,WACTD,EAAA,QAAMI,KAAK,WACTJ,EAAA,iBAAeK,QAAQ,KAAKC,GAAG,kBAC5BV,OAKPG,GACAC,EAAA,aACEC,MAAM,aACNI,QAAQ,OACRE,UAAWC,EAAS,aACRV,EACZW,QAAS1F,KAAKsD,eAAc,kBACXQ,IAAgBa,EAAU,GAAK,QAItDM,EAAA,OAAKC,MAAM,gBACRS,EAAW3F,KAAKoC,GAAI,UAAY6C,EAAA,QAAMI,KAAK,UAC5CJ,EAAA,OAAKM,GAAG,kBACNN,EAAA,eAGHN,IACEgB,EAAW3F,KAAKoC,GAAIpC,KAAKG,iBACxB8E,EAAA,OACEC,MAAO,CACL,CAAClF,KAAKG,iBAAkB,OAG1B8E,EAAA,QAAMI,KAAMrF,KAAKG,mBAGnB8E,EAAA,OACEC,MAAO,CACL,CAAClF,KAAKG,iBAAkB,OAG1B8E,EAAA,aACEK,QAAQ,WACRI,QAAS,IAAM1F,KAAK4F,eACpBV,MAAM,wBAAuB,kBACZ,MAAI,UAIvBD,EAAA,aACEK,QAAStF,KAAK8D,YAAc,cAAgB,UAC5C4B,QAAS,IAAM1F,KAAK6F,gBACpBX,MAAM,wBAAuB,kBACb,IAAE,aAMnB,E,oBA9csB,M,YACR,M,aAKC,K,0BAKa,K,iBAKT,M,kBAKA,U,6BAMY,M,4BAKD,M,qBAKP,M,sDAeoBY,U,UAwBV,O,CArB9C,gBAAAC,GACE,GAAI/F,KAAKuD,KAAM,CACbvD,KAAKU,c,KACA,CACLV,KAAKkB,OAAS,MACd,GAAIlB,KAAKS,iBAAmB,KAAM,CAChCT,KAAKS,eAAeuF,Y,CAEtB/E,YAAW,K,MACTjB,KAAKW,eAAiB,MACtBX,KAAKa,SAASoF,SACdlF,EAAAf,KAAK2C,iBAAa,MAAA5B,SAAA,SAAAA,EAAEkC,QACpBjD,KAAKI,aAAe,EACpBJ,KAAKkG,eAAexE,MAAM,GACzB,G,EA6BP,oBAAAyE,GACEnG,KAAKyC,0B,CAGP,gBAAA2D,GACEpG,KAAKwC,yBAELxC,KAAKkC,yCAEL,GAAIlC,KAAKuD,KAAM,CACbvD,KAAKU,c,EAGNiF,EAAW3F,KAAKoC,GAAI,YACnBiE,EACE,CAAC,CAAEC,KAAMtG,KAAK6E,QAAS0B,SAAU,YACjC,S,CAIN,kBAAAC,GACE,GACEjC,iBAAiBvE,KAAKoC,IAAIqE,UAAY,QACtCzG,KAAKY,wBACL,CACAgC,SAAS8D,KAAKC,MAAMC,SAAW,Q,KAC1B,CACLhE,SAAS8D,KAAKC,MAAMC,SAAW,M,EAKnC,cAAAC,CAAeC,GACb,GAAI9G,KAAKW,eAAgB,CACvB,OAAQmG,EAAGC,KACT,IAAK,MACHD,EAAGE,iBACHhH,KAAKiE,4BAA4B6C,EAAG5C,UACpC,MACF,IAAK,SACH,IAAK4C,EAAGG,OAAQ,CACdjH,KAAKuD,KAAO,K,CAEduD,EAAGI,2BACH,M,EAMR,WAAAC,CAAYL,GACV,MAAMM,EAAgBpH,KAAKoC,GAAGC,WAAWC,cAAc,UACvD,GACEtC,KAAKqH,sBACLP,EAAGQ,eAAeC,QAAQH,IAAkB,EAC5C,CACA,MAAMI,EAAOxH,KAAKa,SAAS4G,wBAC3B,MAAMC,EACJF,EAAKG,KAAOb,EAAGc,SACfd,EAAGc,SAAWJ,EAAKG,IAAMH,EAAKK,QAC9BL,EAAKM,MAAQhB,EAAGiB,SAChBjB,EAAGiB,SAAWP,EAAKM,KAAON,EAAKQ,MACjC,IAAKN,EAAY,CACf1H,KAAKuD,KAAO,K,GASlB,kBAAMqC,GACJ5F,KAAKiI,kBAAkBvG,OACvB1B,KAAKuD,KAAO,K,CAOd,mBAAMsC,GACJ7F,KAAKkI,kBAAkBxG,M,CAgLjB,+BAAA0C,GACN,GAAIpE,KAAKK,oBAAsBL,KAAKoD,uBAAuBC,OAAS,EAClErD,KAAKK,oBAAsB,OACxB,GAAIL,KAAKK,oBAAsB,EAAG,CACrCL,KAAKK,oBAAsBL,KAAKoD,uBAAuBC,OAAS,C,EAI5D,4BAAAc,CAA6BD,GACnC,GAAIA,EAAU,CACZlE,KAAKK,qBAAuB,C,KACvB,CACLL,KAAKK,qBAAuB,C,EAkGhC,MAAA8H,GACE,OACElD,EAACmD,EAAI,CACHlD,MAAO,CACL,CAAC,qBAAsBlF,KAAKW,eAC5B,CAAC,qBAAsBX,KAAKkB,OAC5B,CAAC,6BAA8BlB,KAAKY,0BAGrCZ,KAAKY,wBACJqE,EAAA,OAAKC,MAAM,WAAWE,IAAMhD,GAAQpC,KAAKmB,WAAaiB,GACnDpC,KAAK0E,gBAGR1E,KAAK0E,e"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icFooterLinkCss","FooterLink","DEVICE_SIZES","XL","small","grouped","getThemeForegroundColor","componentWillLoad","this","footerConfig","inferConfig","el","footerResizeHandler","footerThemeChangeHandler","ev","theme","detail","foregroundColor","mode","e","parentElement","classList","contains","render","href","hreflang","referrerpolicy","rel","target","download","h","Host","class","role"],"sources":["src/components/ic-footer-link/ic-footer-link.css?tag=ic-footer-link&encapsulation=shadow","src/components/ic-footer-link/ic-footer-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-ungrouped-sparse) {\n --footer-link-margin-left: 0;\n --footer-link-margin-right: 2.5rem;\n --footer-link-margin-bottom: 0;\n}\n\n:host(.footer-link-ungrouped-small) {\n --footer-link-margin-left: 0;\n --footer-link-margin-right: 0;\n --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-sparse) {\n --footer-link-margin-left: 0;\n --footer-link-margin-right: 0;\n --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-small) {\n --footer-link-margin-left: var(--ic-space-md);\n --footer-link-margin-right: 0;\n --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link) {\n margin-left: var(--footer-link-margin-left);\n margin-right: var(--footer-link-margin-right);\n margin-bottom: var(--footer-link-margin-bottom);\n}\n\n.ic-link-open-in-new-icon {\n vertical-align: middle;\n margin-left: var(--ic-space-xxs);\n}\n\n.ic-link > .ic-link-open-in-new-icon {\n fill: var(--ic-color-hyperlink-default);\n}\n\n.ic-link-open-in-new-icon > svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n fill: currentcolor;\n}\n\n.ic-link:visited > .ic-link-open-in-new-icon {\n fill: var(--ic-color-hyperlink-visited);\n}\n\n.ic-link.light:visited > .ic-link-open-in-new-icon {\n fill: var(--ic-color-hyperlink-contrast-visited);\n}\n\n:host(.breadcrumb-link) .ic-link {\n display: var(--breadcrumb-link-display);\n align-items: var(--breadcrumb-link-align-items);\n gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .ic-link ::slotted(.back-icon) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n font-weight: normal;\n color: inherit;\n text-decoration: none;\n display: flex;\n align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n outline: var(--ic-hc-focus-outline);\n text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .ic-link:visited {\n color: var(--ic-color-text-primary);\n}\n\n:host(.footer-link-light) ::part(link),\n:host(.footer-link-dark) ::part(link) {\n color: var(--ic-theme-text);\n}\n\n:host(.footer-link-light) ::slotted(svg),\n:host(.footer-link-dark) ::slotted(svg) {\n fill: var(--ic-theme-text);\n}\n\n@media (forced-colors: active) {\n :host(.footer-link-light) ::slotted(svg),\n :host(.footer-link-dark) ::slotted(svg) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Listen,\n Prop,\n h,\n State,\n} from \"@stencil/core\";\nimport { DEVICE_SIZES, getThemeForegroundColor } from \"../../utils/helpers\";\nimport { IcTheme, IcThemeForeground } from \"../../utils/types\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n tag: \"ic-footer-link\",\n styleUrl: \"ic-footer-link.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class FooterLink {\n @Element() el: HTMLIcFooterLinkElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() footerConfig: FooterConfig = { small: false, grouped: false };\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n /**\n * If `true`, the user can save the linked URL instead of navigating to it.\n */\n @Prop() download?: string | boolean = false;\n\n /**\n * The URL that the link points to.\n */\n @Prop() href?: string = null;\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n componentWillLoad(): void {\n this.footerConfig = this.inferConfig(this.el);\n }\n\n @Listen(\"footerResized\", { target: \"document\" })\n footerResizeHandler(): void {\n this.footerConfig = this.inferConfig(this.el);\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n footerThemeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.foregroundColor = theme.mode;\n }\n\n private inferConfig(e: HTMLElement): FooterConfig {\n if (e.parentElement !== null) {\n if (e.parentElement.classList.contains(\"ic-footer\")) {\n return {\n small: e.parentElement.classList.contains(\"ic-footer-small\"),\n grouped: e.parentElement.classList.contains(\"ic-footer-grouped\"),\n };\n } else {\n return this.inferConfig(e.parentElement);\n }\n } else {\n return { small: false, grouped: false };\n }\n }\n\n render() {\n const {\n footerConfig,\n href,\n hreflang,\n referrerpolicy,\n rel,\n target,\n download,\n } = this;\n const { small, grouped } = footerConfig;\n\n return (\n <Host\n class={{\n \"footer-link\": true,\n [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n small ? \"small\" : \"sparse\"\n }`]: true,\n [`footer-link-${this.foregroundColor}`]: true,\n }}\n role=\"listitem\"\n >\n <ic-link\n href={href}\n hreflang={hreflang}\n referrerpolicy={referrerpolicy}\n rel={rel}\n download={download !== false ? download : null}\n target={target}\n >\n <slot />\n </ic-link>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAkB,89I,MCqBXC,EAAU,M,yCAGSC,EAAaC,G,kBACL,CAAEC,MAAO,MAAOC,QAAS,O,qBACjBC,I,cAKR,M,UAKd,K,+FAsBxB,iBAAAC,GACEC,KAAKC,aAAeD,KAAKE,YAAYF,KAAKG,G,CAI5C,mBAAAC,GACEJ,KAAKC,aAAeD,KAAKE,YAAYF,KAAKG,G,CAI5C,wBAAAE,CAAyBC,GACvB,MAAMC,EAAiBD,EAAGE,OAC1BR,KAAKS,gBAAkBF,EAAMG,I,CAGvB,WAAAR,CAAYS,GAClB,GAAIA,EAAEC,gBAAkB,KAAM,CAC5B,GAAID,EAAEC,cAAcC,UAAUC,SAAS,aAAc,CACnD,MAAO,CACLlB,MAAOe,EAAEC,cAAcC,UAAUC,SAAS,mBAC1CjB,QAASc,EAAEC,cAAcC,UAAUC,SAAS,qB,KAEzC,CACL,OAAOd,KAAKE,YAAYS,EAAEC,c,MAEvB,CACL,MAAO,CAAEhB,MAAO,MAAOC,QAAS,M,EAIpC,MAAAkB,GACE,MAAMd,aACJA,EAAYe,KACZA,EAAIC,SACJA,EAAQC,eACRA,EAAcC,IACdA,EAAGC,OACHA,EAAMC,SACNA,GACErB,KACJ,MAAMJ,MAAEA,EAAKC,QAAEA,GAAYI,EAE3B,OACEqB,EAACC,EAAI,CACHC,MAAO,CACL,cAAe,KACf,CAAC,eAAe3B,EAAU,UAAY,eACpCD,EAAQ,QAAU,YACf,KACL,CAAC,eAAeI,KAAKS,mBAAoB,MAE3CgB,KAAK,YAELH,EAAA,WACEN,KAAMA,EACNC,SAAUA,EACVC,eAAgBA,EAChBC,IAAKA,EACLE,SAAUA,IAAa,MAAQA,EAAW,KAC1CD,OAAQA,GAERE,EAAA,c"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as o,h as e,H as t,g as r}from"./p-6b5e91e2.js";import{D as i,g as n,a as l}from"./p-312cacae.js";const a='/*! 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(.footer-link-group-sparse){--footer-link-group-margin-right:5.938rem;--footer-link-group-border-bottom:0 solid transparent;--footer-link-label-margin-top:0;--footer-link-label-margin-bottom:var(--ic-space-md)}:host(.footer-link-group-small){--footer-link-group-margin-right:0;--footer-link-label-margin-top:var(--ic-space-md);--footer-link-label-margin-bottom:var(--ic-space-md);--footer-link-group-links-padding-left:var(--ic-space-md);--footer-link-group-links-padding-bottom:var(--ic-space-md)}:host(.footer-link-group-light.footer-link-group-small){--footer-link-group-border-bottom:var(--ic-border-keyline-lighten)}:host(.footer-link-group-dark.footer-link-group-small){--footer-link-group-border-bottom:var(--ic-border-keyline-darken)}:host(.footer-link-group){margin-right:var(--footer-link-group-margin-right);border-bottom:var(--footer-link-group-border-bottom)}:host(.footer-link-group-small.footer-link-group-light:hover){background-color:var(--ic-action-light-bg-hover);cursor:pointer}:host(.footer-link-group-small.footer-link-group-dark:hover){background-color:var(--ic-action-dark-bg-hover);cursor:pointer}:host(.footer-link-group-sparse:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}:host(.footer-link-group-small:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}:host(.footer-link-group-small.footer-link-group-light:active){background-color:var(--ic-action-light-bg-pressed)}:host(.footer-link-group-small.footer-link-group-dark:active){background-color:var(--ic-action-dark-bg-pressed)}.footer-link-label{margin-top:var(--footer-link-label-margin-top);margin-bottom:var(--footer-link-label-margin-bottom);flex-grow:1}.footer-link-group-toggle{fill:white !important}.footer-link-group-links{display:flex;flex-direction:column}.footer-link-group-header{display:flex;align-items:center}ic-typography{--ic-typography-color:var(--ic-theme-text)}';const s=class{constructor(e){o(this,e);this.handleKeydown=o=>{if(o.key===" "||o.key==="Enter"){this.toggleExpanded()}};this.toggleExpanded=()=>{this.expanded=!this.expanded};this.expanded=false;this.deviceSize=i.XL;this.dropdownIconStyle=n();this.small=false;this.label=undefined}componentWillLoad(){this.small=this.isSmall(this.el)}componentDidLoad(){l([{prop:this.label,propName:"label"}],"Footer Link Group")}footerResizeHandler(){this.small=this.isSmall(this.el)}footerThemeChangeHandler(o){const e=o.detail;this.dropdownIconStyle=e.mode}isSmall(o){if(o.parentElement!==null){if(o.parentElement.classList.contains("ic-footer")){return o.parentElement.classList.contains("ic-footer-small")}else{return this.isSmall(o.parentElement)}}else{return false}}render(){const{small:o,label:r}=this;return!o?e(t,{class:{["footer-link-group footer-link-group-sparse"]:true,[`footer-link-group-${this.dropdownIconStyle}`]:true},role:"listitem"},e("div",{class:"footer-link-label"},e("ic-typography",{variant:"subtitle-small"},r)),e("div",{class:"footer-link-group-links",role:"list"},e("slot",null))):e(t,{class:{["footer-link-group footer-link-group-small"]:true,[`footer-link-group-${this.dropdownIconStyle}`]:true},tabIndex:"1",onClick:this.toggleExpanded,onKeydown:this.handleKeydown,"aria-expanded":this.expanded},e("ic-section-container",{fullHeight:true},e("div",{class:"footer-link-group-header"},e("div",{class:"footer-link-label"},e("ic-typography",{variant:"label"},r)),this.expanded?e("svg",{class:"footer-link-group-toggle",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",width:"1em",height:"1em",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 1200 1200"},e("path",{fill:"currentColor",d:"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z"})):e("svg",{class:"footer-link-group-toggle",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",width:"1em",height:"1em",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 1200 1200"},e("g",{transform:"translate(0 1200) scale(1 -1)"},e("path",{fill:"currentColor",d:"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z"})))),this.expanded&&e("div",{class:"footer-link-group-links",role:"list"},e("slot",null))))}static get delegatesFocus(){return true}get el(){return r(this)}};s.style=a;export{s as ic_footer_link_group};
|
2
|
-
//# sourceMappingURL=p-da14cd3c.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icFooterLinkGroupCss","FooterLinkGroup","this","handleKeydown","event","key","toggleExpanded","expanded","DEVICE_SIZES","XL","getThemeForegroundColor","componentWillLoad","small","isSmall","el","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","footerResizeHandler","footerThemeChangeHandler","ev","theme","detail","dropdownIconStyle","mode","e","parentElement","classList","contains","render","h","Host","class","role","variant","tabIndex","onClick","onKeydown","fullHeight","xmlns","width","height","preserveAspectRatio","viewBox","fill","d","transform"],"sources":["src/components/ic-footer-link-group/ic-footer-link-group.css?tag=ic-footer-link-group&encapsulation=shadow","src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-group-sparse) {\n --footer-link-group-margin-right: 5.938rem;\n --footer-link-group-border-bottom: 0 solid transparent;\n --footer-link-label-margin-top: 0;\n --footer-link-label-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-small) {\n --footer-link-group-margin-right: 0;\n --footer-link-label-margin-top: var(--ic-space-md);\n --footer-link-label-margin-bottom: var(--ic-space-md);\n --footer-link-group-links-padding-left: var(--ic-space-md);\n --footer-link-group-links-padding-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-light.footer-link-group-small) {\n --footer-link-group-border-bottom: var(--ic-border-keyline-lighten);\n}\n\n:host(.footer-link-group-dark.footer-link-group-small) {\n --footer-link-group-border-bottom: var(--ic-border-keyline-darken);\n}\n\n:host(.footer-link-group) {\n margin-right: var(--footer-link-group-margin-right);\n border-bottom: var(--footer-link-group-border-bottom);\n}\n\n:host(.footer-link-group-small.footer-link-group-light:hover) {\n background-color: var(--ic-action-light-bg-hover);\n cursor: pointer;\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:hover) {\n background-color: var(--ic-action-dark-bg-hover);\n cursor: pointer;\n}\n\n:host(.footer-link-group-sparse:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\n:host(.footer-link-group-small:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\n:host(.footer-link-group-small.footer-link-group-light:active) {\n background-color: var(--ic-action-light-bg-pressed);\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:active) {\n background-color: var(--ic-action-dark-bg-pressed);\n}\n\n.footer-link-label {\n margin-top: var(--footer-link-label-margin-top);\n margin-bottom: var(--footer-link-label-margin-bottom);\n flex-grow: 1;\n}\n\n.footer-link-group-toggle {\n fill: white !important;\n}\n\n.footer-link-group-links {\n display: flex;\n flex-direction: column;\n}\n\n.footer-link-group-header {\n display: flex;\n align-items: center;\n}\n\nic-typography {\n --ic-typography-color: var(--ic-theme-text);\n}\n","import {\n Component,\n Host,\n Element,\n Listen,\n Prop,\n h,\n State,\n} from \"@stencil/core\";\nimport {\n DEVICE_SIZES,\n getThemeForegroundColor,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-footer-link-group\",\n styleUrl: \"ic-footer-link-group.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class FooterLinkGroup {\n @Element() el: HTMLIcFooterLinkGroupElement;\n\n @State() expanded: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() dropdownIconStyle = getThemeForegroundColor();\n @State() small: boolean = false;\n\n /**\n * The title of the link group to be displayed.\n */\n @Prop() label!: string;\n\n componentWillLoad(): void {\n this.small = this.isSmall(this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Footer Link Group\"\n );\n }\n\n @Listen(\"footerResized\", { target: \"document\" })\n footerResizeHandler(): void {\n this.small = this.isSmall(this.el);\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n footerThemeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.dropdownIconStyle = theme.mode;\n }\n\n private isSmall(e: HTMLElement): boolean {\n if (e.parentElement !== null) {\n if (e.parentElement.classList.contains(\"ic-footer\")) {\n return e.parentElement.classList.contains(\"ic-footer-small\");\n } else {\n return this.isSmall(e.parentElement);\n }\n } else {\n return false;\n }\n }\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.key === \" \" || event.key === \"Enter\") {\n this.toggleExpanded();\n }\n };\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n render() {\n const { small, label } = this;\n\n return !small ? (\n <Host\n class={{\n [\"footer-link-group footer-link-group-sparse\"]: true,\n [`footer-link-group-${this.dropdownIconStyle}`]: true,\n }}\n role=\"listitem\"\n >\n <div class=\"footer-link-label\">\n <ic-typography variant=\"subtitle-small\">{label}</ic-typography>\n </div>\n <div class=\"footer-link-group-links\" role=\"list\">\n <slot />\n </div>\n </Host>\n ) : (\n <Host\n class={{\n [\"footer-link-group footer-link-group-small\"]: true,\n [`footer-link-group-${this.dropdownIconStyle}`]: true,\n }}\n tabIndex=\"1\"\n onClick={this.toggleExpanded}\n onKeydown={this.handleKeydown}\n aria-expanded={this.expanded}\n >\n <ic-section-container fullHeight={true}>\n <div class=\"footer-link-group-header\">\n <div class=\"footer-link-label\">\n <ic-typography variant=\"label\">{label}</ic-typography>\n </div>\n {this.expanded ? (\n <svg\n class=\"footer-link-group-toggle\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"img\"\n width=\"1em\"\n height=\"1em\"\n preserveAspectRatio=\"xMidYMid meet\"\n viewBox=\"0 0 1200 1200\"\n >\n <path\n fill=\"currentColor\"\n d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n />\n </svg>\n ) : (\n <svg\n class=\"footer-link-group-toggle\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"img\"\n width=\"1em\"\n height=\"1em\"\n preserveAspectRatio=\"xMidYMid meet\"\n viewBox=\"0 0 1200 1200\"\n >\n <g transform=\"translate(0 1200) scale(1 -1)\">\n <path\n fill=\"currentColor\"\n d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n />\n </g>\n </svg>\n )}\n </div>\n {this.expanded && (\n <div class=\"footer-link-group-links\" role=\"list\">\n <slot />\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"],"mappings":"2GAAA,MAAMA,EAAuB,81I,MCuBhBC,EAAe,M,yBA+ClBC,KAAAC,cAAiBC,IACvB,GAAIA,EAAMC,MAAQ,KAAOD,EAAMC,MAAQ,QAAS,CAC9CH,KAAKI,gB,GAIDJ,KAAAI,eAAiB,KACvBJ,KAAKK,UAAYL,KAAKK,QAAQ,E,cAnDH,M,gBACCC,EAAaC,G,uBACdC,I,WACH,M,qBAO1B,iBAAAC,GACET,KAAKU,MAAQV,KAAKW,QAAQX,KAAKY,G,CAGjC,gBAAAC,GACEC,EACE,CAAC,CAAEC,KAAMf,KAAKgB,MAAOC,SAAU,UAC/B,oB,CAKJ,mBAAAC,GACElB,KAAKU,MAAQV,KAAKW,QAAQX,KAAKY,G,CAIjC,wBAAAO,CAAyBC,GACvB,MAAMC,EAAiBD,EAAGE,OAC1BtB,KAAKuB,kBAAoBF,EAAMG,I,CAGzB,OAAAb,CAAQc,GACd,GAAIA,EAAEC,gBAAkB,KAAM,CAC5B,GAAID,EAAEC,cAAcC,UAAUC,SAAS,aAAc,CACnD,OAAOH,EAAEC,cAAcC,UAAUC,SAAS,kB,KACrC,CACL,OAAO5B,KAAKW,QAAQc,EAAEC,c,MAEnB,CACL,OAAO,K,EAcX,MAAAG,GACE,MAAMnB,MAAEA,EAAKM,MAAEA,GAAUhB,KAEzB,OAAQU,EACNoB,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,8CAA+C,KAChD,CAAC,qBAAqBhC,KAAKuB,qBAAsB,MAEnDU,KAAK,YAELH,EAAA,OAAKE,MAAM,qBACTF,EAAA,iBAAeI,QAAQ,kBAAkBlB,IAE3Cc,EAAA,OAAKE,MAAM,0BAA0BC,KAAK,QACxCH,EAAA,eAIJA,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,6CAA8C,KAC/C,CAAC,qBAAqBhC,KAAKuB,qBAAsB,MAEnDY,SAAS,IACTC,QAASpC,KAAKI,eACdiC,UAAWrC,KAAKC,cAAa,gBACdD,KAAKK,UAEpByB,EAAA,wBAAsBQ,WAAY,MAChCR,EAAA,OAAKE,MAAM,4BACTF,EAAA,OAAKE,MAAM,qBACTF,EAAA,iBAAeI,QAAQ,SAASlB,IAEjChB,KAAKK,SACJyB,EAAA,OACEE,MAAM,2BACNO,MAAM,6BAA4B,cACtB,OACZN,KAAK,MACLO,MAAM,MACNC,OAAO,MACPC,oBAAoB,gBACpBC,QAAQ,iBAERb,EAAA,QACEc,KAAK,eACLC,EAAE,8IAINf,EAAA,OACEE,MAAM,2BACNO,MAAM,6BAA4B,cACtB,OACZN,KAAK,MACLO,MAAM,MACNC,OAAO,MACPC,oBAAoB,gBACpBC,QAAQ,iBAERb,EAAA,KAAGgB,UAAU,iCACXhB,EAAA,QACEc,KAAK,eACLC,EAAE,gJAMX7C,KAAKK,UACJyB,EAAA,OAAKE,MAAM,0BAA0BC,KAAK,QACxCH,EAAA,e"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,h as i,H as a,g as e}from"./p-6b5e91e2.js";import{a as s,R as r,S as l,E as n,T as o,U as c,P as p}from"./p-312cacae.js";const d="ic-input-label{margin-bottom:var(--ic-space-xs)}ic-input-label.with-helper{margin-bottom:var(--ic-space-xxxs)}ic-input-label.ic-input-label-readonly{--ic-typography-color:var(--ic-color-text-tertiary)}ic-input-label .helpertext{margin-top:var(--ic-space-xxxs)}ic-input-label .helpertext-normal{--ic-typography-color:var(--ic-color-text-secondary)}ic-input-label .helpertext-readonly{--ic-typography-color:var(--ic-color-text-tertiary)}ic-input-label .readonly-label{--ic-typography-color:var(--ic-color-text-secondary)}ic-input-label .error-label{--ic-typography-color:var(--ic-status-error-default)}ic-input-label .dark{--ic-typography-color:var(--ic-architectural-white)}";const h=class{constructor(i){t(this,i);this.appearance="default";this.disabled=false;this.for=undefined;this.helperText="";this.label=undefined;this.readonly=false;this.required=false;this.status=""}componentDidLoad(){s([{prop:this.label,propName:"label"}],"Input Label")}render(){const{disabled:t,readonly:e,label:s,required:l,helperText:n,status:o,appearance:c}=this;const p=l?s+" *":s;const d=e?`${p}`:i("label",{htmlFor:this.for},p);const h=r(this.for);return i(a,{class:{["ic-input-label-disabled"]:t,["ic-input-label-readonly"]:e,["with-helper"]:n!==""}},i("ic-typography",{variant:"label",class:{["readonly-label"]:e,["error-label"]:o==="error"&&!(e||t),["dark"]:c==="dark"}},d),n!==""&&i("ic-typography",{variant:"caption",class:{["helpertext"]:true,["helpertext-normal"]:!t&&!e,["helpertext-readonly"]:e}},i("span",{id:h},n)))}};h.style=d;const u="ic-input-validation{width:var(--input-width, 20rem);margin-top:var(--ic-space-xs);display:flex}ic-input-validation.ic-input-validation-full-width{width:100%}ic-input-validation span.status-icon{padding-right:var(--ic-space-xxs)}ic-input-validation span.status-icon>svg{height:1.25rem;width:1.25rem}ic-input-validation span.icon-success>svg{fill:var(--ic-status-success-default)}ic-input-validation span.icon-error>svg{fill:var(--ic-status-error-default)}ic-input-validation span.icon-warning>svg{fill:var(--ic-status-warning-default)}ic-input-validation .statustext{flex-grow:1}";const v={[n.Warning]:o,[n.Error]:c,[n.Success]:p};const y=class{constructor(i){t(this,i);this.ariaLiveMode="polite";this.for=undefined;this.fullWidth=false;this.message=undefined;this.status=""}componentDidLoad(){s([{prop:this.message,propName:"message"}],"Input Validation")}render(){const t=this.status!==""?v[this.status]:"";const e=l(this.for);return i(a,{class:{[`ic-input-validation-${this.status}`]:this.status!=="",["ic-input-validation-full-width"]:this.fullWidth}},t!==""&&i("span",{class:{["status-icon"]:true,[`icon-${this.status}`]:true},innerHTML:t}),i("ic-typography",{variant:"caption",class:"statustext"},i("span",{"aria-live":this.ariaLiveMode,id:e},this.message)),i("slot",{name:"validation-message-adornment"}))}get el(){return e(this)}};y.style=u;export{h as ic_input_label,y as ic_input_validation};
|
2
|
-
//# sourceMappingURL=p-dc83a0e9.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icInputLabelCss","InputLabel","componentDidLoad","onComponentRequiredPropUndefined","prop","this","label","propName","render","disabled","readonly","required","helperText","status","appearance","labelText","labelContent","h","htmlFor","for","id","getInputHelperTextID","Host","class","variant","icInputValidationCss","icon","IcInformationStatus","Warning","warningIcon","Error","errorIcon","Success","successIcon","InputValidation","message","displayIcon","getInputValidationTextID","fullWidth","innerHTML","ariaLiveMode","name"],"sources":["src/components/ic-input-label/ic-input-label.css?tag=ic-input-label","src/components/ic-input-label/ic-input-label.tsx","src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-label {\n margin-bottom: var(--ic-space-xs);\n}\n\nic-input-label.with-helper {\n margin-bottom: var(--ic-space-xxxs);\n}\n\nic-input-label.ic-input-label-readonly {\n --ic-typography-color: var(--ic-color-text-tertiary);\n}\n\nic-input-label .helpertext {\n margin-top: var(--ic-space-xxxs);\n}\n\nic-input-label .helpertext-normal {\n --ic-typography-color: var(--ic-color-text-secondary);\n}\n\nic-input-label .helpertext-readonly {\n --ic-typography-color: var(--ic-color-text-tertiary);\n}\n\nic-input-label .readonly-label {\n --ic-typography-color: var(--ic-color-text-secondary);\n}\n\nic-input-label .error-label {\n --ic-typography-color: var(--ic-status-error-default);\n}\n\nic-input-label .dark {\n --ic-typography-color: var(--ic-architectural-white);\n}\n\n/* Add back in after storybook has the `color-scheme: light dark` code */\n\n/* @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n ic-input-label,\n ic-input-label .helpertext-normal,\n ic-input-label .readonly-label,\n ic-input-label .helpertext-readonly {\n color: var(--ic-architectural-white);\n }\n} */\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n getInputHelperTextID,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-input-label\",\n styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n /**\n * The appearance of the input label.\n */\n @Prop() appearance?: \"dark\" | \"default\" = \"default\";\n\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * The ID of the form element the label is bound to.\n */\n @Prop() for: string;\n\n /**\n * The helper text that will be displayed.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * The text content of the label.\n */\n @Prop() label!: string;\n\n /**\n * If `true`, the readonly state will be set.\n */\n @Prop() readonly: boolean = false;\n\n /**\n * If `true`, the input label will require a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * The status of the label - e.g. 'error'.\n */\n @Prop() status: \"error\" | \"\" = \"\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Input Label\"\n );\n }\n\n render() {\n const {\n disabled,\n readonly,\n label,\n required,\n helperText,\n status,\n appearance,\n } = this;\n const labelText = required ? label + \" *\" : label;\n const labelContent = readonly ? (\n `${labelText}`\n ) : (\n <label htmlFor={this.for}>{labelText}</label>\n );\n\n const id = getInputHelperTextID(this.for);\n\n return (\n <Host\n class={{\n [\"ic-input-label-disabled\"]: disabled,\n [\"ic-input-label-readonly\"]: readonly,\n [\"with-helper\"]: helperText !== \"\",\n }}\n >\n <ic-typography\n variant=\"label\"\n class={{\n [\"readonly-label\"]: readonly,\n [\"error-label\"]: status === \"error\" && !(readonly || disabled),\n [\"dark\"]: appearance === \"dark\",\n }}\n >\n {labelContent}\n </ic-typography>\n\n {helperText !== \"\" && (\n <ic-typography\n variant=\"caption\"\n class={{\n [\"helpertext\"]: true,\n [\"helpertext-normal\"]: !disabled && !readonly,\n [\"helpertext-readonly\"]: readonly,\n }}\n >\n <span id={id}>{helperText}</span>\n </ic-typography>\n )}\n </Host>\n );\n }\n}\n","ic-input-validation {\n width: var(--input-width, 20rem);\n margin-top: var(--ic-space-xs);\n display: flex;\n}\n\nic-input-validation.ic-input-validation-full-width {\n width: 100%;\n}\n\nic-input-validation span.status-icon {\n padding-right: var(--ic-space-xxs);\n}\n\nic-input-validation span.status-icon > svg {\n height: 1.25rem;\n width: 1.25rem;\n}\n\nic-input-validation span.icon-success > svg {\n fill: var(--ic-status-success-default);\n}\n\nic-input-validation span.icon-error > svg {\n fill: var(--ic-status-error-default);\n}\n\nic-input-validation span.icon-warning > svg {\n fill: var(--ic-status-warning-default);\n}\n\nic-input-validation .statustext {\n flex-grow: 1;\n}\n","import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n getInputValidationTextID,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n [IcInformationStatus.Warning]: warningIcon,\n [IcInformationStatus.Error]: errorIcon,\n [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n tag: \"ic-input-validation\",\n styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n @Element() el: HTMLIcInputValidationElement;\n\n /**\n * The ARIA live mode to apply to the message.\n */\n @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n /**\n * The ID of the form element the validation is bound to.\n */\n @Prop() for: string;\n\n /**\n * If `true`, the input validation will fill the width of the container.\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * The validation message to display.\n */\n @Prop() message!: string;\n\n /**\n * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() status: IcInformationStatusOrEmpty = \"\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.message, propName: \"message\" }],\n \"Input Validation\"\n );\n }\n\n render() {\n const displayIcon = this.status !== \"\" ? icon[this.status] : \"\";\n const id = getInputValidationTextID(this.for);\n return (\n <Host\n class={{\n [`ic-input-validation-${this.status}`]: this.status !== \"\",\n [\"ic-input-validation-full-width\"]: this.fullWidth,\n }}\n >\n {displayIcon !== \"\" && (\n <span\n class={{\n [\"status-icon\"]: true,\n [`icon-${this.status}`]: true,\n }}\n innerHTML={displayIcon}\n />\n )}\n\n <ic-typography variant=\"caption\" class=\"statustext\">\n <span aria-live={this.ariaLiveMode} id={id}>\n {this.message}\n </span>\n </ic-typography>\n\n <slot name=\"validation-message-adornment\"></slot>\n </Host>\n );\n }\n}\n"],"mappings":"uIAAA,MAAMA,EAAkB,oqB,MCWXC,EAAU,M,yCAIqB,U,cAKd,M,mCAUC,G,mCAUD,M,cAKA,M,YAKG,E,CAE/B,gBAAAC,GACEC,EACE,CAAC,CAAEC,KAAMC,KAAKC,MAAOC,SAAU,UAC/B,c,CAIJ,MAAAC,GACE,MAAMC,SACJA,EAAQC,SACRA,EAAQJ,MACRA,EAAKK,SACLA,EAAQC,WACRA,EAAUC,OACVA,EAAMC,WACNA,GACET,KACJ,MAAMU,EAAYJ,EAAWL,EAAQ,KAAOA,EAC5C,MAAMU,EAAeN,EAAQ,GACxBK,IAEHE,EAAA,SAAOC,QAASb,KAAKc,KAAMJ,GAG7B,MAAMK,EAAKC,EAAqBhB,KAAKc,KAErC,OACEF,EAACK,EAAI,CACHC,MAAO,CACL,CAAC,2BAA4Bd,EAC7B,CAAC,2BAA4BC,EAC7B,CAAC,eAAgBE,IAAe,KAGlCK,EAAA,iBACEO,QAAQ,QACRD,MAAO,CACL,CAAC,kBAAmBb,EACpB,CAAC,eAAgBG,IAAW,WAAaH,GAAYD,GACrD,CAAC,QAASK,IAAe,SAG1BE,GAGFJ,IAAe,IACdK,EAAA,iBACEO,QAAQ,UACRD,MAAO,CACL,CAAC,cAAe,KAChB,CAAC,sBAAuBd,IAAaC,EACrC,CAAC,uBAAwBA,IAG3BO,EAAA,QAAMG,GAAIA,GAAKR,I,aC1G3B,MAAMa,EAAuB,qkBCgB7B,MAAMC,EAAO,CACX,CAACC,EAAoBC,SAAUC,EAC/B,CAACF,EAAoBG,OAAQC,EAC7B,CAACJ,EAAoBK,SAAUC,G,MAUpBC,EAAe,M,2CAMqB,S,kCAUlB,M,mCAUgB,E,CAE7C,gBAAAhC,GACEC,EACE,CAAC,CAAEC,KAAMC,KAAK8B,QAAS5B,SAAU,YACjC,mB,CAIJ,MAAAC,GACE,MAAM4B,EAAc/B,KAAKQ,SAAW,GAAKa,EAAKrB,KAAKQ,QAAU,GAC7D,MAAMO,EAAKiB,EAAyBhC,KAAKc,KACzC,OACEF,EAACK,EAAI,CACHC,MAAO,CACL,CAAC,uBAAuBlB,KAAKQ,UAAWR,KAAKQ,SAAW,GACxD,CAAC,kCAAmCR,KAAKiC,YAG1CF,IAAgB,IACfnB,EAAA,QACEM,MAAO,CACL,CAAC,eAAgB,KACjB,CAAC,QAAQlB,KAAKQ,UAAW,MAE3B0B,UAAWH,IAIfnB,EAAA,iBAAeO,QAAQ,UAAUD,MAAM,cACrCN,EAAA,oBAAiBZ,KAAKmC,aAAcpB,GAAIA,GACrCf,KAAK8B,UAIVlB,EAAA,QAAMwB,KAAK,iC"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as e,f as i,h as s,H as a,g as n}from"./p-6b5e91e2.js";import{c as o,O as r,k as l,v as h,j as c,r as d,a as u,E as p,n as m,l as b,i as f,G as v,w as y}from"./p-312cacae.js";const g='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(.ic-text-field-full-width){width:100%}::-moz-placeholder{color:var(--ic-color-text-tertiary);opacity:1}::placeholder{color:var(--ic-color-text-tertiary);opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs)}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:0.375rem}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(--ic-architectural-200)}input.readonly,textarea.readonly{color:var(--ic-color-text-primary)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type="number"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.char-count-text{--ic-typography-color:var(--ic-color-text-secondary);padding-right:var(--ic-space-xxxs)}.no-left-pad{padding-left:0}::slotted([slot="icon"]){fill:var(--ic-color-text-tertiary)}.has-value ::slotted([slot="icon"]){fill:var(--ic-color-text-primary)}.char-count{margin-right:calc(-1 * var(--ic-space-xxxs))}.remaining-char-count-desc{position:absolute;left:-9999px}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}input[type="search"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot="icon"]){fill:currentcolor}}';let x=0;const w=[...y,"title"];const k=class{constructor(s){t(this,s);this.getValidationText=e(this,"getValidationText",7);this.icBlur=e(this,"icBlur",7);this.icChange=e(this,"icChange",7);this.icFocus=e(this,"icFocus",7);this.icInput=e(this,"icInput",7);this.icKeydown=e(this,"icKeydown",7);this.inheritedAttributes={};this.hostMutationObserver=null;this.getMaxValueExceeded=t=>{if(this.type==="number"){this.minValueUnattained=t&&Number(t)<Number(this.min);this.maxValueExceeded=Number(t)>Number(this.max)}};this.getMaxCharactersReached=t=>{this.numChars=t.length;this.maxCharactersReached=this.maxCharacters>0?this.numChars>=this.maxCharacters:false;if(this.maxCharactersWarning&&!this.maxCharactersReached){this.maxCharactersWarning=false}};this.onInput=t=>{this.value=t.target.value;this.icInput.emit({value:this.value})};this.onBlur=t=>{const e=t.target.value;this.numChars=e.length;this.minCharactersUnattained=this.minCharacters>0?this.numChars<this.minCharacters:false;this.icBlur.emit({value:e})};this.onFocus=t=>{this.icFocus.emit({value:t.target.value})};this.hasStatus=t=>t!==""&&!this.disabled;this.handleFormReset=()=>{this.value=this.initialValue};this.hostMutationCallback=t=>{let e=false;t.forEach((({attributeName:t,type:i,addedNodes:s,removedNodes:a})=>{if(w.includes(t)){this.inheritedAttributes[t]=this.el.getAttribute(t);e=true}else if(i==="childList"){e=o(s,a,"icon")}}));if(e){i(this)}};this.numChars=0;this.maxCharactersReached=false;this.maxCharactersWarning=false;this.minCharactersUnattained=false;this.maxValueExceeded=false;this.minValueUnattained=false;this.ariaActiveDescendant=undefined;this.ariaAutocomplete=undefined;this.ariaExpanded=undefined;this.ariaOwns=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autoFocus=false;this.disabled=false;this.fullWidth=false;this.helperText="";this.hideCharCount=false;this.hideLabel=false;this.hiddenInput=true;this.inputId=`ic-text-field-input-${x++}`;this.inputmode="text";this.label=undefined;this.max=undefined;this.maxCharacters=0;this.min=undefined;this.minCharacters=0;this.name=this.inputId;this.placeholder="";this.readonly=false;this.required=false;this.resize=false;this.role=undefined;this.rows=1;this.size="medium";this.spellcheck=false;this.truncateValue=undefined;this.type="text";this.validationInline=false;this.validationInlineInternal=false;this.validationStatus="";this.validationText="";this.debounce=0;this.value="";this.initialValue=this.value}debounceChanged(){this.icChange=r(this.icChange,this.debounce)}watchValueHandler(t){let e;if(this.maxCharacters>0){e=t.substring(0,this.maxCharacters);this.value=e}else{e=t}if(this.inputEl&&this.inputEl.value!==e){this.inputEl.value=e}this.getMaxValueExceeded(e);this.getMaxCharactersReached(e);this.icChange.emit({value:e})}connectedCallback(){this.debounceChanged()}disconnectedCallback(){var t;l(this.el,this.handleFormReset);(t=this.hostMutationObserver)===null||t===void 0?void 0:t.disconnect()}componentWillLoad(){if(this.value!==this.initialValue){this.watchValueHandler(this.value)}else if(this.maxCharacters>0){this.value=this.value.substring(0,this.maxCharacters)}this.getMaxValueExceeded(this.value);this.getMaxCharactersReached(this.value);this.inheritedAttributes=h(this.el,w);if(this.readonly){this.maxValueExceeded=false;this.minValueUnattained=false}c(this.el,this.handleFormReset);d(this.disabled,this.el)}componentDidLoad(){u([{prop:this.label,propName:"label"}],"Text Field");if(this.validationInlineInternal){this.getValidationText.emit({value:this.validationText})}this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{attributes:true,childList:true})}handleKeyDown(t){this.icKeydown.emit({event:t});this.maxCharactersWarning=this.maxCharactersReached}async setFocus(){var t;(t=this.inputEl)===null||t===void 0?void 0:t.focus()}render(){const{inputId:t,name:e,label:i,required:n,size:o,placeholder:r,helperText:l,hideCharCount:h,rows:c,resize:d,disabled:u,value:y,min:g,max:x,numChars:w,readonly:k,maxCharacters:z,maxCharactersWarning:C,maxCharactersReached:$,minCharacters:I,minCharactersUnattained:F,minValueUnattained:N,maxValueExceeded:j,validationStatus:L,validationText:M,validationInline:T,validationInlineInternal:q,spellcheck:V,inputmode:W,fullWidth:B,truncateValue:O,hiddenInput:H}=this;const D=k||u;const E=j||N||F||C?C?p.Warning:p.Error:L;const K=C?`Maximum input is ${z} characters`:j?`Maximum value of ${x} exceeded`:N?`Minimum value of ${g} not met`:F?`Minimum input is ${I} characters`:M;const S=k?0:z;const U=C||j||N||E===p.Error?"assertive":"polite";const _=this.hasStatus(E)&&!(E==p.Success&&T)&&!q;const G=c>1;const R=S-w;const A=`${R} character${R===1?"":"s"} remaining.`;const J=z>0?`${t}-char-count-desc`:"";const P=`${J} ${m(t,l!=="",_)}`.trim();const Q=D&&!k;const X=!!this.el.querySelector(`[slot="icon"]`)&&!Q;const Y=`${E===p.Error}`;if(H){b(true,this.el,e,y,D)}return s(a,{class:{["ic-text-field-full-width"]:B}},s("ic-input-container",{readonly:k,disabled:D},!this.hideLabel&&s("ic-input-label",{for:t,label:i,helperText:l,required:n,disabled:Q,readonly:k}),s("ic-input-component-container",{size:o,validationStatus:E,multiLine:G,disabled:D,readonly:k,validationInline:T,fullWidth:B},X&&s("span",{class:{["readonly"]:k,["has-value"]:y.length>0},slot:"left-icon"},s("slot",{name:"icon"})),!G?s("input",Object.assign({id:t,name:e,ref:t=>this.inputEl=t,type:this.type,min:g,max:x,value:y,class:{["no-left-pad"]:!X&&k,["readonly"]:k,["truncate-value"]:O},placeholder:r?r:"",required:n,disabled:D,readonly:k,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":i,"aria-describedby":P,"aria-invalid":Y,"aria-activedescendant":this.ariaActiveDescendant,"aria-expanded":this.ariaExpanded,"aria-owns":this.ariaOwns,autocomplete:this.autocomplete,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:V,inputmode:W,role:this.role,maxlength:$?z:null,minlength:F?I:null},this.inheritedAttributes)):s("textarea",Object.assign({id:t,class:{["no-resize"]:d===false||k,["no-left-pad"]:!X&&k,["readonly"]:k},name:e,ref:t=>this.inputEl=t,value:y,rows:c,required:n,disabled:D,placeholder:r?r:"",readonly:k,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":i,"aria-describedby":P,"aria-invalid":Y,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:V,inputmode:W,maxlength:$?z:null,minlength:F?I:null},this.inheritedAttributes)),f(this.el,"clear-button")&&s("slot",{name:"clear-button"}),f(this.el,"search-submit-button")&&s("slot",{name:"search-submit-button"})),f(this.el,"menu")&&s("slot",{name:"menu"}),(!v(L)||!v(M)||S>0||j||C||F||N)&&!q&&s("ic-input-validation",{status:this.hasStatus(E)===false||E===p.Success&&T||q?"":E,message:_?K:"",ariaLiveMode:U,for:t,fullWidth:B},!k&&S>0&&s("div",{slot:"validation-message-adornment"},!h&&s("ic-typography",{variant:"caption",class:{["char-count-text"]:true}},s("span",{class:"char-count"},w,"/",S)),s("span",{class:"remaining-char-count-desc","aria-live":"polite"},A),s("span",{hidden:true,id:J},"Field can contain a maximum of ",S," characters.")))))}get el(){return n(this)}static get watchers(){return{debounce:["debounceChanged"],value:["watchValueHandler"]}}};k.style=g;export{k as ic_text_field};
|
2
|
-
//# sourceMappingURL=p-de3a5423.entry.js.map
|