@ukic/web-components 3.0.0-alpha.12 → 3.0.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/app-globals-3a1e7e63.js +7 -0
- package/dist/cjs/app-globals-3a1e7e63.js.map +1 -0
- package/dist/cjs/core.cjs.js +13 -11
- package/dist/cjs/core.cjs.js.map +1 -1
- package/dist/cjs/{helpers-eca4c27e.js → helpers-08a9ec1c.js} +31 -26
- package/dist/cjs/helpers-08a9ec1c.js.map +1 -0
- package/dist/cjs/ic-accordion-group.cjs.entry.js +31 -14
- package/dist/cjs/ic-accordion-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-accordion.cjs.entry.js +65 -42
- package/dist/cjs/ic-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-alert.cjs.entry.js +37 -16
- package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-back-to-top.cjs.entry.js +27 -15
- package/dist/cjs/ic-back-to-top.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-badge.cjs.entry.js +41 -22
- package/dist/cjs/ic-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +31 -16
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +35 -21
- package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +246 -144
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card-vertical.cjs.entry.js +53 -32
- package/dist/cjs/ic-card-vertical.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +32 -9
- package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +48 -29
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-chip.cjs.entry.js +44 -23
- package/dist/cjs/ic-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-classification-banner.cjs.entry.js +20 -4
- package/dist/cjs/ic-classification-banner.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-list.cjs.entry.js +11 -5
- package/dist/cjs/ic-data-list.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +28 -18
- package/dist/cjs/ic-data-row.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-dialog.cjs.entry.js +141 -98
- package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +35 -15
- package/dist/cjs/ic-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-empty-state.cjs.entry.js +15 -9
- package/dist/cjs/ic-empty-state.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +8 -8
- package/dist/cjs/ic-footer-link-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js +9 -10
- package/dist/cjs/ic-footer-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer.cjs.entry.js +32 -19
- package/dist/cjs/ic-footer.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-hero.cjs.entry.js +29 -17
- package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +32 -20
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +126 -68
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js +45 -17
- package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-link.cjs.entry.js +28 -21
- package/dist/cjs/ic-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-menu-group.cjs.entry.js +5 -5
- package/dist/cjs/ic-menu-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-menu-item.cjs.entry.js +20 -18
- package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-button.cjs.entry.js +25 -19
- package/dist/cjs/ic-navigation-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +45 -27
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +69 -48
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-menu.cjs.entry.js +23 -15
- package/dist/cjs/ic-navigation-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +45 -25
- package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-pagination-item.cjs.entry.js +27 -14
- package/dist/cjs/ic-pagination-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-pagination.cjs.entry.js +60 -27
- package/dist/cjs/ic-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +57 -42
- package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js +53 -28
- package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js +35 -23
- package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +153 -63
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-section-container.cjs.entry.js +12 -5
- package/dist/cjs/ic-section-container.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-select.cjs.entry.js +229 -135
- package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +104 -71
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-skeleton.cjs.entry.js +11 -4
- package/dist/cjs/ic-skeleton.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-skip-link.cjs.entry.js +54 -0
- package/dist/cjs/ic-skip-link.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-status-tag.cjs.entry.js +25 -6
- package/dist/cjs/ic-status-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +33 -32
- package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +50 -35
- package/dist/cjs/ic-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +50 -22
- package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-context.cjs.entry.js +44 -24
- package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +14 -9
- package/dist/cjs/ic-tab-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js +12 -7
- package/dist/cjs/ic-tab-panel.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab.cjs.entry.js +21 -15
- package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-text-field.cjs.entry.js +175 -69
- package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-theme.cjs.entry.js +13 -7
- package/dist/cjs/ic-theme.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toast-region.cjs.entry.js +2 -3
- package/dist/cjs/ic-toast-region.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toast.cjs.entry.js +29 -21
- package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js +61 -29
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js +81 -48
- package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +60 -31
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-typography.cjs.entry.js +53 -27
- package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
- package/dist/cjs/index-d337cd8a.js +2611 -0
- package/dist/cjs/index-d337cd8a.js.map +1 -0
- package/dist/cjs/loader.cjs.js +5 -3
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/collection/collection-manifest.json +5 -4
- package/dist/collection/components/ic-accordion/ic-accordion.js +80 -46
- package/dist/collection/components/ic-accordion/ic-accordion.js.map +1 -1
- package/dist/collection/components/ic-accordion-group/ic-accordion-group.js +49 -21
- package/dist/collection/components/ic-accordion-group/ic-accordion-group.js.map +1 -1
- package/dist/collection/components/ic-alert/ic-alert.js +58 -22
- package/dist/collection/components/ic-alert/ic-alert.js.map +1 -1
- package/dist/collection/components/ic-back-to-top/ic-back-to-top.js +35 -16
- package/dist/collection/components/ic-back-to-top/ic-back-to-top.js.map +1 -1
- package/dist/collection/components/ic-badge/ic-badge.js +69 -32
- package/dist/collection/components/ic-badge/ic-badge.js.map +1 -1
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js +49 -24
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js.map +1 -1
- package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js +41 -19
- package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js.map +1 -1
- package/dist/collection/components/ic-button/ic-button.css +0 -8
- package/dist/collection/components/ic-button/ic-button.js +211 -98
- package/dist/collection/components/ic-button/ic-button.js.map +1 -1
- package/dist/collection/components/ic-card-vertical/ic-card-vertical.js +88 -42
- package/dist/collection/components/ic-card-vertical/ic-card-vertical.js.map +1 -1
- package/dist/collection/components/ic-checkbox/ic-checkbox.js +91 -45
- package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +62 -20
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
- package/dist/collection/components/ic-chip/ic-chip.js +67 -30
- package/dist/collection/components/ic-chip/ic-chip.js.map +1 -1
- package/dist/collection/components/ic-classification-banner/ic-classification-banner.js +32 -7
- package/dist/collection/components/ic-classification-banner/ic-classification-banner.js.map +1 -1
- package/dist/collection/components/ic-data-list/ic-data-list.js +18 -7
- package/dist/collection/components/ic-data-list/ic-data-list.js.map +1 -1
- package/dist/collection/components/ic-data-row/ic-data-row.js +38 -21
- package/dist/collection/components/ic-data-row/ic-data-row.js.map +1 -1
- package/dist/collection/components/ic-dialog/ic-dialog.js +176 -110
- package/dist/collection/components/ic-dialog/ic-dialog.js.map +1 -1
- package/dist/collection/components/ic-dialog/ic-dialog.stories.js +100 -49
- package/dist/collection/components/ic-divider/ic-divider.js +55 -22
- package/dist/collection/components/ic-divider/ic-divider.js.map +1 -1
- package/dist/collection/components/ic-divider/ic-divider.stories.js +2 -2
- package/dist/collection/components/ic-empty-state/ic-empty-state.js +32 -13
- package/dist/collection/components/ic-empty-state/ic-empty-state.js.map +1 -1
- package/dist/collection/components/ic-footer/ic-footer.js +49 -25
- package/dist/collection/components/ic-footer/ic-footer.js.map +1 -1
- package/dist/collection/components/ic-footer-link/ic-footer-link.js +24 -15
- package/dist/collection/components/ic-footer-link/ic-footer-link.js.map +1 -1
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js +6 -5
- 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 +1 -1
- package/dist/collection/components/ic-hero/ic-hero.js +54 -25
- package/dist/collection/components/ic-hero/ic-hero.js.map +1 -1
- package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js +40 -21
- 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 +9 -0
- package/dist/collection/components/ic-input-component-container/ic-input-component-container.js +55 -20
- package/dist/collection/components/ic-input-component-container/ic-input-component-container.js.map +1 -1
- package/dist/collection/components/ic-input-container/ic-input-container.js +16 -6
- package/dist/collection/components/ic-input-container/ic-input-container.js.map +1 -1
- package/dist/collection/components/ic-input-label/ic-input-label.js +48 -11
- package/dist/collection/components/ic-input-label/ic-input-label.js.map +1 -1
- package/dist/collection/components/ic-input-validation/ic-input-validation.js +31 -14
- package/dist/collection/components/ic-input-validation/ic-input-validation.js.map +1 -1
- package/dist/collection/components/ic-link/ic-link.js +49 -28
- package/dist/collection/components/ic-link/ic-link.js.map +1 -1
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js +124 -66
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js.map +1 -1
- package/dist/collection/components/ic-menu/ic-menu.js +136 -74
- package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
- package/dist/collection/components/ic-menu/ic-menu.types.js.map +1 -1
- package/dist/collection/components/ic-menu-group/ic-menu-group.js +4 -5
- package/dist/collection/components/ic-menu-group/ic-menu-group.js.map +1 -1
- package/dist/collection/components/ic-menu-item/ic-menu-item.js +53 -28
- package/dist/collection/components/ic-menu-item/ic-menu-item.js.map +1 -1
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.js +44 -23
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.js.map +1 -1
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js +83 -28
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js.map +1 -1
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.types.js +2 -0
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.types.js.map +1 -0
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +107 -63
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
- package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js +30 -17
- package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js.map +1 -1
- package/dist/collection/components/ic-page-header/ic-page-header.js +68 -31
- package/dist/collection/components/ic-page-header/ic-page-header.js.map +1 -1
- package/dist/collection/components/ic-pagination/ic-pagination.js +100 -44
- package/dist/collection/components/ic-pagination/ic-pagination.js.map +1 -1
- package/dist/collection/components/ic-pagination-item/ic-pagination-item.js +48 -22
- package/dist/collection/components/ic-pagination-item/ic-pagination-item.js.map +1 -1
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +80 -52
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map +1 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.js +87 -41
- package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
- package/dist/collection/components/ic-radio-option/ic-radio-option.js +64 -33
- package/dist/collection/components/ic-radio-option/ic-radio-option.js.map +1 -1
- package/dist/collection/components/ic-search-bar/ic-search-bar.js +252 -101
- package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
- package/dist/collection/components/ic-search-bar/ic-search-bar.types.js.map +1 -1
- package/dist/collection/components/ic-section-container/ic-section-container.js +15 -5
- package/dist/collection/components/ic-section-container/ic-section-container.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select.js +329 -176
- package/dist/collection/components/ic-select/ic-select.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.css +1 -2
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +143 -89
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
- package/dist/collection/components/ic-skeleton/ic-skeleton.js +14 -4
- package/dist/collection/components/ic-skeleton/ic-skeleton.js.map +1 -1
- package/dist/collection/components/ic-skip-link/ic-skip-link.css +26 -0
- package/dist/collection/components/ic-skip-link/ic-skip-link.js +202 -0
- package/dist/collection/components/ic-skip-link/ic-skip-link.js.map +1 -0
- package/dist/collection/components/ic-skip-link/ic-skip-link.stories.js +160 -0
- package/dist/collection/components/ic-status-tag/ic-status-tag.js +41 -9
- package/dist/collection/components/ic-status-tag/ic-status-tag.js.map +1 -1
- package/dist/collection/components/ic-step/ic-step.js +66 -40
- package/dist/collection/components/ic-step/ic-step.js.map +1 -1
- package/dist/collection/components/ic-stepper/ic-stepper.js +61 -37
- package/dist/collection/components/ic-stepper/ic-stepper.js.map +1 -1
- package/dist/collection/components/ic-switch/ic-switch.js +72 -27
- package/dist/collection/components/ic-switch/ic-switch.js.map +1 -1
- package/dist/collection/components/ic-tab/ic-tab.js +40 -21
- package/dist/collection/components/ic-tab/ic-tab.js.map +1 -1
- package/dist/collection/components/ic-tab-context/ic-tab-context.js +59 -29
- package/dist/collection/components/ic-tab-context/ic-tab-context.js.map +1 -1
- package/dist/collection/components/ic-tab-group/ic-tab-group.js +21 -9
- package/dist/collection/components/ic-tab-group/ic-tab-group.js.map +1 -1
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.js +26 -10
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.js.map +1 -1
- package/dist/collection/components/ic-text-field/ic-text-field.js +321 -140
- package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
- package/dist/collection/components/ic-theme/ic-theme.js +19 -9
- package/dist/collection/components/ic-theme/ic-theme.js.map +1 -1
- package/dist/collection/components/ic-toast/ic-toast.js +49 -28
- package/dist/collection/components/ic-toast/ic-toast.js.map +1 -1
- package/dist/collection/components/ic-toast-region/ic-toast-region.js +6 -5
- package/dist/collection/components/ic-toast-region/ic-toast-region.js.map +1 -1
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +116 -60
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map +1 -1
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js +90 -35
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js.map +1 -1
- package/dist/collection/components/ic-tooltip/ic-tooltip.js +65 -33
- package/dist/collection/components/ic-tooltip/ic-tooltip.js.map +1 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js +91 -45
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js.map +1 -1
- package/dist/collection/components/ic-typography/ic-typography.js +73 -32
- package/dist/collection/components/ic-typography/ic-typography.js.map +1 -1
- package/dist/collection/utils/helpers.js +29 -24
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/testa11y.helpers.js +2 -1
- package/dist/collection/utils/testa11y.helpers.js.map +1 -1
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/components/helpers.js +29 -24
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/ic-accordion-group.js +29 -12
- package/dist/components/ic-accordion-group.js.map +1 -1
- package/dist/components/ic-accordion.js +63 -40
- package/dist/components/ic-accordion.js.map +1 -1
- package/dist/components/ic-alert.js +35 -14
- package/dist/components/ic-alert.js.map +1 -1
- package/dist/components/ic-back-to-top.js +25 -13
- package/dist/components/ic-back-to-top.js.map +1 -1
- package/dist/components/ic-badge.js +39 -20
- package/dist/components/ic-badge.js.map +1 -1
- package/dist/components/ic-breadcrumb-group.js +29 -14
- package/dist/components/ic-breadcrumb-group.js.map +1 -1
- package/dist/components/ic-breadcrumb2.js +33 -19
- package/dist/components/ic-breadcrumb2.js.map +1 -1
- package/dist/components/ic-button2.js +113 -63
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-card-vertical.js +51 -30
- package/dist/components/ic-card-vertical.js.map +1 -1
- package/dist/components/ic-checkbox-group.js +30 -7
- package/dist/components/ic-checkbox-group.js.map +1 -1
- package/dist/components/ic-checkbox.js +46 -27
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/components/ic-chip.js +42 -21
- package/dist/components/ic-chip.js.map +1 -1
- package/dist/components/ic-classification-banner.js +19 -3
- package/dist/components/ic-classification-banner.js.map +1 -1
- package/dist/components/ic-data-list.js +10 -4
- package/dist/components/ic-data-list.js.map +1 -1
- package/dist/components/ic-data-row.js +27 -17
- package/dist/components/ic-data-row.js.map +1 -1
- package/dist/components/ic-dialog.js +139 -96
- package/dist/components/ic-dialog.js.map +1 -1
- package/dist/components/ic-divider2.js +33 -13
- package/dist/components/ic-divider2.js.map +1 -1
- package/dist/components/ic-empty-state.js +13 -7
- package/dist/components/ic-empty-state.js.map +1 -1
- package/dist/components/ic-footer-link-group.js +6 -6
- package/dist/components/ic-footer-link-group.js.map +1 -1
- package/dist/components/ic-footer-link.js +7 -8
- package/dist/components/ic-footer-link.js.map +1 -1
- package/dist/components/ic-footer.js +31 -18
- package/dist/components/ic-footer.js.map +1 -1
- package/dist/components/ic-hero.js +27 -15
- package/dist/components/ic-hero.js.map +1 -1
- package/dist/components/ic-horizontal-scroll2.js +30 -18
- package/dist/components/ic-horizontal-scroll2.js.map +1 -1
- package/dist/components/ic-input-component-container2.js +31 -9
- package/dist/components/ic-input-component-container2.js.map +1 -1
- package/dist/components/ic-input-container2.js +12 -5
- package/dist/components/ic-input-container2.js.map +1 -1
- package/dist/components/ic-input-label2.js +28 -8
- package/dist/components/ic-input-label2.js.map +1 -1
- package/dist/components/ic-input-validation2.js +15 -7
- package/dist/components/ic-input-validation2.js.map +1 -1
- package/dist/components/ic-link2.js +26 -19
- package/dist/components/ic-link2.js.map +1 -1
- package/dist/components/ic-loading-indicator2.js +89 -54
- package/dist/components/ic-loading-indicator2.js.map +1 -1
- package/dist/components/ic-menu-group.js +3 -3
- package/dist/components/ic-menu-group.js.map +1 -1
- package/dist/components/ic-menu-item2.js +18 -16
- package/dist/components/ic-menu-item2.js.map +1 -1
- package/dist/components/ic-menu2.js +81 -52
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-button.js +23 -17
- package/dist/components/ic-navigation-button.js.map +1 -1
- package/dist/components/ic-navigation-group.js +45 -27
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/components/ic-navigation-item.js +68 -47
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-navigation-menu2.js +21 -13
- package/dist/components/ic-navigation-menu2.js.map +1 -1
- package/dist/components/ic-page-header.js +44 -24
- package/dist/components/ic-page-header.js.map +1 -1
- package/dist/components/ic-pagination-item2.js +25 -12
- package/dist/components/ic-pagination-item2.js.map +1 -1
- package/dist/components/ic-pagination.js +58 -25
- package/dist/components/ic-pagination.js.map +1 -1
- package/dist/components/ic-popover-menu.js +55 -40
- package/dist/components/ic-popover-menu.js.map +1 -1
- package/dist/components/ic-radio-group.js +51 -26
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-radio-option.js +33 -21
- package/dist/components/ic-radio-option.js.map +1 -1
- package/dist/components/ic-search-bar.js +151 -61
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-section-container2.js +11 -4
- package/dist/components/ic-section-container2.js.map +1 -1
- package/dist/components/ic-select.js +227 -133
- package/dist/components/ic-select.js.map +1 -1
- package/dist/components/ic-side-navigation.js +103 -70
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-skeleton.js +10 -3
- package/dist/components/ic-skeleton.js.map +1 -1
- package/dist/components/ic-skip-link.d.ts +11 -0
- package/dist/components/ic-skip-link.js +82 -0
- package/dist/components/ic-skip-link.js.map +1 -0
- package/dist/components/ic-status-tag.js +23 -4
- package/dist/components/ic-status-tag.js.map +1 -1
- package/dist/components/ic-step.js +31 -30
- package/dist/components/ic-step.js.map +1 -1
- package/dist/components/ic-stepper.js +48 -33
- package/dist/components/ic-stepper.js.map +1 -1
- package/dist/components/ic-switch.js +48 -20
- package/dist/components/ic-switch.js.map +1 -1
- package/dist/components/ic-tab-context.js +43 -23
- package/dist/components/ic-tab-context.js.map +1 -1
- package/dist/components/ic-tab-group.js +12 -7
- package/dist/components/ic-tab-group.js.map +1 -1
- package/dist/components/ic-tab-panel.js +11 -6
- package/dist/components/ic-tab-panel.js.map +1 -1
- package/dist/components/ic-tab.js +19 -13
- package/dist/components/ic-tab.js.map +1 -1
- package/dist/components/ic-text-field.js +173 -67
- package/dist/components/ic-text-field.js.map +1 -1
- package/dist/components/ic-theme.js +11 -5
- package/dist/components/ic-theme.js.map +1 -1
- package/dist/components/ic-toast-region.js +1 -2
- package/dist/components/ic-toast-region.js.map +1 -1
- package/dist/components/ic-toast.js +27 -19
- package/dist/components/ic-toast.js.map +1 -1
- package/dist/components/ic-toggle-button-group.js +59 -27
- package/dist/components/ic-toggle-button-group.js.map +1 -1
- package/dist/components/ic-toggle-button.js +79 -46
- package/dist/components/ic-toggle-button.js.map +1 -1
- package/dist/components/ic-tooltip2.js +42 -25
- package/dist/components/ic-tooltip2.js.map +1 -1
- package/dist/components/ic-top-navigation.js +59 -30
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/components/ic-typography2.js +51 -25
- package/dist/components/ic-typography2.js.map +1 -1
- package/dist/core/core.css +38 -27
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/index.esm.js.map +1 -1
- package/dist/core/p-052d1ff0.entry.js +2 -0
- package/dist/core/p-052d1ff0.entry.js.map +1 -0
- package/dist/core/p-08fbea60.entry.js +2 -0
- package/dist/core/p-08fbea60.entry.js.map +1 -0
- package/dist/core/p-0b757d78.entry.js +2 -0
- package/dist/core/p-0b757d78.entry.js.map +1 -0
- package/dist/core/{p-73a208c7.entry.js → p-0f34465d.entry.js} +2 -2
- package/dist/core/p-0f34465d.entry.js.map +1 -0
- package/dist/core/p-111b3186.entry.js +2 -0
- package/dist/core/p-111b3186.entry.js.map +1 -0
- package/dist/core/p-144a31ec.entry.js +2 -0
- package/dist/core/p-144a31ec.entry.js.map +1 -0
- package/dist/core/{p-ca11666f.entry.js → p-180ea8ac.entry.js} +2 -2
- package/dist/core/p-180ea8ac.entry.js.map +1 -0
- package/dist/core/{p-39ab6387.entry.js → p-196e3d33.entry.js} +2 -2
- package/dist/core/p-196e3d33.entry.js.map +1 -0
- package/dist/core/{p-96b4ca6e.entry.js → p-1d6638c8.entry.js} +2 -2
- package/dist/core/p-1d6638c8.entry.js.map +1 -0
- package/dist/core/p-1d9a929b.entry.js +2 -0
- package/dist/core/p-1d9a929b.entry.js.map +1 -0
- package/dist/core/{p-27274ca8.entry.js → p-1fccec19.entry.js} +2 -2
- package/dist/core/p-1fccec19.entry.js.map +1 -0
- package/dist/core/p-269f841d.js +2 -0
- package/dist/core/p-269f841d.js.map +1 -0
- package/dist/core/{p-094f51b6.entry.js → p-27de359f.entry.js} +2 -2
- package/dist/core/p-27de359f.entry.js.map +1 -0
- package/dist/core/p-2cb55e86.entry.js +2 -0
- package/dist/core/p-2cb55e86.entry.js.map +1 -0
- package/dist/core/p-30a262d2.entry.js +2 -0
- package/dist/core/p-30a262d2.entry.js.map +1 -0
- package/dist/core/p-3b185c32.js.map +1 -1
- package/dist/core/{p-a178d53c.entry.js → p-40bc1f3e.entry.js} +2 -2
- package/dist/core/p-40bc1f3e.entry.js.map +1 -0
- package/dist/core/p-426ec638.js.map +1 -1
- package/dist/core/p-47b46637.entry.js +2 -0
- package/dist/core/p-47b46637.entry.js.map +1 -0
- package/dist/core/p-4a5ab31e.entry.js +2 -0
- package/dist/core/p-4a5ab31e.entry.js.map +1 -0
- package/dist/core/p-4e4014cd.entry.js +2 -0
- package/dist/core/p-4e4014cd.entry.js.map +1 -0
- package/dist/core/{p-25d3c3a6.entry.js → p-55eb89cc.entry.js} +2 -2
- package/dist/core/p-55eb89cc.entry.js.map +1 -0
- package/dist/core/p-59287779.entry.js +2 -0
- package/dist/core/p-59287779.entry.js.map +1 -0
- package/dist/core/p-59fc58e1.entry.js +2 -0
- package/dist/core/p-59fc58e1.entry.js.map +1 -0
- package/dist/core/p-5b7d8ee9.entry.js +2 -0
- package/dist/core/p-5b7d8ee9.entry.js.map +1 -0
- package/dist/core/{p-b404b307.entry.js → p-5fa5ba50.entry.js} +2 -2
- package/dist/core/p-5fa5ba50.entry.js.map +1 -0
- package/dist/core/p-68a5aaff.js.map +1 -1
- package/dist/core/{p-bbd4f487.entry.js → p-6c8e72b4.entry.js} +2 -2
- package/dist/core/p-6c8e72b4.entry.js.map +1 -0
- package/dist/core/p-6fdb8a79.entry.js +2 -0
- package/dist/core/p-6fdb8a79.entry.js.map +1 -0
- package/dist/core/{p-146b2788.entry.js → p-72140621.entry.js} +2 -2
- package/dist/core/p-72140621.entry.js.map +1 -0
- package/dist/core/p-76bdbc98.entry.js +2 -0
- package/dist/core/p-76bdbc98.entry.js.map +1 -0
- package/dist/core/{p-4cfe1dd8.entry.js → p-78c3ca49.entry.js} +2 -2
- package/dist/core/p-78c3ca49.entry.js.map +1 -0
- package/dist/core/p-78c51cba.entry.js +2 -0
- package/dist/core/p-78c51cba.entry.js.map +1 -0
- package/dist/core/{p-3d565739.entry.js → p-7ea79205.entry.js} +2 -2
- package/dist/core/p-7ea79205.entry.js.map +1 -0
- package/dist/core/p-8577de91.entry.js +2 -0
- package/dist/core/p-8577de91.entry.js.map +1 -0
- package/dist/core/{p-26bc7c62.entry.js → p-8856dff4.entry.js} +2 -2
- package/dist/core/p-8856dff4.entry.js.map +1 -0
- package/dist/core/p-8870d5d8.entry.js +2 -0
- package/dist/core/p-8870d5d8.entry.js.map +1 -0
- package/dist/core/{p-00587c99.entry.js → p-8b928cc9.entry.js} +2 -2
- package/dist/core/p-8b928cc9.entry.js.map +1 -0
- package/dist/core/p-8d1bee7a.entry.js +2 -0
- package/dist/core/p-8d1bee7a.entry.js.map +1 -0
- package/dist/core/p-8e4e97b4.js +3 -0
- package/dist/core/p-8e4e97b4.js.map +1 -0
- package/dist/core/p-8f319e1e.entry.js +2 -0
- package/dist/core/p-8f319e1e.entry.js.map +1 -0
- package/dist/core/p-90de3f5d.entry.js +2 -0
- package/dist/core/p-90de3f5d.entry.js.map +1 -0
- package/dist/core/p-912c8594.entry.js +2 -0
- package/dist/core/p-912c8594.entry.js.map +1 -0
- package/dist/core/{p-67b3cd55.entry.js → p-9206379d.entry.js} +2 -2
- package/dist/core/p-9206379d.entry.js.map +1 -0
- package/dist/core/p-94748b96.entry.js +2 -0
- package/dist/core/p-94748b96.entry.js.map +1 -0
- package/dist/core/{p-d7ccd00f.entry.js → p-98f906ba.entry.js} +2 -2
- package/dist/core/p-98f906ba.entry.js.map +1 -0
- package/dist/core/{p-5b836707.entry.js → p-999102ee.entry.js} +2 -2
- package/dist/core/p-999102ee.entry.js.map +1 -0
- package/dist/core/p-9b741f96.entry.js +2 -0
- package/dist/core/p-9b741f96.entry.js.map +1 -0
- package/dist/core/p-9bcd2c77.entry.js +2 -0
- package/dist/core/p-9bcd2c77.entry.js.map +1 -0
- package/dist/core/p-9ee2fe04.entry.js +2 -0
- package/dist/core/p-9ee2fe04.entry.js.map +1 -0
- package/dist/core/{p-e2cf6e7e.entry.js → p-a56ec6d8.entry.js} +2 -2
- package/dist/core/p-a56ec6d8.entry.js.map +1 -0
- package/dist/core/p-abf767e3.entry.js +2 -0
- package/dist/core/p-abf767e3.entry.js.map +1 -0
- package/dist/core/p-b594bf26.entry.js +2 -0
- package/dist/core/p-b594bf26.entry.js.map +1 -0
- package/dist/core/{p-6e94c79c.entry.js → p-bd802c2f.entry.js} +2 -2
- package/dist/core/p-bd802c2f.entry.js.map +1 -0
- package/dist/core/p-bfee1e84.entry.js +2 -0
- package/dist/core/p-bfee1e84.entry.js.map +1 -0
- package/dist/core/{p-7f984e25.entry.js → p-c19cdc86.entry.js} +2 -2
- package/dist/core/p-c19cdc86.entry.js.map +1 -0
- package/dist/core/p-c2e091d7.js.map +1 -1
- package/dist/core/{p-73d6092d.entry.js → p-c3785d57.entry.js} +2 -2
- package/dist/core/p-c3785d57.entry.js.map +1 -0
- package/dist/core/{p-7b26ef60.entry.js → p-caa46d81.entry.js} +2 -2
- package/dist/core/p-caa46d81.entry.js.map +1 -0
- package/dist/core/{p-720428a3.entry.js → p-ce0fb53a.entry.js} +2 -2
- package/dist/core/p-ce0fb53a.entry.js.map +1 -0
- package/dist/core/p-de7542fa.entry.js +2 -0
- package/dist/core/p-de7542fa.entry.js.map +1 -0
- package/dist/core/{p-07aaf9c4.entry.js → p-df56bc50.entry.js} +2 -2
- package/dist/core/p-df56bc50.entry.js.map +1 -0
- package/dist/core/p-e1255160.js +2 -0
- package/dist/core/p-e1255160.js.map +1 -0
- package/dist/core/p-e25feba1.entry.js +2 -0
- package/dist/core/p-e25feba1.entry.js.map +1 -0
- package/dist/core/{p-c1db155d.entry.js → p-e30c6d79.entry.js} +2 -2
- package/dist/core/p-e30c6d79.entry.js.map +1 -0
- package/dist/core/p-f074ef5b.js.map +1 -1
- package/dist/core/{p-abdc2912.entry.js → p-f486d4f4.entry.js} +2 -2
- package/dist/core/p-f486d4f4.entry.js.map +1 -0
- package/dist/core/{p-a87d13b3.entry.js → p-fbce5f9a.entry.js} +2 -2
- package/dist/core/p-fbce5f9a.entry.js.map +1 -0
- package/dist/esm/app-globals-0f993ce5.js +5 -0
- package/dist/esm/app-globals-0f993ce5.js.map +1 -0
- package/dist/esm/core.js +14 -12
- package/dist/esm/core.js.map +1 -1
- package/dist/esm/{helpers-a72a277b.js → helpers-de6293bf.js} +31 -26
- package/dist/esm/helpers-de6293bf.js.map +1 -0
- package/dist/esm/ic-accordion-group.entry.js +31 -14
- package/dist/esm/ic-accordion-group.entry.js.map +1 -1
- package/dist/esm/ic-accordion.entry.js +65 -42
- package/dist/esm/ic-accordion.entry.js.map +1 -1
- package/dist/esm/ic-alert.entry.js +37 -16
- package/dist/esm/ic-alert.entry.js.map +1 -1
- package/dist/esm/ic-back-to-top.entry.js +27 -15
- package/dist/esm/ic-back-to-top.entry.js.map +1 -1
- package/dist/esm/ic-badge.entry.js +41 -22
- package/dist/esm/ic-badge.entry.js.map +1 -1
- package/dist/esm/ic-breadcrumb-group.entry.js +31 -16
- package/dist/esm/ic-breadcrumb-group.entry.js.map +1 -1
- package/dist/esm/ic-breadcrumb.entry.js +35 -21
- package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ic-button_3.entry.js +246 -144
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card-vertical.entry.js +53 -32
- package/dist/esm/ic-card-vertical.entry.js.map +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +32 -9
- package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
- package/dist/esm/ic-checkbox.entry.js +48 -29
- package/dist/esm/ic-checkbox.entry.js.map +1 -1
- package/dist/esm/ic-chip.entry.js +44 -23
- package/dist/esm/ic-chip.entry.js.map +1 -1
- package/dist/esm/ic-classification-banner.entry.js +20 -4
- package/dist/esm/ic-classification-banner.entry.js.map +1 -1
- package/dist/esm/ic-data-list.entry.js +11 -5
- package/dist/esm/ic-data-list.entry.js.map +1 -1
- package/dist/esm/ic-data-row.entry.js +28 -18
- package/dist/esm/ic-data-row.entry.js.map +1 -1
- package/dist/esm/ic-dialog.entry.js +141 -98
- package/dist/esm/ic-dialog.entry.js.map +1 -1
- package/dist/esm/ic-divider.entry.js +35 -15
- package/dist/esm/ic-divider.entry.js.map +1 -1
- package/dist/esm/ic-empty-state.entry.js +15 -9
- package/dist/esm/ic-empty-state.entry.js.map +1 -1
- package/dist/esm/ic-footer-link-group.entry.js +8 -8
- package/dist/esm/ic-footer-link-group.entry.js.map +1 -1
- package/dist/esm/ic-footer-link.entry.js +9 -10
- package/dist/esm/ic-footer-link.entry.js.map +1 -1
- package/dist/esm/ic-footer.entry.js +32 -19
- package/dist/esm/ic-footer.entry.js.map +1 -1
- package/dist/esm/ic-hero.entry.js +29 -17
- package/dist/esm/ic-hero.entry.js.map +1 -1
- package/dist/esm/ic-horizontal-scroll.entry.js +32 -20
- package/dist/esm/ic-horizontal-scroll.entry.js.map +1 -1
- package/dist/esm/ic-input-component-container_3.entry.js +126 -68
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-input-label_2.entry.js +45 -17
- package/dist/esm/ic-input-label_2.entry.js.map +1 -1
- package/dist/esm/ic-link.entry.js +28 -21
- package/dist/esm/ic-link.entry.js.map +1 -1
- package/dist/esm/ic-menu-group.entry.js +5 -5
- package/dist/esm/ic-menu-group.entry.js.map +1 -1
- package/dist/esm/ic-menu-item.entry.js +20 -18
- package/dist/esm/ic-menu-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-button.entry.js +25 -19
- package/dist/esm/ic-navigation-button.entry.js.map +1 -1
- package/dist/esm/ic-navigation-group.entry.js +45 -27
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +69 -48
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-menu.entry.js +23 -15
- package/dist/esm/ic-navigation-menu.entry.js.map +1 -1
- package/dist/esm/ic-page-header.entry.js +45 -25
- package/dist/esm/ic-page-header.entry.js.map +1 -1
- package/dist/esm/ic-pagination-item.entry.js +27 -14
- package/dist/esm/ic-pagination-item.entry.js.map +1 -1
- package/dist/esm/ic-pagination.entry.js +60 -27
- package/dist/esm/ic-pagination.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +57 -42
- package/dist/esm/ic-popover-menu.entry.js.map +1 -1
- package/dist/esm/ic-radio-group.entry.js +53 -28
- package/dist/esm/ic-radio-group.entry.js.map +1 -1
- package/dist/esm/ic-radio-option.entry.js +35 -23
- package/dist/esm/ic-radio-option.entry.js.map +1 -1
- package/dist/esm/ic-search-bar.entry.js +153 -63
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-section-container.entry.js +12 -5
- package/dist/esm/ic-section-container.entry.js.map +1 -1
- package/dist/esm/ic-select.entry.js +229 -135
- package/dist/esm/ic-select.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +104 -71
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-skeleton.entry.js +11 -4
- package/dist/esm/ic-skeleton.entry.js.map +1 -1
- package/dist/esm/ic-skip-link.entry.js +50 -0
- package/dist/esm/ic-skip-link.entry.js.map +1 -0
- package/dist/esm/ic-status-tag.entry.js +25 -6
- package/dist/esm/ic-status-tag.entry.js.map +1 -1
- package/dist/esm/ic-step.entry.js +33 -32
- package/dist/esm/ic-step.entry.js.map +1 -1
- package/dist/esm/ic-stepper.entry.js +50 -35
- package/dist/esm/ic-stepper.entry.js.map +1 -1
- package/dist/esm/ic-switch.entry.js +50 -22
- package/dist/esm/ic-switch.entry.js.map +1 -1
- package/dist/esm/ic-tab-context.entry.js +44 -24
- package/dist/esm/ic-tab-context.entry.js.map +1 -1
- package/dist/esm/ic-tab-group.entry.js +14 -9
- package/dist/esm/ic-tab-group.entry.js.map +1 -1
- package/dist/esm/ic-tab-panel.entry.js +12 -7
- package/dist/esm/ic-tab-panel.entry.js.map +1 -1
- package/dist/esm/ic-tab.entry.js +21 -15
- package/dist/esm/ic-tab.entry.js.map +1 -1
- package/dist/esm/ic-text-field.entry.js +175 -69
- package/dist/esm/ic-text-field.entry.js.map +1 -1
- package/dist/esm/ic-theme.entry.js +13 -7
- package/dist/esm/ic-theme.entry.js.map +1 -1
- package/dist/esm/ic-toast-region.entry.js +2 -3
- package/dist/esm/ic-toast-region.entry.js.map +1 -1
- package/dist/esm/ic-toast.entry.js +29 -21
- package/dist/esm/ic-toast.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button-group.entry.js +61 -29
- package/dist/esm/ic-toggle-button-group.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button.entry.js +81 -48
- package/dist/esm/ic-toggle-button.entry.js.map +1 -1
- package/dist/esm/ic-top-navigation.entry.js +60 -31
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/ic-typography.entry.js +53 -27
- package/dist/esm/ic-typography.entry.js.map +1 -1
- package/dist/esm/index-a7a720e7.js +2580 -0
- package/dist/esm/index-a7a720e7.js.map +1 -0
- package/dist/esm/loader.js +6 -4
- package/dist/esm/loader.js.map +1 -1
- package/dist/types/components/ic-accordion/ic-accordion.d.ts +3 -3
- package/dist/types/components/ic-accordion-group/ic-accordion-group.d.ts +5 -5
- package/dist/types/components/ic-alert/ic-alert.d.ts +1 -1
- package/dist/types/components/ic-back-to-top/ic-back-to-top.d.ts +1 -1
- package/dist/types/components/ic-badge/ic-badge.d.ts +1 -1
- package/dist/types/components/ic-breadcrumb/ic-breadcrumb.d.ts +1 -1
- package/dist/types/components/ic-breadcrumb-group/ic-breadcrumb-group.d.ts +2 -2
- package/dist/types/components/ic-button/ic-button.d.ts +6 -6
- package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +10 -10
- package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts +6 -6
- package/dist/types/components/ic-data-list/ic-data-list.d.ts +1 -1
- package/dist/types/components/ic-data-row/ic-data-row.d.ts +2 -2
- package/dist/types/components/ic-dialog/ic-dialog.d.ts +9 -6
- package/dist/types/components/ic-divider/ic-divider.d.ts +3 -3
- package/dist/types/components/ic-footer/ic-footer.d.ts +4 -4
- package/dist/types/components/ic-hero/ic-hero.d.ts +3 -3
- package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts +6 -6
- package/dist/types/components/ic-input-label/ic-input-label.d.ts +2 -2
- package/dist/types/components/ic-input-validation/ic-input-validation.d.ts +4 -4
- package/dist/types/components/ic-loading-indicator/ic-loading-indicator.d.ts +2 -2
- package/dist/types/components/ic-menu/ic-menu.d.ts +10 -10
- package/dist/types/components/ic-menu/ic-menu.types.d.ts +1 -1
- package/dist/types/components/ic-menu-item/ic-menu-item.d.ts +2 -2
- package/dist/types/components/ic-navigation-button/ic-navigation-button.d.ts +1 -1
- package/dist/types/components/ic-navigation-group/ic-navigation-group.d.ts +11 -4
- package/dist/types/components/ic-navigation-group/ic-navigation-group.types.d.ts +3 -0
- package/dist/types/components/ic-navigation-item/ic-navigation-item.d.ts +8 -8
- package/dist/types/components/ic-navigation-menu/ic-navigation-menu.d.ts +3 -3
- package/dist/types/components/ic-pagination/ic-pagination.d.ts +9 -9
- package/dist/types/components/ic-pagination-item/ic-pagination-item.d.ts +4 -4
- package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts +4 -4
- package/dist/types/components/ic-radio-group/ic-radio-group.d.ts +8 -8
- package/dist/types/components/ic-radio-option/ic-radio-option.d.ts +6 -6
- package/dist/types/components/ic-search-bar/ic-search-bar.d.ts +12 -12
- package/dist/types/components/ic-search-bar/ic-search-bar.types.d.ts +1 -1
- package/dist/types/components/ic-select/ic-select.d.ts +20 -20
- package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts +12 -12
- package/dist/types/components/ic-skip-link/ic-skip-link.d.ts +33 -0
- package/dist/types/components/ic-stepper/ic-stepper.d.ts +1 -1
- package/dist/types/components/ic-switch/ic-switch.d.ts +1 -1
- package/dist/types/components/ic-tab/ic-tab.d.ts +2 -2
- package/dist/types/components/ic-text-field/ic-text-field.d.ts +34 -33
- package/dist/types/components/ic-theme/ic-theme.d.ts +2 -2
- package/dist/types/components/ic-toast/ic-toast.d.ts +3 -3
- package/dist/types/components/ic-toast-region/ic-toast-region.d.ts +1 -1
- package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts +3 -3
- package/dist/types/components/ic-top-navigation/ic-top-navigation.d.ts +9 -9
- package/dist/types/components/ic-typography/ic-typography.d.ts +1 -1
- package/dist/types/components.d.ts +281 -195
- package/dist/types/stencil-public-runtime.d.ts +9 -10
- package/dist/types/utils/helpers.d.ts +10 -10
- package/dist/types/utils/types.d.ts +8 -4
- package/hydrate/index.d.ts +53 -12
- package/hydrate/index.js +32662 -20747
- package/hydrate/index.mjs +34265 -0
- package/hydrate/package.json +7 -1
- package/loader/cdn.js +1 -3
- package/loader/index.cjs.js +1 -3
- package/loader/index.d.ts +3 -0
- package/loader/index.es2017.js +1 -3
- package/loader/index.js +1 -3
- package/package.json +3 -3
- package/vscode-data.json +50 -330
- package/dist/cjs/helpers-eca4c27e.js.map +0 -1
- package/dist/cjs/index-f982899d.js +0 -3047
- package/dist/cjs/index-f982899d.js.map +0 -1
- package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js +0 -349
- package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js.map +0 -1
- package/dist/collection/components/ic-accordion-group/test/basic/ic-accordion-group.spec.js +0 -129
- package/dist/collection/components/ic-accordion-group/test/basic/ic-accordion-group.spec.js.map +0 -1
- package/dist/collection/components/ic-alert/test/basic/ic-alert.spec.js +0 -329
- package/dist/collection/components/ic-alert/test/basic/ic-alert.spec.js.map +0 -1
- package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.spec.js +0 -159
- package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.spec.js.map +0 -1
- package/dist/collection/components/ic-badge/test/basic/ic-badge.spec.js +0 -450
- package/dist/collection/components/ic-badge/test/basic/ic-badge.spec.js.map +0 -1
- package/dist/collection/components/ic-breadcrumb/test/basic/ic-breadcrumb.spec.js +0 -162
- package/dist/collection/components/ic-breadcrumb/test/basic/ic-breadcrumb.spec.js.map +0 -1
- package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.spec.js +0 -234
- package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.spec.js.map +0 -1
- package/dist/collection/components/ic-button/test/basic/ic-button.spec.js +0 -332
- package/dist/collection/components/ic-button/test/basic/ic-button.spec.js.map +0 -1
- package/dist/collection/components/ic-card-vertical/test/basic/ic-card-vertical.spec.js +0 -214
- package/dist/collection/components/ic-card-vertical/test/basic/ic-card-vertical.spec.js.map +0 -1
- package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js +0 -284
- package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js.map +0 -1
- package/dist/collection/components/ic-chip/test/basic/ic-chip.spec.js +0 -188
- package/dist/collection/components/ic-chip/test/basic/ic-chip.spec.js.map +0 -1
- package/dist/collection/components/ic-classification-banner/test/basic/ic-classification-banner.spec.js +0 -188
- package/dist/collection/components/ic-classification-banner/test/basic/ic-classification-banner.spec.js.map +0 -1
- package/dist/collection/components/ic-data-list/test/basic/ic-data-list.spec.js +0 -161
- package/dist/collection/components/ic-data-list/test/basic/ic-data-list.spec.js.map +0 -1
- package/dist/collection/components/ic-data-row/test/basic/ic-data-row.spec.js +0 -74
- package/dist/collection/components/ic-data-row/test/basic/ic-data-row.spec.js.map +0 -1
- package/dist/collection/components/ic-dialog/test/basic/ic-dialog.spec.js +0 -448
- package/dist/collection/components/ic-dialog/test/basic/ic-dialog.spec.js.map +0 -1
- package/dist/collection/components/ic-divider/test/basic/ic-divider.spec.js +0 -109
- package/dist/collection/components/ic-divider/test/basic/ic-divider.spec.js.map +0 -1
- package/dist/collection/components/ic-empty-state/test/basic/ic-empty-state.spec.js +0 -101
- package/dist/collection/components/ic-empty-state/test/basic/ic-empty-state.spec.js.map +0 -1
- package/dist/collection/components/ic-footer/test/basic/ic-footer.spec.js +0 -181
- package/dist/collection/components/ic-footer/test/basic/ic-footer.spec.js.map +0 -1
- package/dist/collection/components/ic-footer-link/test/basic/ic-footer-link.spec.js +0 -46
- package/dist/collection/components/ic-footer-link/test/basic/ic-footer-link.spec.js.map +0 -1
- package/dist/collection/components/ic-footer-link-group/test/basic/ic-footer-link-group.spec.js +0 -66
- package/dist/collection/components/ic-footer-link-group/test/basic/ic-footer-link-group.spec.js.map +0 -1
- package/dist/collection/components/ic-hero/test/basic/ic-hero.spec.js +0 -109
- package/dist/collection/components/ic-hero/test/basic/ic-hero.spec.js.map +0 -1
- package/dist/collection/components/ic-horizontal-scroll/test/basic/ic-horizontal-scroll.spec.js +0 -223
- package/dist/collection/components/ic-horizontal-scroll/test/basic/ic-horizontal-scroll.spec.js.map +0 -1
- package/dist/collection/components/ic-input-component-container/test/basic/ic-input-component-container.spec.js +0 -172
- package/dist/collection/components/ic-input-component-container/test/basic/ic-input-component-container.spec.js.map +0 -1
- package/dist/collection/components/ic-input-container/test/basic/ic-input-container.spec.js +0 -38
- package/dist/collection/components/ic-input-container/test/basic/ic-input-container.spec.js.map +0 -1
- package/dist/collection/components/ic-input-label/test/basic/ic-input-label.spec.js +0 -84
- package/dist/collection/components/ic-input-label/test/basic/ic-input-label.spec.js.map +0 -1
- package/dist/collection/components/ic-input-validation/test/basic/ic-input-validation.spec.js +0 -89
- package/dist/collection/components/ic-input-validation/test/basic/ic-input-validation.spec.js.map +0 -1
- package/dist/collection/components/ic-link/test/basic/ic-link.spec.js +0 -120
- package/dist/collection/components/ic-link/test/basic/ic-link.spec.js.map +0 -1
- package/dist/collection/components/ic-loading-indicator/test/basic/ic-loading-indicator.spec.js +0 -149
- package/dist/collection/components/ic-loading-indicator/test/basic/ic-loading-indicator.spec.js.map +0 -1
- package/dist/collection/components/ic-menu/test/basic/ic-menu.spec.js +0 -1108
- package/dist/collection/components/ic-menu/test/basic/ic-menu.spec.js.map +0 -1
- package/dist/collection/components/ic-menu-group/test/basic/ic-menu-group.spec.js +0 -94
- package/dist/collection/components/ic-menu-group/test/basic/ic-menu-group.spec.js.map +0 -1
- package/dist/collection/components/ic-menu-item/test/basic/ic-menu-item.spec.js +0 -121
- package/dist/collection/components/ic-menu-item/test/basic/ic-menu-item.spec.js.map +0 -1
- package/dist/collection/components/ic-navigation-button/test/basic/ic-navigation-button.spec.js +0 -95
- package/dist/collection/components/ic-navigation-button/test/basic/ic-navigation-button.spec.js.map +0 -1
- package/dist/collection/components/ic-navigation-group/test/basic/ic-navigation-group.spec.js +0 -309
- package/dist/collection/components/ic-navigation-group/test/basic/ic-navigation-group.spec.js.map +0 -1
- package/dist/collection/components/ic-navigation-item/test/basic/ic-navigation-item.spec.js +0 -130
- package/dist/collection/components/ic-navigation-item/test/basic/ic-navigation-item.spec.js.map +0 -1
- package/dist/collection/components/ic-navigation-menu/test/basic/ic-navigation-menu.spec.js +0 -176
- package/dist/collection/components/ic-navigation-menu/test/basic/ic-navigation-menu.spec.js.map +0 -1
- package/dist/collection/components/ic-page-header/test/basic/ic-page-header.spec.js +0 -291
- package/dist/collection/components/ic-page-header/test/basic/ic-page-header.spec.js.map +0 -1
- package/dist/collection/components/ic-pagination/test/basic/ic-pagination.spec.js +0 -390
- package/dist/collection/components/ic-pagination/test/basic/ic-pagination.spec.js.map +0 -1
- package/dist/collection/components/ic-pagination-item/test/basic/ic-pagination-item.spec.js +0 -79
- package/dist/collection/components/ic-pagination-item/test/basic/ic-pagination-item.spec.js.map +0 -1
- package/dist/collection/components/ic-popover-menu/test/basic/ic-popover-menu.spec.js +0 -398
- package/dist/collection/components/ic-popover-menu/test/basic/ic-popover-menu.spec.js.map +0 -1
- package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js +0 -389
- package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js.map +0 -1
- package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.spec.js +0 -553
- package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.spec.js.map +0 -1
- package/dist/collection/components/ic-section-container/test/basic/ic-section-container.spec.js +0 -69
- package/dist/collection/components/ic-section-container/test/basic/ic-section-container.spec.js.map +0 -1
- package/dist/collection/components/ic-select/test/basic/ic-select.spec.js +0 -1672
- package/dist/collection/components/ic-select/test/basic/ic-select.spec.js.map +0 -1
- package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation.spec.js +0 -503
- package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation.spec.js.map +0 -1
- package/dist/collection/components/ic-skeleton/test/basic/ic-skeleton.spec.js +0 -89
- package/dist/collection/components/ic-skeleton/test/basic/ic-skeleton.spec.js.map +0 -1
- package/dist/collection/components/ic-status-tag/test/basic/ic-status-tag.spec.js +0 -26
- package/dist/collection/components/ic-status-tag/test/basic/ic-status-tag.spec.js.map +0 -1
- package/dist/collection/components/ic-step/test/basic/ic-step.spec.js +0 -176
- package/dist/collection/components/ic-step/test/basic/ic-step.spec.js.map +0 -1
- package/dist/collection/components/ic-stepper/test/basic/ic-stepper.spec.js +0 -752
- package/dist/collection/components/ic-stepper/test/basic/ic-stepper.spec.js.map +0 -1
- package/dist/collection/components/ic-switch/test/basic/ic-switch.spec.js +0 -93
- package/dist/collection/components/ic-switch/test/basic/ic-switch.spec.js.map +0 -1
- package/dist/collection/components/ic-tab/test/basic/ic-tab.spec.js +0 -175
- package/dist/collection/components/ic-tab/test/basic/ic-tab.spec.js.map +0 -1
- package/dist/collection/components/ic-tab-context/test/basic/ic-tab-context.spec.js +0 -390
- package/dist/collection/components/ic-tab-context/test/basic/ic-tab-context.spec.js.map +0 -1
- package/dist/collection/components/ic-tab-panel/test/basic/ic-tab-panel.spec.js +0 -19
- package/dist/collection/components/ic-tab-panel/test/basic/ic-tab-panel.spec.js.map +0 -1
- package/dist/collection/components/ic-text-field/test/basic/ic-text-field.input.spec.js +0 -312
- package/dist/collection/components/ic-text-field/test/basic/ic-text-field.input.spec.js.map +0 -1
- package/dist/collection/components/ic-text-field/test/basic/ic-text-field.textarea.spec.js +0 -341
- package/dist/collection/components/ic-text-field/test/basic/ic-text-field.textarea.spec.js.map +0 -1
- package/dist/collection/components/ic-theme/test/basic/ic-theme.e2e.js +0 -72
- package/dist/collection/components/ic-theme/test/basic/ic-theme.e2e.js.map +0 -1
- package/dist/collection/components/ic-theme/test/basic/ic-theme.spec.js +0 -79
- package/dist/collection/components/ic-theme/test/basic/ic-theme.spec.js.map +0 -1
- package/dist/collection/components/ic-toast/test/basic/ic-toast.spec.js +0 -314
- package/dist/collection/components/ic-toast/test/basic/ic-toast.spec.js.map +0 -1
- package/dist/collection/components/ic-toast-region/test/basic/ic-toast-region.spec.js +0 -64
- package/dist/collection/components/ic-toast-region/test/basic/ic-toast-region.spec.js.map +0 -1
- package/dist/collection/components/ic-toggle-button/test/basic/ic-toggle-button.spec.js +0 -126
- package/dist/collection/components/ic-toggle-button/test/basic/ic-toggle-button.spec.js.map +0 -1
- package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js +0 -337
- package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js.map +0 -1
- package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.spec.js +0 -321
- package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.spec.js.map +0 -1
- package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.spec.js +0 -314
- package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.spec.js.map +0 -1
- package/dist/collection/components/ic-typography/test/basic/ic-typography.spec.js +0 -407
- package/dist/collection/components/ic-typography/test/basic/ic-typography.spec.js.map +0 -1
- package/dist/collection/testspec.setup.js +0 -77
- package/dist/collection/testspec.setup.js.map +0 -1
- package/dist/core/p-00587c99.entry.js.map +0 -1
- package/dist/core/p-07aaf9c4.entry.js.map +0 -1
- package/dist/core/p-094f51b6.entry.js.map +0 -1
- package/dist/core/p-116875ae.entry.js +0 -2
- package/dist/core/p-116875ae.entry.js.map +0 -1
- package/dist/core/p-146b2788.entry.js.map +0 -1
- package/dist/core/p-15082ea5.entry.js +0 -2
- package/dist/core/p-15082ea5.entry.js.map +0 -1
- package/dist/core/p-174de9d7.entry.js +0 -2
- package/dist/core/p-174de9d7.entry.js.map +0 -1
- package/dist/core/p-17f9921d.entry.js +0 -2
- package/dist/core/p-17f9921d.entry.js.map +0 -1
- package/dist/core/p-246ea059.entry.js +0 -2
- package/dist/core/p-246ea059.entry.js.map +0 -1
- package/dist/core/p-25d3c3a6.entry.js.map +0 -1
- package/dist/core/p-26bc7c62.entry.js.map +0 -1
- package/dist/core/p-27274ca8.entry.js.map +0 -1
- package/dist/core/p-31d4bfc3.entry.js +0 -2
- package/dist/core/p-31d4bfc3.entry.js.map +0 -1
- package/dist/core/p-39ab6387.entry.js.map +0 -1
- package/dist/core/p-3d565739.entry.js.map +0 -1
- package/dist/core/p-3ea4a005.entry.js +0 -2
- package/dist/core/p-3ea4a005.entry.js.map +0 -1
- package/dist/core/p-41b7c67c.entry.js +0 -2
- package/dist/core/p-41b7c67c.entry.js.map +0 -1
- package/dist/core/p-4cfe1dd8.entry.js.map +0 -1
- package/dist/core/p-5b836707.entry.js.map +0 -1
- package/dist/core/p-67b3cd55.entry.js.map +0 -1
- package/dist/core/p-67b8a829.entry.js +0 -2
- package/dist/core/p-67b8a829.entry.js.map +0 -1
- package/dist/core/p-6b5e91e2.js +0 -3
- package/dist/core/p-6b5e91e2.js.map +0 -1
- package/dist/core/p-6b9db71a.entry.js +0 -2
- package/dist/core/p-6b9db71a.entry.js.map +0 -1
- package/dist/core/p-6dfa5a4b.entry.js +0 -2
- package/dist/core/p-6dfa5a4b.entry.js.map +0 -1
- package/dist/core/p-6e94c79c.entry.js.map +0 -1
- package/dist/core/p-720428a3.entry.js.map +0 -1
- package/dist/core/p-73a208c7.entry.js.map +0 -1
- package/dist/core/p-73d6092d.entry.js.map +0 -1
- package/dist/core/p-770c52a7.entry.js +0 -2
- package/dist/core/p-770c52a7.entry.js.map +0 -1
- package/dist/core/p-7b26ef60.entry.js.map +0 -1
- package/dist/core/p-7f984e25.entry.js.map +0 -1
- package/dist/core/p-86caada0.entry.js +0 -2
- package/dist/core/p-86caada0.entry.js.map +0 -1
- package/dist/core/p-8c03b8b5.entry.js +0 -2
- package/dist/core/p-8c03b8b5.entry.js.map +0 -1
- package/dist/core/p-8fdb9b16.entry.js +0 -2
- package/dist/core/p-8fdb9b16.entry.js.map +0 -1
- package/dist/core/p-91a221b5.entry.js +0 -2
- package/dist/core/p-91a221b5.entry.js.map +0 -1
- package/dist/core/p-96b4ca6e.entry.js.map +0 -1
- package/dist/core/p-9e0c2c19.entry.js +0 -2
- package/dist/core/p-9e0c2c19.entry.js.map +0 -1
- package/dist/core/p-9f569f90.entry.js +0 -2
- package/dist/core/p-9f569f90.entry.js.map +0 -1
- package/dist/core/p-a178d53c.entry.js.map +0 -1
- package/dist/core/p-a3b7a147.entry.js +0 -2
- package/dist/core/p-a3b7a147.entry.js.map +0 -1
- package/dist/core/p-a72685f6.entry.js +0 -2
- package/dist/core/p-a72685f6.entry.js.map +0 -1
- package/dist/core/p-a87d13b3.entry.js.map +0 -1
- package/dist/core/p-abdc2912.entry.js.map +0 -1
- package/dist/core/p-b404b307.entry.js.map +0 -1
- package/dist/core/p-b6ce9ca3.entry.js +0 -2
- package/dist/core/p-b6ce9ca3.entry.js.map +0 -1
- package/dist/core/p-b6e010f3.entry.js +0 -2
- package/dist/core/p-b6e010f3.entry.js.map +0 -1
- package/dist/core/p-bbd4f487.entry.js.map +0 -1
- package/dist/core/p-bd9f3961.entry.js +0 -2
- package/dist/core/p-bd9f3961.entry.js.map +0 -1
- package/dist/core/p-c1db155d.entry.js.map +0 -1
- package/dist/core/p-c7bcdb8e.entry.js +0 -2
- package/dist/core/p-c7bcdb8e.entry.js.map +0 -1
- package/dist/core/p-ca11666f.entry.js.map +0 -1
- package/dist/core/p-cda4aca9.js +0 -2
- package/dist/core/p-cda4aca9.js.map +0 -1
- package/dist/core/p-d7ccd00f.entry.js.map +0 -1
- package/dist/core/p-dededae6.entry.js +0 -2
- package/dist/core/p-dededae6.entry.js.map +0 -1
- package/dist/core/p-e2cf6e7e.entry.js.map +0 -1
- package/dist/core/p-e6dc3cd1.entry.js +0 -2
- package/dist/core/p-e6dc3cd1.entry.js.map +0 -1
- package/dist/core/p-e831277e.entry.js +0 -2
- package/dist/core/p-e831277e.entry.js.map +0 -1
- package/dist/core/p-eb7c589b.entry.js +0 -2
- package/dist/core/p-eb7c589b.entry.js.map +0 -1
- package/dist/core/p-f65179fe.entry.js +0 -2
- package/dist/core/p-f65179fe.entry.js.map +0 -1
- package/dist/core/p-fd60eef7.entry.js +0 -2
- package/dist/core/p-fd60eef7.entry.js.map +0 -1
- package/dist/core/p-fd9f3fd0.entry.js +0 -2
- package/dist/core/p-fd9f3fd0.entry.js.map +0 -1
- package/dist/esm/helpers-a72a277b.js.map +0 -1
- package/dist/esm/index-d1d2c456.js +0 -3016
- package/dist/esm/index-d1d2c456.js.map +0 -1
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/types/testspec.setup.d.ts +0 -24
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icHorizontalScrollCss","SCROLL_DELAY_MS","HorizontalScroll","this","buttonStateSet","focusHandler","event","itemFocusHandler","Array","from","items","indexOf","target","resizeObserverCallback","el","clientWidth","itemsContainerEl","scrollWidth","itemOverflow","elementOverflowsX","lastItemVisible","offsetWidth","scrollLeft","runResizeObserver","resizeObserver","ResizeObserver","observe","scrollItemIntoView","getCurrentLeftItem","scrollRight","longScrollRight","scrollDelay","window","setTimeout","longScrollLeft","leftArrowMouseDownHandler","e","preventDefault","rightArrowMouseDownHandler","arrowMouseUpHandler","clearTimeout","index","itemOffsets","findIndex","Math","round","scrollHandler","isScrolling","scrollStopped","firstItemVisible","componentWillLoad","children","addEventListener","getSlotElements","forEach","item","focusTrigger","componentDidLoad","runningTotal","map","checkResizeObserver","scrollArrows","shadowRoot","querySelectorAll","arrow","disconnectedCallback","undefined","disconnect","removeEventListener","_a","_b","itemPosition","newScrollPos","render","h","Host","class","appearance","IcBrandForegroundEnum","Dark","Light","theme","role","variant","monochrome","innerHTML","LeftArrow","disabled","tabindex","onClick","onMouseDown","RightArrow"],"sources":["src/components/ic-horizontal-scroll/ic-horizontal-scroll.css?tag=ic-horizontal-scroll&encapsulation=shadow","src/components/ic-horizontal-scroll/ic-horizontal-scroll.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n --border-bottom-color: var(--ic-architectural-300);\n --splitter-color: var(--ic-architectural-100);\n\n display: flex;\n max-width: 100%;\n}\n\n:host(.ic-horizontal-scroll-light) {\n --splitter-color: var(--ic-color-keyline-lighten);\n}\n\n:host(.ic-horizontal-scroll-dark) {\n --splitter-color: var(--ic-color-keyline-darken);\n}\n\n/* Slotted items container element */\n::slotted(*) {\n overflow-x: scroll;\n overflow-y: hidden;\n scroll-behavior: smooth;\n scrollbar-width: none;\n -ms-overflow-style: none;\n margin: calc(var(--ic-space-xs) * -1) !important;\n padding: var(--ic-space-xs) !important;\n}\n\n:host(.ic-horizontal-scroll-visible) ::slotted(*) {\n margin: calc(var(--ic-space-xs) * -1) 0 !important;\n padding: var(--ic-space-xs) !important;\n}\n\n.tabs-container::-webkit-scrollbar {\n display: none;\n}\n\n.scroll-container-left,\n.scroll-container-right {\n display: flex;\n}\n\n.scroll-container-left {\n margin-left: var(--ic-space-xxs);\n}\n\n.scroll-container-right {\n margin-right: var(--ic-space-xxs);\n}\n\n.hidden {\n display: none;\n}\n\n.scroll-arrow {\n margin: var(--ic-space-xxs) 0;\n}\n\n.disabled .ic-tooltip-container {\n display: none !important;\n}\n\n.scroll-splitter-left,\n.scroll-splitter-right {\n display: flex;\n height: var(--ic-space-lg);\n width: var(--ic-space-1px);\n margin-top: var(--ic-space-xs);\n border-radius: var(--ic-space-1px);\n background-color: var(--splitter-color);\n}\n\n.scroll-splitter-left {\n margin-left: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.scroll-splitter-right {\n margin-right: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.disabled .scroll-splitter-left,\n.disabled .scroll-splitter-right {\n background-color: transparent;\n}\n\n:host(.ic-horizontal-scroll-dark) .disabled ic-button > svg,\n:host(.ic-horizontal-scroll-light) .disabled ic-button > svg {\n color: var(--splitter-color) !important;\n}\n","import {\n Component,\n Element,\n h,\n Host,\n State,\n Method,\n Prop,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\nimport { getSlotElements } from \"../../utils/helpers\";\n\nimport { checkResizeObserver, elementOverflowsX } from \"../../utils/helpers\";\nimport {\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n tag: \"ic-horizontal-scroll\",\n styleUrl: \"./ic-horizontal-scroll.css\",\n shadow: true,\n})\nexport class HorizontalScroll {\n private buttonStateSet: boolean = false;\n private isScrolling: number;\n private itemOffsets: number[];\n private items: HTMLElement[];\n private itemsContainerEl: HTMLElement;\n private resizeObserver: ResizeObserver;\n private scrollDelay: number;\n\n @Element() el: HTMLIcHorizontalScrollElement;\n\n @State() firstItemVisible: boolean = true;\n @State() itemOverflow: boolean = false;\n @State() lastItemVisible: boolean = false;\n\n /**\n * The appearance of the horizontal scroll, e.g. dark, light or the default.\n */\n @Prop() appearance?: IcBrandForeground = \"default\";\n\n /** @internal Determines whether black variant of the tabs should be displayed. */\n @Prop() monochrome?: boolean = false;\n\n /**\n * @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * @internal The name of the event that triggers focus handler logic.\n */\n @Prop() focusTrigger?: string = \"focus\";\n\n componentWillLoad(): void {\n this.itemsContainerEl = this.el.children[0] as HTMLElement;\n this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n this.items = getSlotElements(this.itemsContainerEl) as HTMLElement[];\n this.items.forEach((item) => {\n if (item.addEventListener) {\n item.addEventListener(this.focusTrigger, this.focusHandler);\n }\n });\n }\n\n componentDidLoad(): void {\n let runningTotal = 0;\n this.itemOffsets = this.items.map((item) => {\n runningTotal += item.offsetWidth;\n return runningTotal;\n });\n\n checkResizeObserver(this.runResizeObserver);\n\n // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)\n // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons\n // - 'mouseup' otherwise not detected and scrolling not stopped\n const scrollArrows = Array.from(\n this.el.shadowRoot.querySelectorAll(\"div\")\n ) as HTMLElement[];\n [\"mouseup\", \"mouseleave\"].forEach((event) => {\n scrollArrows.forEach((arrow) =>\n arrow.addEventListener(event, this.arrowMouseUpHandler)\n );\n });\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== undefined) {\n this.resizeObserver.disconnect();\n }\n\n const scrollArrows = Array.from(\n this.el.shadowRoot.querySelectorAll(\"div\")\n ) as HTMLElement[];\n [\"mouseup\", \"mouseleave\"].forEach((event) => {\n scrollArrows.forEach((arrow) =>\n arrow.removeEventListener(event, this.arrowMouseUpHandler)\n );\n });\n\n this.items?.forEach((item) => {\n if (item.removeEventListener) {\n item.removeEventListener(this.focusTrigger, this.focusHandler);\n }\n });\n\n this.itemsContainerEl?.removeEventListener(\"scroll\", this.scrollHandler);\n }\n\n /**\n * @internal if side scrolling enabled, scrolls the specified item into view.\n */\n @Method()\n async scrollItemIntoView(itemPosition: number): Promise<void> {\n this.firstItemVisible = itemPosition <= 0;\n const newScrollPos =\n itemPosition <= 0 ? 0 : this.itemOffsets[itemPosition - 1];\n this.lastItemVisible =\n this.itemsContainerEl.offsetWidth + newScrollPos >=\n this.itemsContainerEl.scrollWidth;\n this.buttonStateSet = true;\n this.itemsContainerEl.scrollLeft = newScrollPos;\n }\n\n private focusHandler = (event: FocusEvent) => {\n this.itemFocusHandler(\n Array.from(this.items).indexOf(event.target as HTMLElement)\n );\n };\n\n private itemFocusHandler(itemPosition: number): void {\n if (this.itemOverflow) {\n this.scrollItemIntoView(itemPosition);\n }\n }\n\n private resizeObserverCallback = () => {\n if (this.el.clientWidth >= this.itemsContainerEl.scrollWidth) {\n this.itemOverflow = false;\n } else {\n this.itemOverflow = elementOverflowsX(this.itemsContainerEl);\n }\n\n if (this.itemOverflow) {\n this.lastItemVisible =\n this.itemsContainerEl.offsetWidth + this.itemsContainerEl.scrollLeft >=\n this.itemsContainerEl.scrollWidth;\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.itemsContainerEl);\n };\n\n private scrollLeft = () => {\n this.scrollItemIntoView(this.getCurrentLeftItem() - 1);\n };\n\n private scrollRight = () => {\n this.scrollItemIntoView(this.getCurrentLeftItem() + 1);\n };\n\n private longScrollRight = () => {\n this.scrollRight();\n this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n };\n\n private longScrollLeft = () => {\n this.scrollLeft();\n this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n };\n\n private leftArrowMouseDownHandler = (e: MouseEvent) => {\n e.preventDefault();\n this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n };\n\n private rightArrowMouseDownHandler = (e: MouseEvent) => {\n e.preventDefault();\n this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n };\n\n private arrowMouseUpHandler = () => {\n window.clearTimeout(this.scrollDelay);\n };\n\n private getCurrentLeftItem = (): number => {\n const index = this.itemOffsets.findIndex(\n (el) => el > Math.round(this.itemsContainerEl.scrollLeft)\n );\n return index < 0 ? 0 : index;\n };\n\n private scrollHandler = () => {\n window.clearTimeout(this.isScrolling);\n // Set a timeout to run after scrolling ends\n this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n };\n\n private scrollStopped = () => {\n // If scrollItemIntoView has been called, the button states will already be set\n // Can't just handle it here as it causes strange jumping behaviour in positioning\n const scrollLeft = Math.round(this.itemsContainerEl.scrollLeft);\n if (this.buttonStateSet === false) {\n this.firstItemVisible = scrollLeft === 0;\n this.lastItemVisible =\n this.itemsContainerEl.offsetWidth + scrollLeft >=\n this.itemsContainerEl.scrollWidth;\n }\n this.buttonStateSet = false;\n };\n\n render() {\n const { firstItemVisible, lastItemVisible, itemOverflow } = this;\n\n return (\n <Host\n class={{\n [\"ic-horizontal-scroll-visible\"]: itemOverflow,\n [\"ic-horizontal-scroll-dark\"]:\n this.appearance === IcBrandForegroundEnum.Dark,\n [\"ic-horizontal-scroll-light\"]:\n this.appearance === IcBrandForegroundEnum.Light,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <div\n aria-hidden=\"true\"\n class={{\n [\"scroll-container-left\"]: true,\n [\"hidden\"]: !itemOverflow,\n [\"disabled\"]: firstItemVisible,\n }}\n role=\"tab\"\n >\n <ic-button\n class=\"scroll-arrow\"\n variant=\"icon-tertiary\"\n aria-label=\"Scroll left\"\n theme={\n this.theme === \"light\" || this.theme === \"inherit\"\n ? \"dark\"\n : \"light\"\n }\n monochrome={this.monochrome}\n innerHTML={LeftArrow}\n disabled={firstItemVisible}\n tabindex=\"-1\"\n onClick={this.scrollLeft}\n onMouseDown={this.leftArrowMouseDownHandler}\n ></ic-button>\n <span class=\"scroll-splitter-left\"></span>\n </div>\n <slot></slot>\n <div\n aria-hidden=\"true\"\n class={{\n [\"scroll-container-right\"]: true,\n [\"hidden\"]: !itemOverflow,\n [\"disabled\"]: lastItemVisible,\n }}\n role=\"tab\"\n >\n <span class=\"scroll-splitter-right\"></span>\n <ic-button\n class=\"scroll-arrow\"\n variant=\"icon-tertiary\"\n aria-label=\"Scroll right\"\n theme={\n this.theme === \"light\" || this.theme === \"inherit\"\n ? \"dark\"\n : \"light\"\n }\n monochrome={this.monochrome}\n innerHTML={RightArrow}\n disabled={lastItemVisible}\n tabindex=\"-1\"\n onClick={this.scrollRight}\n onMouseDown={this.rightArrowMouseDownHandler}\n ></ic-button>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as o,c as r,h as t,H as s}from"./p-6b5e91e2.js";import{M as e,N as i,W as a,c,g as h}from"./p-cda4aca9.js";const n=class{constructor(t){o(this,t);this.brandChange=r(this,"brandChange",7);this.darkModeChangeHandler=()=>{if(this.theme==="system"){this.themeClass=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"ic-theme-dark":"ic-theme-light"}else{this.themeClass=`ic-theme-${this.theme}`}};this.checkBrandColorContrast=()=>{if(e()<i&&e()>a){console.warn(`The brand colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`)}};this.setBrandColor=()=>{const o=c(this.brandColor);if(o){const{r,g:t,b:s,a:e}=o;const{style:i}=document.documentElement;i.setProperty("--ic-brand-color-primary-r",`${r}`);i.setProperty("--ic-brand-color-primary-g",`${t}`);i.setProperty("--ic-brand-color-primary-b",`${s}`);i.setProperty("--ic-brand-color-primary-a",`${e}`);this.checkBrandColorContrast();this.brandChange.emit({mode:h(),color:o})}};this.themeClass="";this.brandColor=null;this.theme="light"}watchBrandColorPropHandler(){this.setBrandColor()}watchThemePropHandler(){this.darkModeChangeHandler()}componentWillLoad(){this.darkModeChangeHandler();this.setBrandColor();window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",this.darkModeChangeHandler)}render(){const{themeClass:o}=this;return t(s,{class:o},t("slot",null))}static get watchers(){return{brandColor:["watchBrandColorPropHandler"],theme:["watchThemePropHandler"]}}};export{n as ic_theme};
|
2
|
-
//# sourceMappingURL=p-17f9921d.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["Theme","this","darkModeChangeHandler","theme","themeClass","window","matchMedia","matches","checkBrandColorContrast","getBrandColorBrightness","BLACK_MIN_COLOR_BRIGHTNESS","WHITE_MAX_COLOR_BRIGHTNESS","console","warn","setBrandColor","colorRGBA","convertToRGBA","brandColor","r","g","b","a","style","document","documentElement","setProperty","brandChange","emit","mode","getBrandForegroundAppearance","color","watchBrandColorPropHandler","watchThemePropHandler","componentWillLoad","addEventListener","render","h","Host","class"],"sources":["src/components/ic-theme/ic-theme.tsx"],"sourcesContent":["import {\n Component,\n Host,\n Event,\n EventEmitter,\n h,\n Watch,\n Prop,\n State,\n} from \"@stencil/core\";\n\nimport { IcColor, IcBrand } from \"../../utils/types\";\nimport {\n convertToRGBA,\n getBrandForegroundAppearance,\n} from \"../../utils/helpers\";\nimport { getBrandColorBrightness } from \"../../utils/helpers\";\nimport {\n BLACK_MIN_COLOR_BRIGHTNESS,\n WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n tag: \"ic-theme\",\n})\nexport class Theme {\n @State() themeClass: string = \"\";\n\n /**\n * The brand colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n */\n @Prop() brandColor?: IcColor = null;\n\n @Watch(\"brandColor\")\n watchBrandColorPropHandler(): void {\n this.setBrandColor();\n }\n\n /**\n * The theme mode. Can be \"dark\", \"light\", or \"system\". \"system\" will use the device or browser settings.\n */\n @Prop() theme: \"dark\" | \"light\" | \"system\" = \"light\";\n\n @Watch(\"theme\")\n watchThemePropHandler(): void {\n this.darkModeChangeHandler();\n }\n\n /**\n * @internal Emitted when the brand color is changed.\n */\n @Event() brandChange: EventEmitter<IcBrand>;\n\n componentWillLoad(): void {\n this.darkModeChangeHandler();\n this.setBrandColor();\n\n window.matchMedia &&\n window\n .matchMedia(\"(prefers-color-scheme: dark)\")\n .addEventListener(\"change\", this.darkModeChangeHandler);\n }\n\n private darkModeChangeHandler = (): void => {\n if (this.theme === \"system\") {\n this.themeClass =\n window.matchMedia &&\n window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n ? \"ic-theme-dark\"\n : \"ic-theme-light\";\n } else {\n this.themeClass = `ic-theme-${this.theme}`;\n }\n };\n\n private checkBrandColorContrast = (): void => {\n if (\n getBrandColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n getBrandColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n ) {\n console.warn(\n `The brand colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n );\n }\n };\n\n private setBrandColor = () => {\n const colorRGBA = convertToRGBA(this.brandColor);\n\n if (colorRGBA) {\n const { r, g, b, a } = colorRGBA;\n const { style } = document.documentElement;\n style.setProperty(\"--ic-brand-color-primary-r\", `${r}`);\n style.setProperty(\"--ic-brand-color-primary-g\", `${g}`);\n style.setProperty(\"--ic-brand-color-primary-b\", `${b}`);\n style.setProperty(\"--ic-brand-color-primary-a\", `${a}`);\n\n this.checkBrandColorContrast();\n\n this.brandChange.emit({\n mode: getBrandForegroundAppearance(),\n color: colorRGBA,\n });\n }\n };\n\n render() {\n const { themeClass } = this;\n\n return (\n <Host class={themeClass}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"0HAyBaA,EAAK,M,kEAsCRC,KAAAC,sBAAwB,KAC9B,GAAID,KAAKE,QAAU,SAAU,CAC3BF,KAAKG,WACHC,OAAOC,YACPD,OAAOC,WAAW,gCAAgCC,QAC9C,gBACA,gB,KACD,CACLN,KAAKG,WAAa,YAAYH,KAAKE,O,GAI/BF,KAAAO,wBAA0B,KAChC,GACEC,IAA4BC,GAC5BD,IAA4BE,EAC5B,CACAC,QAAQC,KACN,4T,GAKEZ,KAAAa,cAAgB,KACtB,MAAMC,EAAYC,EAAcf,KAAKgB,YAErC,GAAIF,EAAW,CACb,MAAMG,EAAGC,EAAEA,EAACC,EAAEA,EAACC,EAAEA,GAAMN,EACvB,MAAMO,MAAEA,GAAUC,SAASC,gBAC3BF,EAAMG,YAAY,6BAA8B,GAAGP,KACnDI,EAAMG,YAAY,6BAA8B,GAAGN,KACnDG,EAAMG,YAAY,6BAA8B,GAAGL,KACnDE,EAAMG,YAAY,6BAA8B,GAAGJ,KAEnDpB,KAAKO,0BAELP,KAAKyB,YAAYC,KAAK,CACpBC,KAAMC,IACNC,MAAOf,G,mBA3EiB,G,gBAKC,K,WAUc,O,CAP7C,0BAAAgB,GACE9B,KAAKa,e,CASP,qBAAAkB,GACE/B,KAAKC,uB,CAQP,iBAAA+B,GACEhC,KAAKC,wBACLD,KAAKa,gBAELT,OAAOC,YACLD,OACGC,WAAW,gCACX4B,iBAAiB,SAAUjC,KAAKC,sB,CA8CvC,MAAAiC,GACE,MAAM/B,WAAEA,GAAeH,KAEvB,OACEmC,EAACC,EAAI,CAACC,MAAOlC,GACXgC,EAAA,a"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,c as i,h as c,H as t,g as a}from"./p-6b5e91e2.js";import{r,j as o,b as n,k as s,d,l,m as h,i as b}from"./p-cda4aca9.js";const m='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-checkbox-disabled){pointer-events:none}.container{display:flex;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);margin-bottom:var(--ic-space-xxs);align-items:center}:host(.ic-checkbox-small) .container{margin-bottom:var(--ic-space-xxxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-checkbox-background-unselected);border:var(--ic-border-width) solid var(--ic-checkbox-border-unselected);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast);flex-shrink:0}:host .container svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.ic-checkbox-small) .checkbox,:host(.ic-checkbox-small) .container svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-checkbox-large) .checkbox,:host(.ic-checkbox-large) .container svg{width:var(--ic-space-xl);height:var(--ic-space-xl)}.checkbox:checked{background-color:var(--ic-checkbox-background-selected);border:var(--ic-border-width) solid var(--ic-checkbox-background-selected);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-checkbox-background-selected-disabled);border:var(--ic-border-width) solid\n var(--ic-checkbox-background-selected-disabled)}.checkbox:indeterminate,.checkbox.indeterminate:checked{background-color:var(--ic-checkbox-background-indeterminate);border:0.125rem solid var(--ic-checkbox-background-indeterminate)}.checkbox:indeterminate:disabled,.checkbox.indeterminate:checked:disabled{background-color:var(--ic-checkbox-background-indeterminate-disabled);border:0.125rem solid var(--ic-checkbox-background-indeterminate-disabled)}.checkbox:checked:hover{background-color:var(--ic-checkbox-background-selected-hover)}.checkbox:indeterminate:hover,.checkbox.indeterminate:checked:hover{background-color:var(--ic-checkbox-background-indeterminate-hover);border:0.125rem solid var(--ic-checkbox-background-indeterminate-hover)}.checkbox:checked:active{background-color:var(--ic-checkbox-background-selected-pressed)}.checkbox:indeterminate:active,.checkbox.indeterminate:checked:active{background-color:var(--ic-checkbox-background-indeterminate-pressed);border:0.125rem solid var(--ic-checkbox-background-indeterminate-pressed)}.checkbox:hover{box-shadow:0 0 0 0.25rem var(--ic-checkbox-action-background-hover);border:var(--ic-border-width) solid\n var(--ic-checkbox-border-unselected-hover)}.checkbox:active{box-shadow:0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);border:var(--ic-border-width) solid\n var(--ic-checkbox-border-unselected-pressed)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:var(--ic-border-width) dashed\n var(--ic-checkbox-border-unselected-disabled)}.checkbox-label{padding-left:var(--ic-space-sm);color:var(--ic-checkbox-text);--ic-typography-color:var(--ic-checkbox-text)}:host(.ic-checkbox-disabled) .checkbox-label{color:var(--ic-checkbox-text-disabled);--ic-typography-color:var(--ic-checkbox-text-disabled)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:var(--ic-checkbox-icon-pressed);z-index:1;background-color:transparent;pointer-events:none;flex-shrink:0}:host(.ic-checkbox-small) .checkmark{margin-left:calc(-1 * var(--ic-space-md));right:calc(-1 * var(--ic-space-md))}:host(.ic-checkbox-large) .checkmark{margin-left:calc(-1 * var(--ic-space-xl));right:calc(-1 * var(--ic-space-xl))}.indeterminate-symbol{position:relative;width:0.875rem;height:var(--ic-space-xxxs);right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-checkbox-icon-indeterminate);pointer-events:none;flex-shrink:0}:host(.ic-checkbox-small) .indeterminate-symbol{width:0.6rem;right:-0.8rem;margin-left:-0.6rem}:host(.ic-checkbox-large) .indeterminate-symbol{width:1.25rem;right:-1.625rem;margin-left:-1.25rem}.additional-field-wrapper{margin-left:calc(var(--ic-space-md) + var(--ic-space-lg));margin-top:calc(var(--ic-space-sm) / 2)}.branch-corner{height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-checkbox-required-bar);border-left:0.125rem solid var(--ic-checkbox-required-bar)}.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-text{color:var(--ic-checkbox-required-text);--ic-typography-color:var(--ic-checkbox-required-text);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){::slotted(ic-text-field){--input-width:100%}}@media (forced-colors: active){.checkbox{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert;transition:none}.checkbox:checked{transition:none}.checkbox:focus-visible{outline:0.125rem solid highlight}.checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.checkmark{fill:none}.indeterminate-symbol{display:none}}.checkmark:dir(rtl){right:0}.checkbox-label:dir(rtl){padding-right:var(--ic-space-sm);padding-left:0}.indeterminate-symbol:dir(rtl){right:0.288rem}.branch-corner:dir(rtl){border-radius:0 0 0.188rem 0;border-right:0.125rem solid var(--ic-action-default);border-left:none}.dynamic-container:dir(rtl){margin:var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0}';const p=class{constructor(c){e(this,c);this.icCheck=i(this,"icCheck",7);this.handleClick=()=>{this.checked=!this.checked;this.displayIndeterminate=this.nativeIndeterminateBehaviour?false:this.indeterminate&&this.checked;this.icCheck.emit()};this.handleFormReset=()=>{this.checked=this.initiallyChecked};this.additionalFieldDisplay="static";this.checked=false;this.initiallyChecked=this.checked;this.disabled=false;this.dynamicText="This selection requires additional answers";this.form=undefined;this.groupLabel=undefined;this.indeterminate=false;this.displayIndeterminate=this.indeterminate;this.label=undefined;this.name=undefined;this.nativeIndeterminateBehaviour=false;this.size=undefined;this.theme="inherit";this.value=undefined;this.hideLabel=false}watchDisabledHandler(){r(this.disabled,this.el)}watchIndeterminateHandler(){this.displayIndeterminate=this.nativeIndeterminateBehaviour?this.indeterminate:this.indeterminate&&this.checked}componentWillLoad(){r(this.disabled,this.el);o(this.el,this.handleFormReset);const e=this.el.parentElement;if(e){if(!this.name)this.name=e.name;this.groupLabel=e.label}}componentDidLoad(){n([{prop:this.label,propName:"label"},{prop:this.value,propName:"value"}],"Checkbox")}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.el.querySelector("ic-text-field");if(!this.checked){e===null||e===void 0?void 0:e.setAttribute("disabled","")}else{e===null||e===void 0?void 0:e.removeAttribute("disabled")}}else if(this.additionalFieldContainer){this.additionalFieldContainer.style.display=!this.checked?"none":"flex"}}disconnectedCallback(){s(this.el,this.handleFormReset)}async setFocus(){var e;(e=this.el.shadowRoot.querySelector(".checkbox"))===null||e===void 0?void 0:e.focus()}render(){const{additionalFieldDisplay:e,checked:i,disabled:a,dynamicText:r,el:o,form:n,displayIndeterminate:s,groupLabel:m,label:p,name:k,size:x,value:v,theme:u}=this;const g=`ic-checkbox-${d(p)||v}-${m}`.replace(/ /g,"-");const f=o.parentElement.size;i?l(true,o,k,i&&v,a):h(o);return c(t,{class:{"ic-checkbox-disabled":a,[`ic-checkbox-${x||f}`]:true,[`ic-theme-${u}`]:u!=="inherit"}},c("div",{class:"container"},s&&c("div",{class:"indeterminate-symbol"}),!s&&i&&c("svg",{class:"checkmark",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg","fill-rule":"evenodd","clip-rule":"evenodd"},c("title",null,"checkmark icon"),c("path",{d:"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z"})),c("input",{role:"checkbox",class:{checkbox:true,checked:i,indeterminate:s},type:"checkbox",name:k,id:g,value:v,disabled:a?true:null,checked:i,indeterminate:s,onClick:this.handleClick,form:n,"aria-label":this.hideLabel?this.label:undefined}),!this.hideLabel&&c("ic-typography",{class:"checkbox-label",variant:"body"},c("label",{htmlFor:g},p))),b(o,"additional-field")&&c("div",{class:"dynamic-container",ref:e=>this.additionalFieldContainer=e},e==="dynamic"&&c("div",{class:"branch-corner"}),c("div",null,e==="dynamic"&&c("ic-typography",{variant:"caption"},c("p",{class:"dynamic-text","aria-live":"polite"},r)),c("div",{class:{"additional-field-wrapper":e==="static"}},c("slot",{name:"additional-field"})))))}static get delegatesFocus(){return true}get el(){return a(this)}static get watchers(){return{disabled:["watchDisabledHandler"],indeterminate:["watchIndeterminateHandler"]}}};p.style=m;export{p as ic_checkbox};
|
2
|
-
//# sourceMappingURL=p-246ea059.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icCheckboxCss","Checkbox","this","handleClick","checked","displayIndeterminate","nativeIndeterminateBehaviour","indeterminate","icCheck","emit","handleFormReset","initiallyChecked","watchDisabledHandler","removeDisabledFalse","disabled","el","watchIndeterminateHandler","componentWillLoad","addFormResetListener","checkboxGroup","parentElement","name","groupLabel","label","componentDidLoad","onComponentRequiredPropUndefined","prop","propName","value","componentDidRender","additionalFieldDisplay","textfield","querySelector","setAttribute","removeAttribute","additionalFieldContainer","style","display","disconnectedCallback","removeFormResetListener","setFocus","_a","shadowRoot","focus","render","dynamicText","form","size","theme","id","isPropDefined","replace","parentElementSize","renderHiddenInput","removeHiddenInput","h","Host","class","viewBox","xmlns","d","role","checkbox","type","onClick","hideLabel","undefined","variant","htmlFor","isSlotUsed","ref"],"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-checkbox-disabled) {\n pointer-events: none;\n}\n\n.container {\n display: flex;\n width: fit-content;\n padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n margin-bottom: var(--ic-space-xxs);\n align-items: center;\n}\n\n:host(.ic-checkbox-small) .container {\n margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\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-checkbox-background-unselected);\n border: var(--ic-border-width) solid var(--ic-checkbox-border-unselected);\n border-radius: var(--ic-border-radius);\n outline: none;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n flex-shrink: 0;\n}\n\n:host .container svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host(.ic-checkbox-small) .checkbox,\n:host(.ic-checkbox-small) .container svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n:host(.ic-checkbox-large) .checkbox,\n:host(.ic-checkbox-large) .container svg {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n}\n\n.checkbox:checked {\n background-color: var(--ic-checkbox-background-selected);\n border: var(--ic-border-width) solid var(--ic-checkbox-background-selected);\n transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n background-color: var(--ic-checkbox-background-selected-disabled);\n border: var(--ic-border-width) solid\n var(--ic-checkbox-background-selected-disabled);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n background-color: var(--ic-checkbox-background-indeterminate);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate);\n}\n\n.checkbox:indeterminate:disabled,\n.checkbox.indeterminate:checked:disabled {\n background-color: var(--ic-checkbox-background-indeterminate-disabled);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate-disabled);\n}\n\n.checkbox:checked:hover {\n background-color: var(--ic-checkbox-background-selected-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n background-color: var(--ic-checkbox-background-indeterminate-hover);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate-hover);\n}\n\n.checkbox:checked:active {\n background-color: var(--ic-checkbox-background-selected-pressed);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n background-color: var(--ic-checkbox-background-indeterminate-pressed);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate-pressed);\n}\n\n.checkbox:hover {\n box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-hover);\n border: var(--ic-border-width) solid\n var(--ic-checkbox-border-unselected-hover);\n}\n\n.checkbox:active {\n box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);\n border: var(--ic-border-width) solid\n var(--ic-checkbox-border-unselected-pressed);\n}\n\n.checkbox:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n border: var(--ic-border-width) dashed\n var(--ic-checkbox-border-unselected-disabled);\n}\n\n.checkbox-label {\n padding-left: var(--ic-space-sm);\n color: var(--ic-checkbox-text);\n --ic-typography-color: var(--ic-checkbox-text);\n}\n\n:host(.ic-checkbox-disabled) .checkbox-label {\n color: var(--ic-checkbox-text-disabled);\n --ic-typography-color: var(--ic-checkbox-text-disabled);\n}\n\n.checkbox-label:hover {\n cursor: pointer;\n}\n\n.checkmark {\n position: relative;\n right: calc(-1 * var(--ic-space-lg));\n margin-left: calc(-1 * var(--ic-space-lg));\n fill: var(--ic-checkbox-icon-pressed);\n z-index: 1;\n background-color: transparent;\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.ic-checkbox-small) .checkmark {\n margin-left: calc(-1 * var(--ic-space-md));\n right: calc(-1 * var(--ic-space-md));\n}\n\n:host(.ic-checkbox-large) .checkmark {\n margin-left: calc(-1 * var(--ic-space-xl));\n right: calc(-1 * var(--ic-space-xl));\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 0.875rem;\n height: var(--ic-space-xxxs);\n right: -1.188rem;\n margin-left: -0.875rem;\n z-index: 1;\n background-color: var(--ic-checkbox-icon-indeterminate);\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.ic-checkbox-small) .indeterminate-symbol {\n width: 0.6rem;\n right: -0.8rem;\n margin-left: -0.6rem;\n}\n\n:host(.ic-checkbox-large) .indeterminate-symbol {\n width: 1.25rem;\n right: -1.625rem;\n margin-left: -1.25rem;\n}\n\n.additional-field-wrapper {\n margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\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-checkbox-required-bar);\n border-left: 0.125rem solid var(--ic-checkbox-required-bar);\n}\n\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-text {\n color: var(--ic-checkbox-required-text);\n\n --ic-typography-color: var(--ic-checkbox-required-text);\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 ::slotted(ic-text-field) {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n /* Styles here only apply to Forced Colors Mode */\n .checkbox {\n appearance: revert;\n transition: none;\n }\n\n .checkbox:checked {\n transition: none;\n }\n\n .checkbox:focus-visible {\n outline: 0.125rem solid highlight;\n }\n\n .checkbox:disabled:not(:checked) {\n appearance: none;\n border-color: GrayText;\n }\n\n .checkmark {\n fill: none;\n }\n\n .indeterminate-symbol {\n display: none;\n }\n}\n\n/* Right to left */\n.checkmark:dir(rtl) {\n right: 0;\n}\n\n.checkbox-label:dir(rtl) {\n padding-right: var(--ic-space-sm);\n padding-left: 0;\n}\n\n.indeterminate-symbol:dir(rtl) {\n right: 0.288rem;\n}\n\n.branch-corner:dir(rtl) {\n border-radius: 0 0 0.188rem 0;\n border-right: 0.125rem solid var(--ic-action-default);\n border-left: none;\n}\n\n.dynamic-container:dir(rtl) {\n margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcAdditionalFieldTypes,\n IcSizes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to be displayed alongside a checkbox.\n */\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n private additionalFieldContainer: HTMLDivElement;\n\n @Element() el: HTMLIcCheckboxElement;\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 checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.\n */\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /**\n * If `true`, the checkbox will be set to the disabled state.\n */\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The text to be displayed when dynamic.\n */\n\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /**\n * The <form> element to associate the checkbox with.\n */\n @Prop() form?: string;\n\n /**\n * The group label for the checkbox.\n */\n @Prop({ mutable: true }) groupLabel: string;\n\n /**\n * If `true`, the indeterminate state will be displayed when checked.\n */\n @Prop() indeterminate: boolean = false;\n @State() displayIndeterminate = this.indeterminate;\n\n @Watch(\"indeterminate\")\n watchIndeterminateHandler(): void {\n this.displayIndeterminate = this.nativeIndeterminateBehaviour\n ? this.indeterminate\n : this.indeterminate && this.checked;\n }\n\n /**\n * The label for the checkbox.\n */\n @Prop() label!: string;\n\n /**\n * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n */\n @Prop({ mutable: true }) name: string;\n\n /**\n * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n */\n @Prop() nativeIndeterminateBehaviour: boolean = false;\n\n /**\n * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n */\n @Prop() size?: IcSizes;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * The value for the checkbox.\n */\n @Prop() value!: 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 = false;\n\n /**\n * Emitted when a checkbox has been checked.\n */\n @Event() icCheck: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n addFormResetListener(this.el, this.handleFormReset);\n\n const checkboxGroup = this.el.parentElement as HTMLIcCheckboxGroupElement;\n if (checkboxGroup) {\n if (!this.name) this.name = checkboxGroup.name;\n this.groupLabel = checkboxGroup.label;\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.value, propName: \"value\" },\n ],\n \"Checkbox\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.el.querySelector(\"ic-text-field\");\n if (!this.checked) {\n textfield?.setAttribute(\"disabled\", \"\");\n } else {\n textfield?.removeAttribute(\"disabled\");\n }\n } else if (this.additionalFieldContainer) {\n this.additionalFieldContainer.style.display = !this.checked\n ? \"none\"\n : \"flex\";\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n /**\n * Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot.querySelector<HTMLElement>(\".checkbox\")?.focus();\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.displayIndeterminate = this.nativeIndeterminateBehaviour\n ? false\n : this.indeterminate && this.checked;\n this.icCheck.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n checked,\n disabled,\n dynamicText,\n el,\n form,\n displayIndeterminate,\n groupLabel,\n label,\n name,\n size,\n value,\n theme,\n } = this;\n\n const id = `ic-checkbox-${\n isPropDefined(label) || value\n }-${groupLabel}`.replace(/ /g, \"-\");\n\n const parentElementSize = (el.parentElement as HTMLIcCheckboxGroupElement)\n .size;\n\n checked\n ? renderHiddenInput(true, el, name, checked && value, disabled)\n : removeHiddenInput(el);\n\n return (\n <Host\n class={{\n \"ic-checkbox-disabled\": disabled,\n [`ic-checkbox-${size || parentElementSize}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"container\">\n {displayIndeterminate && <div class=\"indeterminate-symbol\" />}\n {!displayIndeterminate && checked && (\n <svg\n class=\"checkmark\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n </svg>\n )}\n <input\n role=\"checkbox\"\n class={{\n checkbox: true,\n checked,\n indeterminate: displayIndeterminate,\n }}\n type=\"checkbox\"\n name={name}\n id={id}\n value={value}\n disabled={disabled ? true : null}\n checked={checked}\n indeterminate={displayIndeterminate}\n onClick={this.handleClick}\n form={form}\n aria-label={this.hideLabel ? this.label : undefined}\n ></input>\n {!this.hideLabel && (\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n )}\n </div>\n {isSlotUsed(el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\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\" aria-live=\"polite\">\n {dynamicText}\n </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 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icPageHeaderCss","PageHeader","this","resizeObserver","resizeObserverCallback","reverseOrder","isSlotUsed","el","applyReverseOrder","runResizeObserver","ResizeObserver","observe","currSize","getCurrentDeviceSize","deviceSize","actionArea","shadowRoot","querySelector","actionHeights","i","actionContent","length","action","actionHeight","offsetHeight","undefined","push","max","Math","actionAreaHeight","appendActionContent","reverse","forEach","btn","append","areButtonsReversed","DEVICE_SIZES","S","XL","disconnectedCallback","disconnect","componentWillLoad","Array","from","querySelectorAll","componentDidLoad","checkResizeObserver","render","size","border","heading","subheading","aligned","sticky","stickyDesktopOnly","theme","navAriaLabel","h","Host","class","ariaLabel","role","fullHeight","name","variant"],"sources":["src/components/ic-page-header/ic-page-header.css?tag=ic-page-header&encapsulation=shadow","src/components/ic-page-header/ic-page-header.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-page-header: z-index of page-header\n */\n\n:host {\n display: block;\n z-index: var(--ic-z-index-page-header);\n}\n\n:host(.ic-page-header-sticky) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n z-index: var(--ic-z-index-sticky-page-header);\n}\n\nheader {\n background-color: var(--ic-page-header-background);\n}\n\nheader.border-bottom {\n border-bottom: var(--ic-border-default);\n border-bottom: var(--ic-space-1px) solid var(--ic-page-header-border);\n}\n\nheader.tabs {\n padding-top: var(--ic-space-md);\n}\n\n.breadcrumb-area {\n margin-bottom: var(--ic-space-md);\n}\n\n.main-content {\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-areas:\n \"title-area action-area\"\n \"input-area action-area\";\n column-gap: var(--ic-space-md);\n justify-content: space-between;\n width: 100%;\n}\n\n.title-area {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 19rem;\n grid-area: title-area;\n}\n\n.header-content {\n display: flex;\n align-items: center;\n width: 100%;\n flex-wrap: wrap;\n column-gap: var(--ic-space-md);\n}\n\n.heading {\n display: inline-block;\n overflow-wrap: break-word;\n hyphens: auto;\n}\n\n.subheading-content {\n margin-top: var(--ic-space-xs);\n}\n\n.subheading-content.small {\n margin-top: var(--ic-space-md);\n}\n\n.action-area {\n display: flex;\n gap: var(--ic-space-md);\n flex-flow: row wrap;\n justify-self: end;\n justify-content: flex-end;\n height: fit-content;\n grid-area: action-area;\n}\n\n.input-area,\n.navigation-area {\n margin-top: var(--ic-space-md);\n width: 100%;\n}\n\n.tabs-slot {\n display: flex;\n overflow-x: auto;\n padding: 0.5rem;\n margin: -0.5rem;\n}\n\n.tabs-slot::-webkit-scrollbar {\n display: none;\n}\n\n.input-area {\n grid-area: input-area;\n}\n\n@media screen and (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n\n max-width: 20rem;\n }\n\n .main-content {\n grid-template-areas:\n \"title-area\"\n \"action-area\"\n \"input-area\";\n justify-content: flex-start;\n }\n\n .title-area {\n min-width: 0;\n }\n\n .action-area {\n min-width: 100%;\n margin-top: var(--ic-space-md);\n justify-content: start;\n }\n}\n\n@media screen and (min-width: 992px) {\n :host(.ic-page-header-sticky-desktop) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n z-index: var(--ic-z-index-sticky-page-header);\n }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment, IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\nimport {\n isSlotUsed,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/**\n * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n */\n\n@Component({\n tag: \"ic-page-header\",\n styleUrl: \"ic-page-header.css\",\n shadow: true,\n})\nexport class PageHeader {\n private resizeObserver: ResizeObserver = null;\n\n @Element() el: HTMLIcPageHeaderElement;\n\n @State() actionContent: Node[];\n @State() areButtonsReversed: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n /**\n * The alignment of the page header.\n */\n @Prop() aligned?: IcAlignment = \"left\";\n\n /**\n * If `true`, a border will be displayed along the bottom of the page header.\n */\n @Prop() border?: boolean = true;\n\n /**\n * The title to render on the page header.\n */\n @Prop() heading?: string;\n\n /**\n * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.\n */\n @Prop() reverseOrder?: boolean = false;\n\n /**\n * The size of the page header component.\n */\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /**\n * If `true`, the page header will be sticky at all breakpoints.\n */\n @Prop() sticky?: boolean = false;\n\n /**\n * If `true`, the page header will only be sticky for viewport widths of 992px and above.\n */\n @Prop() stickyDesktopOnly?: boolean = false;\n\n /**\n * The subtitle to render on the page header.\n */\n @Prop() subheading?: string;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\n this.actionContent = Array.from(\n this.el.querySelectorAll(`[slot=\"actions\"]`)\n );\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n private resizeObserverCallback = () => {\n if (this.reverseOrder && isSlotUsed(this.el, \"actions\")) {\n this.applyReverseOrder();\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private applyReverseOrder = (): void => {\n const currSize = getCurrentDeviceSize();\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n\n const actionArea = this.el.shadowRoot.querySelector(\n \"div.action-area\"\n ) as HTMLElement;\n const actionHeights: number[] = [];\n\n /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n for (let i = 0; i < this.actionContent.length; i++) {\n const action = this.actionContent[i] as HTMLElement;\n let actionHeight = action.offsetHeight;\n if (actionHeight === undefined) {\n actionHeight = 0;\n }\n actionHeights.push(actionHeight);\n }\n\n const max = Math.max(...actionHeights);\n\n /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n let actionAreaHeight = actionArea.offsetHeight;\n\n if (actionAreaHeight === undefined) {\n actionAreaHeight = 0;\n }\n\n const appendActionContent = () => {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string | Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n };\n\n if (\n (this.deviceSize > DEVICE_SIZES.S &&\n actionAreaHeight <= max &&\n !this.areButtonsReversed) ||\n (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n this.deviceSize <= DEVICE_SIZES.S) &&\n this.areButtonsReversed)\n ) {\n appendActionContent();\n }\n };\n\n render() {\n const {\n size,\n border,\n heading,\n subheading,\n aligned,\n sticky,\n stickyDesktopOnly,\n theme,\n } = this;\n\n const navAriaLabel = heading\n ? `${heading} page sections`\n : \"navigation-landmark-page-header\";\n\n return (\n <Host\n class={{\n [\"ic-page-header-sticky\"]: sticky,\n [\"ic-page-header-sticky-desktop\"]: !sticky && stickyDesktopOnly,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n aria-label={this.el.ariaLabel || \"page header\"}\n >\n <header\n class={{\n [\"border-bottom\"]: border,\n [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n }}\n role=\"presentation\"\n >\n <ic-section-container\n aligned={aligned}\n fullHeight={isSlotUsed(this.el, \"tabs\")}\n >\n {isSlotUsed(this.el, \"breadcrumbs\") && (\n <div class=\"breadcrumb-area\">\n <slot name=\"breadcrumbs\" />\n </div>\n )}\n <div class=\"main-content\">\n <div class=\"title-area\">\n <div class=\"header-content\">\n <slot name=\"heading\">\n <ic-typography\n variant={size === \"small\" ? \"h4\" : \"h2\"}\n class=\"heading\"\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n <slot name=\"heading-adornment\" />\n </div>\n <div\n class={{\n [\"subheading-content\"]:\n !!subheading || isSlotUsed(this.el, \"subheading\"),\n [\"small\"]: size === \"small\",\n }}\n >\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n </div>\n {isSlotUsed(this.el, \"actions\") && (\n <div class=\"action-area\">\n <slot name=\"actions\" />\n </div>\n )}\n {isSlotUsed(this.el, \"input\") && (\n <div class=\"input-area\">\n <slot name=\"input\" />\n </div>\n )}\n </div>\n\n {(isSlotUsed(this.el, \"stepper\") ||\n isSlotUsed(this.el, \"tabs\")) && (\n <div class=\"navigation-area\">\n {isSlotUsed(this.el, \"stepper\") &&\n !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n {isSlotUsed(this.el, \"tabs\") && (\n <nav aria-label={navAriaLabel}>\n <ic-horizontal-scroll>\n <ul class=\"tabs-slot\">\n <slot name=\"tabs\" />\n </ul>\n </ic-horizontal-scroll>\n </nav>\n )}\n </div>\n )}\n </ic-section-container>\n </header>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icDataListCss","DataList","render","el","heading","size","theme","this","Array","from","children","forEach","child","setAttribute","h","Host","class","id","name","variant"],"sources":["src/components/ic-data-list/ic-data-list.css?tag=ic-data-list&encapsulation=shadow","src/components/ic-data-list/ic-data-list.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n.heading {\n --ic-typography-color: var(--ic-data-list-text-heading);\n}\n\n.rows {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-md);\n}\n\n:host(.ic-data-list-small) .rows {\n gap: var(--ic-space-xs);\n}\n\n.divider {\n margin-top: var(--ic-space-lg);\n margin-bottom: var(--ic-space-md);\n height: var(--ic-border-width);\n background-color: var(--ic-data-list-keyline-heading);\n}\n\n:host(.ic-data-list-small) .divider {\n margin-top: var(--ic-space-sm);\n margin-bottom: var(--ic-space-xs);\n}\n\n@media (forced-colors: active) {\n .divider {\n background-color: canvastext;\n }\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot heading - Content will be placed at the top of the data list.\n */\n@Component({\n tag: \"ic-data-list\",\n styleUrl: \"ic-data-list.css\",\n shadow: true,\n})\nexport class DataList {\n @Element() el: HTMLIcDataListElement;\n\n /**\n * The title for the data list.\n */\n @Prop() heading: string;\n\n /**\n * The size of the data list component.\n */\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n render() {\n const { el, heading, size, theme } = this;\n\n if (size === \"small\") {\n Array.from(el.children).forEach((child) =>\n child.setAttribute(\"size\", \"small\")\n );\n }\n\n return (\n <Host\n class={{\n \"ic-data-list-small\": size === \"small\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"heading\" id=\"data-list-heading\">\n <slot name=\"heading\">\n <ic-typography variant=\"h3\">{heading}</ic-typography>\n </slot>\n </div>\n <div class=\"divider\" />\n <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,m3F,MCWTC,EAAQ,M,0DAWa,S,WAKF,S,CAE9B,MAAAC,GACE,MAAMC,GAAEA,EAAEC,QAAEA,EAAOC,KAAEA,EAAIC,MAAEA,GAAUC,KAErC,GAAIF,IAAS,QAAS,CACpBG,MAAMC,KAAKN,EAAGO,UAAUC,SAASC,GAC/BA,EAAMC,aAAa,OAAQ,U,CAI/B,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,qBAAsBX,IAAS,QAC/B,CAAC,YAAYC,KAAUA,IAAU,YAGnCQ,EAAA,OAAKE,MAAM,UAAUC,GAAG,qBACtBH,EAAA,QAAMI,KAAK,WACTJ,EAAA,iBAAeK,QAAQ,MAAMf,KAGjCU,EAAA,OAAKE,MAAM,YACXF,EAAA,wBAAoB,oBAAoBE,MAAM,QAC5CF,EAAA,c"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icSkeletonCss","DEFAULT_HEIGHTS","text","circle","rectangle","Skeleton","render","variant","theme","el","this","style","firstElementChild","height","width","undefined","h","Host","class","skeleton"],"sources":["src/components/ic-skeleton/ic-skeleton.css?tag=ic-skeleton&encapsulation=shadow","src/components/ic-skeleton/ic-skeleton.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n@keyframes loading {\n 0% {\n background-color: var(--ic-skeleton-background);\n }\n\n 50% {\n background-color: var(--ic-skeleton-background-secondary);\n }\n\n 100% {\n background-color: var(--ic-skeleton-background);\n }\n}\n\n:host(.skeleton) {\n background-color: var(--ic-skeleton-background);\n border-radius: var(--ic-border-radius);\n animation: loading 1200ms infinite;\n display: inline-block;\n}\n\n:host(.skeleton) > * {\n opacity: 0;\n visibility: hidden;\n}\n\n:host(.ic-skeleton-circle) {\n border-radius: 50%;\n}\n\n@media (forced-colors: active) {\n :host(.skeleton) {\n -ms-high-contrast-adjust: none;\n forced-color-adjust: none;\n background: currentcolor;\n }\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst DEFAULT_HEIGHTS = {\n text: \"1em\",\n circle: \"25px\",\n rectangle: \"93px\",\n};\n\n@Component({\n tag: \"ic-skeleton\",\n styleUrl: \"ic-skeleton.css\",\n shadow: true,\n})\nexport class Skeleton {\n @Element() el: HTMLIcSkeletonElement;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * The variant of the skeleton that will be displayed.\n */\n @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n render() {\n const { variant, theme, el } = this;\n\n const style = !el.firstElementChild\n ? {\n height: el.style.height || DEFAULT_HEIGHTS[variant],\n width: el.style.width || (variant === \"circle\" ? \"25px\" : \"260px\"),\n }\n : undefined;\n\n return (\n <Host\n class={{\n skeleton: true,\n \"ic-skeleton-circle\": variant === \"circle\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n style={style}\n aria-disabled=\"true\"\n >\n <slot />\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,o5FCItB,MAAMC,EAAkB,CACtBC,KAAM,MACNC,OAAQ,OACRC,UAAW,Q,MAQAC,EAAQ,M,oCAMW,U,aAKS,W,CAEvC,MAAAC,GACE,MAAMC,QAAEA,EAAOC,MAAEA,EAAKC,GAAEA,GAAOC,KAE/B,MAAMC,GAASF,EAAGG,kBACd,CACEC,OAAQJ,EAAGE,MAAME,QAAUZ,EAAgBM,GAC3CO,MAAOL,EAAGE,MAAMG,QAAUP,IAAY,SAAW,OAAS,UAE5DQ,UAEJ,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,SAAU,KACV,qBAAsBZ,IAAY,SAClC,CAAC,YAAYC,KAAUA,IAAU,WAEnCG,MAAOA,EAAK,gBACE,QAEdK,EAAA,a"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as i,h as s,g as h}from"./p-6b5e91e2.js";const e="context-id";const a=class{constructor(s){t(this,s);this.icTabSelect=i(this,"icTabSelect",3);this.newTabPanels=[];this.newTabs=[];this.linkTabs=()=>{this.tabs.forEach(((t,i)=>{const s=`ic-tab-${i}-context-${this.contextId}`;const h=`ic-tab-panel-${i}-context-${this.contextId}`;t.setAttribute("id",s);t.tabId=`ic-tab--${i}-context-${this.contextId}`;t.tabPosition=i;t.setAttribute("aria-controls",h);t.setAttribute(e,this.contextId);this.tabGroup.setAttribute(e,this.contextId);this.tabPanels[i].setAttribute("id",h);this.tabPanels[i].setAttribute("aria-labelledby",s);this.tabPanels[i].setAttribute(e,this.contextId);t.theme=this.theme;this.tabPanels[i].theme=this.theme;this.tabGroup.theme=this.theme}))};this.getChildren=()=>{this.tabGroup=this.el.querySelector("ic-tab-group");this.tabs=Array.from(this.tabGroup.querySelectorAll("ic-tab"));this.tabPanels=Array.from(this.el.children).filter((t=>t.tagName==="IC-TAB-PANEL"));this.enabledTabs=this.getEnabledTabs()};this.keydownHandler=t=>{const i=this.activationType==="manual";const s=this.enabledTabs.findIndex((t=>t.tabId===this.tabs[i?this.focusedTabIndex:this.selectedTab].tabId));const h=i?this.keyboardFocusTab:this.keyboardSelectTab;let e=true;switch(t.key){case"Home":h(0);break;case"End":h(this.enabledTabs.length-1);break;case"ArrowRight":h(s<this.enabledTabs.length-1?s+1:0);break;case"ArrowLeft":h((s>0?s:this.enabledTabs.length)-1);break;default:if(i&&(t.key==="Enter"||t.key===" ")){this.keyboardSelectTab(this.focusedTabIndex)}else{e=false}}if(e)t.preventDefault()};this.setInitialTab=()=>{if(this.selectedTabIndex!==undefined){this.selectedTab=this.selectedTabIndex;this.focusedTabIndex=this.selectedTabIndex}else{const t=this.tabs.findIndex((t=>t.tabId===this.enabledTabs[0].tabId));this.selectedTab=t;this.focusedTabIndex=t}};this.configureTabs=()=>{this.enabledTabs.forEach((t=>{t.selected=t.tabPosition===this.selectedTab}));this.tabPanels.forEach(((t,i)=>{t.active=i===this.selectedTab}))};this.getEnabledTabs=()=>Array.from(this.tabs).filter((t=>!t.disabled));this.keyboardSelectTab=t=>{const i=this.tabs.findIndex((i=>i.tabId===this.enabledTabs[t].tabId));this.enabledTabs[t].focus();if(this.selectedTabIndex===undefined){this.selectedTab=i}else{this.icTabSelect.emit({tabIndex:i,tabLabel:this.el.querySelectorAll("ic-tab")[i].textContent.trim()})}};this.keyboardFocusTab=t=>{this.enabledTabs[t].focus();this.focusedTabIndex=this.tabs.findIndex((i=>i.tabId===this.enabledTabs[t].tabId))};this.selectedTab=undefined;this.activationType="automatic";this.contextId="default";this.selectedTabIndex=undefined;this.monochrome=false;this.theme="inherit"}updateSelectedTab(t){this.selectedTab=t}watchMonochromeHandler(){this.tabs.forEach(((t,i)=>{t.monochrome=this.monochrome;this.tabPanels[i].monochrome=this.monochrome}));this.tabGroup.monochrome=this.monochrome}watchThemeHandler(){this.tabs.forEach(((t,i)=>{t.theme=this.theme;this.tabPanels[i].theme=this.theme}));this.tabGroup.theme=this.theme}componentDidLoad(){if(this.selectedTabIndex!==undefined){this.selectedTab=this.selectedTabIndex}this.getChildren();this.linkTabs();this.tabGroup.addEventListener("keydown",this.keydownHandler);this.setInitialTab();this.configureTabs()}componentWillUpdate(){this.configureTabs()}disconnectedCallback(){var t;(t=this.tabGroup)===null||t===void 0?void 0:t.removeEventListener("keydown",this.keydownHandler)}tabClickHandler(t){if(this.selectedTabIndex===undefined&&t.detail.contextId===this.contextId){this.selectedTab=t.detail.position}this.icTabSelect.emit({tabIndex:t.detail.position,tabLabel:this.el.querySelectorAll("ic-tab")[t.detail.position].textContent.trim()});t.stopImmediatePropagation()}tabCreatedHandler(t){if(this.tabs&&this.tabPanels){(t.detail.setFocus?this.newTabs:this.newTabPanels).push(t.detail);if(this.newTabs.length===this.newTabPanels.length){this.tabs.push(...this.newTabs);this.tabPanels.push(...this.newTabPanels);this.enabledTabs=this.getEnabledTabs();this.linkTabs();if(!this.tabs[this.selectedTab]||!this.tabPanels[this.selectedTab])this.setInitialTab();this.configureTabs();this.newTabs=[];this.newTabPanels=[]}}}tabEnabledHandler(){this.enabledTabs=this.getEnabledTabs()}async tabRemovedHandler(t){this.getChildren();this.linkTabs();if(this.tabs[this.selectedTab]&&this.tabPanels[this.selectedTab]){this.tabs[this.selectedTab].selected=true}else{this.setInitialTab()}if(t){this.tabs[this.selectedTab].setFocus()}}render(){return s("slot",null)}get el(){return h(this)}static get watchers(){return{selectedTabIndex:["updateSelectedTab"],monochrome:["watchMonochromeHandler"],theme:["watchThemeHandler"]}}};export{a as ic_tab_context};
|
2
|
-
//# sourceMappingURL=p-31d4bfc3.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["CONTEXT_ID_ATTR","TabContext","this","newTabPanels","newTabs","linkTabs","tabs","forEach","tab","index","tabId","contextId","tabPanelId","setAttribute","tabPosition","tabGroup","tabPanels","theme","getChildren","el","querySelector","Array","from","querySelectorAll","children","filter","child","tagName","enabledTabs","getEnabledTabs","keydownHandler","event","isManual","activationType","enabledTabIndex","findIndex","focusedTabIndex","selectedTab","keyboardFunction","keyboardFocusTab","keyboardSelectTab","preventDefault","key","length","setInitialTab","selectedTabIndex","undefined","firstEnabledTabIndex","configureTabs","selected","tabPanel","active","disabled","newIndex","focus","icTabSelect","emit","tabIndex","tabLabel","textContent","trim","updateSelectedTab","newValue","watchMonochromeHandler","monochrome","watchThemeHandler","componentDidLoad","addEventListener","componentWillUpdate","disconnectedCallback","_a","removeEventListener","tabClickHandler","detail","position","stopImmediatePropagation","tabCreatedHandler","ev","setFocus","push","tabEnabledHandler","tabRemovedHandler","hadFocus","render","h"],"sources":["src/components/ic-tab-context/ic-tab-context.tsx"],"sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Prop,\n State,\n h,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport { IcActivationTypes, IcThemeMode } from \"../../utils/types\";\n\nimport {\n IcTabClickEventDetail,\n IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\nconst CONTEXT_ID_ATTR = \"context-id\";\n\n@Component({\n tag: \"ic-tab-context\",\n})\nexport class TabContext {\n private enabledTabs: HTMLIcTabElement[];\n private focusedTabIndex: number;\n private newTabPanels: HTMLIcTabPanelElement[] = [];\n private newTabs: HTMLIcTabElement[] = [];\n private tabs: HTMLIcTabElement[];\n private tabGroup: HTMLIcTabGroupElement;\n private tabPanels: HTMLIcTabPanelElement[];\n\n @Element() el: HTMLIcTabContextElement;\n\n @State() selectedTab: number | null;\n\n /**\n * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.\n */\n @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n /**\n * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n */\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /**\n * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.\n */\n @Prop() selectedTabIndex?: number;\n\n @Watch(\"selectedTabIndex\")\n updateSelectedTab(newValue: number): void {\n this.selectedTab = newValue;\n }\n\n /**\n * If `true`, the tabs will display as black in the light theme.\n */\n @Prop() monochrome?: boolean = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.tabs.forEach((tab, index) => {\n tab.monochrome = this.monochrome;\n this.tabPanels[index].monochrome = this.monochrome;\n });\n this.tabGroup.monochrome = this.monochrome;\n }\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.tabs.forEach((tab, index) => {\n tab.theme = this.theme;\n this.tabPanels[index].theme = this.theme;\n });\n this.tabGroup.theme = this.theme;\n }\n\n /**\n * Emitted when a user selects a tab.\n */\n @Event({ bubbles: false }) icTabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n componentDidLoad(): void {\n if (this.selectedTabIndex !== undefined) {\n this.selectedTab = this.selectedTabIndex;\n }\n this.getChildren();\n this.linkTabs();\n this.tabGroup.addEventListener(\"keydown\", this.keydownHandler);\n this.setInitialTab();\n this.configureTabs();\n }\n\n componentWillUpdate(): void {\n this.configureTabs();\n }\n\n disconnectedCallback(): void {\n this.tabGroup?.removeEventListener(\"keydown\", this.keydownHandler);\n }\n\n @Listen(\"tabClick\")\n tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n if (\n this.selectedTabIndex === undefined &&\n event.detail.contextId === this.contextId\n ) {\n this.selectedTab = event.detail.position;\n }\n /* eslint-disable no-unexpected-multiline */\n this.icTabSelect.emit({\n tabIndex: event.detail.position,\n tabLabel: this.el\n .querySelectorAll(\"ic-tab\")\n [event.detail.position].textContent.trim(),\n });\n /* eslint-enable no-unexpected-multiline */\n event.stopImmediatePropagation();\n }\n\n @Listen(\"tabCreated\")\n @Listen(\"tabPanelCreated\")\n tabCreatedHandler(ev: CustomEvent): void {\n if (this.tabs && this.tabPanels) {\n (ev.detail.setFocus ? this.newTabs : this.newTabPanels).push(ev.detail);\n if (this.newTabs.length === this.newTabPanels.length) {\n this.tabs.push(...this.newTabs);\n this.tabPanels.push(...this.newTabPanels);\n this.enabledTabs = this.getEnabledTabs();\n this.linkTabs();\n if (!this.tabs[this.selectedTab] || !this.tabPanels[this.selectedTab])\n this.setInitialTab();\n this.configureTabs();\n this.newTabs = [];\n this.newTabPanels = [];\n }\n }\n }\n\n @Listen(\"tabEnabled\")\n tabEnabledHandler(): void {\n this.enabledTabs = this.getEnabledTabs();\n }\n\n /**\n * @internal Used to set tab/tab panel IDs when a tab/tab panel has been removed\n */\n @Method()\n async tabRemovedHandler(hadFocus?: boolean): Promise<void> {\n this.getChildren();\n this.linkTabs();\n if (this.tabs[this.selectedTab] && this.tabPanels[this.selectedTab]) {\n this.tabs[this.selectedTab].selected = true;\n } else {\n this.setInitialTab();\n }\n\n if (hadFocus) {\n this.tabs[this.selectedTab].setFocus();\n }\n }\n\n /** Sets attributes to link tab-group, tabs and tab-panels */\n private linkTabs = () => {\n this.tabs.forEach((tab, index) => {\n const tabId = `ic-tab-${index}-context-${this.contextId}`;\n const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;\n tab.setAttribute(\"id\", tabId);\n tab.tabId = `ic-tab--${index}-context-${this.contextId}`;\n tab.tabPosition = index;\n tab.setAttribute(\"aria-controls\", tabPanelId);\n tab.setAttribute(CONTEXT_ID_ATTR, this.contextId);\n this.tabGroup.setAttribute(CONTEXT_ID_ATTR, this.contextId);\n this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n this.tabPanels[index].setAttribute(CONTEXT_ID_ATTR, this.contextId);\n\n tab.theme = this.theme;\n this.tabPanels[index].theme = this.theme;\n this.tabGroup.theme = this.theme;\n });\n };\n\n /**\n * Gets tabs and tabpanels with the same context ID using querySelector to selector the children in relation to the host\n */\n private getChildren = (): void => {\n this.tabGroup = this.el.querySelector(\"ic-tab-group\");\n this.tabs = Array.from(this.tabGroup.querySelectorAll(\"ic-tab\"));\n this.tabPanels = Array.from(this.el.children).filter(\n (child) => child.tagName === \"IC-TAB-PANEL\"\n ) as HTMLIcTabPanelElement[];\n this.enabledTabs = this.getEnabledTabs();\n };\n\n private keydownHandler = (event: KeyboardEvent) => {\n const isManual = this.activationType === \"manual\";\n const enabledTabIndex = this.enabledTabs.findIndex(\n (tab) =>\n tab.tabId ===\n this.tabs[isManual ? this.focusedTabIndex : this.selectedTab].tabId\n );\n const keyboardFunction = isManual\n ? this.keyboardFocusTab\n : this.keyboardSelectTab;\n let preventDefault = true;\n switch (event.key) {\n case \"Home\":\n keyboardFunction(0);\n break;\n case \"End\":\n keyboardFunction(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n keyboardFunction(\n enabledTabIndex < this.enabledTabs.length - 1\n ? enabledTabIndex + 1\n : 0\n );\n break;\n case \"ArrowLeft\":\n keyboardFunction(\n (enabledTabIndex > 0 ? enabledTabIndex : this.enabledTabs.length) - 1\n );\n break;\n default:\n if (isManual && (event.key === \"Enter\" || event.key === \" \")) {\n this.keyboardSelectTab(this.focusedTabIndex);\n } else {\n preventDefault = false;\n }\n }\n if (preventDefault) event.preventDefault();\n };\n\n /** Sets the tab that is selected on initial render */\n private setInitialTab = (): void => {\n if (this.selectedTabIndex !== undefined) {\n this.selectedTab = this.selectedTabIndex;\n this.focusedTabIndex = this.selectedTabIndex;\n } else {\n const firstEnabledTabIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[0].tabId\n );\n this.selectedTab = firstEnabledTabIndex;\n this.focusedTabIndex = firstEnabledTabIndex;\n }\n };\n\n /** Passes the selected tab to the tab and tab panel components */\n private configureTabs = () => {\n this.enabledTabs.forEach((tab) => {\n tab.selected = tab.tabPosition === this.selectedTab;\n });\n this.tabPanels.forEach((tabPanel, index) => {\n tabPanel.active = index === this.selectedTab;\n });\n };\n\n private getEnabledTabs = () =>\n Array.from(this.tabs).filter((child) => !child.disabled);\n\n /** Sets focus on tab and selects it */\n private keyboardSelectTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n if (this.selectedTabIndex === undefined) {\n this.selectedTab = newIndex;\n } else {\n /* eslint-disable no-unexpected-multiline */\n this.icTabSelect.emit({\n tabIndex: newIndex,\n tabLabel: this.el\n .querySelectorAll(\"ic-tab\")\n [newIndex].textContent.trim(),\n });\n }\n };\n\n /** Sets focus on tab without selecting it (for manual activation) */\n private keyboardFocusTab = (enabledTabIndex: number) => {\n this.enabledTabs[enabledTabIndex].focus();\n this.focusedTabIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n };\n\n render() {\n return <slot></slot>;\n }\n}\n"],"mappings":"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"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icBadgeCss","NAVIGATION_BUTTON","TOP_NAVIGATION","Badge","this","ariaLabel","setBadgeColour","colorRGBA","convertToRGBA","customColor","r","g","b","a","el","style","backgroundColor","foregroundColour","getBrandForegroundAppearance","getLabel","maxNumber","Number","label","setAccessibleLabel","parentEl","parentElement","defaultAriaLabel","isAccessibleLabelDefined","accessibleLabel","tagName","parentAriaLabel","ariaLabelPrefix","visible","undefined","setPositionInTopNavigation","parentTopNavEl","classList","contains","position","isInTopNav","grandparentEl","isPropDefined","accessibleLabelHandler","customColorHandler","variant","variantHandler","visibleHandler","componentWillLoad","_a","componentDidLoad","type","onComponentRequiredPropUndefined","prop","propName","componentWillRender","navBarMenuOpenHandler","navBarMenuCloseHandler","render","size","theme","h","Host","class","id","role","name"],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n :host(.ic-badge-show) {\n animation: expand var(--ic-transition-duration-slow);\n }\n\n :host(.ic-badge-hide) {\n animation: shrink var(--ic-transition-duration-slow);\n }\n}\n\n:host {\n display: flex;\n height: var(--ic-space-md);\n min-width: var(--ic-space-md);\n width: fit-content;\n border-radius: calc(2 * var(--ic-space-xxl));\n position: absolute;\n}\n\n:host ic-typography {\n --ic-typography-color: var(--ic-badge-text);\n}\n\n:host(.ic-badge-neutral) {\n background-color: var(--ic-badge-dark) !important;\n}\n\n:host(.ic-badge-light) ic-typography {\n --ic-typography-color: var(--ic-badge-text-monochrome);\n}\n\n:host(.ic-badge-light) ::slotted(*) {\n fill: var(--ic-badge-icon-monochrome);\n}\n\n:host(.ic-badge-info) {\n background-color: var(--ic-badge-info) !important;\n}\n\n:host(.ic-badge-light) {\n background-color: var(--ic-badge-light) !important;\n}\n\n:host(.ic-badge-warning) {\n background-color: var(--ic-badge-warning) !important;\n}\n\n:host(.ic-badge-warning) ic-typography {\n --ic-typography-color: var(--ic-badge-warning-text);\n}\n\n:host(.ic-badge-warning) ::slotted(*) {\n fill: var(--ic-badge-warning-icon);\n}\n\n:host(.ic-badge-error) {\n background-color: var(--ic-badge-error) !important;\n}\n\n:host(.ic-badge-success) {\n background-color: var(--ic-badge-success) !important;\n}\n\n:host(.ic-badge-small) {\n height: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.ic-badge-large) {\n height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-medium) {\n height: var(--ic-space-xs);\n width: var(--ic-space-xs);\n min-width: var(--ic-space-xs);\n}\n\n:host(.ic-badge-dot.ic-badge-small) {\n height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-dot.ic-badge-large) {\n height: var(--ic-space-sm);\n width: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host ::slotted(*) {\n fill: var(--ic-badge-icon);\n}\n\n:host(.ic-badge-foreground-dark) ::slotted(*) {\n fill: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ::slotted(*) {\n fill: white;\n}\n\n:host(.ic-badge-foreground-dark) ic-typography {\n --ic-typography-color: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ic-typography {\n --ic-typography-color: var(--ic-color-primary-text-dark);\n}\n\n:host(.ic-badge-text) ic-typography {\n align-self: center;\n padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.ic-badge-text.ic-badge-small) ic-typography {\n padding: 0 0.2132rem;\n}\n\n:host(.ic-badge-text.ic-badge-large) ic-typography {\n padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.ic-badge-icon) ::slotted(svg) {\n width: var(--ic-space-sm);\n height: var(--ic-space-sm);\n padding: var(--ic-space-xxxs);\n}\n\n:host(.ic-badge-icon.ic-badge-small) ::slotted(svg) {\n width: var(--ic-space-xs);\n height: var(--ic-space-xs);\n}\n\n:host(.ic-badge-icon.ic-badge-large) ::slotted(svg) {\n width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.ic-badge-far) {\n top: calc(-1 * var(--ic-space-xs));\n right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.ic-badge-far.ic-badge-small),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-large) {\n top: calc(-1 * var(--ic-space-xxs));\n right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-far),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-small) {\n top: calc(-1 * var(--ic-space-xxxs));\n right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-near) {\n top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.ic-badge-dot.ic-badge-near) {\n top: calc(-1 * var(--ic-space-1px));\n right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-badge-inline) {\n position: static;\n}\n\n:host(.ic-badge-hide) {\n visibility: hidden !important;\n transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n position: absolute;\n left: -9999px;\n}\n\n@keyframes expand {\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes shrink {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n Watch,\n h,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcBadgePositions,\n IcBadgeTypes,\n IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n IcSizes,\n IcBrandForeground,\n IcColor,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n convertToRGBA,\n getBrandForegroundAppearance,\n isPropDefined,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst NAVIGATION_BUTTON = \"IC-NAVIGATION-BUTTON\";\nconst TOP_NAVIGATION = \"IC-TOP-NAVIGATION\";\n\n/**\n * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n */\n@Component({\n tag: \"ic-badge\",\n styleUrl: \"ic-badge.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Badge {\n private ariaLabel: string = null;\n private foregroundColour: IcBrandForeground;\n private parentAriaLabel: string;\n\n @Element() el: HTMLIcBadgeElement;\n\n /**\n * The accessible label of the badge component to provide context for screen reader users.\n */\n @Prop() accessibleLabel?: string;\n\n @Watch(\"accessibleLabel\")\n accessibleLabelHandler(): void {\n this.setAccessibleLabel();\n }\n\n /**\n * The custom badge colour. This will only style the badge component if variant=\"custom\".\n * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n */\n @Prop() customColor?: IcColor = null;\n\n @Watch(\"customColor\")\n customColorHandler(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n }\n\n /**\n * The maximum number shown on the badge appended with a +.\n * This will only be displayed if type=\"text\" and label is not empty.\n */\n @Prop() maxNumber?: number;\n\n /**\n * The positioning of the badge in reference to the parent element.\n */\n @Prop({ mutable: true }) position?: IcBadgePositions = \"far\";\n\n /**\n * The size of the badge to be displayed.\n */\n @Prop() size?: IcSizes = \"medium\";\n\n /**\n * The text displayed in the badge. This will only be displayed if type=\"text\".\n */\n @Prop() label?: string;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * The type of badge to be displayed.\n */\n @Prop() type?: IcBadgeTypes = \"text\";\n\n /**\n * The variant of the badge to be displayed.\n */\n @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n @Watch(\"variant\")\n variantHandler(): void {\n if (this.variant === \"custom\") {\n this.setBadgeColour();\n }\n }\n\n /**\n * If `true`, the badge will be displayed.\n */\n @Prop() visible: boolean = true;\n\n @Watch(\"visible\")\n visibleHandler(): void {\n this.setAccessibleLabel();\n }\n\n componentWillLoad(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n\n const ariaLabel = this.el.parentElement?.ariaLabel;\n if (ariaLabel) this.parentAriaLabel = ariaLabel;\n this.setAccessibleLabel();\n }\n\n componentDidLoad(): void {\n this.type === \"text\" &&\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Badge\"\n );\n }\n\n componentWillRender(): void {\n this.isInTopNav() && this.setPositionInTopNavigation();\n }\n\n @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n navBarMenuOpenHandler(): void {\n this.isInTopNav() && (this.position = \"inline\");\n }\n\n @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n navBarMenuCloseHandler(): void {\n this.isInTopNav() && (this.position = \"near\");\n }\n\n private setBadgeColour = () => {\n const colorRGBA = convertToRGBA(this.customColor);\n\n if (colorRGBA) {\n const { r, g, b, a } = colorRGBA;\n this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n this.foregroundColour = getBrandForegroundAppearance(\n (r * 299 + g * 587 + b * 114) / 1000\n );\n }\n };\n\n private getLabel = () =>\n this.maxNumber && Number(this.label) > this.maxNumber\n ? `${this.maxNumber}+`\n : this.label;\n\n // Set aria-label on badge and / or parent element\n // Aria-describedby seems to not work, probably due to shadow DOM\n private setAccessibleLabel = () => {\n const parentEl = this.el.parentElement;\n const defaultAriaLabel = this.isAccessibleLabelDefined()\n ? this.accessibleLabel\n : this.label || \"with badge being displayed\";\n\n if (parentEl) {\n const { tagName } = parentEl;\n if (\n tagName !== \"IC-CARD\" &&\n (tagName !== \"IC-TAB\" || (tagName === \"IC-TAB\" && this.parentAriaLabel))\n ) {\n const ariaLabelPrefix = this.parentAriaLabel\n ? `${this.parentAriaLabel} ,`\n : \"\";\n parentEl.ariaLabel = this.visible\n ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n : undefined;\n } else {\n this.ariaLabel = `, ${defaultAriaLabel}`;\n }\n }\n };\n\n private setPositionInTopNavigation = () => {\n const parentTopNavEl = this.el.parentElement.parentElement;\n parentTopNavEl.classList.contains(\"mobile-mode\")\n ? (this.position = \"inline\")\n : (this.position = \"near\");\n };\n\n private isInTopNav = (): boolean => {\n const parentEl = this.el.parentElement;\n const grandparentEl = parentEl.parentElement;\n return (\n parentEl.tagName === NAVIGATION_BUTTON &&\n grandparentEl.tagName === TOP_NAVIGATION\n );\n };\n\n private isAccessibleLabelDefined = () =>\n isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n render() {\n const {\n ariaLabel,\n el,\n foregroundColour,\n getLabel,\n position,\n size,\n label,\n type,\n variant,\n visible,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-badge-${position}`]: true,\n [`ic-badge-${size}`]: true,\n [`ic-badge-${variant}`]: true,\n [`ic-badge-${type}`]: true,\n [`ic-badge-foreground-${foregroundColour}`]:\n foregroundColour !== null && variant === \"custom\",\n [`${visible ? \"ic-badge-show\" : \"ic-badge-hide\"}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n id={el.id || null}\n aria-label={ariaLabel}\n role=\"status\"\n >\n {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n {type === \"text\" && label && (\n <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n {getLabel()}\n </ic-typography>\n )}\n {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n </Host>\n );\n }\n}\n"],"mappings":"kHAAA,MAAMA,EAAa,o+HC2BnB,MAAMC,EAAoB,uBAC1B,MAAMC,EAAiB,oB,MAYVC,EAAK,M,yBACRC,KAAAC,UAAoB,KA8GpBD,KAAAE,eAAiB,KACvB,MAAMC,EAAYC,EAAcJ,KAAKK,aAErC,GAAIF,EAAW,CACb,MAAMG,EAAEA,EAACC,EAAEA,EAACC,EAAEA,EAACC,EAAEA,GAAMN,EACvBH,KAAKU,GAAGC,MAAMC,gBAAkB,QAAQN,MAAMC,MAAMC,MAAMC,KAC1DT,KAAKa,iBAAmBC,GACrBR,EAAI,IAAMC,EAAI,IAAMC,EAAI,KAAO,I,GAK9BR,KAAAe,SAAW,IACjBf,KAAKgB,WAAaC,OAAOjB,KAAKkB,OAASlB,KAAKgB,UACxC,GAAGhB,KAAKgB,aACRhB,KAAKkB,MAIHlB,KAAAmB,mBAAqB,KAC3B,MAAMC,EAAWpB,KAAKU,GAAGW,cACzB,MAAMC,EAAmBtB,KAAKuB,2BAC1BvB,KAAKwB,gBACLxB,KAAKkB,OAAS,6BAElB,GAAIE,EAAU,CACZ,MAAMK,QAAEA,GAAYL,EACpB,GACEK,IAAY,YACXA,IAAY,UAAaA,IAAY,UAAYzB,KAAK0B,iBACvD,CACA,MAAMC,EAAkB3B,KAAK0B,gBACzB,GAAG1B,KAAK0B,oBACR,GACJN,EAASnB,UAAYD,KAAK4B,QACtB,GAAGD,KAAmBL,IACtBO,S,KACC,CACL7B,KAAKC,UAAY,KAAKqB,G,IAKpBtB,KAAA8B,2BAA6B,KACnC,MAAMC,EAAiB/B,KAAKU,GAAGW,cAAcA,cAC7CU,EAAeC,UAAUC,SAAS,eAC7BjC,KAAKkC,SAAW,SAChBlC,KAAKkC,SAAW,MAAO,EAGtBlC,KAAAmC,WAAa,KACnB,MAAMf,EAAWpB,KAAKU,GAAGW,cACzB,MAAMe,EAAgBhB,EAASC,cAC/B,OACED,EAASK,UAAY5B,GACrBuC,EAAcX,UAAY3B,CAAc,EAIpCE,KAAAuB,yBAA2B,IACjCc,EAAcrC,KAAKwB,kBAAoBxB,KAAKwB,kBAAoB,K,gDAtJlC,K,uCAgBuB,M,UAK9B,S,gCAUK,U,UAKA,O,aAKM,U,aAYT,I,CA7D3B,sBAAAc,GACEtC,KAAKmB,oB,CAUP,kBAAAoB,GACEvC,KAAKwC,UAAY,UAAYxC,KAAKE,gB,CAwCpC,cAAAuC,GACE,GAAIzC,KAAKwC,UAAY,SAAU,CAC7BxC,KAAKE,gB,EAUT,cAAAwC,GACE1C,KAAKmB,oB,CAGP,iBAAAwB,G,MACE3C,KAAKwC,UAAY,UAAYxC,KAAKE,iBAElC,MAAMD,GAAY2C,EAAA5C,KAAKU,GAAGW,iBAAa,MAAAuB,SAAA,SAAAA,EAAE3C,UACzC,GAAIA,EAAWD,KAAK0B,gBAAkBzB,EACtCD,KAAKmB,oB,CAGP,gBAAA0B,GACE7C,KAAK8C,OAAS,QACZC,EACE,CAAC,CAAEC,KAAMhD,KAAKkB,MAAO+B,SAAU,UAC/B,Q,CAIN,mBAAAC,GACElD,KAAKmC,cAAgBnC,KAAK8B,4B,CAI5B,qBAAAqB,GACEnD,KAAKmC,eAAiBnC,KAAKkC,SAAW,S,CAIxC,sBAAAkB,GACEpD,KAAKmC,eAAiBnC,KAAKkC,SAAW,O,CAiExC,MAAAmB,GACE,MAAMpD,UACJA,EAASS,GACTA,EAAEG,iBACFA,EAAgBE,SAChBA,EAAQmB,SACRA,EAAQoB,KACRA,EAAIpC,MACJA,EAAK4B,KACLA,EAAIN,QACJA,EAAOZ,QACPA,EAAO2B,MACPA,GACEvD,KAEJ,OACEwD,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,YAAYxB,KAAa,KAC1B,CAAC,YAAYoB,KAAS,KACtB,CAAC,YAAYd,KAAY,KACzB,CAAC,YAAYM,KAAS,KACtB,CAAC,uBAAuBjC,KACtBA,IAAqB,MAAQ2B,IAAY,SAC3C,CAAC,GAAGZ,EAAU,gBAAkB,mBAAoB,KACpD,CAAC,YAAY2B,KAAUA,IAAU,WAEnCI,GAAIjD,EAAGiD,IAAM,KAAI,aACL1D,EACZ2D,KAAK,UAEJd,IAAS,QAAUU,EAAA,QAAMK,KAAK,eAC9Bf,IAAS,QAAU5B,GAClBsC,EAAA,iBAAehB,QAASc,IAAS,QAAU,cAAgB,SACxDvC,KAGJ+B,IAAS,OAASU,EAAA,QAAME,MAAM,WAAS,S"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icCheckboxGroupCss","CheckboxGroup","this","checkboxSelector","watchDisabledHandler","removeDisabledFalse","disabled","el","labelNameHandler","newValue","oldValue","propName","Array","from","querySelectorAll","forEach","checkbox","groupLabel","name","watchThemeHandler","theme","handleChange","ev","target","tagName","stopImmediatePropagation","componentWillLoad","componentDidLoad","onComponentRequiredPropUndefined","prop","label","selectHandler","checkedOptions","filter","checked","icChange","emit","value","map","opt","textFieldValue","_a","querySelector","selectedOption","render","helperText","hideLabel","required","size","validationStatus","validationText","describedBy","getInputDescribedByText","h","Host","class","id","trim","useLabelTag","hasValidationStatus","for","ariaLiveMode","status","message"],"sources":["src/components/ic-checkbox-group/ic-checkbox-group.css?tag=ic-checkbox-group&encapsulation=shadow","src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n\n --ic-input-label-text-color: var(--ic-checkbox-group-label);\n --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle);\n --ic-input-validation-error: var(--ic-checkbox-state-icon-error);\n --ic-input-validation-status-text-color: var(--ic-checkbox-state-text);\n}\n\n:host(.ic-checkbox-group-disabled) {\n --ic-input-label-text-color: var(--ic-checkbox-group-label-disabled);\n --ic-input-label-helper-text-color: var(\n --ic-checkbox-group-subtitle-disabled\n );\n}\n\nic-input-label.error {\n color: var(--ic-checkbox-group-label-error);\n\n --ic-typography-color: var(--ic-checkbox-group-label-error);\n --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle-error);\n}\n\nic-input-label ic-typography {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small) ic-input-label ic-typography {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small) ic-input-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.checkboxes-container {\n margin-bottom: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-checkbox-group-small) .checkboxes-container {\n margin-bottom: calc(-1 * var(--ic-space-xxxs));\n}\n\n.screen-reader-only-text {\n position: absolute;\n left: -9999px;\n background-color: #fff;\n color: #000;\n text-transform: none;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n IcInformationStatusOrEmpty,\n IcSizes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n tag: \"ic-checkbox-group\",\n styleUrl: \"ic-checkbox-group.css\",\n shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n private checkboxSelector: string = \"ic-checkbox\";\n @Element() el: HTMLIcCheckboxGroupElement;\n\n /**\n * If `true`, the checkbox group will be set to the disabled state.\n */\n @Prop() disabled: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * The label for the checkbox group to be displayed.\n */\n @Prop() label!: string;\n\n /**\n * The name for the checkbox group to differentiate from other groups.\n */\n @Prop() name!: string;\n\n @Watch(\"label\")\n @Watch(\"name\")\n labelNameHandler(\n newValue: string,\n oldValue: string,\n propName: \"label\" | \"name\"\n ): void {\n Array.from(this.el.querySelectorAll(this.checkboxSelector)).forEach(\n (checkbox: HTMLIcCheckboxElement) => {\n if (propName === \"label\") checkbox.groupLabel = newValue;\n else if (checkbox.name === oldValue) {\n // If the checkbox name has been set by the parent, then override it\n checkbox.name = newValue;\n }\n }\n );\n }\n\n /**\n * If `true`, the checkbox group will require a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * The size of the checkboxes to be displayed. This does not affect the font size of the label.\n */\n @Prop() size?: IcSizes = \"medium\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(newValue: IcThemeMode): void {\n Array.from(this.el.querySelectorAll(this.checkboxSelector)).forEach(\n (checkbox: HTMLIcCheckboxElement) => {\n checkbox.theme = newValue;\n }\n );\n }\n\n /**\n * The validation status - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The validation text - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationText: string = \"\";\n\n /**\n * Emitted when a checkbox is checked.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icChange\")\n handleChange(ev: CustomEvent): void {\n //don't pass on the event if it has come from slotted text field\n //otherwise any icChange handler bound to the checkbox group will also run\n if ((ev.target as HTMLElement).tagName === \"IC-TEXT-FIELD\") {\n ev.stopImmediatePropagation();\n }\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n this.watchThemeHandler(this.theme);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Checkbox Group\"\n );\n }\n\n @Listen(\"icCheck\")\n selectHandler({ target }: CustomEvent): void {\n const checkedOptions = Array.from(\n this.el.querySelectorAll(\"ic-checkbox\")\n ).filter(({ checked, disabled }) => checked && !disabled);\n this.icChange.emit({\n value: checkedOptions.map(({ value }) => value),\n checkedOptions: checkedOptions.map((opt) => ({\n checkbox: opt,\n textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n })),\n selectedOption: target as HTMLIcCheckboxElement,\n });\n }\n\n render() {\n const {\n disabled,\n helperText,\n hideLabel,\n label,\n name,\n required,\n size,\n theme,\n validationStatus,\n validationText,\n } = this;\n\n const describedBy = getInputDescribedByText(\n name,\n helperText !== \"\",\n validationStatus !== \"\"\n );\n\n return (\n <Host\n class={{\n [`ic-checkbox-group-${size}`]: true,\n [`ic-checkbox-group-disabled`]: disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n {(validationStatus === \"error\" || required || hideLabel) && (\n <span\n id=\"screenReaderOnlyText\"\n class=\"screen-reader-only-text\"\n aria-hidden=\"true\"\n >\n {label} {validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n {required ? \"required\" : null}\n </span>\n )}\n <fieldset\n id={name}\n aria-labelledby={`${\n validationStatus === \"error\" || required || hideLabel\n ? \"screenReaderOnlyText\"\n : \"\"\n } ${describedBy}`.trim()}\n disabled={disabled}\n >\n {!hideLabel && (\n <legend>\n <ic-input-label\n class={{ [`${validationStatus}`]: true }}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n useLabelTag={false}\n ></ic-input-label>\n </legend>\n )}\n <div class=\"checkboxes-container\">\n <slot></slot>\n </div>\n </fieldset>\n {hasValidationStatus(validationStatus, disabled) && (\n <ic-input-validation\n for={name}\n ariaLiveMode=\"polite\"\n status={validationStatus}\n message={validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"oHAAA,MAAMA,EAAqB,2kH,MC8BdC,EAAa,M,4DAChBC,KAAAC,iBAA2B,c,cAMP,M,gBASC,G,eAKA,M,uDAiCD,M,UAKH,S,WAKK,U,sBAayB,G,oBAKtB,E,CAzEjC,oBAAAC,GACEC,EAAoBH,KAAKI,SAAUJ,KAAKK,G,CAyB1C,gBAAAC,CACEC,EACAC,EACAC,GAEAC,MAAMC,KAAKX,KAAKK,GAAGO,iBAAiBZ,KAAKC,mBAAmBY,SACzDC,IACC,GAAIL,IAAa,QAASK,EAASC,WAAaR,OAC3C,GAAIO,EAASE,OAASR,EAAU,CAEnCM,EAASE,KAAOT,C,KAqBxB,iBAAAU,CAAkBV,GAChBG,MAAMC,KAAKX,KAAKK,GAAGO,iBAAiBZ,KAAKC,mBAAmBY,SACzDC,IACCA,EAASI,MAAQX,CAAQ,G,CAqB/B,YAAAY,CAAaC,GAGX,GAAKA,EAAGC,OAAuBC,UAAY,gBAAiB,CAC1DF,EAAGG,0B,EAIP,iBAAAC,GACErB,EAAoBH,KAAKI,SAAUJ,KAAKK,IACxCL,KAAKiB,kBAAkBjB,KAAKkB,M,CAG9B,gBAAAO,GACEC,EACE,CACE,CAAEC,KAAM3B,KAAK4B,MAAOnB,SAAU,SAC9B,CAAEkB,KAAM3B,KAAKgB,KAAMP,SAAU,SAE/B,iB,CAKJ,aAAAoB,EAAcR,OAAEA,IACd,MAAMS,EAAiBpB,MAAMC,KAC3BX,KAAKK,GAAGO,iBAAiB,gBACzBmB,QAAO,EAAGC,UAAS5B,cAAe4B,IAAY5B,IAChDJ,KAAKiC,SAASC,KAAK,CACjBC,MAAOL,EAAeM,KAAI,EAAGD,WAAYA,IACzCL,eAAgBA,EAAeM,KAAKC,I,MAAQ,OAC1CvB,SAAUuB,EACVC,gBAAgBC,EAAAF,EAAIG,cAAc,oBAAgB,MAAAD,SAAA,SAAAA,EAAEJ,MACrD,IACDM,eAAgBpB,G,CAIpB,MAAAqB,GACE,MAAMtC,SACJA,EAAQuC,WACRA,EAAUC,UACVA,EAAShB,MACTA,EAAKZ,KACLA,EAAI6B,SACJA,EAAQC,KACRA,EAAI5B,MACJA,EAAK6B,iBACLA,EAAgBC,eAChBA,GACEhD,KAEJ,MAAMiD,EAAcC,EAClBlC,EACA2B,IAAe,GACfI,IAAqB,IAGvB,OACEI,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,qBAAqBP,KAAS,KAC/B,CAAC,8BAA+B1C,EAChC,CAAC,YAAYc,KAAUA,IAAU,aAGjC6B,IAAqB,SAAWF,GAAYD,IAC5CO,EAAA,QACEG,GAAG,uBACHD,MAAM,0BAAyB,cACnB,QAEXzB,EAAK,IAAGmB,IAAqB,QAAU,gBAAkB,KAAM,IAC/DF,EAAW,WAAa,MAG7BM,EAAA,YACEG,GAAItC,EAAI,kBACS,GACf+B,IAAqB,SAAWF,GAAYD,EACxC,uBACA,MACFK,IAAcM,OAClBnD,SAAUA,IAERwC,GACAO,EAAA,cACEA,EAAA,kBACEE,MAAO,CAAE,CAAC,GAAGN,KAAqB,MAClCnB,MAAOA,EACPe,WAAYA,EACZE,SAAUA,EACVzC,SAAUA,EACVoD,YAAa,SAInBL,EAAA,OAAKE,MAAM,wBACTF,EAAA,eAGHM,EAAoBV,EAAkB3C,IACrC+C,EAAA,uBACEO,IAAK1C,EACL2C,aAAa,SACbC,OAAQb,EACRc,QAASb,I"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,h as s,g as i}from"./p-6b5e91e2.js";const e=class{constructor(s){t(this,s);this.pendingVisibility=[];this.showToast=t=>{const s=Array.from(document.querySelectorAll("ic-toast")).filter((t=>window.getComputedStyle(t).display!=="none"));if(s.indexOf(t)===-1&&s.length<=0){t.setVisible().then((t=>this.previouslyFocused=t))}if(s.length>0)this.pendingVisibility.push(t)};this.openToast=undefined}watchOpenToastHandler(t){if(this.openToast!==undefined){this.showToast(t);this.openToast=undefined}}componentDidLoad(){if(this.openToast){this.showToast(this.openToast);this.openToast=undefined}}handleDismissedToast(){var t;if(this.pendingVisibility.length>0){this.pendingVisibility[0].setVisible().then((t=>this.previouslyFocused=t));this.pendingVisibility.shift()}else{if(this.previouslyFocused&&"setFocus"in this.previouslyFocused){this.previouslyFocused.setFocus()}else(t=this.previouslyFocused)===null||t===void 0?void 0:t.focus()}}render(){return s("slot",null)}get el(){return i(this)}static get watchers(){return{openToast:["watchOpenToastHandler"]}}};export{e as ic_toast_region};
|
2
|
-
//# sourceMappingURL=p-3ea4a005.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["ToastRegion","this","pendingVisibility","showToast","toast","visibleToasts","Array","from","document","querySelectorAll","filter","el","window","getComputedStyle","display","indexOf","length","setVisible","then","res","previouslyFocused","push","watchOpenToastHandler","newValue","openToast","undefined","componentDidLoad","handleDismissedToast","shift","setFocus","_a","focus","render","h"],"sources":["src/components/ic-toast-region/ic-toast-region.tsx"],"sourcesContent":["import { Component, Element, h, Listen, Prop, Watch } from \"@stencil/core\";\nimport { IcFocusableComponents } from \"../../utils/types\";\n\n@Component({ tag: \"ic-toast-region\" })\nexport class ToastRegion {\n private pendingVisibility: HTMLIcToastElement[] = [];\n private previouslyFocused: HTMLElement;\n\n @Element() el: HTMLIcToastRegionElement;\n\n /**\n * The toast element to be displayed.\n */\n @Prop({ mutable: true }) openToast: HTMLIcToastElement;\n @Watch(\"openToast\")\n watchOpenToastHandler(newValue: HTMLIcToastElement): void {\n if (this.openToast !== undefined) {\n this.showToast(newValue);\n this.openToast = undefined;\n }\n }\n\n componentDidLoad(): void {\n if (this.openToast) {\n this.showToast(this.openToast);\n this.openToast = undefined;\n }\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleDismissedToast(): void {\n if (this.pendingVisibility.length > 0) {\n this.pendingVisibility[0]\n .setVisible()\n .then((res) => (this.previouslyFocused = res));\n this.pendingVisibility.shift();\n } else {\n if (this.previouslyFocused && \"setFocus\" in this.previouslyFocused) {\n (this.previouslyFocused as IcFocusableComponents).setFocus();\n } else this.previouslyFocused?.focus();\n }\n }\n\n private showToast = (toast: HTMLIcToastElement) => {\n const visibleToasts = Array.from(\n document.querySelectorAll(\"ic-toast\")\n ).filter((el) => window.getComputedStyle(el).display !== \"none\");\n if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {\n toast.setVisible().then((res) => (this.previouslyFocused = res));\n }\n if (visibleToasts.length > 0) this.pendingVisibility.push(toast);\n };\n\n render() {\n return <slot></slot>;\n }\n}\n"],"mappings":"wDAIaA,EAAW,M,yBACdC,KAAAC,kBAA0C,GAsC1CD,KAAAE,UAAaC,IACnB,MAAMC,EAAgBC,MAAMC,KAC1BC,SAASC,iBAAiB,aAC1BC,QAAQC,GAAOC,OAAOC,iBAAiBF,GAAIG,UAAY,SACzD,GAAIT,EAAcU,QAAQX,MAAY,GAAKC,EAAcW,QAAU,EAAG,CACpEZ,EAAMa,aAAaC,MAAMC,GAASlB,KAAKmB,kBAAoBD,G,CAE7D,GAAId,EAAcW,OAAS,EAAGf,KAAKC,kBAAkBmB,KAAKjB,EAAM,E,yBAnClE,qBAAAkB,CAAsBC,GACpB,GAAItB,KAAKuB,YAAcC,UAAW,CAChCxB,KAAKE,UAAUoB,GACftB,KAAKuB,UAAYC,S,EAIrB,gBAAAC,GACE,GAAIzB,KAAKuB,UAAW,CAClBvB,KAAKE,UAAUF,KAAKuB,WACpBvB,KAAKuB,UAAYC,S,EAKrB,oBAAAE,G,MACE,GAAI1B,KAAKC,kBAAkBc,OAAS,EAAG,CACrCf,KAAKC,kBAAkB,GACpBe,aACAC,MAAMC,GAASlB,KAAKmB,kBAAoBD,IAC3ClB,KAAKC,kBAAkB0B,O,KAClB,CACL,GAAI3B,KAAKmB,mBAAqB,aAAcnB,KAAKmB,kBAAmB,CACjEnB,KAAKmB,kBAA4CS,U,MAC7CC,EAAA7B,KAAKmB,qBAAiB,MAAAU,SAAA,SAAAA,EAAEC,O,EAcnC,MAAAC,GACE,OAAOC,EAAA,Y"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as i,h as a,H as t,g as l}from"./p-6b5e91e2.js";import{b as r,X as e,Y as o,J as n,Z as c,_ as s,S as p}from"./p-cda4aca9.js";const d="ic-input-label{margin-bottom:var(--ic-space-xs);--ic-typography-color:var(\n --ic-input-label-text-color,\n var(--ic-color-text-primary)\n )}ic-input-label.with-helper{margin-bottom:var(--ic-space-xxxs)}ic-input-label.ic-input-label-readonly{--ic-typography-color:var(--ic-input-label-readonly-typography-color)}ic-input-label .helpertext{margin-top:var(--ic-space-xxxs);padding-bottom:var(--ic-input-label-helpertext-padding, 0);--ic-typography-color:var(\n --ic-input-label-helper-text-color,\n var(--ic-color-text-secondary)\n )}ic-input-label .helpertext-normal{--ic-typography-color:var(\n --ic-input-label-helper-text-color,\n var(--ic-color-text-secondary)\n )}ic-input-label .helpertext-readonly{--ic-typography-color:var(--ic-input-label-readonly-helpertext-color)}ic-input-label .readonly-label{--ic-typography-color:var(--ic-input-label-readonly-label-color)}ic-input-label .error-label{--ic-typography-color:var(--ic-input-label-error-label-color)}";const u=class{constructor(a){i(this,a);this.disabled=false;this.for=undefined;this.helperText="";this.hideLabel=false;this.label=undefined;this.readonly=false;this.required=false;this.status="";this.useLabelTag=true}componentDidLoad(){r([{prop:this.label,propName:"label"}],"Input Label")}render(){const{disabled:i,readonly:l,label:r,required:o,helperText:n,status:c,hideLabel:s,useLabelTag:p}=this;const d=o?r+" *":r;return a(t,{class:{"ic-input-label-disabled":i,"ic-input-label-readonly":l,"with-helper":n!==""}},!s&&a("ic-typography",{variant:"label",class:{"readonly-label":l,"error-label":c==="error"&&!(l||i)}},l||!p?`${d}`:a("label",{htmlFor:this.for},d)),n!==""&&a("ic-typography",{variant:"caption",class:{helpertext:true,"helpertext-normal":!i&&!l,"helpertext-readonly":l}},a("span",{id:e(this.for)},n)))}};u.style=d;const h="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-input-validation-success-icon-color)}ic-input-validation span.icon-error>svg{fill:var(--ic-input-validation-error, var(--ic-atoms-status-icon-error))}ic-input-validation span.icon-warning>svg{fill:var(--ic-input-validation-warning-icon-color)}ic-input-validation .statustext{flex-grow:1;color:var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );--ic-typography-color:var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n )}";const v={[n.Warning]:c,[n.Error]:s,[n.Success]:p};const b=class{constructor(a){i(this,a);this.ariaLiveMode="polite";this.for=undefined;this.fullWidth=false;this.message=undefined;this.status=""}componentDidLoad(){r([{prop:this.message,propName:"message"}],"Input Validation")}render(){const{ariaLiveMode:i,fullWidth:l,status:r,message:e}=this;const n=r!==""?v[r]:"";return a(t,{class:{[`ic-input-validation-${r}`]:r!=="","ic-input-validation-full-width":l}},n!==""&&a("span",{class:{"status-icon":true,[`icon-${r}`]:true},innerHTML:n}),a("ic-typography",{variant:"caption",class:"statustext"},a("span",{"aria-live":i,id:o(this.for)},e)),a("slot",{name:"validation-message-adornment"}))}get el(){return l(this)}};b.style=h;export{u as ic_input_label,b as ic_input_validation};
|
2
|
-
//# sourceMappingURL=p-41b7c67c.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icInputLabelCss","InputLabel","componentDidLoad","onComponentRequiredPropUndefined","prop","this","label","propName","render","disabled","readonly","required","helperText","status","hideLabel","useLabelTag","labelText","h","Host","class","variant","htmlFor","for","helpertext","id","getInputHelperTextID","icInputValidationCss","icon","IcInformationStatus","Warning","warningIcon","Error","errorIcon","Success","successIcon","InputValidation","message","ariaLiveMode","fullWidth","displayIcon","innerHTML","getInputValidationTextID","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 --ic-typography-color: var(\n --ic-input-label-text-color,\n var(--ic-color-text-primary)\n );\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-input-label-readonly-typography-color);\n}\n\nic-input-label .helpertext {\n margin-top: var(--ic-space-xxxs);\n padding-bottom: var(--ic-input-label-helpertext-padding, 0);\n\n --ic-typography-color: var(\n --ic-input-label-helper-text-color,\n var(--ic-color-text-secondary)\n );\n}\n\nic-input-label .helpertext-normal {\n --ic-typography-color: var(\n --ic-input-label-helper-text-color,\n var(--ic-color-text-secondary)\n );\n}\n\nic-input-label .helpertext-readonly {\n --ic-typography-color: var(--ic-input-label-readonly-helpertext-color);\n}\n\nic-input-label .readonly-label {\n --ic-typography-color: var(--ic-input-label-readonly-label-color);\n}\n\nic-input-label .error-label {\n --ic-typography-color: var(--ic-input-label-error-label-color);\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 * 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 label will be visually hidden.\n */\n @Prop() hideLabel: boolean = false;\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 /**\n * @internal If `true`, wraps label text in label tag\n */\n @Prop() useLabelTag: boolean = true;\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 hideLabel,\n useLabelTag,\n } = this;\n const labelText = required ? label + \" *\" : label;\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 {!hideLabel && (\n <ic-typography\n variant=\"label\"\n class={{\n \"readonly-label\": readonly,\n \"error-label\": status === \"error\" && !(readonly || disabled),\n }}\n >\n {readonly || !useLabelTag ? (\n `${labelText}`\n ) : (\n <label htmlFor={this.for}>{labelText}</label>\n )}\n </ic-typography>\n )}\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={getInputHelperTextID(this.for)}>{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-input-validation-success-icon-color);\n}\n\nic-input-validation span.icon-error > svg {\n fill: var(--ic-input-validation-error, var(--ic-atoms-status-icon-error));\n}\n\nic-input-validation span.icon-warning > svg {\n fill: var(--ic-input-validation-warning-icon-color);\n}\n\nic-input-validation .statustext {\n flex-grow: 1;\n color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\n\n --ic-typography-color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\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 { ariaLiveMode, fullWidth, status, message } = this;\n const displayIcon = status !== \"\" ? icon[status] : \"\";\n return (\n <Host\n class={{\n [`ic-input-validation-${status}`]: status !== \"\",\n \"ic-input-validation-full-width\": fullWidth,\n }}\n >\n {displayIcon !== \"\" && (\n <span\n class={{\n \"status-icon\": true,\n [`icon-${status}`]: true,\n }}\n innerHTML={displayIcon}\n />\n )}\n\n <ic-typography variant=\"caption\" class=\"statustext\">\n <span\n aria-live={ariaLiveMode}\n id={getInputValidationTextID(this.for)}\n >\n {message}\n </span>\n </ic-typography>\n\n <slot name=\"validation-message-adornment\"></slot>\n </Host>\n );\n }\n}\n"],"mappings":"uIAAA,MAAMA,EAAkB,w9B,MCWXC,EAAU,M,uCAIO,M,mCAUC,G,eAKA,M,mCAUD,M,cAKA,M,YAKG,G,iBAKA,I,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,UACNA,EAASC,YACTA,GACEV,KACJ,MAAMW,EAAYL,EAAWL,EAAQ,KAAOA,EAE5C,OACEW,EAACC,EAAI,CACHC,MAAO,CACL,0BAA2BV,EAC3B,0BAA2BC,EAC3B,cAAeE,IAAe,MAG9BE,GACAG,EAAA,iBACEG,QAAQ,QACRD,MAAO,CACL,iBAAkBT,EAClB,cAAeG,IAAW,WAAaH,GAAYD,KAGpDC,IAAaK,EAAW,GACpBC,IAEHC,EAAA,SAAOI,QAAShB,KAAKiB,KAAMN,IAKhCJ,IAAe,IACdK,EAAA,iBACEG,QAAQ,UACRD,MAAO,CACLI,WAAY,KACZ,qBAAsBd,IAAaC,EACnC,sBAAuBA,IAGzBO,EAAA,QAAMO,GAAIC,EAAqBpB,KAAKiB,MAAOV,I,aC9GvD,MAAMc,EAAuB,o1BCgB7B,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,gBAAAjC,GACEC,EACE,CAAC,CAAEC,KAAMC,KAAK+B,QAAS7B,SAAU,YACjC,mB,CAIJ,MAAAC,GACE,MAAM6B,aAAEA,EAAYC,UAAEA,EAASzB,OAAEA,EAAMuB,QAAEA,GAAY/B,KACrD,MAAMkC,EAAc1B,IAAW,GAAKc,EAAKd,GAAU,GACnD,OACEI,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,uBAAuBN,KAAWA,IAAW,GAC9C,iCAAkCyB,IAGnCC,IAAgB,IACftB,EAAA,QACEE,MAAO,CACL,cAAe,KACf,CAAC,QAAQN,KAAW,MAEtB2B,UAAWD,IAIftB,EAAA,iBAAeG,QAAQ,UAAUD,MAAM,cACrCF,EAAA,oBACaoB,EACXb,GAAIiB,EAAyBpC,KAAKiB,MAEjCc,IAILnB,EAAA,QAAMyB,KAAK,iC"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icLinkCss","Link","this","inheritedAttributes","hostMutationObserver","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","IC_INHERITED_ARIA","includes","el","getAttribute","forceUpdate","componentWillLoad","inheritAttributes","updateTheme","setAttribute","componentDidLoad","MutationObserver","observe","attributes","disconnectedCallback","_a","disconnect","brandChangeHandler","detail","mode","setFocus","shadowRoot","querySelector","focus","theme","getBrandFromContext","IcBrandForegroundEnum","Default","monochrome","Light","Dark","hasRouterSlot","routerSlot","ariaLabel","textContent","render","download","href","hreflang","referrerpolicy","rel","target","h","Host","class","name","Object","assign","hrefLang","referrerPolicy","tabindex","part","innerHTML","OpenInNew"],"sources":["src/components/ic-link/ic-link.css?tag=ic-link&encapsulation=shadow","src/components/ic-link/ic-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-link) .link,\n:host(.ic-link) ::slotted(a) {\n color: var(--ic-link-text);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n transition: var(--ic-easing-transition-fast);\n}\n\n:host(.ic-link) .link:visited,\n:host(.ic-link) ::slotted(a:visited),\n:host(.ic-link) .link:visited:hover,\n:host(.ic-link) ::slotted(a:visited:hover),\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:visited:active),\n:host(.ic-link) .link:visited:focus,\n:host(.ic-link) ::slotted(a:visited:focus) {\n color: var(--ic-link-text-visited);\n}\n\n:host(.ic-link) .link:hover {\n color: var(--ic-link-text-hover);\n}\n\n:host(.ic-link) .link:active {\n color: var(--ic-link-text-pressed);\n}\n\n:host(.ic-link) .link:focus {\n color: var(--ic-link-text-focused);\n}\n\n:host(.ic-link-monochrome) .link:hover {\n color: var(--ic-link-text-hover-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:active {\n color: var(--ic-link-text-pressed-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:focus {\n color: var(--ic-link-text-focused-monochrome);\n}\n\n:host(.ic-link) .link:hover,\n:host(.ic-link) .link:focus,\n:host(.ic-link) ::slotted(a:hover),\n:host(.ic-link) ::slotted(a:focus) {\n outline: none;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n@supports (text-underline-offset: 10%) {\n :host(.ic-link) .link:hover,\n :host(.ic-link) .link:focus,\n :host(.ic-link) ::slotted(a:hover),\n :host(.ic-link) ::slotted(a:focus) {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 10%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n:host(.ic-link) .link:active,\n:host(.ic-link) .link:focus:active,\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:active),\n:host(.ic-link) ::slotted(a:focus:active),\n:host(.ic-link) ::slotted(a:visited:active) {\n text-decoration: none;\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-open-in-new-icon > svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n fill: var(--ic-link-icon-launch);\n}\n\n.link:visited > .ic-link-open-in-new-icon > svg {\n fill: var(--ic-link-icon-launch-visited);\n}\n\n:host(.ic-link-monochrome) .link,\n:host(.ic-link-monochrome) ::slotted(a) {\n color: var(--ic-link-text-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited,\n:host(.ic-link-monochrome) ::slotted(a:visited),\n:host(.ic-link-monochrome) .link:visited:hover,\n:host(.ic-link-monochrome) ::slotted(a:visited:hover),\n:host(.ic-link-monochrome) .link:visited:active,\n:host(.ic-link-monochrome) ::slotted(a:visited:active),\n:host(.ic-link-monochrome) .link:visited:focus,\n:host(.ic-link-monochrome) ::slotted(a:visited:focus) {\n color: var(--ic-link-text-visited-monochrome);\n}\n\n:host(.ic-link-monochrome) .link > .ic-link-open-in-new-icon > svg {\n fill: var(--ic-link-icon-launch-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited > .ic-link-open-in-new-icon > svg {\n fill: var(--ic-link-icon-launch-visited-monochrome);\n}\n\n:host(.breadcrumb-link) .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) .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) .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) .link:visited {\n color: var(--ic-color-text-primary);\n}\n\n/* Footer link */\n\n:host(.footer-link) ::slotted(a) {\n color: var(--ic-footer-link) !important;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n .ic-link-open-in-new-icon > svg {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Prop,\n h,\n Host,\n Listen,\n Method,\n forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getBrandFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n tag: \"ic-link\",\n styleUrl: \"ic-link.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Link {\n private inheritedAttributes: { [k: string]: string } = {};\n private routerSlot: HTMLElement;\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcLinkElement;\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 * If `true`, the link will display as black in the light theme, and white in the dark theme.\n */\n @Prop({ mutable: true }) monochrome?: boolean = false;\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 /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop({ mutable: true }) theme?: IcThemeMode = \"inherit\";\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n this.updateTheme();\n this.el.setAttribute(\"exportparts\", \"link\");\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.updateTheme(detail.mode);\n }\n\n /**\n * Sets focus on the link.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot.querySelector(\"a\")?.focus();\n }\n\n private updateTheme(mode: IcBrandForeground = null): void {\n const theme = getBrandFromContext(this.el, mode);\n\n if (theme !== IcBrandForegroundEnum.Default) {\n this.monochrome = true;\n this.theme =\n theme === IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n }\n }\n\n private hasRouterSlot(): boolean {\n this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n if (this.routerSlot) {\n this.routerSlot.ariaLabel = this.routerSlot.textContent;\n }\n return !!this.routerSlot;\n }\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (IC_INHERITED_ARIA.includes(attributeName)) {\n this.inheritedAttributes[attributeName] =\n this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n download,\n href,\n hreflang,\n referrerpolicy,\n rel,\n target,\n monochrome,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [\"ic-link\"]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [\"ic-link-monochrome\"]: monochrome,\n }}\n >\n {this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <a\n class={{\n [\"link\"]: href !== null,\n }}\n download={download !== false ? download : null}\n href={href}\n hrefLang={hreflang}\n referrerPolicy={referrerpolicy}\n rel={rel}\n target={target}\n tabindex={href !== null ? \"0\" : \"-1\"}\n {...this.inheritedAttributes}\n part=\"link\"\n >\n <slot />\n {target === \"_blank\" && (\n <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"6JAAA,MAAMA,EAAY,s4L,MCgCLC,EAAI,M,yBACPC,KAAAC,oBAA+C,GAE/CD,KAAAE,qBAAyC,KA+FzCF,KAAAG,qBAAwBC,IAC9B,IAAIC,EAAuB,MAC3BD,EAAaE,SAAQ,EAAGC,oBACtB,GAAIC,EAAkBC,SAASF,GAAgB,CAC7CP,KAAKC,oBAAoBM,GACvBP,KAAKU,GAAGC,aAAaJ,GACvBF,EAAuB,I,KAG3B,GAAIA,EAAsB,CACxBO,EAAYZ,K,iBAlGsB,M,UAKd,K,wCAUwB,M,kFAoBD,S,CAE/C,iBAAAa,GACEb,KAAKC,oBAAsBa,EAAkBd,KAAKU,GAAIF,GACtDR,KAAKe,cACLf,KAAKU,GAAGM,aAAa,cAAe,O,CAGtC,gBAAAC,GACEjB,KAAKE,qBAAuB,IAAIgB,iBAAiBlB,KAAKG,sBACtDH,KAAKE,qBAAqBiB,QAAQnB,KAAKU,GAAI,CACzCU,WAAY,M,CAIhB,oBAAAC,G,OACEC,EAAAtB,KAAKE,wBAAoB,MAAAoB,SAAA,SAAAA,EAAEC,Y,CAI7B,kBAAAC,EAAmBC,OAAEA,IACnBzB,KAAKe,YAAYU,EAAOC,K,CAO1B,cAAMC,G,OACJL,EAAAtB,KAAKU,GAAGkB,WAAWC,cAAc,QAAI,MAAAP,SAAA,SAAAA,EAAEQ,O,CAGjC,WAAAf,CAAYW,EAA0B,MAC5C,MAAMK,EAAQC,EAAoBhC,KAAKU,GAAIgB,GAE3C,GAAIK,IAAUE,EAAsBC,QAAS,CAC3ClC,KAAKmC,WAAa,KAClBnC,KAAK+B,MACHA,IAAUE,EAAsBG,MAC5BH,EAAsBI,KACtBJ,EAAsBG,K,EAIxB,aAAAE,GACNtC,KAAKuC,WAAavC,KAAKU,GAAGmB,cAAc,wBACxC,GAAI7B,KAAKuC,WAAY,CACnBvC,KAAKuC,WAAWC,UAAYxC,KAAKuC,WAAWE,W,CAE9C,QAASzC,KAAKuC,U,CAkBhB,MAAAG,GACE,MAAMC,SACJA,EAAQC,KACRA,EAAIC,SACJA,EAAQC,eACRA,EAAcC,IACdA,EAAGC,OACHA,EAAMb,WACNA,EAAUJ,MACVA,GACE/B,KAEJ,OACEiD,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,WAAY,KACb,CAAC,YAAYpB,KAAUA,IAAU,UACjC,CAAC,sBAAuBI,IAGzBnC,KAAKsC,gBACJW,EAAA,QAAMG,KAAK,gBAEXH,EAAA,IAAAI,OAAAC,OAAA,CACEH,MAAO,CACL,CAAC,QAASP,IAAS,MAErBD,SAAUA,IAAa,MAAQA,EAAW,KAC1CC,KAAMA,EACNW,SAAUV,EACVW,eAAgBV,EAChBC,IAAKA,EACLC,OAAQA,EACRS,SAAUb,IAAS,KAAO,IAAM,MAC5B5C,KAAKC,oBAAmB,CAC5ByD,KAAK,SAELT,EAAA,aACCD,IAAW,UACVC,EAAA,QAAME,MAAM,2BAA2BQ,UAAWC,K"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icNavigationButtonCss","MUTABLE_ATTRIBUTES","IC_INHERITED_ARIA","NavigationButton","this","inheritedAttributes","hostMutationObserver","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","includes","el","getAttribute","forceUpdate","getBrandForegroundAppearance","componentWillLoad","inheritAttributes","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","MutationObserver","observe","attributes","componentWillRender","iconEl","querySelector","setAttribute","disconnectedCallback","_a","disconnect","navBarMenuOpenHandler","mode","navBarMenuCloseHandler","brandChangeHandler","ev","initialAppearance","detail","setFocus","buttonEl","focus","render","href","target","rel","download","referrerpolicy","className","variant","appearance","size","fullWidth","disableTooltip","IcBrandForegroundEnum","Default","buttonProps","h","Host","class","theme","Object","assign","ref","monochrome","slot","name","isSlotUsed"],"sources":["src/components/ic-navigation-button/ic-navigation-button.css?tag=ic-navigation-button&encapsulation=shadow","src/components/ic-navigation-button/ic-navigation-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n margin-right: var(--ic-space-xs);\n list-style: none;\n}\n\n:host(.in-side-menu) {\n margin-right: 0;\n}\n\n:host::part(button) {\n height: 100%;\n min-height: 2.5rem;\n}\n\n:host(.in-side-menu) ::part(button) {\n color: var(--ic-top-navigation-icon-active);\n}\n\n:host(.in-side-menu) ::part(button):hover {\n color: var(--ic-top-navigation-icon-hover);\n background-color: var(--ic-top-navigation-icon-hover-background);\n}\n\n:host(.in-side-menu) ::part(button):active {\n color: var(--ic-top-navigation-icon-pressed);\n background-color: var(--ic-top-navigation-icon-pressed-background);\n}\n\n:host(.in-side-menu) ::slotted(ic-badge) {\n margin-left: var(--ic-space-xs);\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n State,\n h,\n Listen,\n Method,\n forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n getBrandForegroundAppearance,\n inheritAttributes,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcBrandForegroundNoDefault,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n\n@Component({\n tag: \"ic-navigation-button\",\n styleUrl: \"ic-navigation-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationButton {\n private buttonEl: HTMLIcButtonElement;\n private inheritedAttributes: { [k: string]: string } = {};\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcNavigationButtonElement;\n\n @State() initialAppearance: IcBrandForegroundNoDefault | IcBrandForeground =\n getBrandForegroundAppearance();\n /**\n * The display mode.\n */\n @State() mode: IcNavButtonModes = \"navbar\";\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. This will render the button as an \"a\" tag.\n */\n @Prop() href?: string;\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n\n /**\n * The label info to display.\n */\n @Prop() label!: string;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Navigation Button\"\n );\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n componentWillRender(): void {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n }\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n navBarMenuOpenHandler(): void {\n this.mode = \"menu\";\n }\n\n @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n navBarMenuCloseHandler(): void {\n this.mode = \"navbar\";\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.initialAppearance = ev.detail.mode;\n }\n\n /**\n * Sets focus on the native `button`.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.buttonEl) {\n this.buttonEl.focus();\n }\n }\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n this.inheritedAttributes[attributeName] =\n this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n render() {\n const { href, target, rel, download, referrerpolicy } = this;\n\n let label = \"\";\n let className = \"\";\n let variant: \"icon\" | \"tertiary\" = \"icon\";\n let appearance: IcBrandForeground | IcBrandForegroundEnum.Default =\n this.initialAppearance;\n let size: \"medium\" | \"large\" = \"large\";\n let fullWidth = false;\n let disableTooltip = false;\n\n if (this.mode === \"menu\") {\n label = this.label;\n variant = \"tertiary\";\n appearance = IcBrandForegroundEnum.Default;\n size = \"medium\";\n fullWidth = true;\n className = \"popout-menu-button\";\n disableTooltip = true;\n }\n\n const buttonProps = {\n variant,\n appearance,\n size,\n href,\n target,\n rel,\n download,\n referrerpolicy,\n fullWidth,\n disableTooltip,\n };\n\n return (\n <Host\n class={{\n [\"in-side-menu\"]: this.mode === \"menu\",\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <ic-button\n class={className}\n aria-label={variant == \"icon\" ? this.label : null}\n ref={(el) => (this.buttonEl = el)}\n {...buttonProps}\n {...this.inheritedAttributes}\n monochrome={this.mode !== \"menu\"}\n theme={getBrandForegroundAppearance() == \"light\" ? \"light\" : \"dark\"}\n >\n {label}\n <slot slot=\"left-icon\" name=\"icon\"></slot>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </ic-button>\n </Host>\n );\n }\n}\n"],"mappings":"uIAAA,MAAMA,EAAwB,k8FC4B9B,MAAMC,EAAqB,IAAIC,EAAmB,S,MAcrCC,EAAgB,M,yBAEnBC,KAAAC,oBAA+C,GAC/CD,KAAAE,qBAAyC,KAsGzCF,KAAAG,qBAAwBC,IAC9B,IAAIC,EAAuB,MAC3BD,EAAaE,SAAQ,EAAGC,oBACtB,GAAIV,EAAmBW,SAASD,GAAgB,CAC9CP,KAAKC,oBAAoBM,GACvBP,KAAKS,GAAGC,aAAaH,GACvBF,EAAuB,I,KAG3B,GAAIA,EAAsB,CACxBM,EAAYX,K,0BA3GdY,I,UAIgC,S,cAKI,M,mJAmCR,S,CAE9B,iBAAAC,GACEb,KAAKC,oBAAsBa,EAAkBd,KAAKS,GAAIZ,E,CAGxD,gBAAAkB,GACEC,EACE,CAAC,CAAEC,KAAMjB,KAAKkB,MAAOC,SAAU,UAC/B,qBAGFnB,KAAKE,qBAAuB,IAAIkB,iBAAiBpB,KAAKG,sBACtDH,KAAKE,qBAAqBmB,QAAQrB,KAAKS,GAAI,CACzCa,WAAY,M,CAIhB,mBAAAC,GACE,MAAMC,EAASxB,KAAKS,GAAGgB,cAAc,iBACrCD,IAAW,MAAQA,EAAOE,aAAa,UAAW,Y,CAGpD,oBAAAC,G,OACEC,EAAA5B,KAAKE,wBAAoB,MAAA0B,SAAA,SAAAA,EAAEC,Y,CAI7B,qBAAAC,GACE9B,KAAK+B,KAAO,M,CAId,sBAAAC,GACEhC,KAAK+B,KAAO,Q,CAId,kBAAAE,CAAmBC,GACjBlC,KAAKmC,kBAAoBD,EAAGE,OAAOL,I,CAOrC,cAAMM,GACJ,GAAIrC,KAAKsC,SAAU,CACjBtC,KAAKsC,SAASC,O,EAmBlB,MAAAC,GACE,MAAMC,KAAEA,EAAIC,OAAEA,EAAMC,IAAEA,EAAGC,SAAEA,EAAQC,eAAEA,GAAmB7C,KAExD,IAAIkB,EAAQ,GACZ,IAAI4B,EAAY,GAChB,IAAIC,EAA+B,OACnC,IAAIC,EACFhD,KAAKmC,kBACP,IAAIc,EAA2B,QAC/B,IAAIC,EAAY,MAChB,IAAIC,EAAiB,MAErB,GAAInD,KAAK+B,OAAS,OAAQ,CACxBb,EAAQlB,KAAKkB,MACb6B,EAAU,WACVC,EAAaI,EAAsBC,QACnCJ,EAAO,SACPC,EAAY,KACZJ,EAAY,qBACZK,EAAiB,I,CAGnB,MAAMG,EAAc,CAClBP,UACAC,aACAC,OACAR,OACAC,SACAC,MACAC,WACAC,iBACAK,YACAC,kBAGF,OACEI,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,gBAAiBzD,KAAK+B,OAAS,OAChC,CAAC,YAAY/B,KAAK0D,SAAU1D,KAAK0D,QAAU,YAG7CH,EAAA,YAAAI,OAAAC,OAAA,CACEH,MAAOX,EAAS,aACJC,GAAW,OAAS/C,KAAKkB,MAAQ,KAC7C2C,IAAMpD,GAAQT,KAAKsC,SAAW7B,GAC1B6C,EACAtD,KAAKC,oBAAmB,CAC5B6D,WAAY9D,KAAK+B,OAAS,OAC1B2B,MAAO9C,KAAkC,QAAU,QAAU,SAE5DM,EACDqC,EAAA,QAAMQ,KAAK,YAAYC,KAAK,SAC3BC,EAAWjE,KAAKS,GAAI,UAAY8C,EAAA,QAAMS,KAAK,W"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icTypographyCss","Typography","this","focusBtnFromKeyboard","inAGGrid","lastMarkerTop","lastWidth","resizeObserver","truncatedHeight","toggleExpanded","ev","stopPropagation","expanded","typographyTruncationExpandToggle","emit","typographyEl","el","checkMarkerPosition","elTop","markerTop","truncated","getElementTop","getClientRects","top","runResizeObserver","ResizeObserver","clearTimeout","resizeInterval","window","setTimeout","resizeObserverCallback","observe","truncWrapperEl","clientWidth","checkMaxLines","clientHeight","marker","truncButtonFocus","truncButtonFocussed","truncButtonBlur","truncButtonFocusFromMouse","watchExpandedHandler","setAttribute","maxLines","disconnectedCallback","disconnect","resetTruncation","removeAttribute","componentDidLoad","variant","_b","_a","getRootNode","host","tagName","document","createElement","style","visibility","appendChild","checkResizeObserver","componentWillRender","isElInAGGrid","height","numLines","Math","floor","setShowHideExpanded","render","applyVerticalMargins","strikethrough","underline","italic","bold","theme","h","Host","class","ref","focus","onFocus","onBlur","onMouseDown","onClick"],"sources":["src/components/ic-typography/ic-typography.css?tag=ic-typography&encapsulation=shadow","src/components/ic-typography/ic-typography.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n position: relative;\n color: var(--ic-typography-color, var(--ic-color-text-primary));\n}\n\n:host(.ic-typography-vertical-margins-h1) {\n margin: 0 0 var(--ic-space-xl);\n}\n\n:host(.ic-typography-vertical-margins-h2) {\n margin: var(--ic-space-xxl) 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-vertical-margins-h3) {\n margin: var(--ic-space-xl) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-h4) {\n margin: var(--ic-space-lg) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body),\n:host(.ic-typography-vertical-margins-code-large),\n:host(.ic-typography-vertical-margins-code-small),\n:host(.ic-typography-vertical-margins-code-extra-small) {\n margin: 0 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase) {\n margin: 0 0 var(--ic-space-xs);\n}\n\n:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child) {\n margin-top: 0;\n}\n\n:host(.ic-typography-h1) {\n font: var(--ic-font-h1) !important;\n}\n\n:host(.ic-typography-h2) {\n font: var(--ic-font-h2);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-h3) {\n font: var(--ic-font-h3);\n}\n\n:host(.ic-typography-h4) {\n font: var(--ic-font-h4);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-large) {\n font: var(--ic-font-subtitle-large);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-small) {\n font: var(--ic-font-subtitle-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-body) {\n font: var(--ic-font-body);\n letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-caption) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-caption-uppercase) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-label) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-label-uppercase) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-code-large) {\n font: var(--ic-font-code-large);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-code-small) {\n font: var(--ic-font-code-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-code-extra-small) {\n font: var(--ic-font-code-extra-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-badge) {\n font: var(--ic-font-badge);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-badge-small) {\n font: var(--ic-font-badge-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-no-wrap) {\n white-space: nowrap;\n}\n\n:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label) {\n font: inherit;\n letter-spacing: inherit;\n}\n\n.trunc-wrapper {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n line-clamp: var(--truncation-max-lines, initial);\n -webkit-line-clamp: var(--truncation-max-lines, initial);\n overflow: hidden;\n padding-right: var(--ellipsis-padding-right, 0);\n}\n\n.trunc-btn {\n border: none;\n background: none;\n padding: 0;\n color: var(--ic-color-text-primary);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n transition: var(--ic-easing-transition-fast);\n}\n\n.trunc-btn:hover,\n.trunc-btn.focus {\n outline: none;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n cursor: pointer;\n}\n\n:host(.ic-typography-strikethrough) {\n text-decoration: line-through;\n}\n\n:host(.ic-typography-underline) {\n text-decoration: underline;\n}\n\n:host(.ic-typography-underline.ic-typography-strikethrough) {\n text-decoration: line-through underline;\n}\n\n:host(.ic-typography-italic) {\n font-style: italic !important;\n}\n\n:host(.ic-typography-bold) {\n font-weight: var(--ic-font-weight-bold);\n}\n\n:host(.ic-theme-dark),\n:host(.ic-theme-light) {\n --ic-typography-color: var(--ic-color-text-primary);\n}\n\n:host(.in-ag-grid),\n:host(.in-ag-grid) ::slotted(*) {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@supports (text-underline-offset: 25%) {\n .trunc-btn:hover,\n .trunc-btn.focus {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n@media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n :host,\n .trunc-btn::not(ic-tooltip) {\n color: var(--ic-typography-color);\n }\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n Host,\n State,\n Watch,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport { IcTypographyVariants, IcThemeMode } from \"../../utils/types\";\nimport { checkResizeObserver, isElInAGGrid } from \"../../utils/helpers\";\n\n@Component({\n styleUrl: \"ic-typography.css\",\n tag: \"ic-typography\",\n shadow: true,\n})\nexport class Typography {\n private focusBtnFromKeyboard: boolean = true;\n private inAGGrid: boolean = false;\n private lastMarkerTop: number = 0;\n private lastWidth: number = 0;\n private marker: HTMLElement;\n private resizeInterval: number;\n private resizeObserver: ResizeObserver = null;\n private truncatedHeight: number = 0;\n private truncWrapperEl: Element;\n\n @Element() el: HTMLIcTypographyElement;\n\n @State() truncated: boolean = false;\n @State() truncButtonFocussed: boolean = false;\n\n /**\n * If `true`, appropriate top and bottom margins will be applied to the typography.\n */\n @Prop() applyVerticalMargins?: boolean = false;\n\n /**\n * If `true`, the typography will have a bold font weight.\n * Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).\n */\n @Prop() bold?: boolean = false;\n\n /**\n * If `true`, the typography will have an italic font style.\n */\n @Prop() italic?: boolean = false;\n\n /**\n * The number of lines to display before truncating the text, only used for the 'body' variant.\n */\n @Prop({ mutable: true }) maxLines?: number;\n\n /**\n * If `true`, the typography will have a line through it.\n */\n @Prop() strikethrough?: boolean = false;\n\n /**\n * Sets the text color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * If `true`, the typography will have a line under it.\n */\n @Prop() underline?: boolean = false;\n\n /**\n * The ICDS typography style to use.\n */\n @Prop() variant?: IcTypographyVariants = \"body\";\n\n /**\n * @internal Emits and event when the typography truncation button has been clicked.\n */\n @Event() typographyTruncationExpandToggle: EventEmitter<{\n expanded: boolean;\n typographyEl: HTMLIcTypographyElement;\n }>;\n\n @State() expanded: boolean = false;\n\n @Watch(\"expanded\")\n watchExpandedHandler(): void {\n this.el.setAttribute(\n \"style\",\n `--truncation-max-lines: ${this.expanded ? \"initial\" : this.maxLines}`\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n /**\n * @internal This is used by data table to remove all truncation in certain events\n */\n @Method()\n async resetTruncation() {\n if (this.truncated) {\n this.truncated = false;\n this.maxLines = 0;\n this.el.removeAttribute(\"max-lines\");\n this.expanded = false;\n this.el.removeAttribute(\"style\");\n }\n }\n\n componentDidLoad(): void {\n if (\n (this.variant === \"body\" ||\n (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n \"IC-TOOLTIP\") &&\n this.maxLines > 0\n ) {\n const marker = document.createElement(\"span\");\n marker.style.visibility = \"hidden\";\n this.el.appendChild(marker);\n this.marker = marker;\n this.lastWidth = this.el.clientWidth;\n this.checkMaxLines(this.el.clientHeight);\n checkResizeObserver(this.runResizeObserver);\n }\n }\n\n componentWillRender(): void {\n if (isElInAGGrid(this.el)) {\n this.inAGGrid = true;\n }\n }\n\n private toggleExpanded = (ev: Event) => {\n ev.stopPropagation();\n\n this.expanded = !this.expanded;\n this.typographyTruncationExpandToggle.emit({\n expanded: this.expanded,\n typographyEl: this.el,\n });\n };\n\n /**\n * @internal This checks if the number of lines of text exceeds the maxLines prop. If so, set the line clamp CSS to the max lines\n * @param height - text container height\n */\n\n @Method()\n async checkMaxLines(height: number) {\n //24 is the height of a single line\n const numLines = Math.floor(height / 24);\n if (numLines > this.maxLines) {\n this.el.setAttribute(\"style\", `--truncation-max-lines: ${this.maxLines}`);\n this.truncatedHeight = this.el.clientHeight;\n this.truncated = true;\n }\n }\n\n /**\n * @internal This method makes it possible to set the expanded status of truncated text outside of ic-typography component\n */\n @Method()\n async setShowHideExpanded(expanded: boolean) {\n this.expanded = expanded;\n }\n\n private checkMarkerPosition = (elTop: number, markerTop: number) => {\n if (markerTop - elTop < this.truncatedHeight) {\n this.truncated = false;\n this.expanded = false;\n } else {\n this.truncated = true;\n }\n };\n\n private getElementTop = (el: HTMLElement) => {\n return el.getClientRects && el.getClientRects()[0]\n ? el.getClientRects()[0].top\n : 0;\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n clearTimeout(this.resizeInterval);\n this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);\n });\n this.resizeObserver.observe(this.truncWrapperEl);\n };\n\n private resizeObserverCallback = () => {\n if (this.lastWidth === this.el.clientWidth) {\n return;\n }\n\n if (this.truncatedHeight === 0) {\n this.checkMaxLines(this.el.clientHeight);\n return;\n }\n\n const markerTop = this.getElementTop(this.marker);\n if (markerTop === this.lastMarkerTop) {\n return;\n }\n\n this.checkMarkerPosition(this.getElementTop(this.el), markerTop);\n this.lastMarkerTop = markerTop;\n this.lastWidth = this.el.clientWidth;\n };\n\n private truncButtonFocus = (): void => {\n if (this.focusBtnFromKeyboard) {\n this.truncButtonFocussed = true;\n }\n };\n\n private truncButtonBlur = (): void => {\n this.focusBtnFromKeyboard = true;\n this.truncButtonFocussed = false;\n };\n\n private truncButtonFocusFromMouse = (): void => {\n this.focusBtnFromKeyboard = false;\n };\n\n render() {\n const {\n variant,\n applyVerticalMargins,\n maxLines,\n truncated,\n expanded,\n strikethrough,\n underline,\n italic,\n bold,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-typography-${variant}`]: true,\n [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n [\"ic-typography-bold\"]: bold,\n [\"ic-typography-italic\"]: italic,\n [\"ic-typography-strikethrough\"]: strikethrough,\n [\"ic-typography-underline\"]: underline,\n [\"in-ag-grid\"]: this.inAGGrid,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n {(variant === \"body\" ||\n (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n \"IC-TOOLTIP\") &&\n maxLines > 0 ? (\n <div class=\"trunc-wrapper\" ref={(el) => (this.truncWrapperEl = el)}>\n <slot />\n </div>\n ) : (\n <slot />\n )}\n {variant === \"body\" && maxLines > 0 && truncated && (\n <button\n class={{ \"trunc-btn\": true, focus: this.truncButtonFocussed }}\n onFocus={this.truncButtonFocus}\n onBlur={this.truncButtonBlur}\n onMouseDown={this.truncButtonFocusFromMouse}\n onClick={this.toggleExpanded}\n >\n {expanded ? \"See less\" : \"See more\"}\n </button>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,h as t,H as i,g as n}from"./p-6b5e91e2.js";import{g as o,s as a,i as r,b as s,a as c,d as h,I as d}from"./p-cda4aca9.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-brand-color-tertiary);--hero-heading-bottom-margin:var(--ic-space-md);--hero-keyline:var(--ic-hero-keyline)}:host(.ic-hero-dark){background-color:var(--ic-brand-color-secondary);--ic-hero-heading:var(--ic-color-text-primary-light);--ic-hero-body:var(--ic-color-text-primary-light);--ic-hero-secondary-heading:var(--ic-color-text-primary-light);--hero-keyline:var(--ic-brand-text-color)}.heading{--ic-typography-color:var(--ic-hero-heading)}.subheading{--ic-typography-color:var(--ic-hero-body)}.secondary-container{--ic-typography-color:var(--ic-hero-secondary-heading);display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--hero-keyline)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg);flex-wrap:wrap}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned="left"]) .left-container,:host([content-aligned="left"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned="center"]) .left-container,:host([content-aligned="center"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}.right-container{margin-left:3.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:17.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:16.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}';const m=class{constructor(t){e(this,t);this.hostMutationObserver=null;this.foregroundColor=o();this.rightContent=false;this.leftContentFullWidth=!this.rightContent&&this.secondaryHeading===undefined;this.scrollFactor="right -100px";this.aligned="left";this.backgroundImage=undefined;this.contentAligned="left";this.disableBackgroundParallax=false;this.heading=undefined;this.secondaryHeading=undefined;this.secondarySubheading=undefined;this.size="medium";this.subheading=undefined}disconnectedCallback(){var e;(e=this.hostMutationObserver)===null||e===void 0?void 0:e.disconnect()}componentWillLoad(){this.rightContent=a(this.el,"secondary")}componentDidLoad(){!r(this.el,"heading")&&s([{prop:this.heading,propName:"heading"}],"Hero");this.hostMutationObserver=new MutationObserver((e=>c(e,"secondary",this)));this.hostMutationObserver.observe(this.el,{childList:true})}componentWillRender(){this.rightContent=a(this.el,"secondary")}brandChangeHandler(e){this.foregroundColor=e.detail.mode}doScroll(){if(this.disableBackgroundParallax){return}const e=document.scrollingElement.scrollTop;const t=.4;const i=-100+e*t;this.scrollFactor="right "+i+"px"}render(){const{aligned:e,size:n,heading:o,subheading:a,secondaryHeading:r,secondarySubheading:s,foregroundColor:c,backgroundImage:l,scrollFactor:m}=this;let g={};if(h(l)){g={"background-image":"url("+l+")","background-position":m}}return t(i,{class:{[`ic-hero-${d.Dark}`]:c===d.Dark,["has-background-image"]:l!==undefined,["ic-hero-small"]:n==="small",["secondary-heading"]:!!r},style:g},t("ic-section-container",{aligned:e,fullHeight:true,class:"section-container"},t("div",{class:{["left-container"]:true,["left-container-full-width"]:this.leftContentFullWidth}},t("div",{class:"heading"},t("slot",{name:"heading"},t("ic-typography",{variant:n==="small"?"h2":"h1",class:{["heading-bottom-spacing"]:n!=="small"}},t("h2",null,o)))),t("div",{class:"subheading"},t("slot",{name:"subheading"},t("ic-typography",{variant:"body"},a))),t("div",{class:"interaction-container"},t("slot",{name:"interaction"}))),(h(r)||this.rightContent)&&t("div",{class:"right-container"},t("slot",{name:"secondary"},r&&t("div",{class:"secondary-container"},t("div",{class:"secondary-heading"},t("ic-typography",{variant:"h4"},t("h3",null,r))),t("div",{class:"secondary-subheading"},t("ic-typography",{variant:"subtitle-small"},s)))))))}get el(){return n(this)}};m.style=l;export{m as ic_hero};
|
2
|
-
//# sourceMappingURL=p-67b8a829.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["icHeroCss","Hero","this","hostMutationObserver","getBrandForegroundAppearance","rightContent","secondaryHeading","undefined","disconnectedCallback","_a","disconnect","componentWillLoad","slotHasContent","el","componentDidLoad","isSlotUsed","onComponentRequiredPropUndefined","prop","heading","propName","MutationObserver","mutationList","renderDynamicChildSlots","observe","childList","componentWillRender","brandChangeHandler","ev","foregroundColor","detail","mode","doScroll","disableBackgroundParallax","scrolltotop","document","scrollingElement","scrollTop","factor","y","scrollFactor","render","aligned","size","subheading","secondarySubheading","backgroundImage","style","isPropDefined","h","Host","class","IcBrandForegroundEnum","Dark","fullHeight","leftContentFullWidth","name","variant"],"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n background-color: var(--ic-brand-color-tertiary);\n\n --hero-heading-bottom-margin: var(--ic-space-md);\n --hero-keyline: var(--ic-hero-keyline);\n}\n\n:host(.ic-hero-dark) {\n background-color: var(--ic-brand-color-secondary);\n\n --ic-hero-heading: var(--ic-color-text-primary-light);\n --ic-hero-body: var(--ic-color-text-primary-light);\n --ic-hero-secondary-heading: var(--ic-color-text-primary-light);\n --hero-keyline: var(--ic-brand-text-color);\n}\n\n.heading {\n --ic-typography-color: var(--ic-hero-heading);\n}\n\n.subheading {\n --ic-typography-color: var(--ic-hero-body);\n}\n\n.secondary-container {\n --ic-typography-color: var(--ic-hero-secondary-heading);\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-left: var(--ic-space-xxxs) solid var(--hero-keyline);\n}\n\n:host(.has-background-image) {\n background-repeat: no-repeat;\n background-position: right -6.25rem;\n background-size: auto calc(100% + 6.25rem);\n box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n :host(.has-background-image) {\n background-position: right -6.25rem !important;\n }\n}\n\nic-typography.heading-bottom-spacing {\n margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n display: flex;\n align-items: center;\n height: 100%;\n}\n\n.left-container {\n padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n flex-basis: 50%;\n}\n\n.left-container-full-width {\n width: 100%;\n}\n\n.right-container {\n flex-basis: 50%;\n}\n\n.interaction-container {\n display: flex;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-lg);\n flex-wrap: wrap;\n}\n\n.secondary-subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n justify-content: flex-start;\n text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n justify-content: center;\n text-align: center;\n}\n\n@media (min-width: 992px) {\n .left-container-full-width {\n width: 66.6%;\n }\n}\n\n@media (min-width: 1044px) {\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n .left-container:not(.left-container-full-width) {\n flex-basis: 66.6%;\n }\n\n .left-container {\n min-height: 9rem;\n }\n\n .right-container {\n flex-basis: 33.3%;\n margin-left: 3.125rem;\n }\n\n .secondary-container {\n min-height: 9rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 3.938rem;\n }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 5.922rem;\n }\n\n .right-container {\n margin-left: 3.125rem;\n }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 2.125rem;\n }\n\n .right-container {\n margin-left: 3.125rem;\n }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 17.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n\n .right-container {\n margin-bottom: 2.5rem;\n }\n}\n\n@media (max-width: 480px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 12rem;\n }\n\n :host,\n .right-container {\n margin-bottom: var(--ic-space-md);\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 16.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcAlignment,\n IcSizesNoLarge,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport {\n slotHasContent,\n getBrandForegroundAppearance,\n onComponentRequiredPropUndefined,\n isPropDefined,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n tag: \"ic-hero\",\n styleUrl: \"ic-hero.css\",\n shadow: true,\n})\nexport class Hero {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcHeroElement;\n\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() rightContent: boolean = false;\n // set by above state\n @State() leftContentFullWidth: boolean =\n !this.rightContent && this.secondaryHeading === undefined;\n @State() scrollFactor: string = \"right -100px\";\n\n /**\n * The alignment of the hero.\n */\n @Prop() aligned: IcAlignment = \"left\";\n\n /**\n * The optional background image.\n */\n @Prop() backgroundImage?: string;\n\n /**\n * The alignment of the hero content.\n */\n @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n /**\n * If `true`, the background image (if set) will not scroll using a parallax effect.\n */\n @Prop() disableBackgroundParallax?: boolean = false;\n\n /**\n * The heading of the hero. An <h2> level heading.\n */\n @Prop() heading: string;\n\n /**\n * The optional secondary heading, an <h3> level heading. Replaced by slotted right content.\n */\n @Prop() secondaryHeading?: string;\n\n /**\n * The optional secondary subheading, replaced by slotted right content.\n */\n @Prop() secondarySubheading?: string;\n\n /**\n * The size of the hero component.\n */\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /**\n * The description for the hero.\n */\n @Prop() subheading?: string;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Hero\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"secondary\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n componentWillRender(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n @Listen(\"scroll\", { target: \"document\" })\n doScroll(): void {\n if (this.disableBackgroundParallax) {\n return;\n }\n\n const scrolltotop = document.scrollingElement.scrollTop;\n const factor = 0.4;\n const y = -100 + scrolltotop * factor;\n this.scrollFactor = \"right \" + y + \"px\";\n }\n\n render() {\n const {\n aligned,\n size,\n heading,\n subheading,\n secondaryHeading,\n secondarySubheading,\n foregroundColor,\n backgroundImage,\n scrollFactor,\n } = this;\n\n let style = {};\n\n if (isPropDefined(backgroundImage)) {\n style = {\n \"background-image\": \"url(\" + backgroundImage + \")\",\n \"background-position\": scrollFactor,\n };\n }\n\n return (\n <Host\n class={{\n [`ic-hero-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [\"has-background-image\"]: backgroundImage !== undefined,\n [\"ic-hero-small\"]: size === \"small\",\n [\"secondary-heading\"]: !!secondaryHeading,\n }}\n style={style}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight\n class=\"section-container\"\n >\n <div\n class={{\n [\"left-container\"]: true,\n [\"left-container-full-width\"]: this.leftContentFullWidth,\n }}\n >\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography\n variant={size === \"small\" ? \"h2\" : \"h1\"}\n class={{\n [\"heading-bottom-spacing\"]: size !== \"small\",\n }}\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n </div>\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n <div class=\"interaction-container\">\n <slot name=\"interaction\"></slot>\n </div>\n </div>\n {(isPropDefined(secondaryHeading) || this.rightContent) && (\n <div class=\"right-container\">\n <slot name=\"secondary\">\n {secondaryHeading && (\n <div class=\"secondary-container\">\n <div class=\"secondary-heading\">\n <ic-typography variant=\"h4\">\n <h3>{secondaryHeading}</h3>\n </ic-typography>\n </div>\n <div class=\"secondary-subheading\">\n <ic-typography variant=\"subtitle-small\">\n {secondarySubheading}\n </ic-typography>\n </div>\n </div>\n )}\n </slot>\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"],"mappings":"uIAAA,MAAMA,EAAY,oyN,MCsCLC,EAAI,M,yBACPC,KAAAC,qBAAyC,K,qBAIHC,I,kBACb,M,2BAG9BF,KAAKG,cAAgBH,KAAKI,mBAAqBC,U,kBAClB,e,aAKD,O,mDAUmB,O,+BAKJ,M,oGAoBd,S,0BAOhC,oBAAAC,G,OACEC,EAAAP,KAAKC,wBAAoB,MAAAM,SAAA,SAAAA,EAAEC,Y,CAG7B,iBAAAC,GACET,KAAKG,aAAeO,EAAeV,KAAKW,GAAI,Y,CAG9C,gBAAAC,IACGC,EAAWb,KAAKW,GAAI,YACnBG,EACE,CAAC,CAAEC,KAAMf,KAAKgB,QAASC,SAAU,YACjC,QAGJjB,KAAKC,qBAAuB,IAAIiB,kBAAkBC,GAChDC,EAAwBD,EAAc,YAAanB,QAErDA,KAAKC,qBAAqBoB,QAAQrB,KAAKW,GAAI,CACzCW,UAAW,M,CAIf,mBAAAC,GACEvB,KAAKG,aAAeO,EAAeV,KAAKW,GAAI,Y,CAI9C,kBAAAa,CAAmBC,GACjBzB,KAAK0B,gBAAkBD,EAAGE,OAAOC,I,CAInC,QAAAC,GACE,GAAI7B,KAAK8B,0BAA2B,CAClC,M,CAGF,MAAMC,EAAcC,SAASC,iBAAiBC,UAC9C,MAAMC,EAAS,GACf,MAAMC,GAAK,IAAML,EAAcI,EAC/BnC,KAAKqC,aAAe,SAAWD,EAAI,I,CAGrC,MAAAE,GACE,MAAMC,QACJA,EAAOC,KACPA,EAAIxB,QACJA,EAAOyB,WACPA,EAAUrC,iBACVA,EAAgBsC,oBAChBA,EAAmBhB,gBACnBA,EAAeiB,gBACfA,EAAeN,aACfA,GACErC,KAEJ,IAAI4C,EAAQ,GAEZ,GAAIC,EAAcF,GAAkB,CAClCC,EAAQ,CACN,mBAAoB,OAASD,EAAkB,IAC/C,sBAAuBN,E,CAI3B,OACES,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,WAAWC,EAAsBC,QAChCxB,IAAoBuB,EAAsBC,KAC5C,CAAC,wBAAyBP,IAAoBtC,UAC9C,CAAC,iBAAkBmC,IAAS,QAC5B,CAAC,uBAAwBpC,GAE3BwC,MAAOA,GAEPE,EAAA,wBACEP,QAASA,EACTY,WAAU,KACVH,MAAM,qBAENF,EAAA,OACEE,MAAO,CACL,CAAC,kBAAmB,KACpB,CAAC,6BAA8BhD,KAAKoD,uBAGtCN,EAAA,OAAKE,MAAM,WACTF,EAAA,QAAMO,KAAK,WACTP,EAAA,iBACEQ,QAASd,IAAS,QAAU,KAAO,KACnCQ,MAAO,CACL,CAAC,0BAA2BR,IAAS,UAGvCM,EAAA,UAAK9B,MAIX8B,EAAA,OAAKE,MAAM,cACTF,EAAA,QAAMO,KAAK,cACTP,EAAA,iBAAeQ,QAAQ,QAAQb,KAGnCK,EAAA,OAAKE,MAAM,yBACTF,EAAA,QAAMO,KAAK,mBAGbR,EAAczC,IAAqBJ,KAAKG,eACxC2C,EAAA,OAAKE,MAAM,mBACTF,EAAA,QAAMO,KAAK,aACRjD,GACC0C,EAAA,OAAKE,MAAM,uBACTF,EAAA,OAAKE,MAAM,qBACTF,EAAA,iBAAeQ,QAAQ,MACrBR,EAAA,UAAK1C,KAGT0C,EAAA,OAAKE,MAAM,wBACTF,EAAA,iBAAeQ,QAAQ,kBACpBZ,Q"}
|