@ukic/web-components 2.1.0-beta.1 → 2.1.0-beta.11
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +8 -0
- package/dist/cjs/OpenInNew-f9958725.js +7 -0
- package/dist/cjs/OpenInNew-f9958725.js.map +1 -0
- package/dist/cjs/{check-icon-999d9877.js → check-icon-b2f60716.js} +2 -2
- package/dist/cjs/check-icon-b2f60716.js.map +1 -0
- package/dist/cjs/chevron-icon-2bb3a907.js +10 -0
- package/dist/cjs/chevron-icon-2bb3a907.js.map +1 -0
- package/dist/cjs/core.cjs.js +2 -2
- package/dist/cjs/{helpers-8bc3b6d2.js → helpers-2021e212.js} +78 -4
- package/dist/cjs/helpers-2021e212.js.map +1 -0
- package/dist/cjs/ic-alert.cjs.entry.js +6 -25
- package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-back-to-top.cjs.entry.js +24 -12
- package/dist/cjs/ic-back-to-top.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +15 -6
- package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +46 -31
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card.cjs.entry.js +29 -5
- package/dist/cjs/ic-card.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +4 -4
- package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +16 -4
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-chip.cjs.entry.js +77 -0
- package/dist/cjs/ic-chip.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-classification-banner.cjs.entry.js +3 -3
- package/dist/cjs/ic-classification-banner.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-entity.cjs.entry.js +2 -2
- package/dist/cjs/ic-data-entity.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +14 -12
- package/dist/cjs/ic-data-row.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +3 -3
- package/dist/cjs/ic-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +4 -3
- package/dist/cjs/ic-footer-link-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js +12 -5
- package/dist/cjs/ic-footer-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer.cjs.entry.js +5 -5
- package/dist/cjs/ic-footer.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-hero.cjs.entry.js +3 -3
- package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +164 -0
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +79 -45
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js +6 -8
- package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-link.cjs.entry.js +14 -8
- package/dist/cjs/ic-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-menu-group.cjs.entry.js +24 -0
- package/dist/cjs/ic-menu-group.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-menu-item.cjs.entry.js +120 -0
- package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-navigation-button.cjs.entry.js +5 -4
- package/dist/cjs/ic-navigation-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +7 -6
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +19 -12
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-menu.cjs.entry.js +8 -8
- package/dist/cjs/ic-navigation-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +5 -5
- package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +236 -0
- package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-radio-group.cjs.entry.js +13 -5
- package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js +24 -6
- package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +56 -42
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-section-container.cjs.entry.js +2 -2
- package/dist/cjs/ic-section-container.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-select.cjs.entry.js +218 -69
- package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +26 -14
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-skeleton.cjs.entry.js +2 -2
- package/dist/cjs/ic-skeleton.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-status-tag.cjs.entry.js +6 -5
- package/dist/cjs/ic-status-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +103 -15
- package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +166 -42
- package/dist/cjs/ic-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +12 -3
- package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-context.cjs.entry.js +7 -2
- package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +9 -118
- package/dist/cjs/ic-tab-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/ic-tab-panel.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab.cjs.entry.js +10 -2
- package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-text-field.cjs.entry.js +5 -5
- package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-theme.cjs.entry.js +4 -4
- package/dist/cjs/ic-theme.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toast-region.cjs.entry.js +48 -0
- package/dist/cjs/ic-toast-region.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-toast.cjs.entry.js +165 -0
- package/dist/cjs/ic-toast.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-top-navigation.cjs.entry.js +15 -10
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-typography.cjs.entry.js +1 -1
- package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
- package/dist/cjs/{index-3ef30d9d.js → index-f79a4e53.js} +33 -2
- package/dist/cjs/index-f79a4e53.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/types-3eb02246.js.map +1 -1
- package/dist/collection/assets/back-icon.svg +1 -1
- package/dist/collection/assets/check-icon.svg +1 -1
- package/dist/collection/assets/chevron-icon.svg +1 -1
- package/dist/collection/assets/dismiss-icon.svg +3 -0
- package/dist/collection/assets/error-icon.svg +3 -3
- package/dist/collection/assets/info-icon.svg +3 -3
- package/dist/collection/assets/neutral-icon.svg +3 -3
- package/dist/collection/assets/success-icon.svg +3 -3
- package/dist/collection/assets/warning-icon-outline.svg +3 -0
- package/dist/collection/assets/warning-icon.svg +3 -3
- package/dist/collection/collection-manifest.json +7 -0
- package/dist/collection/components/ic-alert/ic-alert.css +13 -13
- package/dist/collection/components/ic-alert/ic-alert.js +32 -24
- package/dist/collection/components/ic-alert/ic-alert.js.map +1 -1
- package/dist/collection/components/ic-back-to-top/assets/ArrowUpward.svg +2 -2
- package/dist/collection/components/ic-back-to-top/ic-back-to-top.css +18 -8
- package/dist/collection/components/ic-back-to-top/ic-back-to-top.js +18 -7
- package/dist/collection/components/ic-back-to-top/ic-back-to-top.js.map +1 -1
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.css +20 -5
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js +33 -4
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js.map +1 -1
- package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js +2 -2
- package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js.map +1 -1
- package/dist/collection/components/ic-button/ic-button.css +16 -15
- package/dist/collection/components/ic-button/ic-button.js +18 -32
- package/dist/collection/components/ic-button/ic-button.js.map +1 -1
- package/dist/collection/components/ic-card/ic-card.css +75 -17
- package/dist/collection/components/ic-card/ic-card.js +103 -16
- package/dist/collection/components/ic-card/ic-card.js.map +1 -1
- package/dist/collection/components/ic-checkbox/ic-checkbox.css +28 -30
- package/dist/collection/components/ic-checkbox/ic-checkbox.js +63 -11
- package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.css +18 -2
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +11 -11
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.test.a11y.js +1 -1
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.test.a11y.js.map +1 -1
- package/dist/collection/components/ic-chip/ic-chip.css +596 -0
- package/dist/collection/components/ic-chip/ic-chip.js +247 -0
- package/dist/collection/components/ic-chip/ic-chip.js.map +1 -0
- package/dist/collection/components/ic-chip/ic-chip.test.a11y.js +11 -0
- package/dist/collection/components/ic-chip/ic-chip.test.a11y.js.map +1 -0
- package/dist/collection/components/ic-chip/ic-chip.types.js +2 -0
- package/dist/collection/components/ic-chip/ic-chip.types.js.map +1 -0
- package/dist/collection/components/ic-classification-banner/ic-classification-banner.css +5 -1
- package/dist/collection/components/ic-classification-banner/ic-classification-banner.js +6 -6
- package/dist/collection/components/ic-classification-banner/ic-classification-banner.js.map +1 -1
- package/dist/collection/components/ic-data-entity/ic-data-entity.css +1 -1
- package/dist/collection/components/ic-data-entity/ic-data-entity.js +2 -2
- package/dist/collection/components/ic-data-entity/ic-data-entity.js.map +1 -1
- package/dist/collection/components/ic-data-row/ic-data-row.css +19 -7
- package/dist/collection/components/ic-data-row/ic-data-row.js +14 -12
- package/dist/collection/components/ic-data-row/ic-data-row.js.map +1 -1
- package/dist/collection/components/ic-divider/ic-divider.css +1 -1
- package/dist/collection/components/ic-divider/ic-divider.js +1 -1
- package/dist/collection/components/ic-divider/ic-divider.js.map +1 -1
- package/dist/collection/components/ic-footer/ic-footer.css +4 -4
- package/dist/collection/components/ic-footer/ic-footer.js +19 -16
- package/dist/collection/components/ic-footer/ic-footer.js.map +1 -1
- package/dist/collection/components/ic-footer-link/ic-footer-link.css +44 -6
- package/dist/collection/components/ic-footer-link/ic-footer-link.js +101 -4
- 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.css +1 -1
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js +4 -3
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js.map +1 -1
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.test.a11y.js +1 -1
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.test.a11y.js.map +1 -1
- package/dist/collection/components/ic-hero/ic-hero.css +35 -30
- package/dist/collection/components/ic-hero/ic-hero.js +10 -10
- package/dist/collection/components/ic-hero/ic-hero.js.map +1 -1
- package/dist/collection/components/ic-horizontal-scroll/assets/left-arrow.svg +3 -0
- package/dist/collection/components/ic-horizontal-scroll/assets/right-arrow.svg +3 -0
- package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.css +539 -0
- package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js +219 -0
- package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js.map +1 -0
- package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.test.a11y.js +34 -0
- package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.test.a11y.js.map +1 -0
- package/dist/collection/components/ic-input-component-container/ic-input-component-container.css +16 -17
- package/dist/collection/components/ic-input-component-container/ic-input-component-container.js +8 -8
- 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.css +0 -1
- package/dist/collection/components/ic-input-container/ic-input-container.js +2 -2
- 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 +8 -8
- package/dist/collection/components/ic-input-label/ic-input-label.js.map +1 -1
- package/dist/collection/components/ic-input-validation/ic-input-validation.css +4 -5
- package/dist/collection/components/ic-input-validation/ic-input-validation.js +5 -5
- package/dist/collection/components/ic-input-validation/ic-input-validation.js.map +1 -1
- package/dist/collection/components/ic-link/ic-link.css +14 -10
- package/dist/collection/components/ic-link/ic-link.js +43 -13
- package/dist/collection/components/ic-link/ic-link.js.map +1 -1
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css +43 -7
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js +48 -9
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js.map +1 -1
- package/dist/collection/components/ic-menu/ic-menu.css +20 -15
- package/dist/collection/components/ic-menu/ic-menu.js +144 -73
- package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
- package/dist/collection/components/ic-menu-group/ic-menu-group.css +465 -0
- package/dist/collection/components/ic-menu-group/ic-menu-group.js +45 -0
- package/dist/collection/components/ic-menu-group/ic-menu-group.js.map +1 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.css +633 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.js +392 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.js.map +1 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.types.js +2 -0
- package/dist/collection/components/ic-menu-item/ic-menu-item.types.js.map +1 -0
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.js +9 -8
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.js.map +1 -1
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.css +14 -7
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js +7 -6
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js.map +1 -1
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.css +68 -18
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +113 -16
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
- package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.css +15 -11
- package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js +8 -8
- package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js.map +1 -1
- package/dist/collection/components/ic-page-header/ic-page-header.css +15 -5
- package/dist/collection/components/ic-page-header/ic-page-header.js +10 -10
- package/dist/collection/components/ic-page-header/ic-page-header.js.map +1 -1
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.css +535 -0
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +432 -0
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map +1 -0
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.test.a11y.js +13 -0
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.test.a11y.js.map +1 -0
- package/dist/collection/components/ic-radio-group/ic-radio-group.css +32 -0
- package/dist/collection/components/ic-radio-group/ic-radio-group.js +44 -13
- package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.test.a11y.js +1 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.test.a11y.js.map +1 -1
- package/dist/collection/components/ic-radio-option/ic-radio-option.css +32 -42
- package/dist/collection/components/ic-radio-option/ic-radio-option.js +65 -19
- package/dist/collection/components/ic-radio-option/ic-radio-option.js.map +1 -1
- package/dist/collection/components/ic-search-bar/ic-search-bar.css +24 -18
- package/dist/collection/components/ic-search-bar/ic-search-bar.js +90 -83
- package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
- package/dist/collection/components/ic-section-container/ic-section-container.css +1 -0
- package/dist/collection/components/ic-section-container/ic-section-container.js +2 -2
- package/dist/collection/components/ic-section-container/ic-section-container.js.map +1 -1
- package/dist/collection/components/ic-select/assets/Expand.svg +1 -1
- package/dist/collection/components/ic-select/ic-select.css +47 -30
- package/dist/collection/components/ic-select/ic-select.js +336 -88
- package/dist/collection/components/ic-select/ic-select.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation-test-examples.js +90 -0
- package/dist/collection/components/ic-side-navigation/ic-side-navigation-test-examples.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.css +47 -37
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +40 -24
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
- package/dist/collection/components/ic-skeleton/ic-skeleton.css +1 -1
- package/dist/collection/components/ic-skeleton/ic-skeleton.js +2 -2
- package/dist/collection/components/ic-skeleton/ic-skeleton.js.map +1 -1
- package/dist/collection/components/ic-status-tag/ic-status-tag.css +7 -7
- package/dist/collection/components/ic-status-tag/ic-status-tag.js +22 -3
- package/dist/collection/components/ic-status-tag/ic-status-tag.js.map +1 -1
- package/dist/collection/components/ic-status-tag/ic-status-tag.test.a11y.js +1 -1
- package/dist/collection/components/ic-status-tag/ic-status-tag.test.a11y.js.map +1 -1
- package/dist/collection/components/ic-step/ic-step.css +127 -30
- package/dist/collection/components/ic-step/ic-step.js +269 -28
- package/dist/collection/components/ic-step/ic-step.js.map +1 -1
- package/dist/collection/components/ic-step/ic-step.types.js.map +1 -1
- package/dist/collection/components/ic-stepper/ic-stepper-test-examples.js +74 -0
- package/dist/collection/components/ic-stepper/ic-stepper-test-examples.js.map +1 -0
- package/dist/collection/components/ic-stepper/ic-stepper.css +15 -1
- package/dist/collection/components/ic-stepper/ic-stepper.js +210 -40
- package/dist/collection/components/ic-stepper/ic-stepper.js.map +1 -1
- package/dist/collection/components/ic-stepper/ic-stepper.test.a11y.js +13 -1
- package/dist/collection/components/ic-stepper/ic-stepper.test.a11y.js.map +1 -1
- package/dist/collection/components/ic-switch/ic-switch.css +20 -20
- package/dist/collection/components/ic-switch/ic-switch.js +36 -7
- package/dist/collection/components/ic-switch/ic-switch.js.map +1 -1
- package/dist/collection/components/ic-tab/ic-tab.css +1 -1
- package/dist/collection/components/ic-tab/ic-tab.js +37 -6
- package/dist/collection/components/ic-tab/ic-tab.js.map +1 -1
- package/dist/collection/components/ic-tab-context/ic-tab-context.js +31 -4
- package/dist/collection/components/ic-tab-context/ic-tab-context.js.map +1 -1
- package/dist/collection/components/ic-tab-context/ic-tab-context.test.a11y.js +1 -1
- package/dist/collection/components/ic-tab-context/ic-tab-context.test.a11y.js.map +1 -1
- package/dist/collection/components/ic-tab-group/ic-tab-group.css +6 -120
- package/dist/collection/components/ic-tab-group/ic-tab-group.js +12 -156
- package/dist/collection/components/ic-tab-group/ic-tab-group.js.map +1 -1
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.css +4 -0
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.js +2 -2
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.js.map +1 -1
- package/dist/collection/components/ic-text-field/ic-text-field.css +7 -7
- package/dist/collection/components/ic-text-field/ic-text-field.js +32 -32
- package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
- package/dist/collection/components/ic-theme/ic-theme.js +9 -6
- package/dist/collection/components/ic-theme/ic-theme.js.map +1 -1
- package/dist/collection/components/ic-toast/ic-toast.css +602 -0
- package/dist/collection/components/ic-toast/ic-toast.js +382 -0
- package/dist/collection/components/ic-toast/ic-toast.js.map +1 -0
- package/dist/collection/components/ic-toast/ic-toast.test.a11y.js +16 -0
- package/dist/collection/components/ic-toast/ic-toast.test.a11y.js.map +1 -0
- package/dist/collection/components/ic-toast/ic-toast.types.js +2 -0
- package/dist/collection/components/ic-toast/ic-toast.types.js.map +1 -0
- package/dist/collection/components/ic-toast-region/ic-toast-region.js +81 -0
- package/dist/collection/components/ic-toast-region/ic-toast-region.js.map +1 -0
- package/dist/collection/components/ic-tooltip/ic-tooltip.css +9 -11
- package/dist/collection/components/ic-tooltip/ic-tooltip.js +28 -3
- package/dist/collection/components/ic-tooltip/ic-tooltip.js.map +1 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.css +34 -52
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js +21 -15
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js.map +1 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.test.a11y.js +1 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.test.a11y.js.map +1 -1
- package/dist/collection/components/ic-typography/ic-typography.js +1 -1
- package/dist/collection/components/ic-typography/ic-typography.js.map +1 -1
- package/dist/collection/normalize.css +440 -0
- package/dist/collection/testspec.setup.js +8 -0
- package/dist/collection/testspec.setup.js.map +1 -1
- package/dist/collection/utils/constants.js +28 -0
- package/dist/collection/utils/constants.js.map +1 -1
- package/dist/collection/utils/helpers.js +13 -4
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/components/OpenInNew.js +5 -0
- package/dist/components/OpenInNew.js.map +1 -0
- package/dist/components/check-icon.js +1 -1
- package/dist/components/chevron-icon.js +1 -1
- package/dist/components/helpers.js +71 -4
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/ic-alert.js +6 -25
- package/dist/components/ic-alert.js.map +1 -1
- package/dist/components/ic-back-to-top.js +23 -11
- package/dist/components/ic-back-to-top.js.map +1 -1
- package/dist/components/ic-breadcrumb-group.js.map +1 -1
- package/dist/components/ic-breadcrumb2.js +14 -4
- package/dist/components/ic-breadcrumb2.js.map +1 -1
- package/dist/components/ic-button2.js +9 -20
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-card.js +52 -6
- package/dist/components/ic-card.js.map +1 -1
- package/dist/components/ic-checkbox-group.js +3 -3
- package/dist/components/ic-checkbox-group.js.map +1 -1
- package/dist/components/ic-checkbox.js +17 -4
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/components/ic-chip.d.ts +11 -0
- package/dist/components/ic-chip.js +111 -0
- package/dist/components/ic-chip.js.map +1 -0
- package/dist/components/ic-classification-banner.js +2 -2
- package/dist/components/ic-classification-banner.js.map +1 -1
- package/dist/components/ic-data-entity.js +1 -1
- package/dist/components/ic-data-entity.js.map +1 -1
- package/dist/components/ic-data-row.js +12 -10
- package/dist/components/ic-data-row.js.map +1 -1
- package/dist/components/ic-divider2.js +2 -2
- package/dist/components/ic-divider2.js.map +1 -1
- package/dist/components/ic-footer-link-group.js +4 -3
- package/dist/components/ic-footer-link-group.js.map +1 -1
- package/dist/components/ic-footer-link.js +17 -5
- package/dist/components/ic-footer-link.js.map +1 -1
- package/dist/components/ic-footer.js +4 -4
- package/dist/components/ic-footer.js.map +1 -1
- package/dist/components/ic-hero.js +2 -2
- package/dist/components/ic-hero.js.map +1 -1
- package/dist/components/ic-horizontal-scroll.d.ts +11 -0
- package/dist/components/ic-horizontal-scroll.js +8 -0
- package/dist/components/ic-horizontal-scroll.js.map +1 -0
- package/dist/components/ic-horizontal-scroll2.js +205 -0
- package/dist/components/ic-horizontal-scroll2.js.map +1 -0
- package/dist/components/ic-input-component-container2.js +2 -3
- package/dist/components/ic-input-component-container2.js.map +1 -1
- package/dist/components/ic-input-container2.js +1 -1
- package/dist/components/ic-input-container2.js.map +1 -1
- package/dist/components/ic-input-label2.js +1 -1
- package/dist/components/ic-input-label2.js.map +1 -1
- package/dist/components/ic-input-validation2.js +2 -4
- package/dist/components/ic-input-validation2.js.map +1 -1
- package/dist/components/ic-link2.js +16 -9
- package/dist/components/ic-link2.js.map +1 -1
- package/dist/components/ic-loading-indicator2.js +27 -7
- package/dist/components/ic-loading-indicator2.js.map +1 -1
- package/dist/components/ic-menu-group.d.ts +11 -0
- package/dist/components/ic-menu-group.js +46 -0
- package/dist/components/ic-menu-group.js.map +1 -0
- package/dist/components/ic-menu-item.d.ts +11 -0
- package/dist/components/ic-menu-item.js +8 -0
- package/dist/components/ic-menu-item.js.map +1 -0
- package/dist/components/ic-menu-item2.js +167 -0
- package/dist/components/ic-menu-item2.js.map +1 -0
- package/dist/components/ic-menu2.js +75 -41
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-button.js +5 -4
- package/dist/components/ic-navigation-button.js.map +1 -1
- package/dist/components/ic-navigation-group.js +5 -4
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/components/ic-navigation-item.js +22 -10
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-navigation-menu2.js +8 -8
- package/dist/components/ic-navigation-menu2.js.map +1 -1
- package/dist/components/ic-page-header.js +30 -6
- package/dist/components/ic-page-header.js.map +1 -1
- package/dist/components/ic-popover-menu.d.ts +11 -0
- package/dist/components/ic-popover-menu.js +290 -0
- package/dist/components/ic-popover-menu.js.map +1 -0
- package/dist/components/ic-radio-group.js +14 -5
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-radio-option.js +26 -7
- package/dist/components/ic-radio-option.js.map +1 -1
- package/dist/components/ic-search-bar.js +59 -44
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-section-container2.js +1 -1
- package/dist/components/ic-section-container2.js.map +1 -1
- package/dist/components/ic-select.js +224 -69
- package/dist/components/ic-select.js.map +1 -1
- package/dist/components/ic-side-navigation.js +23 -11
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-skeleton.js +1 -1
- package/dist/components/ic-skeleton.js.map +1 -1
- package/dist/components/ic-status-tag.js +6 -4
- package/dist/components/ic-status-tag.js.map +1 -1
- package/dist/components/ic-step.js +117 -16
- package/dist/components/ic-step.js.map +1 -1
- package/dist/components/ic-stepper.js +173 -42
- package/dist/components/ic-stepper.js.map +1 -1
- package/dist/components/ic-switch.js +13 -3
- package/dist/components/ic-switch.js.map +1 -1
- package/dist/components/ic-tab-context.js +6 -1
- package/dist/components/ic-tab-context.js.map +1 -1
- package/dist/components/ic-tab-group.js +30 -125
- package/dist/components/ic-tab-group.js.map +1 -1
- package/dist/components/ic-tab-panel.js +1 -1
- package/dist/components/ic-tab-panel.js.map +1 -1
- package/dist/components/ic-tab.js +11 -2
- package/dist/components/ic-tab.js.map +1 -1
- package/dist/components/ic-text-field2.js +6 -6
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-theme.js +2 -2
- package/dist/components/ic-theme.js.map +1 -1
- package/dist/components/ic-toast-region.d.ts +11 -0
- package/dist/components/ic-toast-region.js +63 -0
- package/dist/components/ic-toast-region.js.map +1 -0
- package/dist/components/ic-toast.d.ts +11 -0
- package/dist/components/ic-toast.js +214 -0
- package/dist/components/ic-toast.js.map +1 -0
- package/dist/components/ic-tooltip2.js +13 -5
- package/dist/components/ic-tooltip2.js.map +1 -1
- package/dist/components/ic-top-navigation.js +22 -11
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/components/ic-typography2.js.map +1 -1
- package/dist/components/index.d.ts +8 -1
- package/dist/components/index.js +7 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/types.js.map +1 -1
- package/dist/core/core.css +3 -3
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/normalize.css +440 -0
- package/dist/core/p-037dfe9d.entry.js +2 -0
- package/dist/core/p-037dfe9d.entry.js.map +1 -0
- package/dist/core/p-05c5c6c4.entry.js +2 -0
- package/dist/core/p-05c5c6c4.entry.js.map +1 -0
- package/dist/core/p-06321d19.js +2 -0
- package/dist/core/p-0a463a65.entry.js +2 -0
- package/dist/core/p-0a463a65.entry.js.map +1 -0
- package/dist/core/p-0faf328a.entry.js +2 -0
- package/dist/core/p-0faf328a.entry.js.map +1 -0
- package/dist/core/p-102281fd.entry.js +2 -0
- package/dist/core/p-102281fd.entry.js.map +1 -0
- package/dist/core/p-1549adc1.entry.js +2 -0
- package/dist/core/p-1549adc1.entry.js.map +1 -0
- package/dist/core/p-25b208ae.entry.js +2 -0
- package/dist/core/p-25b208ae.entry.js.map +1 -0
- package/dist/core/{p-c4d3c18c.entry.js → p-26c9e522.entry.js} +2 -2
- package/dist/core/p-26c9e522.entry.js.map +1 -0
- package/dist/core/p-31a595c1.entry.js +2 -0
- package/dist/core/p-31a595c1.entry.js.map +1 -0
- package/dist/core/p-33a0aabe.entry.js +2 -0
- package/dist/core/p-33a0aabe.entry.js.map +1 -0
- package/dist/core/p-360adc51.entry.js +2 -0
- package/dist/core/p-360adc51.entry.js.map +1 -0
- package/dist/core/p-3d84a743.entry.js +2 -0
- package/dist/core/p-3d84a743.entry.js.map +1 -0
- package/dist/core/p-3dea2867.js +2 -0
- package/dist/core/p-3dea2867.js.map +1 -0
- package/dist/core/p-3fd4f8eb.entry.js +2 -0
- package/dist/core/p-3fd4f8eb.entry.js.map +1 -0
- package/dist/core/p-48a5c2a7.entry.js +2 -0
- package/dist/core/p-48a5c2a7.entry.js.map +1 -0
- package/dist/core/p-4d8392fe.entry.js +2 -0
- package/dist/core/p-4d8392fe.entry.js.map +1 -0
- package/dist/core/p-4ee03271.entry.js +2 -0
- package/dist/core/p-4ee03271.entry.js.map +1 -0
- package/dist/core/{p-f9370be6.js → p-5450cebf.js} +3 -3
- package/dist/core/p-5450cebf.js.map +1 -0
- package/dist/core/p-58ff516f.entry.js +2 -0
- package/dist/core/p-58ff516f.entry.js.map +1 -0
- package/dist/core/p-62b3516e.entry.js +2 -0
- package/dist/core/p-62b3516e.entry.js.map +1 -0
- package/dist/core/p-6f57b13c.js.map +1 -1
- package/dist/core/p-73fddc63.entry.js +2 -0
- package/dist/core/p-73fddc63.entry.js.map +1 -0
- package/dist/core/p-741b4ea3.entry.js +2 -0
- package/dist/core/p-741b4ea3.entry.js.map +1 -0
- package/dist/core/p-7dcb9104.entry.js +2 -0
- package/dist/core/p-7dcb9104.entry.js.map +1 -0
- package/dist/core/{p-e93e9aa3.entry.js → p-7fd50355.entry.js} +2 -2
- package/dist/core/p-7fd50355.entry.js.map +1 -0
- package/dist/core/p-81652a98.entry.js +2 -0
- package/dist/core/p-81652a98.entry.js.map +1 -0
- package/dist/core/p-87c7ba3b.entry.js +2 -0
- package/dist/core/p-87c7ba3b.entry.js.map +1 -0
- package/dist/core/p-897e967a.entry.js +2 -0
- package/dist/core/p-897e967a.entry.js.map +1 -0
- package/dist/core/p-8c7f4343.js +2 -0
- package/dist/core/p-8c9cc4d5.entry.js +2 -0
- package/dist/core/p-8c9cc4d5.entry.js.map +1 -0
- package/dist/core/p-8d4f7027.js +2 -0
- package/dist/core/{p-0118400b.entry.js → p-8ffa00c9.entry.js} +2 -2
- package/dist/core/p-8ffa00c9.entry.js.map +1 -0
- package/dist/core/p-a2c7dc6c.entry.js +2 -0
- package/dist/core/p-a2c7dc6c.entry.js.map +1 -0
- package/dist/core/p-a3742d40.entry.js +2 -0
- package/dist/core/p-a3742d40.entry.js.map +1 -0
- package/dist/core/p-a44a0500.entry.js +2 -0
- package/dist/core/p-a44a0500.entry.js.map +1 -0
- package/dist/core/p-a8e969ea.entry.js +2 -0
- package/dist/core/p-a8e969ea.entry.js.map +1 -0
- package/dist/core/p-ac6ecdb6.entry.js +2 -0
- package/dist/core/p-ac6ecdb6.entry.js.map +1 -0
- package/dist/core/p-acb08809.entry.js +2 -0
- package/dist/core/p-acb08809.entry.js.map +1 -0
- package/dist/core/{p-6be5e06b.entry.js → p-ad2477d8.entry.js} +2 -2
- package/dist/core/p-ad2477d8.entry.js.map +1 -0
- package/dist/core/p-affb42c7.entry.js +2 -0
- package/dist/core/p-affb42c7.entry.js.map +1 -0
- package/dist/core/p-b7fc1f35.entry.js +2 -0
- package/dist/core/p-b7fc1f35.entry.js.map +1 -0
- package/dist/core/p-b8b960a5.entry.js +2 -0
- package/dist/core/p-b8b960a5.entry.js.map +1 -0
- package/dist/core/p-b921bb19.entry.js +2 -0
- package/dist/core/p-b921bb19.entry.js.map +1 -0
- package/dist/core/{p-6d0eaaeb.entry.js → p-c9068822.entry.js} +2 -2
- package/dist/core/{p-6d0eaaeb.entry.js.map → p-c9068822.entry.js.map} +1 -1
- package/dist/core/p-c996810e.entry.js +2 -0
- package/dist/core/p-c996810e.entry.js.map +1 -0
- package/dist/core/p-cc62d065.entry.js +2 -0
- package/dist/core/p-cc62d065.entry.js.map +1 -0
- package/dist/core/{p-02799e26.entry.js → p-d2508752.entry.js} +2 -2
- package/dist/core/{p-02799e26.entry.js.map → p-d2508752.entry.js.map} +1 -1
- package/dist/core/p-d28d7f24.entry.js +2 -0
- package/dist/core/p-d28d7f24.entry.js.map +1 -0
- package/dist/core/{p-07cd789d.entry.js → p-dbfdfa8a.entry.js} +2 -2
- package/dist/core/p-dbfdfa8a.entry.js.map +1 -0
- package/dist/core/{p-10da19d2.entry.js → p-dd71a986.entry.js} +2 -2
- package/dist/core/p-dd71a986.entry.js.map +1 -0
- package/dist/core/p-e4547265.entry.js +2 -0
- package/dist/core/p-e4547265.entry.js.map +1 -0
- package/dist/core/p-ea0c4aca.entry.js +2 -0
- package/dist/core/p-ea0c4aca.entry.js.map +1 -0
- package/dist/core/{p-cadb531f.entry.js → p-ed6cf9b9.entry.js} +2 -2
- package/dist/core/p-ed6cf9b9.entry.js.map +1 -0
- package/dist/core/p-f6ddd32f.entry.js +2 -0
- package/dist/core/p-f6ddd32f.entry.js.map +1 -0
- package/dist/core/p-f777679c.entry.js +2 -0
- package/dist/core/p-f777679c.entry.js.map +1 -0
- package/dist/esm/OpenInNew-67a881e0.js +5 -0
- package/dist/esm/OpenInNew-67a881e0.js.map +1 -0
- package/dist/esm/{check-icon-53f1d9e5.js → check-icon-abb210ec.js} +2 -2
- package/dist/esm/check-icon-abb210ec.js.map +1 -0
- package/dist/esm/chevron-icon-7927f709.js +8 -0
- package/dist/esm/chevron-icon-7927f709.js.map +1 -0
- package/dist/esm/core.js +2 -2
- package/dist/esm/{helpers-3d41833c.js → helpers-b2b47a7d.js} +72 -5
- package/dist/esm/helpers-b2b47a7d.js.map +1 -0
- package/dist/esm/ic-alert.entry.js +6 -25
- package/dist/esm/ic-alert.entry.js.map +1 -1
- package/dist/esm/ic-back-to-top.entry.js +24 -12
- package/dist/esm/ic-back-to-top.entry.js.map +1 -1
- package/dist/esm/ic-breadcrumb-group.entry.js +2 -2
- package/dist/esm/ic-breadcrumb-group.entry.js.map +1 -1
- package/dist/esm/ic-breadcrumb.entry.js +15 -6
- package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ic-button_3.entry.js +46 -31
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card.entry.js +29 -5
- package/dist/esm/ic-card.entry.js.map +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +4 -4
- package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
- package/dist/esm/ic-checkbox.entry.js +16 -4
- package/dist/esm/ic-checkbox.entry.js.map +1 -1
- package/dist/esm/ic-chip.entry.js +73 -0
- package/dist/esm/ic-chip.entry.js.map +1 -0
- package/dist/esm/ic-classification-banner.entry.js +3 -3
- package/dist/esm/ic-classification-banner.entry.js.map +1 -1
- package/dist/esm/ic-data-entity.entry.js +2 -2
- package/dist/esm/ic-data-entity.entry.js.map +1 -1
- package/dist/esm/ic-data-row.entry.js +14 -12
- package/dist/esm/ic-data-row.entry.js.map +1 -1
- package/dist/esm/ic-divider.entry.js +3 -3
- package/dist/esm/ic-divider.entry.js.map +1 -1
- package/dist/esm/ic-footer-link-group.entry.js +4 -3
- package/dist/esm/ic-footer-link-group.entry.js.map +1 -1
- package/dist/esm/ic-footer-link.entry.js +12 -5
- package/dist/esm/ic-footer-link.entry.js.map +1 -1
- package/dist/esm/ic-footer.entry.js +5 -5
- package/dist/esm/ic-footer.entry.js.map +1 -1
- package/dist/esm/ic-hero.entry.js +3 -3
- package/dist/esm/ic-hero.entry.js.map +1 -1
- package/dist/esm/ic-horizontal-scroll.entry.js +160 -0
- package/dist/esm/ic-horizontal-scroll.entry.js.map +1 -0
- package/dist/esm/ic-input-component-container_3.entry.js +78 -44
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-input-label_2.entry.js +3 -5
- package/dist/esm/ic-input-label_2.entry.js.map +1 -1
- package/dist/esm/ic-link.entry.js +14 -8
- package/dist/esm/ic-link.entry.js.map +1 -1
- package/dist/esm/ic-menu-group.entry.js +20 -0
- package/dist/esm/ic-menu-group.entry.js.map +1 -0
- package/dist/esm/ic-menu-item.entry.js +116 -0
- package/dist/esm/ic-menu-item.entry.js.map +1 -0
- package/dist/esm/ic-navigation-button.entry.js +5 -4
- package/dist/esm/ic-navigation-button.entry.js.map +1 -1
- package/dist/esm/ic-navigation-group.entry.js +7 -6
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +19 -12
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-menu.entry.js +8 -8
- package/dist/esm/ic-navigation-menu.entry.js.map +1 -1
- package/dist/esm/ic-page-header.entry.js +5 -5
- package/dist/esm/ic-page-header.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +232 -0
- package/dist/esm/ic-popover-menu.entry.js.map +1 -0
- package/dist/esm/ic-radio-group.entry.js +13 -5
- package/dist/esm/ic-radio-group.entry.js.map +1 -1
- package/dist/esm/ic-radio-option.entry.js +24 -6
- package/dist/esm/ic-radio-option.entry.js.map +1 -1
- package/dist/esm/ic-search-bar.entry.js +56 -42
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-section-container.entry.js +2 -2
- package/dist/esm/ic-section-container.entry.js.map +1 -1
- package/dist/esm/ic-select.entry.js +218 -69
- package/dist/esm/ic-select.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +26 -14
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-skeleton.entry.js +2 -2
- package/dist/esm/ic-skeleton.entry.js.map +1 -1
- package/dist/esm/ic-status-tag.entry.js +6 -5
- package/dist/esm/ic-status-tag.entry.js.map +1 -1
- package/dist/esm/ic-step.entry.js +103 -15
- package/dist/esm/ic-step.entry.js.map +1 -1
- package/dist/esm/ic-stepper.entry.js +166 -42
- package/dist/esm/ic-stepper.entry.js.map +1 -1
- package/dist/esm/ic-switch.entry.js +12 -3
- package/dist/esm/ic-switch.entry.js.map +1 -1
- package/dist/esm/ic-tab-context.entry.js +7 -2
- package/dist/esm/ic-tab-context.entry.js.map +1 -1
- package/dist/esm/ic-tab-group.entry.js +9 -118
- package/dist/esm/ic-tab-group.entry.js.map +1 -1
- package/dist/esm/ic-tab-panel.entry.js +2 -2
- package/dist/esm/ic-tab-panel.entry.js.map +1 -1
- package/dist/esm/ic-tab.entry.js +10 -2
- package/dist/esm/ic-tab.entry.js.map +1 -1
- package/dist/esm/ic-text-field.entry.js +5 -5
- package/dist/esm/ic-text-field.entry.js.map +1 -1
- package/dist/esm/ic-theme.entry.js +4 -4
- package/dist/esm/ic-theme.entry.js.map +1 -1
- package/dist/esm/ic-toast-region.entry.js +44 -0
- package/dist/esm/ic-toast-region.entry.js.map +1 -0
- package/dist/esm/ic-toast.entry.js +161 -0
- package/dist/esm/ic-toast.entry.js.map +1 -0
- package/dist/esm/ic-top-navigation.entry.js +15 -10
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/ic-typography.entry.js +1 -1
- package/dist/esm/ic-typography.entry.js.map +1 -1
- package/dist/esm/{index-1500de1f.js → index-90721b3c.js} +33 -2
- package/dist/esm/index-90721b3c.js.map +1 -0
- package/dist/esm/loader.js +2 -2
- package/dist/esm/types-dd515332.js.map +1 -1
- package/dist/types/components/ic-alert/ic-alert.d.ts +14 -10
- package/dist/types/components/ic-back-to-top/ic-back-to-top.d.ts +1 -0
- package/dist/types/components/ic-breadcrumb/ic-breadcrumb.d.ts +9 -5
- package/dist/types/components/ic-breadcrumb-group/ic-breadcrumb-group.d.ts +2 -2
- package/dist/types/components/ic-button/ic-button.d.ts +11 -14
- package/dist/types/components/ic-card/ic-card.d.ts +31 -10
- package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +18 -10
- package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts +9 -9
- package/dist/types/components/ic-chip/ic-chip.d.ts +48 -0
- package/dist/types/components/ic-chip/ic-chip.test.a11y.d.ts +1 -0
- package/dist/types/components/ic-chip/ic-chip.types.d.ts +2 -0
- package/dist/types/components/ic-classification-banner/ic-classification-banner.d.ts +5 -5
- package/dist/types/components/ic-data-entity/ic-data-entity.d.ts +2 -2
- package/dist/types/components/ic-data-row/ic-data-row.d.ts +3 -3
- package/dist/types/components/ic-footer/ic-footer.d.ts +12 -12
- package/dist/types/components/ic-footer-link/ic-footer-link.d.ts +20 -0
- package/dist/types/components/ic-footer-link-group/ic-footer-link-group.d.ts +1 -1
- package/dist/types/components/ic-hero/ic-hero.d.ts +9 -9
- package/dist/types/components/ic-horizontal-scroll/ic-horizontal-scroll.d.ts +39 -0
- package/dist/types/components/ic-horizontal-scroll/ic-horizontal-scroll.test.a11y.d.ts +1 -0
- package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts +8 -8
- package/dist/types/components/ic-input-container/ic-input-container.d.ts +2 -2
- package/dist/types/components/ic-input-label/ic-input-label.d.ts +8 -8
- package/dist/types/components/ic-input-validation/ic-input-validation.d.ts +5 -5
- package/dist/types/components/ic-link/ic-link.d.ts +10 -7
- package/dist/types/components/ic-loading-indicator/ic-loading-indicator.d.ts +7 -3
- package/dist/types/components/ic-menu/ic-menu.d.ts +36 -18
- package/dist/types/components/ic-menu-group/ic-menu-group.d.ts +8 -0
- package/dist/types/components/ic-menu-item/ic-menu-item.d.ts +74 -0
- package/dist/types/components/ic-menu-item/ic-menu-item.types.d.ts +1 -0
- package/dist/types/components/ic-navigation-button/ic-navigation-button.d.ts +6 -6
- package/dist/types/components/ic-navigation-group/ic-navigation-group.d.ts +3 -3
- package/dist/types/components/ic-navigation-item/ic-navigation-item.d.ts +28 -8
- package/dist/types/components/ic-navigation-menu/ic-navigation-menu.d.ts +2 -2
- package/dist/types/components/ic-page-header/ic-page-header.d.ts +10 -8
- package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts +58 -0
- package/dist/types/components/ic-popover-menu/ic-popover-menu.test.a11y.d.ts +1 -0
- package/dist/types/components/ic-radio-group/ic-radio-group.d.ts +15 -11
- package/dist/types/components/ic-radio-option/ic-radio-option.d.ts +17 -11
- package/dist/types/components/ic-search-bar/ic-search-bar.d.ts +31 -30
- package/dist/types/components/ic-section-container/ic-section-container.d.ts +2 -2
- package/dist/types/components/ic-select/ic-select.d.ts +68 -23
- package/dist/types/components/ic-side-navigation/ic-side-navigation-test-examples.d.ts +1 -0
- package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts +13 -12
- package/dist/types/components/ic-skeleton/ic-skeleton.d.ts +2 -2
- package/dist/types/components/ic-status-tag/ic-status-tag.d.ts +5 -1
- package/dist/types/components/ic-step/ic-step.d.ts +37 -8
- package/dist/types/components/ic-step/ic-step.types.d.ts +2 -0
- package/dist/types/components/ic-stepper/ic-stepper-test-examples.d.ts +4 -0
- package/dist/types/components/ic-stepper/ic-stepper.d.ts +23 -6
- package/dist/types/components/ic-switch/ic-switch.d.ts +11 -7
- package/dist/types/components/ic-tab/ic-tab.d.ts +9 -5
- package/dist/types/components/ic-tab-context/ic-tab-context.d.ts +8 -4
- package/dist/types/components/ic-tab-group/ic-tab-group.d.ts +5 -33
- package/dist/types/components/ic-tab-panel/ic-tab-panel.d.ts +2 -2
- package/dist/types/components/ic-text-field/ic-text-field.d.ts +31 -31
- package/dist/types/components/ic-theme/ic-theme.d.ts +3 -3
- package/dist/types/components/ic-toast/ic-toast.d.ts +66 -0
- package/dist/types/components/ic-toast/ic-toast.test.a11y.d.ts +1 -0
- package/dist/types/components/ic-toast/ic-toast.types.d.ts +1 -0
- package/dist/types/components/ic-toast-region/ic-toast-region.d.ts +12 -0
- package/dist/types/components/ic-tooltip/ic-tooltip.d.ts +4 -0
- package/dist/types/components/ic-top-navigation/ic-top-navigation.d.ts +7 -6
- package/dist/types/components/ic-typography/ic-typography.d.ts +1 -1
- package/dist/types/components.d.ts +1103 -559
- package/dist/types/interface.d.ts +0 -1
- package/dist/types/testspec.setup.d.ts +1 -0
- package/dist/types/utils/constants.d.ts +22 -0
- package/dist/types/utils/helpers.d.ts +2 -0
- package/dist/types/utils/types.d.ts +3 -0
- package/hydrate/index.js +2030 -602
- package/package.json +5 -5
- package/dist/cjs/check-icon-999d9877.js.map +0 -1
- package/dist/cjs/chevron-icon-d175fe66.js +0 -10
- package/dist/cjs/chevron-icon-d175fe66.js.map +0 -1
- package/dist/cjs/error-icon-99504103.js +0 -18
- package/dist/cjs/error-icon-99504103.js.map +0 -1
- package/dist/cjs/helpers-8bc3b6d2.js.map +0 -1
- package/dist/cjs/index-3ef30d9d.js.map +0 -1
- package/dist/cjs/success-icon-887b2097.js +0 -11
- package/dist/cjs/success-icon-887b2097.js.map +0 -1
- package/dist/collection/components/ic-alert/ic-alert.types.js +0 -2
- package/dist/collection/components/ic-alert/ic-alert.types.js.map +0 -1
- package/dist/collection/components/ic-tab-group/assets/left-arrow.svg +0 -3
- package/dist/collection/components/ic-tab-group/assets/right-arrow.svg +0 -3
- package/dist/components/error-icon.js +0 -15
- package/dist/components/error-icon.js.map +0 -1
- package/dist/components/success-icon.js +0 -9
- package/dist/components/success-icon.js.map +0 -1
- package/dist/core/p-0118400b.entry.js.map +0 -1
- package/dist/core/p-07cd789d.entry.js.map +0 -1
- package/dist/core/p-0b125f26.entry.js +0 -2
- package/dist/core/p-0b125f26.entry.js.map +0 -1
- package/dist/core/p-10da19d2.entry.js.map +0 -1
- package/dist/core/p-1337db5e.entry.js +0 -2
- package/dist/core/p-1337db5e.entry.js.map +0 -1
- package/dist/core/p-1721bcf3.entry.js +0 -2
- package/dist/core/p-1721bcf3.entry.js.map +0 -1
- package/dist/core/p-1e7b4310.js +0 -2
- package/dist/core/p-23831891.js +0 -2
- package/dist/core/p-23831891.js.map +0 -1
- package/dist/core/p-272c7abd.entry.js +0 -2
- package/dist/core/p-272c7abd.entry.js.map +0 -1
- package/dist/core/p-2f114521.entry.js +0 -2
- package/dist/core/p-2f114521.entry.js.map +0 -1
- package/dist/core/p-31a8595f.entry.js +0 -2
- package/dist/core/p-31a8595f.entry.js.map +0 -1
- package/dist/core/p-33a45ace.entry.js +0 -2
- package/dist/core/p-33a45ace.entry.js.map +0 -1
- package/dist/core/p-347ec49e.entry.js +0 -2
- package/dist/core/p-347ec49e.entry.js.map +0 -1
- package/dist/core/p-39ae284e.entry.js +0 -2
- package/dist/core/p-39ae284e.entry.js.map +0 -1
- package/dist/core/p-558552f8.entry.js +0 -2
- package/dist/core/p-558552f8.entry.js.map +0 -1
- package/dist/core/p-5e261268.entry.js +0 -2
- package/dist/core/p-5e261268.entry.js.map +0 -1
- package/dist/core/p-60ffb73e.entry.js +0 -2
- package/dist/core/p-60ffb73e.entry.js.map +0 -1
- package/dist/core/p-69650186.entry.js +0 -2
- package/dist/core/p-69650186.entry.js.map +0 -1
- package/dist/core/p-6b34d98f.entry.js +0 -2
- package/dist/core/p-6b34d98f.entry.js.map +0 -1
- package/dist/core/p-6be5e06b.entry.js.map +0 -1
- package/dist/core/p-6f6bd657.entry.js +0 -2
- package/dist/core/p-6f6bd657.entry.js.map +0 -1
- package/dist/core/p-7093d214.entry.js +0 -2
- package/dist/core/p-7093d214.entry.js.map +0 -1
- package/dist/core/p-7577c6a3.entry.js +0 -2
- package/dist/core/p-7577c6a3.entry.js.map +0 -1
- package/dist/core/p-7b11e1dc.entry.js +0 -2
- package/dist/core/p-7b11e1dc.entry.js.map +0 -1
- package/dist/core/p-7b39977f.entry.js +0 -2
- package/dist/core/p-7b39977f.entry.js.map +0 -1
- package/dist/core/p-7f632414.entry.js +0 -2
- package/dist/core/p-7f632414.entry.js.map +0 -1
- package/dist/core/p-898607d0.entry.js +0 -2
- package/dist/core/p-898607d0.entry.js.map +0 -1
- package/dist/core/p-8ddeb574.entry.js +0 -2
- package/dist/core/p-8ddeb574.entry.js.map +0 -1
- package/dist/core/p-9cd04875.entry.js +0 -2
- package/dist/core/p-9cd04875.entry.js.map +0 -1
- package/dist/core/p-ac43322e.entry.js +0 -2
- package/dist/core/p-ac43322e.entry.js.map +0 -1
- package/dist/core/p-ae6aa67f.js +0 -2
- package/dist/core/p-ae81dffa.entry.js +0 -2
- package/dist/core/p-ae81dffa.entry.js.map +0 -1
- package/dist/core/p-b3dec76d.entry.js +0 -2
- package/dist/core/p-b3dec76d.entry.js.map +0 -1
- package/dist/core/p-b5a988c0.entry.js +0 -2
- package/dist/core/p-b5a988c0.entry.js.map +0 -1
- package/dist/core/p-bf5717ca.js +0 -2
- package/dist/core/p-c4d3c18c.entry.js.map +0 -1
- package/dist/core/p-c6dd4f47.entry.js +0 -2
- package/dist/core/p-c6dd4f47.entry.js.map +0 -1
- package/dist/core/p-cadb531f.entry.js.map +0 -1
- package/dist/core/p-cc83692e.entry.js +0 -2
- package/dist/core/p-cc83692e.entry.js.map +0 -1
- package/dist/core/p-dd3c3e3c.entry.js +0 -2
- package/dist/core/p-dd3c3e3c.entry.js.map +0 -1
- package/dist/core/p-df5caf13.entry.js +0 -2
- package/dist/core/p-df5caf13.entry.js.map +0 -1
- package/dist/core/p-e106305b.entry.js +0 -2
- package/dist/core/p-e106305b.entry.js.map +0 -1
- package/dist/core/p-e28af65b.js +0 -2
- package/dist/core/p-e28af65b.js.map +0 -1
- package/dist/core/p-e590f1d2.entry.js +0 -2
- package/dist/core/p-e590f1d2.entry.js.map +0 -1
- package/dist/core/p-e93e9aa3.entry.js.map +0 -1
- package/dist/core/p-ecfb2e6b.entry.js +0 -2
- package/dist/core/p-ecfb2e6b.entry.js.map +0 -1
- package/dist/core/p-f9370be6.js.map +0 -1
- package/dist/esm/check-icon-53f1d9e5.js.map +0 -1
- package/dist/esm/chevron-icon-5b38c60a.js +0 -8
- package/dist/esm/chevron-icon-5b38c60a.js.map +0 -1
- package/dist/esm/error-icon-6046a380.js +0 -15
- package/dist/esm/error-icon-6046a380.js.map +0 -1
- package/dist/esm/helpers-3d41833c.js.map +0 -1
- package/dist/esm/index-1500de1f.js.map +0 -1
- package/dist/esm/success-icon-2f71b115.js +0 -9
- package/dist/esm/success-icon-2f71b115.js.map +0 -1
- package/dist/types/components/ic-alert/ic-alert.types.d.ts +0 -1
- /package/dist/collection/{components/ic-link/assets → assets}/OpenInNew.svg +0 -0
- /package/dist/core/{p-1e7b4310.js.map → p-06321d19.js.map} +0 -0
- /package/dist/core/{p-ae6aa67f.js.map → p-8c7f4343.js.map} +0 -0
- /package/dist/core/{p-bf5717ca.js.map → p-8d4f7027.js.map} +0 -0
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":["icTopNavigationCss","TopNavigation","this","hasAppIcon","hasNavigation","hasIconButtons","hasSearchSlotContent","searchBar","initialiseSearchBar","slot","getSlot","el","tagName","querySelector","hideLabel","emitTopNavResized","size","event","CustomEvent","detail","dispatchEvent","menuButtonClick","showNavMenu","searchButtonMouseDownHandler","searchButtonClick","searchButtonClickHandler","toggleSearchBar","resizeObserver","resizeObserverCallback","currSize","deviceSize","DEVICE_SIZES","L","mobileSearchBarVisible","document","activeElement","undefined","setAttribute","removeAttribute","setTimeout","setFocus","runResizeObserver","ResizeObserver","getCurrentDeviceSize","observe","XL","getThemeForegroundColor","[object Object]","newValue","oldValue","onComponentPropUndefinedChange","menuBtn","shadowRoot","ev","searchValue","value","theme","foregroundColor","mode","mobileSearchButtonEl","updateAriaLabel","hasFullWidthSearchBar","fullWidth","show","navMenuVisible","icNavigationMenuOpened","emit","icNavigationMenuClosed","isSlotUsed","checkResizeObserver","onComponentRequiredPropUndefined","prop","appTitle","propName","disconnect","hasMenuContent","status","version","searchButtonSize","S","appTitleVariant","hasTitle","mobileSearchButtonTitle","menuSize","h","Host","class","IcThemeForegroundEnum","Dark","aligned","full-height","role","href","aria-hidden","name","variant","aria-label","id","ref","onMouseDown","appearance","onClick","xmlns","height","viewBox","width","fill","d","aria-labelledby","aria-expanded","menuOpen","aria-haspopup","inline"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n color: var(--ic-theme-text);\n width: 100%;\n position: relative;\n}\n\n:host .top-navigation {\n background-color: var(--ic-theme-primary);\n height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n width: 100%;\n}\n\n:host .title-link {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n padding: var(--ic-space-xxs);\n margin-left: calc(-1 * var(--ic-space-xxs));\n transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active {\n color: var(--ic-theme-text);\n}\n\n:host .title-link:hover:not(:focus) {\n background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active:not(:focus) {\n background-color: var(--ic-theme-active);\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n font-weight: 600;\n}\n\n:host .nav-panel-container {\n border-top: var(--ic-keyline-lighten);\n padding-left: var(--ic-space-lg);\n margin-left: calc(-1 * var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n border-top: var(--ic-keyline-darken);\n}\n\n.top-panel-container {\n display: flex;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n.navigation-tabs {\n margin-top: -1px;\n}\n\n.app-details-container {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n display: flex;\n padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n display: flex;\n margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n display: flex;\n}\n\n.app-title {\n padding-right: var(--ic-space-lg);\n}\n\n:host .app-status {\n border-radius: 80px;\n background-color: var(--ic-architectural-white);\n color: var(--ic-color-primary-text);\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n:host(.dark) .app-status {\n background-color: var(--ic-theme-text);\n color: var(--ic-color-white-text);\n}\n\n:host .app-version {\n border-radius: 16px;\n background-color: var(--ic-theme-active);\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n margin-left: var(--ic-space-xs);\n}\n\n.app-status-text,\n.app-version-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 96px;\n}\n\nslot[name=\"app-icon\"]::slotted(svg) {\n fill: var(--ic-theme-text);\n width: 2em;\n height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n fill: var(--ic-theme-text);\n}\n\n.search-menu-container {\n justify-content: right;\n display: flex;\n align-items: center;\n flex: 1 auto;\n}\n\n.menu-button-container {\n margin-left: var(--ic-space-md);\n}\n\n.search-actions-container {\n display: flex;\n}\n\n.menu-buttons-slot {\n display: flex;\n flex-direction: column;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n}\n\n.navigation-item-list {\n display: flex;\n list-style: none;\n height: 44px;\n}\n\n:host([content-aligned=\"left\"]) .app-details-container {\n flex-basis: 1;\n}\n\n:host([content-aligned=\"left\"]) .app-details-container,\n:host([content-aligned=\"left\"]) .nav-panel-container,\n:host([content-aligned=\"center\"]) .nav-panel-container,\n:host([content-aligned=\"left\"]) .search-menu-container,\n:host([content-aligned=\"center\"]) .search-menu-container {\n justify-content: flex-start;\n}\n\n:host([content-aligned=\"center\"]) .app-details-container {\n justify-content: flex-end;\n}\n\n:host ic-section-container{\n padding-bottom: 0 !important;\n padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n .app-details-container {\n margin-right: var(--ic-space-lg);\n }\n\n :host([content-aligned=\"center\"]) .top-navigation {\n display: flex;\n justify-content: center;\n }\n\n :host([content-aligned=\"left\"]) .top-navigation {\n display: flex;\n }\n}\n\n/* large */\n@media screen and (max-width: 1200px) {\n :host .nav-panel-container {\n padding-left: var(--ic-space-md);\n }\n}\n\n/* medium */\n@media screen and (max-width: 992px) {\n :host .nav-panel-container,\n :host .app-status,\n :host .app-version {\n display: none;\n }\n\n :host .title-link {\n margin-right: var(--ic-space-xs);\n }\n\n .search-menu-container {\n max-width: 160px;\n }\n\n .search-bar-container {\n display: flex;\n justify-content: center;\n align-items: center;\n border-top: var(--ic-keyline-darken);\n height: 64px;\n padding-left: var(--ic-space-md);\n padding-right: var(--ic-space-md);\n margin-left: calc(-1 * var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n }\n\n :host([content-aligned=\"left\"]) .app-details-container,\n :host([content-aligned=\"left\"]) .search-menu-container,\n :host([content-aligned=\"center\"]) .search-menu-container,\n :host([content-aligned=\"center\"]) .app-details-container {\n justify-content: flex-start;\n }\n}\n\n/* x small */\n@media screen and (max-width: 576px) {\n :host .title-link {\n margin-right: var(--ic-space-xxxs);\n word-break: break-word;\n hyphens: none;\n }\n\n .top-panel-container {\n min-height: 40px;\n }\n\n .searchbox-inline {\n display: none;\n }\n\n .search-bar-container {\n margin-top: 0;\n height: 56px;\n padding-left: var(--ic-space-xs);\n padding-right: var(--ic-space-xs);\n }\n\n .menu-button-container {\n margin-left: var(--ic-space-sm);\n }\n\n slot[name=\"app-icon\"]::slotted(svg) {\n width: 1.5em;\n height: 1.5em;\n }\n\n slot[name=\"toggle-icon\"] svg {\n width: 1.5em;\n height: 1.5em;\n }\n}\n\n@media (forced-colors: active) {\n :host .top-navigation {\n border-bottom: var(--ic-hc-border);\n }\n\n .app-status,\n .app-version {\n border: var(--ic-hc-border);\n }\n\n slot[name=\"app-icon\"]::slotted(svg) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n IcTypographyVariants,\n IcAlignment,\n IcThemeForeground,\n IcThemeForegroundEnum,\n IcTheme,\n} from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getSlot,\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n} from \"../../utils/helpers\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title.\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n tag: \"ic-top-navigation\",\n styleUrl: \"ic-top-navigation.css\",\n shadow: true,\n})\nexport class TopNavigation {\n @Element() el: HTMLIcTopNavigationElement;\n\n /**\n * Title to display\n */\n @Prop() appTitle!: string;\n\n /**\n * The url to navigate to when title is clicked\n */\n @Prop() href: string = \"/\";\n\n /**\n * Version info to display\n */\n @Prop() version: string = \"\";\n\n /**\n * Status info to display\n */\n @Prop() status: string = \"\";\n\n /**\n * The alignment of the top nav content\n */\n @Prop() contentAligned: IcAlignment = \"full-width\";\n\n /**\n * If true, the flyout navigation menu on small devices will be contained by the parent element\n */\n @Prop() inline: boolean = false;\n\n @State() menuOpen: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() mobileSearchBarVisible: boolean = false;\n @State() navMenuVisible: boolean = false;\n @State() searchValue: string = \"\";\n @State() mobileSearchHiddenOnBlur: boolean = false;\n @State() searchButtonClick: boolean = false;\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n @State() hasFullWidthSearchBar: boolean = false;\n\n @Watch(\"appTitle\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n //this watch can be removed once gatbsy hydration issue is resolved\n onComponentPropUndefinedChange(\n oldValue,\n newValue,\n this.initialiseSearchBar\n );\n }\n\n /**\n * @internal - Emitted when the menu is opened.\n */\n @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n /**\n * @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n private hasAppIcon: boolean = false;\n private hasNavigation: boolean = false;\n private hasIconButtons: boolean = false;\n private hasSearchSlotContent: boolean = false;\n private searchBar: HTMLIcSearchBarElement = null;\n private mobileSearchButtonEl: HTMLIcButtonElement;\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n const menuBtn = this.el.shadowRoot.querySelector(\n \"#menu-button\"\n ) as HTMLIcButtonElement;\n menuBtn.setFocus();\n }\n\n @Listen(\"icSearchBarBlur\", {})\n searchInputBlurHandler(ev: CustomEvent): void {\n if (ev.detail !== null) {\n if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n this.toggleSearchBar();\n }\n this.searchValue = ev.detail.value;\n }\n }\n\n @Listen(\"icChange\", {})\n searchValueChangeHandler(ev: CustomEvent): void {\n this.searchValue = ev.detail.value;\n }\n\n @Listen(\"icThemeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.foregroundColor = theme.mode;\n }\n\n private initialiseSearchBar = () => {\n if (this.hasSearchSlotContent) {\n const slot = getSlot(this.el, \"search\");\n if (slot && slot.tagName === \"IC-SEARCH-BAR\") {\n this.searchBar = slot as HTMLIcSearchBarElement;\n } else if (slot && slot.tagName === \"FORM\") {\n this.searchBar = slot.querySelector(\n \"ic-search-bar\"\n ) as HTMLIcSearchBarElement;\n }\n\n if (this.searchBar !== null) {\n this.searchBar.hideLabel = true;\n }\n }\n };\n\n private toggleSearchBar(): void {\n this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n if (this.searchBar !== null) {\n if (this.mobileSearchBarVisible) {\n this.mobileSearchButtonEl.updateAriaLabel(\"Hide search\");\n this.hasFullWidthSearchBar = true;\n this.searchBar.fullWidth = true;\n setTimeout(() => {\n this.searchBar.setFocus();\n }, 100);\n } else {\n this.mobileSearchButtonEl.updateAriaLabel(\"Show search\");\n this.hasFullWidthSearchBar = false;\n this.searchBar.fullWidth = false;\n }\n }\n }\n\n private emitTopNavResized = (size: number): void => {\n const event = new CustomEvent(\"topNavResized\", { detail: { size: size } });\n this.el.dispatchEvent(event);\n };\n\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu(show: boolean): void {\n this.navMenuVisible = show;\n if (show) {\n this.icNavigationMenuOpened.emit();\n } else {\n this.icNavigationMenuClosed.emit();\n }\n }\n\n private searchButtonMouseDownHandler = () => {\n this.searchButtonClick = true;\n };\n\n private searchButtonClickHandler = () => {\n this.toggleSearchBar();\n this.searchButtonClick = false;\n };\n\n private resizeObserver: ResizeObserver = null;\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n if (currSize > DEVICE_SIZES.L) {\n this.showNavMenu(false);\n if (this.mobileSearchBarVisible) {\n this.toggleSearchBar();\n }\n }\n this.emitTopNavResized(currSize);\n if (\n document.activeElement !== null &&\n document.activeElement !== undefined &&\n document.activeElement.tagName === \"IC-SEARCH-BAR\"\n ) {\n this.searchBar.setAttribute(\"hidden\", \"true\");\n //remove attribute again as this trigger a redraw & applies css\n this.searchBar.removeAttribute(\"hidden\");\n setTimeout(() => {\n this.searchBar.setFocus();\n }, 100);\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n componentWillLoad(): void {\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n this.deviceSize = getCurrentDeviceSize();\n this.initialiseSearchBar();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Top Navigation\"\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const hasMenuContent =\n this.hasNavigation ||\n this.hasIconButtons ||\n this.status !== \"\" ||\n this.version !== \"\";\n\n const searchButtonSize =\n this.deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n\n let appTitleVariant: IcTypographyVariants = \"h3\";\n\n const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n if (this.deviceSize <= DEVICE_SIZES.L) {\n appTitleVariant = \"h4\";\n if (this.deviceSize <= DEVICE_SIZES.S) {\n appTitleVariant = \"subtitle-small\";\n }\n }\n\n const mobileSearchButtonTitle = this.mobileSearchBarVisible\n ? \"Hide search\"\n : \"Show search\";\n const menuSize = this.deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n return (\n <Host\n class={{\n [\"fullwidth-searchbar\"]: this.hasFullWidthSearchBar,\n [IcThemeForegroundEnum.Dark]:\n this.foregroundColor === IcThemeForegroundEnum.Dark,\n }}\n >\n <div class=\"top-navigation\">\n <ic-section-container aligned=\"full-width\" full-height>\n <header role=\"banner\">\n <div class=\"top-panel-container\">\n <div class=\"app-details-container\">\n {hasTitle && (\n <a class=\"title-link\" href={this.href}>\n {this.hasAppIcon && (\n <div class=\"app-icon-container\" aria-hidden=\"true\">\n <slot name=\"app-icon\" />\n </div>\n )}\n <ic-typography variant={appTitleVariant}>\n <h1>{this.appTitle}</h1>\n </ic-typography>\n </a>\n )}\n {this.status !== \"\" && (\n <div class=\"app-status\">\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"app-version\">\n <ic-typography\n variant=\"label\"\n class=\"app-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n\n {(this.hasSearchSlotContent || hasMenuContent) && (\n <div class=\"search-menu-container\">\n <div class=\"search-actions-container\">\n {this.deviceSize > DEVICE_SIZES.L && (\n <slot name=\"search\"></slot>\n )}\n\n {this.hasSearchSlotContent &&\n this.deviceSize <= DEVICE_SIZES.L && (\n <ic-button\n id=\"search-toggle-button\"\n ref={(el) => (this.mobileSearchButtonEl = el)}\n onMouseDown={this.searchButtonMouseDownHandler}\n variant=\"icon\"\n size={searchButtonSize}\n aria-label={mobileSearchButtonTitle}\n appearance={this.foregroundColor}\n onClick={this.searchButtonClickHandler}\n >\n <slot name=\"toggle-icon\" slot=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#ffffff\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n </svg>\n </slot>\n </ic-button>\n )}\n\n {this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (\n <div class=\"menu-button-container\">\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n aria-hidden={\n !this.hasNavigation || this.navMenuVisible\n ? \"true\"\n : \"false\"\n }\n >\n <ic-button\n id=\"menu-button\"\n appearance={this.foregroundColor}\n variant=\"secondary\"\n aria-expanded={this.menuOpen ? \"true\" : \"false\"}\n aria-haspopup=\"true\"\n aria-label={`Open ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n size={menuSize}\n onClick={this.menuButtonClick}\n >\n Menu\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#ffffff\"\n slot=\"icon\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n </svg>\n </ic-button>\n </nav>\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n\n {this.mobileSearchBarVisible && (\n <div class=\"search-bar-container\">\n <slot name=\"search\"></slot>\n </div>\n )}\n\n {this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (\n <div class=\"navigation-tabs\">\n <span\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n aria-hidden=\"true\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n class=\"nav-panel-container\"\n >\n <ul class=\"navigation-item-list\">\n <slot name=\"navigation\"></slot>\n </ul>\n </nav>\n </div>\n )}\n </header>\n </ic-section-container>\n </div>\n {this.navMenuVisible && (\n <ic-navigation-menu\n version={this.version}\n status={this.status}\n class={{\n [\"inline\"]: this.inline,\n }}\n >\n <div class=\"menu-buttons-slot\" slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n <ul slot=\"navigation\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-navigation-menu>\n )}\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as o,h as t,H as e,g as r}from"./p-f9370be6.js";import{k as i,D as n,a as l}from"./p-23831891.js";import"./p-6f57b13c.js";const a='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.footer-link-group-sparse){--footer-link-group-margin-right:95px;--footer-link-group-border-bottom:0 solid transparent;--footer-link-group-title-margin-top:0;--footer-link-group-title-margin-bottom:var(--ic-space-md)}:host(.footer-link-group-small){--footer-link-group-margin-right:0;--footer-link-group-title-margin-top:var(--ic-space-md);--footer-link-group-title-margin-bottom:var(--ic-space-md);--footer-link-group-links-padding-left:var(--ic-space-md);--footer-link-group-links-padding-bottom:var(--ic-space-md)}:host(.footer-link-group-light.footer-link-group-small){--footer-link-group-border-bottom:var(--ic-keyline-lighten)}:host(.footer-link-group-dark.footer-link-group-small){--footer-link-group-border-bottom:var(--ic-keyline-darken)}:host(.footer-link-group){margin-right:var(--footer-link-group-margin-right);border-bottom:var(--footer-link-group-border-bottom)}:host(.footer-link-group-small.footer-link-group-light:hover){background-color:var(--ic-action-light-bg-hover);cursor:pointer}:host(.footer-link-group-small.footer-link-group-dark:hover){background-color:var(--ic-action-dark-bg-hover);cursor:pointer}:host(.footer-link-group-sparse:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}:host(.footer-link-group-small:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:var(--ic-hc-focus-outline);z-index:1}:host(.footer-link-group-small.footer-link-group-light:active){background-color:var(--ic-action-light-bg-active)}:host(.footer-link-group-small.footer-link-group-dark:active){background-color:var(--ic-action-dark-bg-active)}.footer-link-group-title{margin-top:var(--footer-link-group-title-margin-top);margin-bottom:var(--footer-link-group-title-margin-bottom);flex-grow:1}.footer-link-group-toggle{fill:white !important}.footer-link-group-links{display:flex;flex-direction:column}.footer-link-group-header{display:flex;align-items:center}';const s=class{constructor(t){o(this,t);this.handleKeydown=o=>{if(o.key===" "||o.key==="Enter"){this.toggleExpanded()}};this.toggleExpanded=()=>{this.expanded=!this.expanded};this.groupTitle=undefined;this.small=false;this.expanded=false;this.dropdownIconStyle=i();this.deviceSize=n.XL}isSmall(o){if(o.parentElement!==null){if(o.parentElement.classList.contains("footer")){return o.parentElement.classList.contains("footer-small")}else{return this.isSmall(o.parentElement)}}else{return false}}footerResizeHandler(){this.small=this.isSmall(this.el)}footerThemeChangeHandler(o){const t=o.detail;this.dropdownIconStyle=t.mode}componentWillLoad(){this.small=this.isSmall(this.el)}componentDidLoad(){l([{prop:this.groupTitle,propName:"group-title"}],"Footer Link Group")}render(){const{small:o,groupTitle:r}=this;return!o?t(e,{class:{["footer-link-group footer-link-group-sparse"]:true,[`footer-link-group-${this.dropdownIconStyle}`]:true}},t("div",{class:"footer-link-group-title"},t("ic-typography",{variant:"subtitle-small"},r)),t("div",{class:"footer-link-group-links"},t("slot",null))):t(e,{class:{["footer-link-group footer-link-group-small"]:true,[`footer-link-group-${this.dropdownIconStyle}`]:true},tabIndex:"1",onClick:this.toggleExpanded,onKeydown:this.handleKeydown,"aria-haspopup":"true","aria-expanded":this.expanded},t("ic-section-container",{fullHeight:true},t("div",{class:"footer-link-group-header"},t("div",{class:"footer-link-group-title"},t("ic-typography",{variant:"label"},r)),this.expanded?t("svg",{class:"footer-link-group-toggle",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",width:"1em",height:"1em",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 1200 1200"},t("path",{fill:"currentColor",d:"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z"})):t("svg",{class:"footer-link-group-toggle",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",width:"1em",height:"1em",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 1200 1200"},t("g",{transform:"translate(0 1200) scale(1 -1)"},t("path",{fill:"currentColor",d:"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z"})))),this.expanded&&t("div",{class:"footer-link-group-links"},t("slot",null))))}get el(){return r(this)}};s.style=a;export{s as ic_footer_link_group};
|
2
|
-
//# sourceMappingURL=p-6b34d98f.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-footer-link-group/ic-footer-link-group.css?tag=ic-footer-link-group&encapsulation=shadow","src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"names":["icFooterLinkGroupCss","FooterLinkGroup","this","handleKeydown","event","key","toggleExpanded","expanded","getThemeForegroundColor","DEVICE_SIZES","XL","[object Object]","e","parentElement","classList","contains","isSmall","small","el","ev","theme","detail","dropdownIconStyle","mode","onComponentRequiredPropUndefined","prop","groupTitle","propName","h","Host","class","variant","tabIndex","onClick","onKeydown","aria-haspopup","aria-expanded","fullHeight","xmlns","aria-hidden","role","width","height","preserveAspectRatio","viewBox","fill","d","transform"],"mappings":"mIAAA,MAAMA,EAAuB,i0ICqBhBC,EAAe,+BA4BlBC,KAAAC,cAAiBC,IACvB,GAAIA,EAAMC,MAAQ,KAAOD,EAAMC,MAAQ,QAAS,CAC9CH,KAAKI,mBAIDJ,KAAAI,eAAiB,KACvBJ,KAAKK,UAAYL,KAAKK,+CA3BE,oBAEG,6BAEAC,oBAECC,EAAaC,GAEnCC,QAAQC,GACd,GAAIA,EAAEC,gBAAkB,KAAM,CAC5B,GAAID,EAAEC,cAAcC,UAAUC,SAAS,UAAW,CAChD,OAAOH,EAAEC,cAAcC,UAAUC,SAAS,oBACrC,CACL,OAAOb,KAAKc,QAAQJ,EAAEC,oBAEnB,CACL,OAAO,OAeXF,sBACET,KAAKe,MAAQf,KAAKc,QAAQd,KAAKgB,IAIjCP,yBAAyBQ,GACvB,MAAMC,EAAiBD,EAAGE,OAC1BnB,KAAKoB,kBAAoBF,EAAMG,KAGjCZ,oBACET,KAAKe,MAAQf,KAAKc,QAAQd,KAAKgB,IAGjCP,mBACEa,EACE,CAAC,CAAEC,KAAMvB,KAAKwB,WAAYC,SAAU,gBACpC,qBAIJhB,SACE,MAAMM,MAAEA,EAAKS,WAAEA,GAAexB,KAE9B,OAAQe,EACNW,EAACC,EAAI,CACHC,MAAO,CACLnB,CAAC,8CAA+C,KAChDA,CAAC,qBAAqBT,KAAKoB,qBAAsB,OAGnDM,EAAA,MAAA,CAAKE,MAAM,2BACTF,EAAA,gBAAA,CAAeG,QAAQ,kBAAkBL,IAE3CE,EAAA,MAAA,CAAKE,MAAM,2BACTF,EAAA,OAAA,QAIJA,EAACC,EAAI,CACHC,MAAO,CACLnB,CAAC,6CAA8C,KAC/CA,CAAC,qBAAqBT,KAAKoB,qBAAsB,MAEnDU,SAAS,IACTC,QAAS/B,KAAKI,eACd4B,UAAWhC,KAAKC,cAAagC,gBACf,OAAMC,gBACLlC,KAAKK,UAEpBqB,EAAA,uBAAA,CAAsBS,WAAY,MAChCT,EAAA,MAAA,CAAKE,MAAM,4BACTF,EAAA,MAAA,CAAKE,MAAM,2BACTF,EAAA,gBAAA,CAAeG,QAAQ,SAASL,IAEjCxB,KAAKK,SACJqB,EAAA,MAAA,CACEE,MAAM,2BACNQ,MAAM,6BAA4BC,cACtB,OACZC,KAAK,MACLC,MAAM,MACNC,OAAO,MACPC,oBAAoB,gBACpBC,QAAQ,iBAERhB,EAAA,OAAA,CACEiB,KAAK,eACLC,EAAE,8IAINlB,EAAA,MAAA,CACEE,MAAM,2BACNQ,MAAM,6BAA4BC,cACtB,OACZC,KAAK,MACLC,MAAM,MACNC,OAAO,MACPC,oBAAoB,gBACpBC,QAAQ,iBAERhB,EAAA,IAAA,CAAGmB,UAAU,iCACXnB,EAAA,OAAA,CACEiB,KAAK,eACLC,EAAE,gJAMX5C,KAAKK,UACJqB,EAAA,MAAA,CAAKE,MAAM,2BACTF,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host(.footer-link-group-sparse) {\n --footer-link-group-margin-right: 95px;\n --footer-link-group-border-bottom: 0 solid transparent;\n --footer-link-group-title-margin-top: 0;\n --footer-link-group-title-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-small) {\n --footer-link-group-margin-right: 0;\n --footer-link-group-title-margin-top: var(--ic-space-md);\n --footer-link-group-title-margin-bottom: var(--ic-space-md);\n --footer-link-group-links-padding-left: var(--ic-space-md);\n --footer-link-group-links-padding-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-light.footer-link-group-small) {\n --footer-link-group-border-bottom: var(--ic-keyline-lighten);\n}\n\n:host(.footer-link-group-dark.footer-link-group-small) {\n --footer-link-group-border-bottom: var(--ic-keyline-darken);\n}\n\n:host(.footer-link-group) {\n margin-right: var(--footer-link-group-margin-right);\n border-bottom: var(--footer-link-group-border-bottom);\n}\n\n:host(.footer-link-group-small.footer-link-group-light:hover) {\n background-color: var(--ic-action-light-bg-hover);\n cursor: pointer;\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:hover) {\n background-color: var(--ic-action-dark-bg-hover);\n cursor: pointer;\n}\n\n:host(.footer-link-group-sparse:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\n:host(.footer-link-group-small:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\n:host(.footer-link-group-small.footer-link-group-light:active) {\n background-color: var(--ic-action-light-bg-active);\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:active) {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n.footer-link-group-title {\n margin-top: var(--footer-link-group-title-margin-top);\n margin-bottom: var(--footer-link-group-title-margin-bottom);\n flex-grow: 1;\n}\n\n.footer-link-group-toggle {\n fill: white !important;\n}\n\n.footer-link-group-links {\n display: flex;\n flex-direction: column;\n}\n\n.footer-link-group-header {\n display: flex;\n align-items: center;\n}\n","import {\n Component,\n Host,\n Element,\n Listen,\n Prop,\n h,\n State,\n} from \"@stencil/core\";\nimport {\n DEVICE_SIZES,\n getThemeForegroundColor,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-footer-link-group\",\n styleUrl: \"ic-footer-link-group.css\",\n shadow: true,\n})\nexport class FooterLinkGroup {\n @Element() el: HTMLIcFooterLinkGroupElement;\n\n /**\n * Sets the title of the link group for display\n */\n @Prop() groupTitle!: string;\n\n @State() small: boolean = false;\n\n @State() expanded: boolean = false;\n\n @State() dropdownIconStyle = getThemeForegroundColor();\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n private isSmall(e: HTMLElement): boolean {\n if (e.parentElement !== null) {\n if (e.parentElement.classList.contains(\"footer\")) {\n return e.parentElement.classList.contains(\"footer-small\");\n } else {\n return this.isSmall(e.parentElement);\n }\n } else {\n return false;\n }\n }\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.key === \" \" || event.key === \"Enter\") {\n this.toggleExpanded();\n }\n };\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n @Listen(\"icFooterResized\", { target: \"document\" })\n footerResizeHandler(): void {\n this.small = this.isSmall(this.el);\n }\n\n @Listen(\"icThemeChange\", { target: \"document\" })\n footerThemeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.dropdownIconStyle = theme.mode;\n }\n\n componentWillLoad(): void {\n this.small = this.isSmall(this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.groupTitle, propName: \"group-title\" }],\n \"Footer Link Group\"\n );\n }\n\n render() {\n const { small, groupTitle } = this;\n\n return !small ? (\n <Host\n class={{\n [\"footer-link-group footer-link-group-sparse\"]: true,\n [`footer-link-group-${this.dropdownIconStyle}`]: true,\n }}\n >\n <div class=\"footer-link-group-title\">\n <ic-typography variant=\"subtitle-small\">{groupTitle}</ic-typography>\n </div>\n <div class=\"footer-link-group-links\">\n <slot />\n </div>\n </Host>\n ) : (\n <Host\n class={{\n [\"footer-link-group footer-link-group-small\"]: true,\n [`footer-link-group-${this.dropdownIconStyle}`]: true,\n }}\n tabIndex=\"1\"\n onClick={this.toggleExpanded}\n onKeydown={this.handleKeydown}\n aria-haspopup=\"true\"\n aria-expanded={this.expanded}\n >\n <ic-section-container fullHeight={true}>\n <div class=\"footer-link-group-header\">\n <div class=\"footer-link-group-title\">\n <ic-typography variant=\"label\">{groupTitle}</ic-typography>\n </div>\n {this.expanded ? (\n <svg\n class=\"footer-link-group-toggle\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"img\"\n width=\"1em\"\n height=\"1em\"\n preserveAspectRatio=\"xMidYMid meet\"\n viewBox=\"0 0 1200 1200\"\n >\n <path\n fill=\"currentColor\"\n d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n />\n </svg>\n ) : (\n <svg\n class=\"footer-link-group-toggle\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"img\"\n width=\"1em\"\n height=\"1em\"\n preserveAspectRatio=\"xMidYMid meet\"\n viewBox=\"0 0 1200 1200\"\n >\n <g transform=\"translate(0 1200) scale(1 -1)\">\n <path\n fill=\"currentColor\"\n d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n />\n </g>\n </svg>\n )}\n </div>\n {this.expanded && (\n <div class=\"footer-link-group-links\">\n <slot />\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-section-container/ic-section-container.css?tag=ic-section-container&encapsulation=shadow","src/components/ic-section-container/ic-section-container.tsx"],"names":["icSectionContainerCss","SectionContainer","[object Object]","aligned","fullHeight","this","h","Host","class"],"mappings":"kDAAA,MAAMA,EAAwB,kyHCQjBC,EAAgB,4CAIK,uBAKD,MAE/BC,SACE,MAAMC,QAAEA,EAAOC,WAAEA,GAAeC,KAChC,OACEC,EAACC,EAAI,CACHC,MAAO,CACLN,CAAC,gBAAiBC,IAAY,OAC9BD,CAAC,kBAAmBC,IAAY,SAChCD,CAAC,sBAAuBC,IAAY,aACpCD,CAAC,uBAAwBE,IAG3BE,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n@media only screen and (max-width: 576px) {\n :host {\n --section-container-margin: var(--ic-space-xs);\n --section-container-max-width: var(--ic-breakpoint-sm);\n }\n}\n\n@media only screen and (min-width: 577px) {\n :host {\n --section-container-margin: var(--ic-space-md);\n --section-container-max-width: var(--ic-breakpoint-md);\n }\n}\n\n@media only screen and (min-width: 769px) {\n :host {\n --section-container-margin: var(--ic-space-md);\n --section-container-max-width: var(--ic-breakpoint-lg);\n }\n}\n\n@media only screen and (min-width: 993px) {\n :host {\n --section-container-margin: var(--ic-space-md);\n --section-container-max-width: var(--ic-breakpoint-xl);\n }\n}\n\n@media only screen and (min-width: 1201px) {\n :host {\n --section-container-margin: var(--ic-space-lg);\n --section-container-max-width: var(--ic-breakpoint-xl);\n }\n}\n\n:host {\n display: block;\n padding-top: var(--ic-space-md);\n padding-bottom: var(--ic-space-md);\n}\n\n:host(.aligned-center) {\n max-width: var(--section-container-max-width);\n margin-left: auto;\n margin-right: auto;\n padding-left: var(--section-container-margin);\n padding-right: var(--section-container-margin);\n}\n\n:host(.aligned-left) {\n max-width: var(--section-container-max-width);\n margin-left: var(--section-container-margin);\n margin-right: auto;\n padding-right: var(--section-container-margin);\n}\n\n:host(.aligned-full-width) {\n margin-left: var(--section-container-margin);\n margin-right: var(--section-container-margin);\n}\n\n:host(.vertical-padding) {\n padding-top: var(--ic-space-md);\n padding-bottom: var(--ic-space-md);\n}\n\n:host(.no-vertical-padding) {\n padding-top: 0;\n padding-bottom: 0;\n}\n","import { Component, Prop, Host, h } from \"@stencil/core\";\nimport { IcAlignment } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-section-container\",\n styleUrl: \"ic-section-container.css\",\n shadow: true,\n})\nexport class SectionContainer {\n /**\n * How the container should be aligned.\n */\n @Prop() aligned?: IcAlignment = \"left\";\n\n /**\n * Removes the standard vertical padding from the container.\n */\n @Prop() fullHeight?: boolean = false;\n\n render() {\n const { aligned, fullHeight } = this;\n return (\n <Host\n class={{\n [\"aligned-left\"]: aligned === \"left\",\n [\"aligned-center\"]: aligned === \"center\",\n [\"aligned-full-width\"]: aligned === \"full-width\",\n [\"no-vertical-padding\"]: fullHeight,\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,c as t,h as i,H as s,g as o}from"./p-f9370be6.js";import{a as n,h as r,j as a}from"./p-23831891.js";import"./p-6f57b13c.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}ic-input-label.error{color:var(--ic-status-error)}ic-input-label ic-typography{margin-bottom:var(--ic-space-sm)}.list-items{list-style:none}.screen-reader-only-text{position:absolute;left:-9999px;background-color:#fff;color:#000;text-transform:none}';const d=class{constructor(i){e(this,i);this.icChange=t(this,"icChange",7);this.label=undefined;this.name=undefined;this.required=false;this.hideLabel=false;this.disabled=false;this.helperText="";this.small=false;this.validationStatus="";this.validationText="";this.checkedOptions=[]}selectHandler(){this.checkboxOptions=Array.from(this.host.querySelectorAll("ic-checkbox"));this.checkboxOptions.forEach((e=>{if(e.checked&&this.checkedOptions.indexOf(e.value)===-1){this.checkedOptions.push(e.value)}}));this.icChange.emit({value:this.checkedOptions})}componentDidLoad(){this.checkboxOptions=Array.from(this.host.querySelectorAll("ic-checkbox"));this.checkboxOptions.forEach((e=>{if(e.checked&&this.checkedOptions.indexOf(e.value)===-1){this.checkedOptions.push(e.value)}if(!e.name)e.name=this.name;e.groupLabel=this.label}));n([{prop:this.label,propName:"label"},{prop:this.name,propName:"name"}],"Checkbox Group")}render(){const e=r(this.name,this.helperText!=="",this.validationStatus!=="");const t=a(this.validationStatus,this.disabled);return i(s,null,(this.validationStatus==="error"||this.required||this.hideLabel)&&i("span",{id:"screenReaderOnlyText",class:"screen-reader-only-text","aria-hidden":"true"},this.label," ",this.validationStatus==="error"?"invalid data ":null," ",this.required?"required":null),i("fieldset",{id:this.name,"aria-labelledby":`${this.validationStatus==="error"||this.required||this.hideLabel?"screenReaderOnlyText":""} ${e}`.trim(),disabled:this.disabled},!this.hideLabel&&i("legend",null,i("ic-input-label",{class:{[`${this.validationStatus}`]:true},label:this.label,helperText:this.helperText,required:this.required,disabled:this.disabled,for:this.name})),i("div",{class:"list-items"},i("slot",null))),t&&i("ic-input-validation",{for:this.name,ariaLiveMode:"polite",status:this.validationStatus,message:this.validationText}))}get host(){return o(this)}};d.style=l;export{d as ic_checkbox_group};
|
2
|
-
//# sourceMappingURL=p-6f6bd657.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"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"],"names":["icCheckboxGroupCss","CheckboxGroup","[object Object]","this","checkboxOptions","Array","from","host","querySelectorAll","forEach","checkbox","checked","checkedOptions","indexOf","value","push","icChange","emit","name","groupLabel","label","onComponentRequiredPropUndefined","prop","propName","describedBy","getInputDescribedByText","helperText","validationStatus","hadValidationStatus","hasValidationStatus","disabled","h","Host","required","hideLabel","id","class","aria-hidden","aria-labelledby","trim","for","ariaLiveMode","status","message","validationText"],"mappings":"0IAAA,MAAMA,EAAqB,unFCwBdC,EAAa,yHAgBI,qBAKC,oBAKD,sBAKC,cAKJ,4BAI8B,uBAItB,uBASG,GAGpCC,gBACEC,KAAKC,gBAAkBC,MAAMC,KAC3BH,KAAKI,KAAKC,iBAAiB,gBAE7BL,KAAKC,gBAAgBK,SAASC,IAC5B,GACEA,EAASC,SACTR,KAAKS,eAAeC,QAAQH,EAASI,UAAY,EACjD,CACAX,KAAKS,eAAeG,KAAKL,EAASI,WAGtCX,KAAKa,SAASC,KAAK,CAAEH,MAAOX,KAAKS,iBAGnCV,mBACEC,KAAKC,gBAAkBC,MAAMC,KAC3BH,KAAKI,KAAKC,iBAAiB,gBAE7BL,KAAKC,gBAAgBK,SAASC,IAC5B,GACEA,EAASC,SACTR,KAAKS,eAAeC,QAAQH,EAASI,UAAY,EACjD,CACAX,KAAKS,eAAeG,KAAKL,EAASI,OAEpC,IAAKJ,EAASQ,KAAMR,EAASQ,KAAOf,KAAKe,KACzCR,EAASS,WAAahB,KAAKiB,SAG7BC,EACE,CACE,CAAEC,KAAMnB,KAAKiB,MAAOG,SAAU,SAC9B,CAAED,KAAMnB,KAAKe,KAAMK,SAAU,SAE/B,kBAIJrB,SACE,MAAMsB,EAAcC,EAClBtB,KAAKe,KACLf,KAAKuB,aAAe,GACpBvB,KAAKwB,mBAAqB,IAE5B,MAAMC,EAAsBC,EAC1B1B,KAAKwB,iBACLxB,KAAK2B,UAGP,OACEC,EAACC,EAAI,MACD7B,KAAKwB,mBAAqB,SAC1BxB,KAAK8B,UACL9B,KAAK+B,YACLH,EAAA,OAAA,CACEI,GAAG,uBACHC,MAAM,0BAAyBC,cACnB,QAEXlC,KAAKiB,MAAO,IACZjB,KAAKwB,mBAAqB,QAAU,gBAAkB,KAAM,IAC5DxB,KAAK8B,SAAW,WAAa,MAGlCF,EAAA,WAAA,CACEI,GAAIhC,KAAKe,KAAIoB,kBACI,GACfnC,KAAKwB,mBAAqB,SAAWxB,KAAK8B,UAAY9B,KAAK+B,UACvD,uBACA,MACFV,IAAce,OAClBT,SAAU3B,KAAK2B,WAEb3B,KAAK+B,WACLH,EAAA,SAAA,KACEA,EAAA,iBAAA,CACEK,MAAO,CAAElC,CAAC,GAAGC,KAAKwB,oBAAqB,MACvCP,MAAOjB,KAAKiB,MACZM,WAAYvB,KAAKuB,WACjBO,SAAU9B,KAAK8B,SACfH,SAAU3B,KAAK2B,SACfU,IAAKrC,KAAKe,QAIhBa,EAAA,MAAA,CAAKK,MAAM,cACTL,EAAA,OAAA,QAGHH,GACCG,EAAA,sBAAA,CACES,IAAKrC,KAAKe,KACVuB,aAAa,SACbC,OAAQvC,KAAKwB,iBACbgB,QAASxC,KAAKyC","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n}\n\nic-input-label.error {\n color: var(--ic-status-error);\n}\n\nic-input-label ic-typography {\n margin-bottom: var(--ic-space-sm);\n}\n\n.list-items {\n list-style: none;\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 State,\n} from \"@stencil/core\";\nimport {\n getInputDescribedByText,\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } 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})\nexport class CheckboxGroup {\n @Element() host: HTMLIcCheckboxGroupElement;\n\n /**\n * Provide a label for the input.\n */\n @Prop() label!: string;\n\n /**\n * Provide a name for the input.\n */\n @Prop() name!: string;\n\n /**\n * Specify if the input requires a value.\n */\n @Prop() required: boolean = false;\n\n /**\n * Hides the label and applies the required label value as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * Specify whether the input is disabled.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Provide helper text to display additional field guidance.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * Specify whether small styling to be applied to element.\n */\n @Prop() small: boolean = false;\n /**\n * Provide validation status - 'error'\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /**\n * Provide validation text - 'error'\n */\n @Prop() validationText: string = \"\";\n\n /**\n * Emitted when a checkbox is checked.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n private checkboxOptions: HTMLIcCheckboxElement[];\n\n @State() checkedOptions: string[] = [];\n\n @Listen(\"checkboxChecked\")\n selectHandler(): void {\n this.checkboxOptions = Array.from(\n this.host.querySelectorAll(\"ic-checkbox\")\n );\n this.checkboxOptions.forEach((checkbox) => {\n if (\n checkbox.checked &&\n this.checkedOptions.indexOf(checkbox.value) === -1\n ) {\n this.checkedOptions.push(checkbox.value);\n }\n });\n this.icChange.emit({ value: this.checkedOptions });\n }\n\n componentDidLoad(): void {\n this.checkboxOptions = Array.from(\n this.host.querySelectorAll(\"ic-checkbox\")\n );\n this.checkboxOptions.forEach((checkbox) => {\n if (\n checkbox.checked &&\n this.checkedOptions.indexOf(checkbox.value) === -1\n ) {\n this.checkedOptions.push(checkbox.value);\n }\n if (!checkbox.name) checkbox.name = this.name;\n checkbox.groupLabel = this.label;\n });\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Checkbox Group\"\n );\n }\n\n render() {\n const describedBy = getInputDescribedByText(\n this.name,\n this.helperText !== \"\",\n this.validationStatus !== \"\"\n );\n const hadValidationStatus = hasValidationStatus(\n this.validationStatus,\n this.disabled\n );\n\n return (\n <Host>\n {(this.validationStatus === \"error\" ||\n this.required ||\n this.hideLabel) && (\n <span\n id=\"screenReaderOnlyText\"\n class=\"screen-reader-only-text\"\n aria-hidden=\"true\"\n >\n {this.label}{\" \"}\n {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n {this.required ? \"required\" : null}\n </span>\n )}\n <fieldset\n id={this.name}\n aria-labelledby={`${\n this.validationStatus === \"error\" || this.required || this.hideLabel\n ? \"screenReaderOnlyText\"\n : \"\"\n } ${describedBy}`.trim()}\n disabled={this.disabled}\n >\n {!this.hideLabel && (\n <legend>\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n for={this.name}\n ></ic-input-label>\n </legend>\n )}\n <div class=\"list-items\">\n <slot></slot>\n </div>\n </fieldset>\n {hadValidationStatus && (\n <ic-input-validation\n for={this.name}\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as o,c as t,h as r,H as i}from"./p-f9370be6.js";import{B as s,C as e,W as c,E as h,F as a,k as n}from"./p-23831891.js";import"./p-6f57b13c.js";const l=class{constructor(r){o(this,r);this.icThemeChange=t(this,"icThemeChange",7);this.checkThemeColorContrast=()=>{if(s()<e&&s()>c){console.warn(`The theme 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.setThemeColor=()=>{if(this.color!==null){let o=null;const t=this.color.slice(0,1);if(t==="#"){o=h(this.color)}else if(t.toLowerCase()==="r"){o=a(this.color)}this.setThemeRGBA(o)}};this.setThemeRGBA=o=>{if(o!==null){const t=document.documentElement;t.style.setProperty("--ic-theme-primary-r",o.r.toString());t.style.setProperty("--ic-theme-primary-g",o.g.toString());t.style.setProperty("--ic-theme-primary-b",o.b.toString());t.style.setProperty("--ic-theme-primary-a",o.a.toString());this.checkThemeColorContrast();const r=n();this.icThemeChange.emit({mode:r,color:o})}};this.color=null}watchColorPropHandler(){this.setThemeColor()}componentWillLoad(){this.setThemeColor()}render(){return r(i,null)}static get watchers(){return{color:["watchColorPropHandler"]}}};export{l as ic_theme};
|
2
|
-
//# sourceMappingURL=p-7093d214.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-theme/ic-theme.tsx"],"names":["Theme","this","checkThemeColorContrast","getThemeColorBrightness","BLACK_MIN_COLOR_BRIGHTNESS","WHITE_MAX_COLOR_BRIGHTNESS","console","warn","setThemeColor","color","colorRGBA","firstChar","slice","hexToRgba","toLowerCase","rgbaStrToObj","setThemeRGBA","root","document","documentElement","style","setProperty","r","toString","g","b","a","foregroundColor","getThemeForegroundColor","icThemeChange","emit","mode","[object Object]","h","Host"],"mappings":"8JA0BaA,EAAK,4EAgBRC,KAAAC,wBAA0B,KAChC,GACEC,IAA4BC,GAC5BD,IAA4BE,EAC5B,CACAC,QAAQC,KACN,+TAKEN,KAAAO,cAAgB,KACtB,GAAIP,KAAKQ,QAAU,KAAM,CACvB,IAAIC,EAAY,KAChB,MAAMC,EAAYV,KAAKQ,MAAMG,MAAM,EAAG,GACtC,GAAID,IAAc,IAAK,CACrBD,EAAYG,EAAUZ,KAAKQ,YACtB,GAAIE,EAAUG,gBAAkB,IAAK,CAC1CJ,EAAYK,EAAad,KAAKQ,OAEhCR,KAAKe,aAAaN,KAIdT,KAAAe,aAAgBN,IACtB,GAAIA,IAAc,KAAM,CACtB,MAAMO,EAAOC,SAASC,gBACtBF,EAAKG,MAAMC,YAAY,uBAAwBX,EAAUY,EAAEC,YAC3DN,EAAKG,MAAMC,YAAY,uBAAwBX,EAAUc,EAAED,YAC3DN,EAAKG,MAAMC,YAAY,uBAAwBX,EAAUe,EAAEF,YAC3DN,EAAKG,MAAMC,YAAY,uBAAwBX,EAAUgB,EAAEH,YAE3DtB,KAAKC,0BAEL,MAAMyB,EAAkBC,IACxB3B,KAAK4B,cAAcC,KAAK,CAAEC,KAAMJ,EAAiBlB,MAAOC,iBA/CnC,KAGzBsB,wBACE/B,KAAKO,gBA+CPwB,oBACE/B,KAAKO,gBAGPwB,SACE,OAAOC,EAACC,EAAI","sourcesContent":["import {\n Component,\n Host,\n Event,\n EventEmitter,\n h,\n Watch,\n Prop,\n} from \"@stencil/core\";\n\nimport { IcColorRGBA, IcTheme } from \"../../utils/types\";\nimport {\n getThemeForegroundColor,\n hexToRgba,\n rgbaStrToObj,\n} from \"../../utils/helpers\";\nimport { getThemeColorBrightness } 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 shadow: true,\n})\nexport class Theme {\n /**\n * The theme colour. Can be a hex value eg \"#ff0000\" or RGB eg \"rgb(255, 0, 0)\"\n */\n @Prop() color?: string = null;\n\n @Watch(\"color\")\n watchColorPropHandler(): void {\n this.setThemeColor();\n }\n\n /**\n * Emitted when the theme is changed.\n */\n @Event() icThemeChange: EventEmitter<IcTheme>;\n\n private checkThemeColorContrast = (): void => {\n if (\n getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n ) {\n console.warn(\n `The theme 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 setThemeColor = () => {\n if (this.color !== null) {\n let colorRGBA = null;\n const firstChar = this.color.slice(0, 1);\n if (firstChar === \"#\") {\n colorRGBA = hexToRgba(this.color);\n } else if (firstChar.toLowerCase() === \"r\") {\n colorRGBA = rgbaStrToObj(this.color);\n }\n this.setThemeRGBA(colorRGBA);\n }\n };\n\n private setThemeRGBA = (colorRGBA: IcColorRGBA) => {\n if (colorRGBA !== null) {\n const root = document.documentElement;\n root.style.setProperty(\"--ic-theme-primary-r\", colorRGBA.r.toString());\n root.style.setProperty(\"--ic-theme-primary-g\", colorRGBA.g.toString());\n root.style.setProperty(\"--ic-theme-primary-b\", colorRGBA.b.toString());\n root.style.setProperty(\"--ic-theme-primary-a\", colorRGBA.a.toString());\n\n this.checkThemeColorContrast();\n\n const foregroundColor = getThemeForegroundColor();\n this.icThemeChange.emit({ mode: foregroundColor, color: colorRGBA });\n }\n };\n\n componentWillLoad(): void {\n this.setThemeColor();\n }\n\n render() {\n return <Host></Host>;\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as s,h as i,g as h}from"./p-f9370be6.js";import{I as e}from"./p-6f57b13c.js";const a=class{constructor(i){t(this,i);this.tabSelect=s(this,"tabSelect",7);this.linkTabs=()=>{this.tabs.forEach(((t,s)=>{const i=`ic-tab-${s}-context-${this.contextId}`;const h=`ic-tab-panel-${s}-context-${this.contextId}`;const a=`ic-tab--${s}-context-${this.contextId}`;t.setAttribute("id",i);t.tabId=a;t.tabPosition=s;t.setAttribute("aria-controls",h);t.setAttribute("context-id",this.contextId);this.tabPanels[s].setAttribute("id",h);this.tabPanels[s].panelId=a;this.tabPanels[s].tabPosition=s;this.tabPanels[s].setAttribute("aria-labelledby",i);if(this.appearance===e.Light){t.appearance=this.appearance;this.tabPanels[s].appearance=this.appearance}}));if(this.appearance===e.Light){this.tabGroup.appearance=this.appearance}};this.getChildren=()=>{this.tabGroup=Array.from(this.host.querySelectorAll("ic-tab-group")).find((t=>t.contextId===this.contextId));this.tabs=Array.from(this.tabGroup.querySelectorAll("ic-tab")).filter((t=>t.contextId===this.contextId));this.enabledTabs=this.getEnabledTabs();this.tabPanels=Array.from(this.host.querySelectorAll("ic-tab-panel"))};this.attatchEventListeners=()=>{if(this.activationType==="automatic"){this.tabGroup.addEventListener("keydown",(t=>{this.handleKeyBoardNavAutomatic(t)}))}else{this.tabGroup.addEventListener("keydown",(t=>{this.handleKeyBoardNavManual(t)}))}};this.setControlledMode=()=>{if(this.selectedTabIndex!==undefined){this.controlledMode=true;this.selectedTab=this.selectedTabIndex}};this.setInitialTab=()=>{if(this.controlledMode){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=>{t.selectedTab=this.tabs[this.selectedTab].tabId}))};this.getEnabledTabs=()=>Array.from(this.tabs).filter((t=>!t.disabled));this.getIndexOfEnabledTab=t=>this.enabledTabs.findIndex((s=>s.tabId===this.tabs[t].tabId));this.keyboardSelectTab=t=>{const s=this.tabs.findIndex((s=>s.tabId===this.enabledTabs[t].tabId));this.enabledTabs[t].focus();if(!this.controlledMode){this.selectedTab=s}else{this.tabSelect.emit({tabIndex:s})}};this.keyboardFocusTab=t=>{const s=this.tabs.findIndex((s=>s.tabId===this.enabledTabs[t].tabId));this.enabledTabs[t].focus();this.focusedTabIndex=s};this.handleKeyBoardNavAutomatic=t=>{const s=t.key;const i=this.getIndexOfEnabledTab(this.selectedTab);let h=true;switch(s){case"Home":this.keyboardSelectTab(0);break;case"End":this.keyboardSelectTab(this.enabledTabs.length-1);break;case"ArrowRight":if(i<this.enabledTabs.length-1){this.keyboardSelectTab(i+1)}else{this.keyboardSelectTab(0)}break;case"ArrowLeft":if(i>0){this.keyboardSelectTab(i-1)}else{this.keyboardSelectTab(this.enabledTabs.length-1)}break;default:h=false}if(h)t.preventDefault()};this.handleKeyBoardNavManual=t=>{const s=t.key;const i=this.getIndexOfEnabledTab(this.focusedTabIndex);let h=true;switch(s){case"Home":this.keyboardFocusTab(0);break;case"End":this.keyboardFocusTab(this.enabledTabs.length-1);break;case"ArrowRight":if(i<this.enabledTabs.length-1){this.keyboardFocusTab(i+1)}else{this.keyboardFocusTab(0)}break;case"ArrowLeft":if(i>0){this.keyboardFocusTab(i-1)}else{this.keyboardFocusTab(this.enabledTabs.length-1)}break;case"Enter":this.keyboardSelectTab(this.focusedTabIndex);break;case" ":this.keyboardSelectTab(this.focusedTabIndex);break;default:h=false}if(h)t.preventDefault()};this.contextId="default";this.activationType="automatic";this.selectedTabIndex=undefined;this.appearance="dark";this.selectedTab=undefined}updateSelectedTab(t){this.selectedTab=t}tabClickHandler(t){if(this.selectedTabIndex===undefined&&t.detail.contextId===this.contextId){this.selectedTab=t.detail.position}this.tabSelect.emit({tabIndex:t.detail.position})}componentDidLoad(){this.setControlledMode();this.getChildren();this.linkTabs();this.attatchEventListeners();this.setInitialTab();this.configureTabs()}componentWillUpdate(){this.configureTabs()}disconnectedCallback(){if(this.activationType==="manual"){this.tabGroup.removeEventListener("keydown",(t=>this.handleKeyBoardNavManual(t)))}else{this.tabGroup.removeEventListener("keydown",(t=>this.handleKeyBoardNavAutomatic(t)))}}render(){return i("slot",null)}get host(){return h(this)}static get watchers(){return{selectedTabIndex:["updateSelectedTab"]}}};export{a as ic_tab_context};
|
2
|
-
//# sourceMappingURL=p-7577c6a3.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-tab-context/ic-tab-context.tsx"],"names":["TabContext","this","linkTabs","tabs","forEach","tab","index","tabId","contextId","tabPanelId","shared","setAttribute","tabPosition","tabPanels","panelId","appearance","IcThemeForegroundEnum","Light","tabGroup","getChildren","Array","from","host","querySelectorAll","find","filter","enabledTabs","getEnabledTabs","attatchEventListeners","activationType","addEventListener","event","handleKeyBoardNavAutomatic","handleKeyBoardNavManual","setControlledMode","selectedTabIndex","undefined","controlledMode","selectedTab","setInitialTab","focusedTabIndex","firstEnabledTabIndex","findIndex","configureTabs","selected","tabPanel","child","disabled","getIndexOfEnabledTab","allTabsIndex","keyboardSelectTab","enabledTabIndex","newIndex","focus","tabSelect","emit","tabIndex","keyboardFocusTab","key","preventDefault","length","[object Object]","newValue","detail","position","removeEventListener","h"],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Prop,\n State,\n h,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcActivationTypes,\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nimport {\n IcTabClickEventDetail,\n IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\n@Component({\n tag: \"ic-tab-context\",\n})\nexport class TabContext {\n @Element() host: HTMLIcTabContextElement;\n\n /**\n * Provide a unique context 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 * 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 * Allows the user to control the selected tab. Must be used alongside the tabSelect event to manage tab selection.\n */\n @Prop() selectedTabIndex?: number;\n\n /**\n * Determines whether the light or dark variant of the tabs should be displayed.\n */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n @State() selectedTab: number | null;\n\n @Watch(\"selectedTabIndex\")\n updateSelectedTab(newValue: number): void {\n this.selectedTab = newValue;\n }\n\n /**\n * Emitted when a user selects a tab.\n */\n @Event() tabSelect: EventEmitter<IcTabSelectEventDetail>;\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 this.tabSelect.emit({\n tabIndex: event.detail.position,\n });\n }\n\n private controlledMode: boolean;\n private tabs: HTMLIcTabElement[];\n private enabledTabs: HTMLIcTabElement[];\n private tabPanels: HTMLIcTabPanelElement[];\n private tabGroup: HTMLIcTabGroupElement;\n private focusedTabIndex: number;\n\n // Sets attributes to link tabs and tabpanels\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 const shared = `ic-tab--${index}-context-${this.contextId}`;\n tab.setAttribute(\"id\", tabId);\n tab.tabId = shared;\n tab.tabPosition = index;\n tab.setAttribute(\"aria-controls\", tabPanelId);\n tab.setAttribute(\"context-id\", this.contextId);\n this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n this.tabPanels[index].panelId = shared;\n this.tabPanels[index].tabPosition = index;\n this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n\n if (this.appearance === IcThemeForegroundEnum.Light) {\n tab.appearance = this.appearance;\n this.tabPanels[index].appearance = this.appearance;\n }\n });\n\n if (this.appearance === IcThemeForegroundEnum.Light) {\n this.tabGroup.appearance = this.appearance;\n }\n };\n\n // Gets tabs and tabpanels with the same context ID\n private getChildren = (): void => {\n this.tabGroup = Array.from(this.host.querySelectorAll(\"ic-tab-group\")).find(\n (tabGroup) => tabGroup.contextId === this.contextId\n );\n this.tabs = Array.from(this.tabGroup.querySelectorAll(\"ic-tab\")).filter(\n (tab) => tab.contextId === this.contextId\n );\n this.enabledTabs = this.getEnabledTabs();\n this.tabPanels = Array.from(this.host.querySelectorAll(\"ic-tab-panel\"));\n };\n\n // Determines how keyboard navigation is to be handled based on the activation type\n private attatchEventListeners = (): void => {\n if (this.activationType === \"automatic\") {\n this.tabGroup.addEventListener(\"keydown\", (event) => {\n this.handleKeyBoardNavAutomatic(event);\n });\n } else {\n this.tabGroup.addEventListener(\"keydown\", (event) => {\n this.handleKeyBoardNavManual(event);\n });\n }\n };\n\n // Determines whether the selected tab is being controlled within the component\n // or by the user (via selectedTabIndex and onTabSelect)\n private setControlledMode = (): void => {\n if (this.selectedTabIndex !== undefined) {\n this.controlledMode = true;\n this.selectedTab = this.selectedTabIndex;\n }\n };\n\n // Sets the tab that is selected on initial render\n private setInitialTab = (): void => {\n if (this.controlledMode) {\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) => {\n tabPanel.selectedTab = this.tabs[this.selectedTab].tabId;\n });\n };\n\n private getEnabledTabs = () => {\n return Array.from(this.tabs).filter((child) => !child.disabled);\n };\n\n private getIndexOfEnabledTab = (allTabsIndex: number) => {\n return this.enabledTabs.findIndex(\n (tab) => tab.tabId === this.tabs[allTabsIndex].tabId\n );\n };\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.controlledMode) {\n this.selectedTab = newIndex;\n } else {\n this.tabSelect.emit({ tabIndex: newIndex });\n }\n };\n\n // Sets focus on tab without selecting it (for manual activation)\n private keyboardFocusTab = (enabledTabIndex: number) => {\n const newIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n );\n this.enabledTabs[enabledTabIndex].focus();\n this.focusedTabIndex = newIndex;\n };\n\n private handleKeyBoardNavAutomatic = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.selectedTab);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardSelectTab(0);\n break;\n case \"End\":\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardSelectTab(enabledTabIndex + 1);\n } else {\n this.keyboardSelectTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardSelectTab(enabledTabIndex - 1);\n } else {\n this.keyboardSelectTab(this.enabledTabs.length - 1);\n }\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n private handleKeyBoardNavManual = (event: KeyboardEvent) => {\n const key = event.key;\n const enabledTabIndex = this.getIndexOfEnabledTab(this.focusedTabIndex);\n let preventDefault = true;\n switch (key) {\n case \"Home\":\n this.keyboardFocusTab(0);\n break;\n case \"End\":\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n break;\n case \"ArrowRight\":\n if (enabledTabIndex < this.enabledTabs.length - 1) {\n this.keyboardFocusTab(enabledTabIndex + 1);\n } else {\n this.keyboardFocusTab(0);\n }\n break;\n case \"ArrowLeft\":\n if (enabledTabIndex > 0) {\n this.keyboardFocusTab(enabledTabIndex - 1);\n } else {\n this.keyboardFocusTab(this.enabledTabs.length - 1);\n }\n break;\n case \"Enter\":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n case \" \":\n this.keyboardSelectTab(this.focusedTabIndex);\n break;\n default:\n preventDefault = false;\n }\n if (preventDefault) event.preventDefault();\n };\n\n componentDidLoad(): void {\n this.setControlledMode();\n this.getChildren();\n this.linkTabs();\n this.attatchEventListeners();\n this.setInitialTab();\n this.configureTabs();\n }\n\n componentWillUpdate(): void {\n this.configureTabs();\n }\n\n disconnectedCallback(): void {\n if (this.activationType === \"manual\") {\n this.tabGroup.removeEventListener(\"keydown\", (event) =>\n this.handleKeyBoardNavManual(event)\n );\n } else {\n this.tabGroup.removeEventListener(\"keydown\", (event) =>\n this.handleKeyBoardNavAutomatic(event)\n );\n }\n }\n\n render() {\n return <slot></slot>;\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as i,h as s,H as e,g as a}from"./p-f9370be6.js";import{I as h}from"./p-6f57b13c.js";import{u as n,v as o,w as r,x as l,a as c,h as u,e as d}from"./p-23831891.js";const p=`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M15.8327 5.34199L14.6577 4.16699L9.99935 8.82533L5.34102 4.16699L4.16602 5.34199L8.82435 10.0003L4.16602 14.6587L5.34102 15.8337L9.99935 11.1753L14.6577 15.8337L15.8327 14.6587L11.1743 10.0003L15.8327 5.34199Z" fill="currentColor"/>\n</svg>\n`;const b=`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">\n <path d="M13.1292 11.8792H12.4708L12.2375 11.6542C13.0542 10.7042 13.5458 9.47083 13.5458 8.12916C13.5458 5.13749 11.1208 2.71249 8.12916 2.71249C5.13749 2.71249 2.71249 5.13749 2.71249 8.12916C2.71249 11.1208 5.13749 13.5458 8.12916 13.5458C9.47083 13.5458 10.7042 13.0542 11.6542 12.2375L11.8792 12.4708V13.1292L16.0458 17.2875L17.2875 16.0458L13.1292 11.8792ZM8.12916 11.8792C6.05416 11.8792 4.37916 10.2042 4.37916 8.12916C4.37916 6.05416 6.05416 4.37916 8.12916 4.37916C10.2042 4.37916 11.8792 6.05416 11.8792 8.12916C11.8792 10.2042 10.2042 11.8792 8.12916 11.8792Z" fill="currentColor"/>\n</svg>`;const f='/*! 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(.search){--divider-height:24px}:host(.search.small){--divider-height:16px}:host(.fullwidth){width:100%}:host(.search) .disabled:hover{border-color:var(--ic-architectural-200)}:host(.search.disabled) .disabled svg{color:var(--ic-architectural-200)}:host(.search) .disabled svg{color:var(--ic-architectural-400)}.clear-button-container{align-items:center;margin-right:1px;display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition)}.clear-button:focus{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 2px var(--ic-focus-glow);border-radius:4px}.clear-button:focus *{fill:white}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus{background-color:var(--ic-focus-blue) !important;box-shadow:inset 0 0 0 2px var(--ic-focus-glow) !important;border-radius:var(--ic-space-xxs);height:var(--ic-space-xl);margin-top:var(--ic-space-xxxs)}.search-submit-button:focus *{fill:white}.divider{width:1px;background-color:var(--ic-action-dark-active);height:var(--divider-height)}:host(.dark) .divider{background-color:var(--ic-architectural-200)}.menu-container{width:var(--input-width, 320px);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}ic-menu{transition:var(--ic-easing-transition-slow)}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:1px;margin-bottom:-1px;margin-right:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}';let m=0;const v=class{constructor(s){t(this,s);this.icInput=i(this,"icInput",7);this.icInputBlur=i(this,"icInputBlur",7);this.icInputFocus=i(this,"icInputFocus",7);this.icChange=i(this,"icChange",7);this.icClear=i(this,"icClear",7);this.icSubmitSearch=i(this,"icSubmitSearch",7);this.icOptionSelect=i(this,"icOptionSelect",7);this.icMenuChange=i(this,"icMenuChange",7);this.icClearBlur=i(this,"icClearBlur",7);this.icSubmitSearchBlur=i(this,"icSubmitSearchBlur",7);this.icSearchBarBlur=i(this,"icSearchBarBlur",7);this.icSearchBarFocus=i(this,"icSearchBarFocus",7);this.inputId=`ic-search-bar-input-${m++}`;this.menuId=`${this.inputId}-menu`;this.menuCloseFromMenuChangeEvent=false;this.truncateValue=false;this.assistiveHintEl=null;this.preventSubmit=false;this.handleSubmitSearch=()=>{this.icSubmitSearch.emit({value:this.value});const t=this.el.closest("FORM");if(this.searchSubmitButton&&!!t&&!this.preventSubmit){n(t,this.searchSubmitButton)}};this.onInput=t=>{this.value=t.target.value;const i=[{label:this.emptyOptionListText,value:""}];if(this.options.length>0){this.setMenuChange(true);if(this.disableFilter===false){const t=o(this.options,false,this.value,"anywhere");this.filteredOptions=t.length>0?t:i}}else if(this.disableFilter){this.setMenuChange(true);this.filteredOptions=i}if(!this.showClearButton){this.handleShowClearButton(true)}this.debounceAriaLiveUpdate();this.icInput.emit({value:this.value})};this.onInputBlur=t=>{const i=t.target.value;const s=t.relatedTarget;this.icInputBlur.emit({value:i,relatedTarget:s})};this.onInputFocus=t=>{const i=t.target.value;this.icInputFocus.emit({value:i});this.handleShowClearButton(true)};this.handleClear=t=>{const i=t;const s=t;if(s.type==="click"||i.code==="Enter"||i.code==="Space"){this.value="";this.inputEl.value="";this.el.setFocus();this.icClear.emit();t.preventDefault();this.preventSubmit=true}};this.handleClearBlur=t=>{const i=t.relatedTarget;this.icClearBlur.emit({relatedTarget:i});this.clearButtonFocused=false};this.handleSubmitSearchBlur=t=>{const i=t.relatedTarget;this.icSubmitSearchBlur.emit({relatedTarget:i});this.searchSubmitFocused=false};this.handleSubmitSearchFocus=()=>{this.handleMenuCloseFromMenuChange(true);this.searchSubmitFocused=true};this.handleOptionSelect=t=>{if(t.detail.label===this.emptyOptionListText){this.el.setFocus();return}this.value=t.detail.value;this.icOptionSelect.emit({value:this.value})};this.handleMenuChange=t=>{this.setMenuChange(t.detail.open)};this.setMenuChange=t=>{if(this.open!==t){this.open=t;this.icMenuChange.emit({open:t})}};this.handleHostFocus=()=>{if(this.options&&this.value&&!this.menuCloseFromMenuChangeEvent){this.setMenuChange(true)}this.handleTruncateValue(false);this.icSearchBarFocus.emit()};this.handleHostBlur=t=>{const i=t.relatedTarget;if(this.open&&this.options&&i!==this.menu){this.setMenuChange(false)}this.handleShowClearButton(false);this.handleMenuCloseFromMenuChange(false);this.handleTruncateValue(true);this.icSearchBarBlur.emit({relatedTarget:i,value:this.value})};this.handleShowClearButton=t=>{this.showClearButton=t};this.handleFocusClearButton=()=>{this.clearButtonFocused=true};this.handleMenuCloseFromMenuChange=t=>{this.menuCloseFromMenuChangeEvent=t};this.handleTruncateValue=t=>{this.truncateValue=t};this.renderAssistiveHintEl=()=>{var t,i;const s=(i=(t=this.el.shadowRoot.querySelector("ic-text-field"))===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(`#${this.inputId}`);if(s&&Object.keys(s).length>0&&this.hasOptionsOrFilterDisabled()){this.assistiveHintEl=document.createElement("span");this.assistiveHintEl.innerText=this.hintText;this.assistiveHintEl.id=`${this.inputId}-assistive-hint`;this.assistiveHintEl.style.display="none";if(s.after!==undefined){s.after(this.assistiveHintEl)}}};this.updateSearchResultAriaLive=()=>{const t=this.el.shadowRoot.querySelector(".search-results-status");if(!this.open||this.value===""||this.value.length<this.charactersUntilSuggestion){t.innerText=""}else if(this.hasOptionsOrFilterDisabled()&&this.filteredOptions.length>0&&this.open&&t){if(this.hadNoOptions()){t.innerText=this.emptyOptionListText}else{t.innerText=`${this.filteredOptions.length} result${this.filteredOptions.length>1?"s":""} available`}}};this.hasOptionsOrFilterDisabled=()=>this.options.length>0||this.disableFilter;this.hadNoOptions=()=>this.filteredOptions.length===1&&this.filteredOptions[0].label===this.emptyOptionListText;this.isSubmitDisabled=()=>{const t=this.value===undefined||this.value===null||this.value==="";return t||this.disabled||this.hadNoOptions()};this.highlightFirstOptionAfterNoResults=()=>{if(this.prevNoOption&&this.menu){this.menu.handleSetFirstOption();this.prevNoOption=false}const t=this.filteredOptions.find((t=>t.label===this.emptyOptionListText));if(t){this.prevNoOption=true}};this.label=undefined;this.required=false;this.disabled=false;this.readonly=false;this.placeholder="Search";this.fullWidth=false;this.disableFilter=false;this.hideLabel=false;this.helperText="";this.small=false;this.value="";this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.debounce=0;this.name=this.inputId;this.spellcheck=false;this.options=[];this.focusOnLoad=false;this.hintText="When autocomplete results are available use the up and down arrows to choose and press enter to select";this.emptyOptionListText="No results found";this.charactersUntilSuggestion=2;this.open=false;this.filteredOptions=[];this.ariaActiveDescendant=undefined;this.showClearButton=false;this.clearButtonFocused=false;this.searchSubmitFocused=false;this.prevNoOption=false}debounceChanged(){this.icChange=r(this.icChange,this.debounce)}watchOptionsHandler(t){if(this.disableFilter){this.filteredOptions=t}}watchValueHandler(t){if(this.inputEl&&this.options&&!!l(t,this.options)){this.inputEl.value=l(t,this.options)}else if(this.inputEl&&this.inputEl.value!==t){this.inputEl.value=t}this.icChange.emit({value:t})}async setFocus(){if(this.inputEl){this.inputEl.setFocus()}}handleKeyDown(t){const i=t.detail.event;if(this.menu&&this.open){this.menu.handleKeyboardOpen(i)}}handleKeyUp(t){if(t.key==="Enter"){if(this.preventSubmit||this.isSubmitDisabled()){return}this.handleSubmitSearch();this.setMenuChange(false)}if(t.key==="Escape"){this.setMenuChange(false)}if(this.preventSubmit){this.preventSubmit=false}}debounceAriaLiveUpdate(){clearTimeout(this.debounce);this.debounce=window.setTimeout((()=>{this.updateSearchResultAriaLive()}),500)}onMenuClose(t){if(!t.detail.open){this.handleMenuCloseFromMenuChange(true);if(t.detail.focusInput===undefined||t.detail.focusInput){this.el.setFocus()}}}onMenuOptionHighlighted(t){if(t.detail.optionId){this.ariaActiveDescendant=t.detail.optionId}else{this.ariaActiveDescendant=undefined}}connectedCallback(){this.debounceChanged()}componentWillRender(){this.highlightFirstOptionAfterNoResults()}componentWillLoad(){this.watchValueHandler(this.value)}componentDidLoad(){if(this.focusOnLoad){this.el.setFocus()}if(this.hasOptionsOrFilterDisabled()){this.renderAssistiveHintEl();if(this.disableFilter){this.filteredOptions=this.options}}c([{prop:this.label,propName:"label"}],"Search Bar");this.anchorEl=this.inputEl.shadowRoot.querySelector("ic-input-component-container")}disconnectedCallback(){if(this.assistiveHintEl){this.assistiveHintEl.remove()}}render(){const{inputId:t,name:i,label:a,required:n,small:o,placeholder:r,helperText:c,disabled:f,value:m,readonly:v,spellcheck:g,fullWidth:w,options:x,open:y,hideLabel:k,menuId:L,ariaActiveDescendant:z,truncateValue:C,autofocus:B,autocapitalize:S,autocomplete:T,filteredOptions:M}=this;const F=v||f?true:false;const I=u(t,c!=="",false).trim();let H;if(I!==""&&this.hasOptionsOrFilterDisabled()){H=`${I} ${this.inputId}-assistive-hint`}else if(this.hasOptionsOrFilterDisabled()){H=`${this.inputId}-assistive-hint`}else if(I!==""){H=I}else{H=undefined}const O=F&&!v;const $=m&&this.hasOptionsOrFilterDisabled();const E=$&&y&&M.length>0;let j;if(x.length>0){if(E){j="true"}else{j="false"}}else{j=undefined}d(true,this.el,i,m,F);return s(e,{class:{["search"]:true,["fullwidth"]:w,["disabled"]:f,["small"]:o},onFocus:this.handleHostFocus,onBlur:this.handleHostBlur},s("ic-text-field",{ref:t=>this.inputEl=t,inputId:t,label:a,helperText:c,required:n,disabled:O,readonly:v,small:o,hideLabel:k,fullWidth:w,name:i,truncateValue:C,value:x&&!!l(m,x)?l(m,x):m,placeholder:r,onInput:this.onInput,onBlur:this.onInputBlur,onFocus:this.onInputFocus,"aria-label":k?a:"","aria-describedby":H,"aria-owns":$?L:undefined,"aria-haspopup":x.length>0?"listbox":undefined,ariaExpanded:j,ariaActiveDescendant:z,"aria-autocomplete":$?"list":undefined,role:$?"combobox":undefined,autocomplete:T,autocapitalize:S,autoFocus:B,spellcheck:g,inputmode:"search"},s("div",{class:{"clear-button-container":true,"clear-button-visible":m&&!F&&this.showClearButton},slot:"clear-button"},s("ic-button",{id:"clear-button",class:"clear-button","aria-label":"Clear",innerHTML:p,onClick:this.handleClear,size:o?"small":"default",onFocus:this.handleFocusClearButton,onBlur:this.handleClearBlur,onKeyDown:this.handleClear,type:"submit",variant:"icon",appearance:this.clearButtonFocused?h.Light:h.Dark}),s("div",{class:"divider"})),s("div",{class:{"search-submit-button-container":true,"search-submit-button-disabled":this.isSubmitDisabled()},slot:"search-submit-button"},s("ic-button",{id:"search-submit-button","aria-label":"Search",ref:t=>this.searchSubmitButton=t,class:{["search-submit-button"]:true,["search-submit-button-small"]:!!o},disabled:this.isSubmitDisabled(),innerHTML:b,size:o?"small":"default",onClick:this.handleSubmitSearch,onBlur:this.handleSubmitSearchBlur,onFocus:this.handleSubmitSearchFocus,type:"submit",variant:"icon",appearance:this.searchSubmitFocused?h.Light:h.Default})),s("div",{class:{"menu-container":true,fullwidth:w},slot:"menu"},E&&m.length>=this.charactersUntilSuggestion&&s("ic-menu",{class:{"no-results":this.hadNoOptions()},activationType:"manual",anchorEl:this.anchorEl,autoFocusOnSelected:false,inputEl:this.inputEl,inputLabel:a,ref:t=>this.menu=t,small:o,fullWidth:w,menuId:L,open:true,options:M,onOptionSelect:this.handleOptionSelect,onMenuChange:this.handleMenuChange,parentEl:this.el,value:m}))),s("div",{"aria-live":"polite",role:"status",class:"search-results-status"}))}get el(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],options:["watchOptionsHandler"],value:["watchValueHandler"]}}};v.style=f;export{v as ic_search_bar};
|
2
|
-
//# sourceMappingURL=p-7b11e1dc.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-search-bar/ic-search-bar.css?tag=ic-search-bar&encapsulation=shadow","src/components/ic-search-bar/ic-search-bar.tsx"],"names":["icSearchBarCss","inputIds","SearchBar","this","inputId","menuId","menuCloseFromMenuChangeEvent","truncateValue","assistiveHintEl","preventSubmit","handleSubmitSearch","icSubmitSearch","emit","value","form","el","closest","searchSubmitButton","handleHiddenFormButtonClick","onInput","ev","target","noOptions","label","emptyOptionListText","options","length","setMenuChange","disableFilter","rawFilteredOptions","getFilteredMenuOptions","filteredOptions","showClearButton","handleShowClearButton","debounceAriaLiveUpdate","icInput","onInputBlur","nextFocus","relatedTarget","icInputBlur","onInputFocus","icInputFocus","handleClear","keyboardEvent","mouseEvent","type","code","inputEl","setFocus","icClear","preventDefault","handleClearBlur","icClearBlur","clearButtonFocused","handleSubmitSearchBlur","icSubmitSearchBlur","searchSubmitFocused","handleSubmitSearchFocus","handleMenuCloseFromMenuChange","handleOptionSelect","detail","icOptionSelect","handleMenuChange","open","icMenuChange","handleHostFocus","handleTruncateValue","icSearchBarFocus","handleHostBlur","menu","icSearchBarBlur","visible","handleFocusClearButton","fromEvent","truncate","renderAssistiveHintEl","input","_b","_a","shadowRoot","querySelector","Object","keys","hasOptionsOrFilterDisabled","document","createElement","innerText","hintText","id","style","display","after","undefined","updateSearchResultAriaLive","searchResultsStatusEl","charactersUntilSuggestion","hadNoOptions","isSubmitDisabled","valueNotSet","disabled","highlightFirstOptionAfterNoResults","prevNoOption","handleSetFirstOption","prevNoOptionsList","find","filteredOption","[object Object]","icChange","debounceEvent","debounce","newOptions","newValue","getLabelFromValue","keyEv","event","handleKeyboardOpen","key","clearTimeout","window","setTimeout","focusInput","optionId","ariaActiveDescendant","debounceChanged","watchValueHandler","focusOnLoad","onComponentRequiredPropUndefined","prop","propName","anchorEl","remove","name","required","small","placeholder","helperText","readonly","spellcheck","fullWidth","hideLabel","autofocus","autocapitalize","autocomplete","disabledMode","describedBy","getInputDescribedByText","trim","describedById","disabledText","hasSuggestedSearch","menuOpen","expanded","renderHiddenInput","h","Host","class","onFocus","onBlur","ref","aria-label","aria-describedby","aria-owns","aria-haspopup","ariaExpanded","aria-autocomplete","role","autoFocus","inputmode","clear-button-container","clear-button-visible","slot","innerHTML","clearIcon","onClick","size","onKeyDown","variant","appearance","IcThemeForegroundEnum","Light","Dark","search-submit-button-container","search-submit-button-disabled","searchIcon","Default","menu-container","fullwidth","no-results","activationType","autoFocusOnSelected","inputLabel","onOptionSelect","onMenuChange","parentEl","aria-live"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host(.search) {\n --divider-height: 24px;\n}\n\n:host(.search.small) {\n --divider-height: 16px;\n}\n\n:host(.fullwidth) {\n width: 100%;\n}\n\n:host(.search) .disabled:hover {\n border-color: var(--ic-architectural-200);\n}\n\n:host(.search.disabled) .disabled svg {\n color: var(--ic-architectural-200);\n}\n\n:host(.search) .disabled svg {\n color: var(--ic-architectural-400);\n}\n\n/* CLEAR */\n\n.clear-button-container {\n align-items: center;\n margin-right: 1px;\n display: none;\n visibility: hidden;\n}\n\n.clear-button {\n border-radius: var(--ic-border-radius);\n transition: box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition);\n}\n\n.clear-button:focus {\n background-color: var(--ic-focus-blue);\n box-shadow: inset 0 0 0 2px var(--ic-focus-glow);\n border-radius: 4px;\n}\n\n.clear-button:focus * {\n fill: white;\n}\n\n.clear-button-visible {\n visibility: visible;\n display: flex;\n}\n\n.search-submit-button-container {\n display: flex;\n align-items: center;\n}\n\n.search-submit-button-disabled .ic-tooltip-container {\n display: none !important;\n}\n\n.search-submit-button:focus {\n background-color: var(--ic-focus-blue) !important;\n box-shadow: inset 0 0 0 2px var(--ic-focus-glow) !important;\n border-radius: var(--ic-space-xxs);\n height: var(--ic-space-xl);\n margin-top: var(--ic-space-xxxs);\n}\n\n.search-submit-button:focus * {\n fill: white;\n}\n\n.divider {\n width: 1px;\n background-color: var(--ic-action-dark-active);\n height: var(--divider-height);\n}\n\n:host(.dark) .divider {\n background-color: var(--ic-architectural-200);\n}\n\n.menu-container {\n width: var(--input-width, 320px);\n position: relative;\n top: var(--ic-space-xxxs);\n}\n\n.menu-container.fullwidth {\n width: 100%;\n}\n\nic-menu {\n transition: var(--ic-easing-transition-slow);\n}\n\n.no-results {\n cursor: not-allowed;\n}\n\n.search-results-status {\n border: 0;\n clip: rect(0, 0, 0, 0, 0);\n height: 1px;\n margin-bottom: -1px;\n margin-right: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n} from \"@stencil/core\";\n\nimport {\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcThemeForegroundEnum,\n IcMenuOption,\n} from \"../../utils/types\";\nimport {\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n handleHiddenFormButtonClick,\n getLabelFromValue,\n onComponentRequiredPropUndefined,\n getFilteredMenuOptions,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"./ic-search-bar.types\";\nimport { IcValueEventDetail, IcBlurEventDetail } from \"../../interface\";\nimport {\n IcMenuChangeEventDetail,\n IcOptionSelectEventDetail,\n} from \"../ic-menu/ic-menu.types\";\n\nimport clearIcon from \"../../assets/clear-icon.svg\";\nimport searchIcon from \"../../assets/search-icon.svg\";\n\nlet inputIds = 0;\n\n@Component({\n tag: \"ic-search-bar\",\n styleUrl: \"ic-search-bar.css\",\n shadow: true,\n})\nexport class SearchBar {\n @Element() el: HTMLIcSearchBarElement;\n\n private inputId = `ic-search-bar-input-${inputIds++}`;\n private inputEl: HTMLIcTextFieldElement;\n\n private menuId = `${this.inputId}-menu`;\n private searchSubmitButton: HTMLIcButtonElement;\n private menu: HTMLIcMenuElement;\n private menuCloseFromMenuChangeEvent: boolean = false;\n\n private anchorEl: HTMLElement;\n private truncateValue = false;\n\n private assistiveHintEl: HTMLSpanElement = null;\n private preventSubmit: boolean = false;\n\n /**\n * Provide a label for the input.\n */\n @Prop() label!: string;\n\n /**\n * Specify if the input requires a value.\n */\n @Prop() required?: boolean = false;\n /**\n * Specify whether the input is disabled.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * Specify whether the input is read only.\n */\n @Prop() readonly?: boolean = false;\n\n /**\n * Provide a placeholder value to display.\n */\n @Prop() placeholder?: string = \"Search\";\n\n /**\n * Specify whether the component fills the full width of the container.\n * If true, this overrides the --input-width css prop.\n */\n @Prop() fullWidth?: boolean = false;\n\n /**\n * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\n * If true, all options provided will be displayed.\n */\n @Prop() disableFilter?: boolean = false;\n\n /**\n * Hides the label and applies the required label value as an aria-label.\n */\n @Prop() hideLabel?: boolean = false;\n\n /**\n * Provide helper text to display additional field guidance.\n */\n @Prop() helperText?: string = \"\";\n\n /**\n * Specify whether small styling is to be applied to the element.\n */\n @Prop() small?: boolean = false;\n\n /**\n * Value of Search input.\n */\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n */\n @Prop() autocapitalize = \"off\";\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete?: IcAutocompleteTypes = \"off\";\n\n /**\n * Whether auto correction should be enabled when the user is entering/editing the text value.\n */\n @Prop() autocorrect?: IcAutocorrectStates = \"off\";\n\n /**\n * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n */\n @Prop() autofocus = false;\n\n /**\n * Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n */\n @Prop({ mutable: true }) debounce?: number = 0;\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * If `true`, the element will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n /**\n * Provide the suggested search options\n */\n @Prop() options?: IcMenuOption[] = [];\n\n @Watch(\"options\")\n watchOptionsHandler(newOptions: IcMenuOption[]): void {\n if (this.disableFilter) {\n this.filteredOptions = newOptions;\n }\n }\n\n /**\n * Specify whether the input should be focussed when component loaded.\n */\n @Prop() focusOnLoad?: boolean = false;\n\n /**\n * Provide hint text for hidden assistive description element.\n */\n @Prop() hintText?: string =\n \"When autocomplete results are available use the up and down arrows to choose and press enter to select\";\n\n /**\n * Provide text for empty results list\n */\n @Prop() emptyOptionListText = \"No results found\";\n\n /**\n * Number of characters until suggestions appear\n */\n @Prop() charactersUntilSuggestion: number = 2;\n\n @Watch(\"value\")\n watchValueHandler(newValue: string): void {\n if (\n this.inputEl &&\n this.options &&\n !!getLabelFromValue(newValue, this.options)\n ) {\n this.inputEl.value = getLabelFromValue(newValue, this.options);\n } else if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n\n this.icChange.emit({ value: newValue });\n }\n\n /**\n * Sets focus on the native `input`\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.inputEl) {\n this.inputEl.setFocus();\n }\n }\n\n @Listen(\"icKeydown\", {})\n handleKeyDown(ev: CustomEvent): void {\n const keyEv: KeyboardEvent = ev.detail.event;\n if (this.menu && this.open) {\n this.menu.handleKeyboardOpen(keyEv);\n }\n }\n\n @Listen(\"keyup\", {})\n handleKeyUp(ev: KeyboardEvent): void {\n if (ev.key === \"Enter\") {\n if (this.preventSubmit || this.isSubmitDisabled()) {\n return;\n }\n\n this.handleSubmitSearch();\n this.setMenuChange(false);\n }\n\n if (ev.key === \"Escape\") {\n this.setMenuChange(false);\n }\n\n if (this.preventSubmit) {\n this.preventSubmit = false;\n }\n }\n\n private handleSubmitSearch = () => {\n this.icSubmitSearch.emit({ value: this.value });\n\n const form: HTMLFormElement = this.el.closest(\"FORM\");\n\n if (this.searchSubmitButton && !!form && !this.preventSubmit) {\n handleHiddenFormButtonClick(form, this.searchSubmitButton);\n }\n };\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n\n const noOptions = [{ label: this.emptyOptionListText, value: \"\" }];\n\n if (this.options.length > 0) {\n this.setMenuChange(true);\n\n if (this.disableFilter === false) {\n const rawFilteredOptions = getFilteredMenuOptions(\n this.options,\n false,\n this.value,\n \"anywhere\"\n );\n\n this.filteredOptions =\n rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;\n }\n } else if (this.disableFilter) {\n this.setMenuChange(true);\n this.filteredOptions = noOptions;\n }\n\n if (!this.showClearButton) {\n this.handleShowClearButton(true);\n }\n\n this.debounceAriaLiveUpdate();\n\n this.icInput.emit({ value: this.value });\n };\n\n private debounceAriaLiveUpdate() {\n clearTimeout(this.debounce);\n\n this.debounce = window.setTimeout(() => {\n this.updateSearchResultAriaLive();\n }, 500);\n }\n\n /**\n * Emitted when input loses focus.\n */\n @Event() icInputBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n private onInputBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icInputBlur.emit({ value: value, relatedTarget: nextFocus });\n };\n\n /**\n * Emitted when input gains focus.\n */\n @Event() icInputFocus: EventEmitter<IcValueEventDetail>;\n private onInputFocus = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icInputFocus.emit({ value: value });\n\n this.handleShowClearButton(true);\n };\n\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when value is cleared with clear button\n */\n @Event() icClear: EventEmitter<void>;\n private handleClear = (ev: Event) => {\n const keyboardEvent = ev as KeyboardEvent;\n const mouseEvent = ev as MouseEvent;\n\n if (\n mouseEvent.type === \"click\" ||\n keyboardEvent.code === \"Enter\" ||\n keyboardEvent.code === \"Space\"\n ) {\n this.value = \"\";\n this.inputEl.value = \"\";\n this.el.setFocus();\n\n this.icClear.emit();\n ev.preventDefault();\n\n this.preventSubmit = true;\n }\n };\n\n /**\n * Emitted when the search value has been submitted\n */\n @Event() icSubmitSearch: EventEmitter<IcValueEventDetail>;\n\n /**\n * Emitted when option is highlighted within the menu\n */\n @Event() icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;\n\n /**\n * Emitted when the state of the menu changes (i.e. open or close)\n */\n @Event() icMenuChange: EventEmitter<IcMenuChangeEventDetail>;\n /**\n * @internal - Emitted when blur is invoked from clear button\n */\n @Event() icClearBlur: EventEmitter<IcBlurEventDetail>;\n private handleClearBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icClearBlur.emit({ relatedTarget: nextFocus });\n\n this.clearButtonFocused = false;\n };\n\n /**\n * @internal - Emitted when blur is invoked from search submit button\n */\n @Event() icSubmitSearchBlur: EventEmitter<IcBlurEventDetail>;\n private handleSubmitSearchBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icSubmitSearchBlur.emit({ relatedTarget: nextFocus });\n\n this.searchSubmitFocused = false;\n };\n\n private handleSubmitSearchFocus = () => {\n this.handleMenuCloseFromMenuChange(true);\n this.searchSubmitFocused = true;\n };\n\n /**\n * Emitted when blur is invoked from ic-search-bar\n */\n @Event() icSearchBarBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n\n /**\n * Emitted when focus is invoked from ic-search-bar\n */\n @Event() icSearchBarFocus: EventEmitter<void>;\n\n @State() open: boolean = false;\n @State() filteredOptions: IcMenuOption[] = [];\n @State() ariaActiveDescendant: string;\n @State() showClearButton: boolean = false;\n @State() clearButtonFocused: boolean = false;\n @State() searchSubmitFocused: boolean = false;\n @State() prevNoOption: boolean = false;\n\n private handleOptionSelect = (ev: CustomEvent) => {\n if (ev.detail.label === this.emptyOptionListText) {\n this.el.setFocus();\n return;\n }\n\n this.value = ev.detail.value;\n this.icOptionSelect.emit({ value: this.value });\n };\n\n private handleMenuChange = (ev: CustomEvent) => {\n this.setMenuChange(ev.detail.open);\n };\n\n private setMenuChange = (open: boolean) => {\n if (this.open !== open) {\n this.open = open;\n this.icMenuChange.emit({ open });\n }\n };\n\n private handleHostFocus = () => {\n if (this.options && this.value && !this.menuCloseFromMenuChangeEvent) {\n this.setMenuChange(true);\n }\n this.handleTruncateValue(false);\n\n this.icSearchBarFocus.emit();\n };\n\n private handleHostBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n if (this.open && this.options && nextFocus !== this.menu) {\n this.setMenuChange(false);\n }\n\n this.handleShowClearButton(false);\n this.handleMenuCloseFromMenuChange(false);\n this.handleTruncateValue(true);\n this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });\n };\n\n @Listen(\"menuChange\", {})\n onMenuClose(ev: CustomEvent): void {\n if (!ev.detail.open) {\n this.handleMenuCloseFromMenuChange(true);\n if (ev.detail.focusInput === undefined || ev.detail.focusInput) {\n this.el.setFocus();\n }\n }\n }\n\n @Listen(\"menuOptionId\")\n onMenuOptionHighlighted(ev: CustomEvent): void {\n if (ev.detail.optionId) {\n this.ariaActiveDescendant = ev.detail.optionId;\n } else {\n this.ariaActiveDescendant = undefined;\n }\n }\n\n private handleShowClearButton = (visible: boolean): void => {\n this.showClearButton = visible;\n };\n\n private handleFocusClearButton = (): void => {\n this.clearButtonFocused = true;\n };\n\n private handleMenuCloseFromMenuChange = (fromEvent: boolean): void => {\n this.menuCloseFromMenuChangeEvent = fromEvent;\n };\n\n private handleTruncateValue = (truncate: boolean): void => {\n this.truncateValue = truncate;\n };\n\n private renderAssistiveHintEl = (): void => {\n const input = this.el.shadowRoot\n .querySelector(\"ic-text-field\")\n ?.shadowRoot?.querySelector(`#${this.inputId}`);\n\n if (\n input &&\n Object.keys(input).length > 0 &&\n this.hasOptionsOrFilterDisabled()\n ) {\n this.assistiveHintEl = document.createElement(\"span\");\n this.assistiveHintEl.innerText = this.hintText;\n this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;\n this.assistiveHintEl.style.display = \"none\";\n if (input.after !== undefined) {\n input.after(this.assistiveHintEl);\n }\n }\n };\n\n private updateSearchResultAriaLive = (): void => {\n const searchResultsStatusEl = this.el.shadowRoot.querySelector(\n \".search-results-status\"\n ) as HTMLParagraphElement;\n\n if (\n !this.open ||\n this.value === \"\" ||\n this.value.length < this.charactersUntilSuggestion\n ) {\n searchResultsStatusEl.innerText = \"\";\n } else if (\n this.hasOptionsOrFilterDisabled() &&\n this.filteredOptions.length > 0 &&\n this.open &&\n searchResultsStatusEl\n ) {\n if (this.hadNoOptions()) {\n searchResultsStatusEl.innerText = this.emptyOptionListText;\n } else {\n searchResultsStatusEl.innerText = `${\n this.filteredOptions.length\n } result${this.filteredOptions.length > 1 ? \"s\" : \"\"} available`;\n }\n }\n };\n\n private hasOptionsOrFilterDisabled = (): boolean =>\n this.options.length > 0 || this.disableFilter;\n\n private hadNoOptions = (): boolean =>\n this.filteredOptions.length === 1 &&\n this.filteredOptions[0].label === this.emptyOptionListText;\n\n private isSubmitDisabled = (): boolean => {\n const valueNotSet =\n this.value === undefined || this.value === null || this.value === \"\";\n return valueNotSet || this.disabled || this.hadNoOptions();\n };\n\n private highlightFirstOptionAfterNoResults = () => {\n if (this.prevNoOption && this.menu) {\n this.menu.handleSetFirstOption();\n this.prevNoOption = false;\n }\n const prevNoOptionsList = this.filteredOptions.find(\n (filteredOption) => filteredOption.label === this.emptyOptionListText\n );\n if (prevNoOptionsList) {\n this.prevNoOption = true;\n }\n };\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n componentWillRender(): void {\n this.highlightFirstOptionAfterNoResults();\n }\n\n componentWillLoad(): void {\n this.watchValueHandler(this.value);\n }\n\n componentDidLoad(): void {\n if (this.focusOnLoad) {\n this.el.setFocus();\n }\n\n if (this.hasOptionsOrFilterDisabled()) {\n this.renderAssistiveHintEl();\n if (this.disableFilter) {\n this.filteredOptions = this.options;\n }\n }\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Search Bar\"\n );\n\n this.anchorEl = this.inputEl.shadowRoot.querySelector(\n \"ic-input-component-container\"\n );\n }\n\n disconnectedCallback(): void {\n if (this.assistiveHintEl) {\n this.assistiveHintEl.remove();\n }\n }\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n small,\n placeholder,\n helperText,\n disabled,\n value,\n readonly,\n spellcheck,\n fullWidth,\n options,\n open,\n hideLabel,\n menuId,\n ariaActiveDescendant,\n truncateValue,\n autofocus,\n autocapitalize,\n autocomplete,\n filteredOptions,\n } = this;\n\n const disabledMode = readonly || disabled ? true : false;\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n ).trim();\n\n let describedById;\n\n if (describedBy !== \"\" && this.hasOptionsOrFilterDisabled()) {\n describedById = `${describedBy} ${this.inputId}-assistive-hint`;\n } else if (this.hasOptionsOrFilterDisabled()) {\n describedById = `${this.inputId}-assistive-hint`;\n } else if (describedBy !== \"\") {\n describedById = describedBy;\n } else {\n describedById = undefined;\n }\n\n const disabledText = disabledMode && !readonly;\n const hasSuggestedSearch = value && this.hasOptionsOrFilterDisabled();\n const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;\n\n let expanded;\n\n if (options.length > 0) {\n if (menuOpen) {\n expanded = \"true\";\n } else {\n expanded = \"false\";\n }\n } else {\n expanded = undefined;\n }\n\n renderHiddenInput(true, this.el, name, value, disabledMode);\n\n return (\n <Host\n class={{\n [\"search\"]: true,\n [\"fullwidth\"]: fullWidth,\n [\"disabled\"]: disabled,\n [\"small\"]: small,\n }}\n onFocus={this.handleHostFocus}\n onBlur={this.handleHostBlur}\n >\n <ic-text-field\n ref={(el) => (this.inputEl = el)}\n inputId={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n small={small}\n hideLabel={hideLabel}\n fullWidth={fullWidth}\n name={name}\n truncateValue={truncateValue}\n value={\n options && !!getLabelFromValue(value, options)\n ? getLabelFromValue(value, options)\n : value\n }\n placeholder={placeholder}\n onInput={this.onInput}\n onBlur={this.onInputBlur}\n onFocus={this.onInputFocus}\n aria-label={hideLabel ? label : \"\"}\n aria-describedby={describedById}\n aria-owns={hasSuggestedSearch ? menuId : undefined}\n aria-haspopup={options.length > 0 ? \"listbox\" : undefined}\n ariaExpanded={expanded}\n ariaActiveDescendant={ariaActiveDescendant}\n aria-autocomplete={hasSuggestedSearch ? \"list\" : undefined}\n role={hasSuggestedSearch ? \"combobox\" : undefined}\n autocomplete={autocomplete}\n autocapitalize={autocapitalize}\n autoFocus={autofocus}\n spellcheck={spellcheck}\n inputmode=\"search\"\n >\n <div\n class={{\n \"clear-button-container\": true,\n \"clear-button-visible\":\n value && !disabledMode && this.showClearButton,\n }}\n slot=\"clear-button\"\n >\n <ic-button\n id=\"clear-button\"\n class=\"clear-button\"\n aria-label=\"Clear\"\n innerHTML={clearIcon}\n onClick={this.handleClear}\n size={small ? \"small\" : \"default\"}\n onFocus={this.handleFocusClearButton}\n onBlur={this.handleClearBlur}\n onKeyDown={this.handleClear}\n type=\"submit\"\n variant=\"icon\"\n appearance={\n this.clearButtonFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Dark\n }\n ></ic-button>\n <div class=\"divider\"></div>\n </div>\n <div\n class={{\n \"search-submit-button-container\": true,\n \"search-submit-button-disabled\": this.isSubmitDisabled(),\n }}\n slot=\"search-submit-button\"\n >\n <ic-button\n id=\"search-submit-button\"\n aria-label=\"Search\"\n ref={(el) => (this.searchSubmitButton = el)}\n class={{\n [\"search-submit-button\"]: true,\n [\"search-submit-button-small\"]: !!small,\n }}\n disabled={this.isSubmitDisabled()}\n innerHTML={searchIcon}\n size={small ? \"small\" : \"default\"}\n onClick={this.handleSubmitSearch}\n onBlur={this.handleSubmitSearchBlur}\n onFocus={this.handleSubmitSearchFocus}\n type=\"submit\"\n variant=\"icon\"\n appearance={\n this.searchSubmitFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Default\n }\n ></ic-button>\n </div>\n <div\n class={{\n \"menu-container\": true,\n fullwidth: fullWidth,\n }}\n slot=\"menu\"\n >\n {menuOpen && value.length >= this.charactersUntilSuggestion && (\n <ic-menu\n class={{\n \"no-results\": this.hadNoOptions(),\n }}\n activationType=\"manual\"\n anchorEl={this.anchorEl}\n autoFocusOnSelected={false}\n inputEl={this.inputEl}\n inputLabel={label}\n ref={(el) => (this.menu = el)}\n small={small}\n fullWidth={fullWidth}\n menuId={menuId}\n open={true}\n options={filteredOptions}\n onOptionSelect={this.handleOptionSelect}\n onMenuChange={this.handleMenuChange}\n parentEl={this.el}\n value={value}\n ></ic-menu>\n )}\n </div>\n </ic-text-field>\n <div\n aria-live=\"polite\"\n role=\"status\"\n class=\"search-results-status\"\n ></div>\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,c as t,h as i,H as a,g as o}from"./p-f9370be6.js";import{d as n,a as r,r as c,e as s,f as d,i as l}from"./p-23831891.js";import"./p-6f57b13c.js";const h='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host([disabled]){color:var(--ic-architectural-200);pointer-events:none}:host([small]) .container{margin-bottom:10px}.container{display:flex;width:-moz-fit-content;width:fit-content;margin-bottom:var(--ic-space-sm);margin-left:var(--ic-space-xxs)}.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:transparent;border:1px solid var(--ic-architectural-300);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast)}.checkbox:checked{background-color:var(--ic-action-default);border:1px solid var(--ic-action-default);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-architectural-200)}.checkbox:indeterminate,.checkbox.indeterminate:checked{background-color:transparent;border:2px solid var(--ic-action-default)}.checkbox:checked:hover{background-color:var(--ic-action-default-hover)}.checkbox:indeterminate:hover,.checkbox.indeterminate:checked:hover{background-color:var(--ic-action-default-bg-hover);border:2px solid var(--ic-action-default-hover)}.checkbox:checked:active{background-color:var(--ic-action-default-active)}.checkbox:indeterminate:active,.checkbox.indeterminate:checked:active{background-color:var(--ic-action-default-bg-active);border:2px solid var(--ic-action-default-active)}.checkbox:hover{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 4px var(--ic-action-default-bg-hover);border:1px solid var(--ic-action-default-hover)}.checkbox:active{background-color:var(--ic-action-default-bg-active);box-shadow:0 0 0 4px var(--ic-action-default-bg-active);border:1px solid var(--ic-action-default-active)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:1px dashed var(--ic-architectural-200)}.checkbox-label{padding-left:var(--ic-space-sm)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:white;z-index:1;background-color:transparent;pointer-events:none}.indeterminate-symbol{position:relative;width:14px;height:var(--ic-space-xxxs);top:11px;right:-19px;margin-left:-14px;z-index:1;background-color:var(--ic-action-default);pointer-events:none}.container:hover .indeterminate-symbol{background-color:var(--ic-action-default-hover)}.container:active .indeterminate-symbol{background-color:var(--ic-action-default-active)}.additional-field-wrapper{margin-left:44px;margin-top:var(--ic-space-xs)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 3px;border-bottom:2px solid var(--ic-action-default);border-left:2px solid var(--ic-action-default)}.dynamic-container{display:flex;position:relative;margin-left:15px;margin-top:-6px;margin-bottom:var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-text{color:var(--ic-action-default);margin-top:7px;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:2px solid highlight}.checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.checkmark{fill:none}.indeterminate-symbol{display:none}}';const p=class{constructor(i){e(this,i);this.checkboxChecked=t(this,"checkboxChecked",7);this.handleClick=()=>{this.checked=!this.checked;this.checkboxChecked.emit()};this.handleFormReset=()=>{this.checked=this.initiallyChecked};this.checked=false;this.disabled=false;this.label=undefined;this.value=undefined;this.name=undefined;this.groupLabel=undefined;this.dynamicText="This selection requires additional answers";this.additionalFieldDisplay="static";this.indeterminate=false;this.initiallyChecked=this.checked}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.host.querySelector("ic-text-field");if(!this.checked){e&&e.setAttribute("disabled","")}else{e&&e.removeAttribute("disabled")}}else{if(!this.checked){this.additionalFieldContainer.style.display="none"}else{this.additionalFieldContainer.style.display="flex"}}}componentWillLoad(){n(this.host,this.handleFormReset)}componentDidLoad(){r([{prop:this.label,propName:"label"},{prop:this.value,propName:"value"}],"Checkbox")}disconnectedCallback(){c(this.host,this.handleFormReset)}render(){let e=`ic-checkbox-${this.label!==undefined?this.label:this.value}-${this.groupLabel}`;e=e.replace(/ /g,"-");this.checked?s(true,this.host,this.name,this.checked&&this.value,this.disabled):d(this.host);return i(a,null,i("div",{class:{["container"]:true,["disabled"]:this.disabled}},this.checked&&!this.indeterminate&&i("svg",{class:"checkmark",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg","fill-rule":"evenodd","clip-rule":"evenodd"},i("title",null,"checkmark icon"),i("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"})),this.checked&&this.indeterminate&&i("div",{class:"indeterminate-symbol"}),i("input",{role:"checkbox",class:{["checkbox"]:true,["checked"]:this.checked,["indeterminate"]:this.indeterminate},type:"checkbox",name:this.name,id:e,value:this.value,disabled:this.disabled?true:null,checked:this.checked,indeterminate:this.indeterminate,onClick:this.handleClick}),i("ic-typography",{variant:"body"},i("label",{class:"checkbox-label",htmlFor:e},this.label))),l(this.host,"additional-field")&&i("div",{class:"dynamic-container",ref:e=>this.additionalFieldContainer=e},this.additionalFieldDisplay==="dynamic"&&i("div",{class:"branch-corner"}),i("div",null,this.additionalFieldDisplay==="dynamic"&&i("ic-typography",{variant:"caption"},i("p",{class:"dynamic-text","aria-live":"polite"},this.dynamicText)),i("div",{class:{"additional-field-wrapper":this.additionalFieldDisplay==="static"}},i("slot",{name:"additional-field"})))))}get host(){return o(this)}};p.style=h;export{p as ic_checkbox};
|
2
|
-
//# sourceMappingURL=p-7b39977f.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"names":["icCheckboxCss","Checkbox","this","handleClick","checked","checkboxChecked","emit","handleFormReset","initiallyChecked","[object Object]","additionalFieldDisplay","textfield","host","querySelector","setAttribute","removeAttribute","additionalFieldContainer","style","display","addFormResetListener","onComponentRequiredPropUndefined","prop","label","propName","value","removeFormResetListener","id","undefined","groupLabel","replace","renderHiddenInput","name","disabled","removeHiddenInput","h","Host","class","indeterminate","width","height","xmlns","fill-rule","clip-rule","d","role","type","onClick","variant","htmlFor","isSlotUsed","ref","el","aria-live","dynamicText","additional-field-wrapper"],"mappings":"+JAAA,MAAMA,EAAgB,6xLCyBTC,EAAQ,gFAkDXC,KAAAC,YAAc,KACpBD,KAAKE,SAAWF,KAAKE,QACrBF,KAAKG,gBAAgBC,QAGfJ,KAAAK,gBAAkB,KACxBL,KAAKE,QAAUF,KAAKM,+BApDsC,oBAI/B,+GAoBC,yEAK5B,4BAI+B,4BAELN,KAAKE,QAoBjCK,qBACE,GAAIP,KAAKQ,yBAA2B,SAAU,CAC5C,MAAMC,EAAYT,KAAKU,KAAKC,cAAc,iBAC1C,IAAKX,KAAKE,QAAS,CACjBO,GAAaA,EAAUG,aAAa,WAAY,QAC3C,CACLH,GAAaA,EAAUI,gBAAgB,iBAEpC,CACL,IAAKb,KAAKE,QAAS,CACjBF,KAAKc,yBAAyBC,MAAMC,QAAU,WACzC,CACLhB,KAAKc,yBAAyBC,MAAMC,QAAU,SAKpDT,oBACEU,EAAqBjB,KAAKU,KAAMV,KAAKK,iBAGvCE,mBACEW,EACE,CACE,CAAEC,KAAMnB,KAAKoB,MAAOC,SAAU,SAC9B,CAAEF,KAAMnB,KAAKsB,MAAOD,SAAU,UAEhC,YAIJd,uBACEgB,EAAwBvB,KAAKU,KAAMV,KAAKK,iBAG1CE,SACE,IAAIiB,EAAK,eACPxB,KAAKoB,QAAUK,UAAYzB,KAAKoB,MAAQpB,KAAKsB,SAC3CtB,KAAK0B,aAETF,EAAKA,EAAGG,QAAQ,KAAM,KAEtB3B,KAAKE,QACD0B,EACE,KACA5B,KAAKU,KACLV,KAAK6B,KACL7B,KAAKE,SAAWF,KAAKsB,MACrBtB,KAAK8B,UAEPC,EAAkB/B,KAAKU,MAE3B,OACEsB,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKE,MAAO,CAAE3B,CAAC,aAAc,KAAMA,CAAC,YAAaP,KAAK8B,WACnD9B,KAAKE,UAAYF,KAAKmC,eACrBH,EAAA,MAAA,CACEE,MAAM,YACNE,MAAM,KACNC,OAAO,KACPC,MAAM,6BAA4BC,YACxB,UAASC,YACT,WAEVR,EAAA,QAAA,KAAA,kBACAA,EAAA,OAAA,CAAMS,EAAE,yFAGXzC,KAAKE,SAAWF,KAAKmC,eACpBH,EAAA,MAAA,CAAKE,MAAM,yBAEbF,EAAA,QAAA,CACEU,KAAK,WACLR,MAAO,CACL3B,CAAC,YAAa,KACdA,CAAC,WAAYP,KAAKE,QAClBK,CAAC,iBAAkBP,KAAKmC,eAE1BQ,KAAK,WACLd,KAAM7B,KAAK6B,KACXL,GAAIA,EACJF,MAAOtB,KAAKsB,MACZQ,SAAU9B,KAAK8B,SAAW,KAAO,KACjC5B,QAASF,KAAKE,QACdiC,cAAenC,KAAKmC,cACpBS,QAAS5C,KAAKC,cAEhB+B,EAAA,gBAAA,CAAea,QAAQ,QACrBb,EAAA,QAAA,CAAOE,MAAM,iBAAiBY,QAAStB,GACpCxB,KAAKoB,SAIX2B,EAAW/C,KAAKU,KAAM,qBACrBsB,EAAA,MAAA,CACEE,MAAM,oBACNc,IAAMC,GAAQjD,KAAKc,yBAA2BmC,GAE7CjD,KAAKQ,yBAA2B,WAC/BwB,EAAA,MAAA,CAAKE,MAAM,kBAEbF,EAAA,MAAA,KACGhC,KAAKQ,yBAA2B,WAC/BwB,EAAA,gBAAA,CAAea,QAAQ,WACrBb,EAAA,IAAA,CAAGE,MAAM,eAAcgB,YAAW,UAC/BlD,KAAKmD,cAIZnB,EAAA,MAAA,CACEE,MAAO,CACLkB,2BACEpD,KAAKQ,yBAA2B,WAGpCwB,EAAA,OAAA,CAAMH,KAAK","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host([disabled]) {\n color: var(--ic-architectural-200);\n pointer-events: none;\n}\n\n:host([small]) .container {\n margin-bottom: 10px;\n}\n\n.container {\n display: flex;\n width: fit-content;\n margin-bottom: var(--ic-space-sm);\n margin-left: var(--ic-space-xxs);\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: transparent;\n border: 1px solid var(--ic-architectural-300);\n border-radius: var(--ic-border-radius);\n outline: none;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n}\n\n.checkbox:checked {\n background-color: var(--ic-action-default);\n border: 1px solid var(--ic-action-default);\n transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n background-color: var(--ic-architectural-200);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n background-color: transparent;\n border: 2px solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n background-color: var(--ic-action-default-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n background-color: var(--ic-action-default-bg-hover);\n border: 2px solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n background-color: var(--ic-action-default-active);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n background-color: var(--ic-action-default-bg-active);\n border: 2px solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n background-color: var(--ic-action-default-bg-hover);\n box-shadow: 0 0 0 4px var(--ic-action-default-bg-hover);\n border: 1px solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n background-color: var(--ic-action-default-bg-active);\n box-shadow: 0 0 0 4px var(--ic-action-default-bg-active);\n border: 1px solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n border: 1px dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n padding-left: var(--ic-space-sm);\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: white;\n z-index: 1;\n background-color: transparent;\n pointer-events: none;\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 14px;\n height: var(--ic-space-xxxs);\n top: 11px;\n right: -19px;\n margin-left: -14px;\n z-index: 1;\n background-color: var(--ic-action-default);\n pointer-events: none;\n}\n\n.container:hover .indeterminate-symbol {\n background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n margin-left: 44px;\n margin-top: var(--ic-space-xs);\n}\n\n.branch-corner {\n color: var(--ic-action-default);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 3px;\n border-bottom: 2px solid var(--ic-action-default);\n border-left: 2px solid var(--ic-action-default);\n}\n\n.dynamic-container {\n display: flex;\n position: relative;\n margin-left: 15px;\n margin-top: -6px;\n margin-bottom: var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n color: var(--ic-action-default);\n margin-top: 7px;\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: 2px 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","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: true,\n})\nexport class Checkbox {\n /**\n * Set the checkbox to the checked state\n */\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n /**\n * Set the checkbox to the disabled state\n */\n @Prop() disabled?: boolean = false;\n /**\n * Provide a label for the input\n */\n @Prop() label!: string;\n /**\n * Provide a value for the input\n */\n @Prop() value!: string;\n /**\n * Provide a name for the input. If not set when used in a checkbox group, the name will be based on the group name.\n */\n @Prop() name: string;\n /**\n * Provide a group label for the input\n */\n @Prop() groupLabel: string;\n /**\n * Provide a text prop for the dynamic text\n */\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n /**\n * Set which style of additionalField will be displayed if used\n */\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n /**\n * Display the indeterminate state when checked\n */\n @Prop() indeterminate: boolean = false;\n\n @State() initiallyChecked = this.checked;\n\n @Element() host: HTMLIcCheckboxElement;\n\n /**\n * Emitted when a checkbox has been checked\n */\n @Event() checkboxChecked: EventEmitter<void>;\n\n private additionalFieldContainer: HTMLDivElement;\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.checkboxChecked.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.host.querySelector(\"ic-text-field\");\n if (!this.checked) {\n textfield && textfield.setAttribute(\"disabled\", \"\");\n } else {\n textfield && textfield.removeAttribute(\"disabled\");\n }\n } else {\n if (!this.checked) {\n this.additionalFieldContainer.style.display = \"none\";\n } else {\n this.additionalFieldContainer.style.display = \"flex\";\n }\n }\n }\n\n componentWillLoad(): void {\n addFormResetListener(this.host, this.handleFormReset);\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 disconnectedCallback(): void {\n removeFormResetListener(this.host, this.handleFormReset);\n }\n\n render() {\n let id = `ic-checkbox-${\n this.label !== undefined ? this.label : this.value\n }-${this.groupLabel}`;\n\n id = id.replace(/ /g, \"-\");\n\n this.checked\n ? renderHiddenInput(\n true,\n this.host,\n this.name,\n this.checked && this.value,\n this.disabled\n )\n : removeHiddenInput(this.host);\n\n return (\n <Host>\n <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n {this.checked && !this.indeterminate && (\n <svg\n class=\"checkmark\"\n width=\"24\"\n height=\"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 {this.checked && this.indeterminate && (\n <div class=\"indeterminate-symbol\" />\n )}\n <input\n role=\"checkbox\"\n class={{\n [\"checkbox\"]: true,\n [\"checked\"]: this.checked,\n [\"indeterminate\"]: this.indeterminate,\n }}\n type=\"checkbox\"\n name={this.name}\n id={id}\n value={this.value}\n disabled={this.disabled ? true : null}\n checked={this.checked}\n indeterminate={this.indeterminate}\n onClick={this.handleClick}\n ></input>\n <ic-typography variant=\"body\">\n <label class=\"checkbox-label\" htmlFor={id}>\n {this.label}\n </label>\n </ic-typography>\n </div>\n {isSlotUsed(this.host, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {this.additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {this.additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {this.dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n this.additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,h as t,g as i}from"./p-f9370be6.js";import{b as a,a as r,i as o}from"./p-23831891.js";import{I as n}from"./p-6f57b13c.js";const s='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:flex}a{text-decoration:none !important;color:var(--ic-architechtural-black) !important}button{border:none;background-color:transparent;outline:var(--ic-hc-focus-outline)}.card,.card.clickable{border:1px solid var(--ic-architectural-300);border-radius:var(--ic-border-radius);padding:var(--ic-space-md);text-align:left;color:var(--ic-architechtural-black);transition:var(--ic-easing-transition-fast)}.dark.card,.dark.card.clickable{border:1px solid var(--ic-architectural-700)}.card.clickable:hover{background-color:var(--ic-action-default-bg-hover);border-color:var(--ic-action-default-hover);cursor:pointer}.card.clickable:focus,.card.clickable.focussed{background-color:var(--ic-action-default-bg-hover);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}.card.clickable:active{background-color:var(--ic-action-default-bg-active);box-shadow:var(--ic-border-focus)}.card.disabled{border:var(--ic-border-disabled)}.card.fullwidth{width:100%}.card-header{display:flex;align-items:center}.icon{padding-right:var(--ic-space-xs)}.card.clickable ::slotted(svg){fill:var(--ic-action-default)}.card.disabled ::slotted(svg){fill:var(--ic-color-tertiary-text)}.card.clickable .card-title{color:var(--ic-hyperlink);text-decoration:underline;text-decoration-thickness:1px}.card.clickable:hover .card-title{color:var(--ic-hyperlink-hover) !important;text-decoration:none}.card.clickable:focus .card-title,.card.clickable.focussed .card-title{color:var(--ic-hyperlink-hover)}.card.clickable:active .card-title{color:var(--ic-hyperlink-hover)}.card.disabled .card-title{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--ic-color-tertiary-text);color:var(--ic-color-tertiary-text)}.card-message{margin-top:var(--ic-space-xxs);align-items:left}.card.disabled .card-message{color:var(--ic-color-tertiary-text)}';const c=class{constructor(t){e(this,t);this.parentFocussed=()=>{this.isFocussed=true};this.parentBlurred=()=>{this.isFocussed=false};this.clickable=false;this.href=undefined;this.hreflang="";this.referrerpolicy=undefined;this.rel=undefined;this.target=undefined;this.heading=undefined;this.message="";this.disabled=false;this.fullWidth=false;this.parentIsAnchorTag=false;this.isFocussed=false;this.parentEl=null;this.appearance="default"}handleHostClick(e){if(this.disabled){e.stopImmediatePropagation()}}themeChangeHandler(e){const t=e.detail;this.updateTheme(t.mode)}updateTheme(e=null){const t=a(this.el,e||null);if(t!==n.Default){this.appearance=t}}componentWillLoad(){this.parentEl=this.el.parentElement;if(this.parentEl.tagName==="A"){this.clickable=true;this.parentIsAnchorTag=true;this.parentEl.classList.add("ic-card-wrapper-link");this.parentEl.addEventListener("focus",this.parentFocussed);this.parentEl.addEventListener("blur",this.parentBlurred)}}disconnectedCallback(){if(this.parentIsAnchorTag){this.parentEl.removeEventListener("focus",this.parentFocussed);this.parentEl.removeEventListener("blur",this.parentBlurred)}}componentDidLoad(){r([{prop:this.heading,propName:"heading"}],"Card");this.updateTheme()}render(){const{clickable:e,disabled:i,heading:a,message:r,href:s,hreflang:c,referrerpolicy:l,rel:d,target:b,fullWidth:h,parentIsAnchorTag:u,isFocussed:p}=this;const f=u?"div":e?this.href===undefined?"button":"a":"div";const m=f=="a"&&{href:s,hrefLang:c,referrerPolicy:l,rel:d,target:b};return t(f,Object.assign({class:{["card"]:true,["clickable"]:e&&!i,["disabled"]:i,["fullwidth"]:h,["focussed"]:p,["dark"]:this.appearance===n.Dark},tabindex:e&&!u?0:null,"aria-disabled":i?"true":null,disabled:i?true:null},m),t("div",{class:"card-header"},o(this.el,"icon")&&t("div",{class:"icon"},t("slot",{name:"icon"})),t("div",{class:"card-title"},t("slot",{name:"heading"},t("ic-typography",{variant:"h4"},t("p",null,a))))),(r||o(this.el,"message"))&&t("div",{class:"card-message"},t("slot",{name:"message"},t("ic-typography",{variant:"body"},r))))}get el(){return i(this)}};c.style=s;export{c as ic_card};
|
2
|
-
//# sourceMappingURL=p-7f632414.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-card/ic-card.css?tag=ic-card&encapsulation=shadow","src/components/ic-card/ic-card.tsx"],"names":["icCardCss","Card","this","parentFocussed","isFocussed","parentBlurred","[object Object]","event","disabled","stopImmediatePropagation","ev","theme","detail","updateTheme","mode","newTheme","foregroundColor","getThemeFromContext","el","IcThemeForegroundEnum","Default","appearance","parentEl","parentElement","tagName","clickable","parentIsAnchorTag","classList","add","addEventListener","removeEventListener","onComponentRequiredPropUndefined","prop","heading","propName","message","href","hreflang","referrerpolicy","rel","target","fullWidth","Component","undefined","attrs","hrefLang","referrerPolicy","h","Object","assign","class","Dark","tabindex","aria-disabled","isSlotUsed","name","variant"],"mappings":"wIAAA,MAAMA,EAAY,6qICkBLC,EAAI,+BAiEPC,KAAAC,eAAiB,KACvBD,KAAKE,WAAa,MAGZF,KAAAG,cAAgB,KACtBH,KAAKE,WAAa,sBAhE2B,wCAQnB,8GAoBD,iBAIE,qBAIA,6BAES,sBAEP,oBAES,qBAEE,UAG1CE,gBAAgBC,GACd,GAAIL,KAAKM,SAAU,CACjBD,EAAME,4BAKVH,mBAAmBI,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BV,KAAKW,YAAYF,EAAMG,MAWjBR,YAAYS,EAA8B,MAChD,MAAMC,EAAkBC,EAAoBf,KAAKgB,GAAIH,GAAY,MAEjE,GAAIC,IAAoBG,EAAsBC,QAAS,CACrDlB,KAAKmB,WAAaL,GAItBV,oBACEJ,KAAKoB,SAAWpB,KAAKgB,GAAGK,cAExB,GAAIrB,KAAKoB,SAASE,UAAY,IAAK,CACjCtB,KAAKuB,UAAY,KACjBvB,KAAKwB,kBAAoB,KACzBxB,KAAKoB,SAASK,UAAUC,IAAI,wBAC5B1B,KAAKoB,SAASO,iBAAiB,QAAS3B,KAAKC,gBAC7CD,KAAKoB,SAASO,iBAAiB,OAAQ3B,KAAKG,gBAIhDC,uBACE,GAAIJ,KAAKwB,kBAAmB,CAC1BxB,KAAKoB,SAASQ,oBAAoB,QAAS5B,KAAKC,gBAChDD,KAAKoB,SAASQ,oBAAoB,OAAQ5B,KAAKG,gBAInDC,mBACEyB,EACE,CAAC,CAAEC,KAAM9B,KAAK+B,QAASC,SAAU,YACjC,QAEFhC,KAAKW,cAGPP,SACE,MAAMmB,UACJA,EAASjB,SACTA,EAAQyB,QACRA,EAAOE,QACPA,EAAOC,KACPA,EAAIC,SACJA,EAAQC,eACRA,EAAcC,IACdA,EAAGC,OACHA,EAAMC,UACNA,EAASf,kBACTA,EAAiBtB,WACjBA,GACEF,KAEJ,MAAMwC,EAAYhB,EACd,MACAD,EACAvB,KAAKkC,OAASO,UACZ,SACA,IACF,MAEJ,MAAMC,EAAQF,GAAa,KAAO,CAChCN,KAAMA,EACNS,SAAUR,EACVS,eAAgBR,EAChBC,IAAKA,EACLC,OAAQA,GAGV,OACEO,EAACL,EAASM,OAAAC,OAAA,CACRC,MAAO,CACL5C,CAAC,QAAS,KACVA,CAAC,aAAcmB,IAAcjB,EAC7BF,CAAC,YAAaE,EACdF,CAAC,aAAcmC,EACfnC,CAAC,YAAaF,EACdE,CAAC,QAASJ,KAAKmB,aAAeF,EAAsBgC,MAEtDC,SAAU3B,IAAcC,EAAoB,EAAI,KAAI2B,gBACrC7C,EAAW,OAAS,KACnCA,SAAUA,EAAW,KAAO,MACxBoC,GAEJG,EAAA,MAAA,CAAKG,MAAM,eACRI,EAAWpD,KAAKgB,GAAI,SACnB6B,EAAA,MAAA,CAAKG,MAAM,QACTH,EAAA,OAAA,CAAMQ,KAAK,UAGfR,EAAA,MAAA,CAAKG,MAAM,cACTH,EAAA,OAAA,CAAMQ,KAAK,WACTR,EAAA,gBAAA,CAAeS,QAAQ,MACrBT,EAAA,IAAA,KAAId,QAKVE,GAAWmB,EAAWpD,KAAKgB,GAAI,aAC/B6B,EAAA,MAAA,CAAKG,MAAM,gBACTH,EAAA,OAAA,CAAMQ,KAAK,WACTR,EAAA,gBAAA,CAAeS,QAAQ,QAAQrB","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: flex;\n}\n\na {\n text-decoration: none !important;\n color: var(--ic-architechtural-black) !important;\n}\n\nbutton {\n border: none;\n background-color: transparent;\n outline: var(--ic-hc-focus-outline);\n}\n\n.card,\n.card.clickable {\n border: 1px solid var(--ic-architectural-300);\n border-radius: var(--ic-border-radius);\n padding: var(--ic-space-md);\n text-align: left;\n color: var(--ic-architechtural-black);\n transition: var(--ic-easing-transition-fast);\n}\n\n.dark.card,\n.dark.card.clickable {\n border: 1px solid var(--ic-architectural-700);\n}\n\n.card.clickable:hover {\n background-color: var(--ic-action-default-bg-hover);\n border-color: var(--ic-action-default-hover);\n cursor: pointer;\n}\n\n.card.clickable:focus,\n.card.clickable.focussed {\n background-color: var(--ic-action-default-bg-hover);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n}\n\n.card.clickable:active {\n background-color: var(--ic-action-default-bg-active);\n box-shadow: var(--ic-border-focus);\n}\n\n.card.disabled {\n border: var(--ic-border-disabled);\n}\n\n.card.fullwidth {\n width: 100%;\n}\n\n.card-header {\n display: flex;\n align-items: center;\n}\n\n.icon {\n padding-right: var(--ic-space-xs);\n}\n\n.card.clickable ::slotted(svg) {\n fill: var(--ic-action-default);\n}\n\n.card.disabled ::slotted(svg) {\n fill: var(--ic-color-tertiary-text);\n}\n\n.card.clickable .card-title {\n color: var(--ic-hyperlink);\n text-decoration: underline;\n text-decoration-thickness: 1px;\n}\n\n.card.clickable:hover .card-title {\n color: var(--ic-hyperlink-hover) !important;\n text-decoration: none;\n}\n\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n color: var(--ic-hyperlink-hover);\n}\n\n.card.clickable:active .card-title {\n color: var(--ic-hyperlink-hover);\n}\n\n.card.disabled .card-title {\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-decoration-color: var(--ic-color-tertiary-text);\n color: var(--ic-color-tertiary-text);\n}\n\n.card-message {\n margin-top: var(--ic-space-xxs);\n align-items: left;\n}\n\n.card.disabled .card-message {\n color: var(--ic-color-tertiary-text);\n}\n","import { Component, Element, Listen, Prop, State, h } from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n getThemeFromContext,\n} from \"../../utils/helpers\";\nimport { IcTheme, IcThemeForeground, IcThemeForegroundEnum } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be placed to the left of the card title.\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n */\n@Component({\n tag: \"ic-card\",\n styleUrl: \"ic-card.css\",\n shadow: true,\n})\nexport class Card {\n @Element() el: HTMLIcCardElement;\n\n /**\n * Set the variant to static or clickable\n */\n @Prop({ mutable: true }) clickable?: boolean = false;\n /**\n * URL for clickable cards\n */\n @Prop() href?: string | undefined;\n /**\n * Human readable explanation of the URL\n */\n @Prop() hreflang?: string = \"\";\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n /**\n * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n /**\n * Title for the card\n */\n @Prop() heading!: string;\n /**\n * Main body message of the card\n */\n @Prop() message?: string = \"\";\n /**\n * Whether the card is disabled if it is clickable\n */\n @Prop() disabled?: boolean = false;\n /**\n * If true then fill width of container\n */\n @Prop() fullWidth: boolean = false;\n\n @State() parentIsAnchorTag: boolean = false;\n\n @State() isFocussed: boolean = false;\n\n @State() parentEl: HTMLElement | null = null;\n\n @State() appearance?: IcThemeForeground = \"default\";\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"icThemeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n private parentFocussed = (): void => {\n this.isFocussed = true;\n };\n\n private parentBlurred = (): void => {\n this.isFocussed = false;\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n componentWillLoad(): void {\n this.parentEl = this.el.parentElement;\n\n if (this.parentEl.tagName === \"A\") {\n this.clickable = true;\n this.parentIsAnchorTag = true;\n this.parentEl.classList.add(\"ic-card-wrapper-link\");\n this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n }\n }\n\n disconnectedCallback(): void {\n if (this.parentIsAnchorTag) {\n this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Card\"\n );\n this.updateTheme();\n }\n\n render() {\n const {\n clickable,\n disabled,\n heading,\n message,\n href,\n hreflang,\n referrerpolicy,\n rel,\n target,\n fullWidth,\n parentIsAnchorTag,\n isFocussed,\n } = this;\n\n const Component = parentIsAnchorTag\n ? \"div\"\n : clickable\n ? this.href === undefined\n ? \"button\"\n : \"a\"\n : \"div\";\n\n const attrs = Component == \"a\" && {\n href: href,\n hrefLang: hreflang,\n referrerPolicy: referrerpolicy,\n rel: rel,\n target: target,\n };\n\n return (\n <Component\n class={{\n [\"card\"]: true,\n [\"clickable\"]: clickable && !disabled,\n [\"disabled\"]: disabled,\n [\"fullwidth\"]: fullWidth,\n [\"focussed\"]: isFocussed,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n }}\n tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n aria-disabled={disabled ? \"true\" : null}\n disabled={disabled ? true : null}\n {...attrs}\n >\n <div class=\"card-header\">\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <div class=\"card-title\">\n <slot name=\"heading\">\n <ic-typography variant=\"h4\">\n <p>{heading}</p>\n </ic-typography>\n </slot>\n </div>\n </div>\n {(message || isSlotUsed(this.el, \"message\")) && (\n <div class=\"card-message\">\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n )}\n </Component>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,h as i,H as s,g as h}from"./p-f9370be6.js";import{c as e}from"./p-23831891.js";import"./p-6f57b13c.js";const l=":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.aligned-full-width) .step-item-list{flex:auto}";const n=class{constructor(i){t(this,i);this.resizeObserver=null;this.getChildren=()=>{this.steps=Array.from(this.el.querySelectorAll("ic-step"))};this.initialiseStepStates=()=>{this.steps.forEach(((t,i)=>{t.stepNum=i+1;t.lastStep=i===this.steps.length-1;if(t.lastStep){t.classList.add("last-step");if(this.el.classList.contains("aligned-full-width")){t.style.maxWidth=`${this.lastStepWidth}px`}if(this.el.classList.contains("aligned-left")){t.style.maxWidth=`${this.connectorWidth+48}px`}}}));for(let t=0;t<this.steps.length-1;t++){if(this.el.classList.contains("aligned-full-width")){this.steps[t].style.width=`${(this.stepperWidth-this.lastStepWidth)/(this.steps.length-1)}px`;this.steps[t].style.minWidth="148px"}if(this.el.classList.contains("aligned-left")){this.steps[t].style.width=`${this.connectorWidth+48}px`;const i=this.steps[t].shadowRoot.querySelector("div > .step-top > .step-connect");i.style.width=this.connectorWidth>100?`${this.connectorWidth}px`:"100px"}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.setStepperWidth();this.getChildren();this.initialiseStepStates()}));this.resizeObserver.observe(this.el)};this.setStepperWidth=()=>{this.stepperWidth=this.el.offsetWidth;const t=document.querySelectorAll("ic-step");const i=t[t.length-1];i.style.maxWidth="none";if(i.classList.contains("aligned-full-width")){i.style.maxWidth=`${this.stepperWidth/t.length}px`}this.lastStepWidth=i.offsetWidth;this.getChildren();this.initialiseStepStates()};this.aligned="full-width";this.connectorWidth=100;this.stepperWidth=document.querySelector("ic-stepper").getBoundingClientRect().width;this.lastStepWidth=0}componentDidLoad(){e(this.runResizeObserver)}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){return i(s,{class:{["aligned-left"]:this.aligned==="left",["aligned-full-width"]:this.aligned==="full-width"}},i("ul",{class:"step-item-list"},i("slot",null)))}get el(){return h(this)}};n.style=l;export{n as ic_stepper};
|
2
|
-
//# sourceMappingURL=p-898607d0.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-stepper/ic-stepper.css?tag=ic-stepper&encapsulation=shadow","src/components/ic-stepper/ic-stepper.tsx"],"names":["icStepperCss","IcStepper","this","resizeObserver","getChildren","steps","Array","from","el","querySelectorAll","initialiseStepStates","forEach","step","index","stepNum","lastStep","length","classList","add","contains","style","maxWidth","lastStepWidth","connectorWidth","i","width","stepperWidth","minWidth","stepConnect","shadowRoot","querySelector","runResizeObserver","ResizeObserver","setStepperWidth","observe","offsetWidth","allSteps","document","getBoundingClientRect","[object Object]","checkResizeObserver","disconnect","h","Host","class","aligned"],"mappings":"qHAAA,MAAMA,EAAe,4ICSRC,EAAS,+BAqBZC,KAAAC,eAAiC,KAKjCD,KAAAE,YAAc,KACpBF,KAAKG,MAAQC,MAAMC,KAAKL,KAAKM,GAAGC,iBAAiB,aAG3CP,KAAAQ,qBAAuB,KAC7BR,KAAKG,MAAMM,SAAQ,CAACC,EAAMC,KAExBD,EAAKE,QAAUD,EAAQ,EAEvBD,EAAKG,SAAWF,IAAUX,KAAKG,MAAMW,OAAS,EAE9C,GAAIJ,EAAKG,SAAU,CACjBH,EAAKK,UAAUC,IAAI,aACnB,GAAIhB,KAAKM,GAAGS,UAAUE,SAAS,sBAAuB,CACpDP,EAAKQ,MAAMC,SAAW,GAAGnB,KAAKoB,kBAEhC,GAAIpB,KAAKM,GAAGS,UAAUE,SAAS,gBAAiB,CAC9CP,EAAKQ,MAAMC,SAAW,GAAGnB,KAAKqB,eAAiB,YAKrD,IAAK,IAAIC,EAAI,EAAGA,EAAItB,KAAKG,MAAMW,OAAS,EAAGQ,IAAK,CAC9C,GAAItB,KAAKM,GAAGS,UAAUE,SAAS,sBAAuB,CACpDjB,KAAKG,MAAMmB,GAAGJ,MAAMK,MAAQ,IACzBvB,KAAKwB,aAAexB,KAAKoB,gBAAkBpB,KAAKG,MAAMW,OAAS,OAElEd,KAAKG,MAAMmB,GAAGJ,MAAMO,SAAW,QAGjC,GAAIzB,KAAKM,GAAGS,UAAUE,SAAS,gBAAiB,CAC9CjB,KAAKG,MAAMmB,GAAGJ,MAAMK,MAAQ,GAAGvB,KAAKqB,eAAiB,OACrD,MAAMK,EAAc1B,KAAKG,MAAMmB,GAAGK,WAAWC,cAC3C,mCAEFF,EAAYR,MAAMK,MAChBvB,KAAKqB,eAAiB,IAAM,GAAGrB,KAAKqB,mBAAqB,WAKzDrB,KAAA6B,kBAAoB,KAC1B7B,KAAKC,eAAiB,IAAI6B,gBAAe,KACvC9B,KAAK+B,kBACL/B,KAAKE,cACLF,KAAKQ,0BAEPR,KAAKC,eAAe+B,QAAQhC,KAAKM,KAG3BN,KAAA+B,gBAAkB,KACxB/B,KAAKwB,aAAexB,KAAKM,GAAG2B,YAC5B,MAAMC,EAAWC,SAAS5B,iBAAiB,WAC3C,MAAMM,EAAWqB,EAASA,EAASpB,OAAS,GAC5CD,EAASK,MAAMC,SAAW,OAC1B,GAAIN,EAASE,UAAUE,SAAS,sBAAuB,CACrDJ,EAASK,MAAMC,SAAW,GAAGnB,KAAKwB,aAAeU,EAASpB,WAE5Dd,KAAKoB,cAAgBP,EAASoB,YAC9BjC,KAAKE,cACLF,KAAKQ,qCAhFgC,iCAKL,sBAEF2B,SAC7BP,cAAc,cACdQ,wBAAwBb,yBAEM,EAwEjCc,mBACEC,EAAoBtC,KAAK6B,mBAG3BQ,uBACE,GAAIrC,KAAKC,iBAAmB,KAAM,CAChCD,KAAKC,eAAesC,cAIxBF,SACE,OACEG,EAACC,EAAI,CACHC,MAAO,CACLL,CAAC,gBAAiBrC,KAAK2C,UAAY,OACnCN,CAAC,sBAAuBrC,KAAK2C,UAAY,eAG3CH,EAAA,KAAA,CAAIE,MAAM,kBACRF,EAAA,OAAA","sourcesContent":[":host {\n display: flex;\n width: 100%;\n}\n\n.step-item-list {\n display: flex;\n margin: 0;\n padding: 0;\n}\n\n:host(.aligned-full-width) .step-item-list {\n flex: auto;\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { checkResizeObserver } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\n\n@Component({\n tag: \"ic-stepper\",\n styleUrl: \"ic-stepper.css\",\n shadow: true,\n})\nexport class IcStepper {\n @Element() el: HTMLIcStepperElement;\n\n /**\n * How the stepper should be aligned in its container.\n */\n @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n /**\n * The length of the connnector between each step in pixels. Minimum length is 100px.\n */\n @Prop() connectorWidth?: number = 100;\n\n @State() stepperWidth: number = document\n .querySelector(\"ic-stepper\")\n .getBoundingClientRect().width;\n\n @State() lastStepWidth: number = 0;\n\n private steps: HTMLIcStepElement[];\n\n private resizeObserver: ResizeObserver = null;\n\n /**\n * Get all steps currently within this stepper\n */\n private getChildren = (): void => {\n this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n };\n\n private initialiseStepStates = (): void => {\n this.steps.forEach((step, index) => {\n // Assign stepNum to each step\n step.stepNum = index + 1;\n //Assign lastStep to final step\n step.lastStep = index === this.steps.length - 1;\n\n if (step.lastStep) {\n step.classList.add(\"last-step\");\n if (this.el.classList.contains(\"aligned-full-width\")) {\n step.style.maxWidth = `${this.lastStepWidth}px`;\n }\n if (this.el.classList.contains(\"aligned-left\")) {\n step.style.maxWidth = `${this.connectorWidth + 48}px`;\n }\n }\n });\n\n for (let i = 0; i < this.steps.length - 1; i++) {\n if (this.el.classList.contains(\"aligned-full-width\")) {\n this.steps[i].style.width = `${\n (this.stepperWidth - this.lastStepWidth) / (this.steps.length - 1)\n }px`;\n this.steps[i].style.minWidth = \"148px\";\n }\n\n if (this.el.classList.contains(\"aligned-left\")) {\n this.steps[i].style.width = `${this.connectorWidth + 48}px`;\n const stepConnect = this.steps[i].shadowRoot.querySelector(\n \"div > .step-top > .step-connect\"\n ) as HTMLElement;\n stepConnect.style.width =\n this.connectorWidth > 100 ? `${this.connectorWidth}px` : \"100px\";\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.setStepperWidth();\n this.getChildren();\n this.initialiseStepStates();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private setStepperWidth = (): void => {\n this.stepperWidth = this.el.offsetWidth;\n const allSteps = document.querySelectorAll(\"ic-step\");\n const lastStep = allSteps[allSteps.length - 1];\n lastStep.style.maxWidth = \"none\";\n if (lastStep.classList.contains(\"aligned-full-width\")) {\n lastStep.style.maxWidth = `${this.stepperWidth / allSteps.length}px`;\n }\n this.lastStepWidth = lastStep.offsetWidth;\n this.getChildren();\n this.initialiseStepStates();\n };\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n [\"aligned-left\"]: this.aligned === \"left\",\n [\"aligned-full-width\"]: this.aligned === \"full-width\",\n }}\n >\n <ul class=\"step-item-list\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as i,c as t,h as e,H as c,g as s}from"./p-f9370be6.js";import{d as a,a as o,r,e as n,h as l}from"./p-23831891.js";import"./p-6f57b13c.js";const h='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block}input{overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.ic-switch-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ic-space-xxs);cursor:pointer}.ic-switch-label{margin-left:var(--ic-space-xxs);margin-bottom:var(--ic-space-sm)}.ic-switch-label-small{margin-bottom:10px}.ic-switch-toggle{display:flex;align-items:center;justify-content:space-around;width:64px;height:var(--ic-space-xl);position:relative;border-radius:100vw;background-color:var(--ic-architectural-200);border:1px solid var(--ic-architectural-700);box-sizing:border-box;transition:var(--ic-transition-duration-fast)}.ic-switch-line-break{flex:1 0 100%}.ic-switch-checked-status{padding-left:var(--ic-space-xxs)}.ic-switch-toggle::before{content:"";width:21.33px;height:21.33px;border-radius:50%;position:absolute;z-index:2;top:50%;left:5.33px;transform:translate(0, -50%);background-color:var(--ic-architectural-700);transition:var(--ic-transition-duration-slow)}.ic-switch-icon{display:inline-block;vertical-align:middle;width:10px;height:10px}.ic-switch-icon-circle,.ic-switch-icon-line{stroke-width:1}.ic-switch-icon-circle{stroke:var(--ic-architectural-700)}.ic-switch-icon-line{stroke:var(--ic-architectural-white)}@media (prefers-reduced-motion: reduce){.ic-switch-toggle::before{transition-duration:0ms}}.ic-switch-input:checked+.ic-switch-toggle{background-color:var(--ic-action-default);border:none}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-xl), -50%);background-color:var(--ic-architectural-white)}.ic-switch-input:not([disabled])+.ic-switch-toggle:hover::before{box-shadow:0 0 0 12px var(--ic-action-dark-bg-hover)}.ic-switch-input:not([disabled])+.ic-switch-toggle:active::before{box-shadow:0 0 0 12px var(--ic-action-dark-bg-active)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:hover::before{box-shadow:0 0 0 12px var(--ic-action-default-bg-hover)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:active::before{box-shadow:0 0 0 12px var(--ic-action-default-bg-active)}.ic-switch-input:focus:not([disabled])+.ic-switch-toggle,.ic-switch-input:focus-visible:not([disabled])+.ic-switch-toggle{box-shadow:0 0 0 1px var(--ic-architectural-white),\n 0 0 0 3px var(--ic-action-default),\n 0 0 0 8px var(--ic-action-default-active-alpha)}.ic-switch-disabled{cursor:default}.ic-switch-disabled .ic-switch-icon-circle{stroke:var(--ic-architectural-300)}.ic-switch-disabled .ic-switch-icon-line{stroke:var(--ic-action-default-bg-active)}.ic-switch-input:disabled+.ic-switch-toggle{background-color:var(--ic-architectural-80);border:1px dashed var(--ic-architectural-300)}.ic-switch-input:disabled~.ic-switch-checked-status{color:var(--ic-architectural-300)}.ic-switch-input:disabled+.ic-switch-toggle::before{background-color:var(--ic-architectural-300)}.ic-switch-input:disabled:checked+.ic-switch-toggle{background-color:var(--ic-status-info-background);border:1px dashed #98c9f5}.ic-switch-input:disabled:checked+.ic-switch-toggle::before{background-color:var(--ic-architectural-white)}.ic-switch-small{gap:var(--ic-space-xxxs)}.ic-switch-small .ic-switch-checked-status{padding-left:6px}.ic-switch-small .ic-switch-toggle{width:var(--ic-space-xxl);height:var(--ic-space-lg)}.ic-switch-small .ic-switch-toggle::before{width:var(--ic-space-md);height:var(--ic-space-md);left:var(--ic-space-xxs)}.ic-switch-small .ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-lg), -50%)}::slotted(*){margin-left:var(--ic-space-sm)}::slotted(svg){fill:currentColor}@media (forced-colors: active){.ic-switch-toggle::before,.ic-switch-input:checked+.ic-switch-toggle{border:var(--ic-hc-border)}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(calc(var(--ic-space-xl) - 2px), -50%)}.ic-switch-input:disabled+.ic-switch-toggle,.ic-switch-input:disabled:checked+.ic-switch-toggle,.ic-switch-input:disabled+.ic-switch-toggle::before{border-color:GrayText}.ic-switch-input:disabled~.ic-switch-checked-status{color:GrayText}.ic-switch-disabled .ic-switch-icon-circle,.ic-switch-disabled .ic-switch-icon-line{stroke:GrayText}}';let d=0;const b=class{constructor(e){i(this,e);this.icChange=t(this,"icChange",7);this.icFocus=t(this,"icFocus",7);this.icBlur=t(this,"icBlur",7);this.inputId=`ic-switch-input-${d++}`;this.handleChange=()=>{this.checkedState=!this.checkedState;this.icChange.emit({checked:this.checkedState,value:this.value})};this.onFocus=()=>{this.icFocus.emit()};this.onBlur=()=>{this.icBlur.emit()};this.handleFormReset=()=>{this.checkedState=this.initiallyChecked};this.label=undefined;this.hideLabel=false;this.helperText="";this.checked=false;this.small=false;this.disabled=false;this.name=this.inputId;this.showState=false;this.value="on";this.checkedState=false;this.initiallyChecked=this.checked}componentWillLoad(){this.checkedState=this.checked;a(this.el,this.handleFormReset)}componentDidLoad(){o([{prop:this.label,propName:"label"}],"Switch")}disconnectedCallback(){r(this.el,this.handleFormReset)}render(){const{label:i,checkedState:t,small:s,disabled:a,name:o,showState:r,value:h,hideLabel:d,helperText:b,inputId:p}=this;n(true,this.el,o,t?h:"",a);const u=l(p,b!=="",false);return e(c,null,e("label",{class:{["ic-switch-container"]:true,["ic-switch-disabled"]:a,["ic-switch-small"]:s},htmlFor:p},!d&&e("ic-input-label",{for:p,label:i,helperText:b,readonly:true,disabled:a,class:{["ic-switch-label"]:true,["ic-switch-label-small"]:s}}),!d&&e("span",{class:"ic-switch-line-break"}),e("input",{checked:t,disabled:a,"aria-label":i,"aria-checked":t?"true":"false","aria-describedby":u,role:"switch",class:"ic-switch-input",type:"checkbox",name:"toggle",id:p,onFocus:this.onFocus,onBlur:this.onBlur,onChange:this.handleChange}),e("span",{class:"ic-switch-toggle"},e("svg",{class:"ic-switch-icon","aria-hidden":"true",focusable:"false",viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},e("line",{class:"ic-switch-icon-line",x1:"9",y1:s?"2":"1",x2:"9",y2:s?"8":"9"})),e("svg",{class:"ic-switch-icon","aria-hidden":"true",focusable:"false",viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},e("circle",{class:"ic-switch-icon-circle",fill:"none",cx:"5",cy:"5",r:s?"3.335":"4.445"}))),e("slot",{name:"right-adornment"}),r&&e("ic-typography",{"aria-hidden":"true",variant:"label",class:"ic-switch-checked-status"},t?"On":"Off")))}get el(){return s(this)}};b.style=h;export{b as ic_switch};
|
2
|
-
//# sourceMappingURL=p-8ddeb574.entry.js.map
|