@ukic/web-components 2.0.0-alpha.124 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/{helpers-9d4961dc.js → helpers-60fda93f.js} +49 -21
- package/dist/cjs/helpers-60fda93f.js.map +1 -0
- package/dist/cjs/ic-alert.cjs.entry.js +4 -3
- package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-back-to-top.cjs.entry.js +3 -2
- package/dist/cjs/ic-back-to-top.cjs.entry.js.map +1 -1
- package/dist/cjs/{ic-breadcrumbs.cjs.entry.js → ic-breadcrumb-group.cjs.entry.js} +7 -6
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +3 -2
- package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +26 -30
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card.cjs.entry.js +3 -2
- package/dist/cjs/ic-card.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +3 -2
- package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +3 -2
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-entity.cjs.entry.js +6 -6
- package/dist/cjs/ic-data-entity.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +6 -5
- package/dist/cjs/ic-data-row.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +3 -2
- package/dist/cjs/ic-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +12 -11
- package/dist/cjs/ic-footer-link-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js +8 -7
- package/dist/cjs/ic-footer-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer.cjs.entry.js +16 -15
- package/dist/cjs/ic-footer.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-hero.cjs.entry.js +9 -8
- package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +84 -29
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js +5 -4
- package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-link.cjs.entry.js +11 -10
- package/dist/cjs/ic-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-button.cjs.entry.js +8 -7
- package/dist/cjs/ic-navigation-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +2 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +3 -2
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-menu.cjs.entry.js +3 -2
- package/dist/cjs/ic-navigation-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +6 -5
- package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js +3 -2
- package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js +3 -2
- package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +16 -19
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-select.cjs.entry.js +219 -25
- package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +4 -3
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-skeleton.cjs.entry.js +10 -10
- package/dist/cjs/ic-skeleton.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-status-tag.cjs.entry.js +9 -8
- package/dist/cjs/ic-status-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +2 -1
- package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +2 -1
- package/dist/cjs/ic-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +8 -7
- package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-context.cjs.entry.js +12 -11
- package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +146 -0
- package/dist/cjs/ic-tab-group.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-tab-panel.cjs.entry.js +2 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab.cjs.entry.js +5 -4
- package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-text-field.cjs.entry.js +10 -10
- package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-theme.cjs.entry.js +2 -1
- package/dist/cjs/ic-theme.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +7 -6
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-typography.cjs.entry.js +4 -4
- package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
- package/dist/cjs/index-3ef30d9d.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/types-3eb02246.js +16 -0
- package/dist/cjs/types-3eb02246.js.map +1 -0
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/ic-alert/ic-alert.js +1 -1
- package/dist/collection/components/ic-alert/ic-alert.js.map +1 -1
- package/dist/collection/components/ic-back-to-top/ic-back-to-top.js +1 -1
- 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 +1 -2
- package/dist/collection/components/{ic-breadcrumbs/ic-breadcrumbs-test-examples.js → ic-breadcrumb-group/ic-breadcrumb-group-test-examples.js} +7 -7
- package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group-test-examples.js.map +1 -0
- package/dist/collection/components/{ic-breadcrumbs/ic-breadcrumbs.css → ic-breadcrumb-group/ic-breadcrumb-group.css} +1 -0
- package/dist/collection/components/{ic-breadcrumbs/ic-breadcrumbs.js → ic-breadcrumb-group/ic-breadcrumb-group.js} +5 -5
- package/dist/{core/p-ed1d8712.entry.js.map → collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js.map} +1 -1
- package/dist/collection/components/{ic-breadcrumbs/ic-breadcrumbs.test.a11y.js → ic-breadcrumb-group/ic-breadcrumb-group.test.a11y.js} +6 -6
- package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.test.a11y.js.map +1 -0
- package/dist/collection/components/ic-button/ic-button.css +5 -11
- package/dist/collection/components/ic-button/ic-button.js +22 -52
- package/dist/collection/components/ic-button/ic-button.js.map +1 -1
- package/dist/collection/components/ic-button/ic-button.types.js.map +1 -1
- package/dist/collection/components/ic-card/ic-card.js +1 -1
- package/dist/collection/components/ic-card/ic-card.js.map +1 -1
- package/dist/collection/components/ic-checkbox/ic-checkbox.css +1 -1
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +4 -4
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
- package/dist/collection/components/ic-data-entity/ic-data-entity.css +2 -2
- package/dist/collection/components/ic-data-entity/ic-data-entity.js +8 -8
- 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 +1 -1
- package/dist/collection/components/ic-data-row/ic-data-row.js +6 -6
- package/dist/collection/components/ic-data-row/ic-data-row.js.map +1 -1
- package/dist/collection/components/ic-footer/ic-footer.css +2 -2
- package/dist/collection/components/ic-footer/ic-footer.js +14 -14
- package/dist/collection/components/ic-footer/ic-footer.js.map +1 -1
- package/dist/collection/components/ic-footer/ic-footer.types.js.map +1 -1
- package/dist/collection/components/ic-footer-link/ic-footer-link.css +2 -2
- package/dist/collection/components/ic-footer-link/ic-footer-link.js +5 -5
- 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 +8 -8
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js +10 -10
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js.map +1 -1
- package/dist/collection/components/ic-hero/ic-hero.css +17 -12
- package/dist/collection/components/ic-hero/ic-hero.js +9 -9
- package/dist/collection/components/ic-hero/ic-hero.js.map +1 -1
- package/dist/collection/components/ic-input-component-container/ic-input-component-container.css +6 -5
- package/dist/collection/components/ic-input-component-container/ic-input-component-container.js +6 -6
- package/dist/collection/components/ic-input-component-container/ic-input-component-container.js.map +1 -1
- package/dist/collection/components/ic-link/ic-link.css +1 -1
- package/dist/collection/components/ic-link/ic-link.js +9 -9
- package/dist/collection/components/ic-link/ic-link.js.map +1 -1
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css +2 -2
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js +26 -25
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js.map +1 -1
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.types.js.map +1 -1
- package/dist/collection/components/ic-menu/ic-menu.css +5 -4
- package/dist/collection/components/ic-menu/ic-menu.js +82 -25
- package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
- package/dist/collection/components/ic-menu/ic-menu.types.js.map +1 -1
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.js +7 -7
- package/dist/collection/components/ic-navigation-button/ic-navigation-button.js.map +1 -1
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +1 -1
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
- package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js +1 -1
- 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 +1 -1
- package/dist/collection/components/ic-page-header/ic-page-header.js +6 -6
- package/dist/collection/components/ic-page-header/ic-page-header.js.map +1 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.js +4 -4
- package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
- package/dist/collection/components/ic-radio-option/ic-radio-option.css +2 -2
- package/dist/collection/components/ic-search-bar/ic-search-bar.css +7 -1
- package/dist/collection/components/ic-search-bar/ic-search-bar.js +13 -35
- package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select.css +70 -9
- package/dist/collection/components/ic-select/ic-select.js +341 -28
- package/dist/collection/components/ic-select/ic-select.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
- package/dist/collection/components/ic-skeleton/ic-skeleton.css +4 -4
- package/dist/collection/components/ic-skeleton/ic-skeleton.js +14 -14
- package/dist/collection/components/ic-skeleton/ic-skeleton.js.map +1 -1
- package/dist/collection/components/ic-skeleton/ic-skeleton.types.js.map +1 -1
- package/dist/collection/components/ic-status-tag/ic-status-tag.css +9 -9
- package/dist/collection/components/ic-status-tag/ic-status-tag.js +14 -14
- package/dist/collection/components/ic-status-tag/ic-status-tag.js.map +1 -1
- package/dist/collection/components/ic-status-tag/ic-status-tag.types.js.map +1 -1
- package/dist/collection/components/ic-switch/ic-switch.css +6 -6
- package/dist/collection/components/ic-switch/ic-switch.js +8 -8
- package/dist/collection/components/ic-switch/ic-switch.js.map +1 -1
- package/dist/collection/components/ic-tab/ic-tab.js +17 -11
- package/dist/collection/components/ic-tab/ic-tab.js.map +1 -1
- package/dist/collection/components/ic-tab-context/ic-tab-context.js +25 -19
- 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 +2 -2
- package/dist/collection/components/ic-tab-context/ic-tab-context.test.a11y.js.map +1 -1
- package/dist/collection/components/{ic-tab-list → ic-tab-group}/assets/left-arrow.svg +0 -0
- package/dist/collection/components/{ic-tab-list → ic-tab-group}/assets/right-arrow.svg +0 -0
- package/dist/collection/components/{ic-tab-list/ic-tab-list.css → ic-tab-group/ic-tab-group.css} +2 -2
- package/dist/collection/components/{ic-tab-list/ic-tab-list.js → ic-tab-group/ic-tab-group.js} +37 -31
- package/dist/collection/components/ic-tab-group/ic-tab-group.js.map +1 -0
- package/dist/collection/components/ic-text-field/ic-text-field.js +6 -25
- package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
- package/dist/collection/components/ic-tooltip/ic-tooltip.css +4 -4
- package/dist/collection/components/ic-tooltip/ic-tooltip.js +6 -6
- package/dist/collection/components/ic-tooltip/ic-tooltip.js.map +1 -1
- package/dist/collection/components/ic-tooltip/ic-tooltip.test.a11y.js +1 -1
- package/dist/collection/components/ic-tooltip/ic-tooltip.test.a11y.js.map +1 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js +4 -4
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.js.map +1 -1
- package/dist/collection/components/ic-typography/ic-typography.css +17 -10
- package/dist/collection/components/ic-typography/ic-typography.js +6 -6
- package/dist/collection/components/ic-typography/ic-typography.js.map +1 -1
- package/dist/collection/utils/helpers.js +39 -1
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/components/helpers.js +41 -14
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/ic-alert.js +3 -2
- package/dist/components/ic-alert.js.map +1 -1
- package/dist/components/ic-back-to-top.js +1 -1
- package/dist/components/ic-back-to-top.js.map +1 -1
- package/dist/components/{ic-breadcrumbs.d.ts → ic-breadcrumb-group.d.ts} +4 -4
- package/dist/components/{ic-breadcrumbs.js → ic-breadcrumb-group.js} +10 -10
- package/dist/{cjs/ic-breadcrumbs.cjs.entry.js.map → components/ic-breadcrumb-group.js.map} +1 -1
- package/dist/components/ic-breadcrumb2.js +1 -1
- package/dist/components/ic-breadcrumb2.js.map +1 -1
- package/dist/components/ic-button2.js +19 -25
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-card.js +1 -1
- package/dist/components/ic-card.js.map +1 -1
- package/dist/components/ic-checkbox-group.js +2 -2
- package/dist/components/ic-checkbox-group.js.map +1 -1
- package/dist/components/ic-checkbox.js +1 -1
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/components/ic-data-entity.js +7 -7
- package/dist/components/ic-data-entity.js.map +1 -1
- package/dist/components/ic-data-row.js +5 -5
- package/dist/components/ic-data-row.js.map +1 -1
- package/dist/components/ic-divider2.js +2 -1
- package/dist/components/ic-divider2.js.map +1 -1
- package/dist/components/ic-footer-link-group.js +12 -12
- package/dist/components/ic-footer-link-group.js.map +1 -1
- package/dist/components/ic-footer-link.js +7 -7
- package/dist/components/ic-footer-link.js.map +1 -1
- package/dist/components/ic-footer.js +14 -13
- package/dist/components/ic-footer.js.map +1 -1
- package/dist/components/ic-hero.js +9 -8
- package/dist/components/ic-hero.js.map +1 -1
- package/dist/components/ic-input-component-container2.js +7 -6
- package/dist/components/ic-input-component-container2.js.map +1 -1
- package/dist/components/ic-input-label2.js +1 -1
- package/dist/components/ic-input-validation2.js +2 -1
- package/dist/components/ic-input-validation2.js.map +1 -1
- package/dist/components/ic-link2.js +10 -9
- package/dist/components/ic-link2.js.map +1 -1
- package/dist/components/ic-loading-indicator2.js +8 -7
- package/dist/components/ic-loading-indicator2.js.map +1 -1
- package/dist/components/ic-menu2.js +78 -24
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-button.js +9 -8
- package/dist/components/ic-navigation-button.js.map +1 -1
- package/dist/components/ic-navigation-group.js +1 -1
- package/dist/components/ic-navigation-item.js +2 -2
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-navigation-menu2.js +2 -2
- package/dist/components/ic-navigation-menu2.js.map +1 -1
- package/dist/components/ic-page-header.js +5 -5
- package/dist/components/ic-page-header.js.map +1 -1
- package/dist/components/ic-radio-group.js +2 -2
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-radio-option.js +2 -2
- package/dist/components/ic-radio-option.js.map +1 -1
- package/dist/components/ic-search-bar.js +13 -17
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-select.js +229 -25
- package/dist/components/ic-select.js.map +1 -1
- package/dist/components/ic-side-navigation.js +3 -2
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-skeleton.js +11 -11
- package/dist/components/ic-skeleton.js.map +1 -1
- package/dist/components/ic-status-tag.js +9 -9
- package/dist/components/ic-status-tag.js.map +1 -1
- package/dist/components/ic-switch.js +7 -7
- package/dist/components/ic-switch.js.map +1 -1
- package/dist/components/ic-tab-context.js +13 -12
- package/dist/components/ic-tab-context.js.map +1 -1
- package/dist/components/{ic-tab-list.d.ts → ic-tab-group.d.ts} +4 -4
- package/dist/components/{ic-tab-list.js → ic-tab-group.js} +31 -30
- package/dist/components/ic-tab-group.js.map +1 -0
- package/dist/components/ic-tab.js +5 -4
- package/dist/components/ic-tab.js.map +1 -1
- package/dist/components/ic-text-field2.js +6 -7
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-theme.js +1 -1
- package/dist/components/ic-tooltip2.js +5 -5
- package/dist/components/ic-tooltip2.js.map +1 -1
- package/dist/components/ic-top-navigation.js +6 -5
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/components/ic-typography2.js +5 -5
- package/dist/components/ic-typography2.js.map +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/index.js +2 -2
- package/dist/components/types.js +16 -0
- package/dist/components/types.js.map +1 -0
- package/dist/core/core.css +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/p-0522eb9a.entry.js +2 -0
- package/dist/core/p-0522eb9a.entry.js.map +1 -0
- package/dist/core/{p-b9253509.entry.js → p-0992a2ee.entry.js} +2 -2
- package/dist/core/p-0992a2ee.entry.js.map +1 -0
- package/dist/core/p-14153fa0.entry.js +2 -0
- package/dist/core/p-14153fa0.entry.js.map +1 -0
- package/dist/core/p-1bec5ccb.entry.js +2 -0
- package/dist/core/p-1bec5ccb.entry.js.map +1 -0
- package/dist/core/p-21025b10.entry.js +2 -0
- package/dist/core/p-21025b10.entry.js.map +1 -0
- package/dist/core/p-27528d04.entry.js +2 -0
- package/dist/core/{p-44355e34.entry.js.map → p-27528d04.entry.js.map} +1 -1
- package/dist/core/p-3013158d.entry.js +2 -0
- package/dist/core/{p-016fcce8.entry.js.map → p-3013158d.entry.js.map} +1 -1
- package/dist/core/p-36b25af4.entry.js +2 -0
- package/dist/core/p-36b25af4.entry.js.map +1 -0
- package/dist/core/p-3d6902a3.entry.js +2 -0
- package/dist/core/{p-0d4ac3c9.entry.js.map → p-3d6902a3.entry.js.map} +1 -1
- package/dist/core/p-400b34b9.entry.js +2 -0
- package/dist/core/{p-3b9d4007.entry.js.map → p-400b34b9.entry.js.map} +1 -1
- package/dist/core/p-438e327e.entry.js +2 -0
- package/dist/core/{p-bbe0b521.entry.js.map → p-438e327e.entry.js.map} +1 -1
- package/dist/core/p-4aa8c1e1.entry.js +2 -0
- package/dist/core/{p-836c93b1.entry.js.map → p-4aa8c1e1.entry.js.map} +1 -1
- package/dist/core/p-4af4a9e7.entry.js +2 -0
- package/dist/core/p-4af4a9e7.entry.js.map +1 -0
- package/dist/core/p-4c1e1d04.entry.js +2 -0
- package/dist/core/p-4c1e1d04.entry.js.map +1 -0
- package/dist/core/p-4e498c03.entry.js +2 -0
- package/dist/core/{p-5e0b88fa.entry.js.map → p-4e498c03.entry.js.map} +1 -1
- package/dist/core/p-530b7fe0.entry.js +2 -0
- package/dist/core/p-530b7fe0.entry.js.map +1 -0
- package/dist/core/p-59a917d4.entry.js +2 -0
- package/dist/core/p-59a917d4.entry.js.map +1 -0
- package/dist/core/p-605e4270.entry.js +2 -0
- package/dist/core/p-605e4270.entry.js.map +1 -0
- package/dist/core/p-682686a6.entry.js +2 -0
- package/dist/core/p-682686a6.entry.js.map +1 -0
- package/dist/core/p-6ac7757f.entry.js +2 -0
- package/dist/core/{p-85a32ec7.entry.js.map → p-6ac7757f.entry.js.map} +1 -1
- package/dist/core/p-6d0eaaeb.entry.js +2 -0
- package/dist/core/p-6d0eaaeb.entry.js.map +1 -0
- package/dist/core/p-6f57b13c.js +2 -0
- package/dist/core/p-6f57b13c.js.map +1 -0
- package/dist/core/p-71282f37.entry.js +2 -0
- package/dist/core/{p-012dc33c.entry.js.map → p-71282f37.entry.js.map} +1 -1
- package/dist/core/p-73d41c36.entry.js +2 -0
- package/dist/core/{p-8af2a343.entry.js.map → p-73d41c36.entry.js.map} +1 -1
- package/dist/core/p-8bcadf55.entry.js +2 -0
- package/dist/core/p-8bcadf55.entry.js.map +1 -0
- package/dist/core/p-98e9eccc.entry.js +2 -0
- package/dist/core/p-98e9eccc.entry.js.map +1 -0
- package/dist/core/p-994111b7.entry.js +2 -0
- package/dist/core/{p-bdd2f166.entry.js.map → p-994111b7.entry.js.map} +1 -1
- package/dist/core/p-9bf3f413.entry.js +2 -0
- package/dist/core/p-9bf3f413.entry.js.map +1 -0
- package/dist/core/p-a301cf67.entry.js +2 -0
- package/dist/core/{p-7152788d.entry.js.map → p-a301cf67.entry.js.map} +1 -1
- package/dist/core/p-aebc7562.entry.js +2 -0
- package/dist/core/{p-85436343.entry.js.map → p-aebc7562.entry.js.map} +1 -1
- package/dist/core/p-be583c9b.entry.js +2 -0
- package/dist/core/{p-a968ff18.entry.js.map → p-be583c9b.entry.js.map} +1 -1
- package/dist/core/p-c15bb762.js +2 -0
- package/dist/core/p-c15bb762.js.map +1 -0
- package/dist/core/p-c817e46b.entry.js +2 -0
- package/dist/core/p-c817e46b.entry.js.map +1 -0
- package/dist/core/p-c8772106.entry.js +2 -0
- package/dist/core/p-c8772106.entry.js.map +1 -0
- package/dist/core/p-c96985bc.entry.js +2 -0
- package/dist/core/{p-d198ae1f.entry.js.map → p-c96985bc.entry.js.map} +1 -1
- package/dist/core/p-d4c6f4fb.entry.js +2 -0
- package/dist/core/{p-44af91df.entry.js.map → p-d4c6f4fb.entry.js.map} +1 -1
- package/dist/core/p-d78bded9.entry.js +2 -0
- package/dist/core/p-d78bded9.entry.js.map +1 -0
- package/dist/core/p-d8973266.entry.js +2 -0
- package/dist/core/p-d8973266.entry.js.map +1 -0
- package/dist/core/p-d8b6271d.entry.js +2 -0
- package/dist/core/{p-7f6ba60a.entry.js.map → p-d8b6271d.entry.js.map} +1 -1
- package/dist/core/p-da6f09cd.entry.js +2 -0
- package/dist/core/p-da6f09cd.entry.js.map +1 -0
- package/dist/core/{p-5316e421.entry.js → p-eb33ece2.entry.js} +2 -2
- package/dist/core/{p-5316e421.entry.js.map → p-eb33ece2.entry.js.map} +1 -1
- package/dist/core/p-f37a732a.entry.js +2 -0
- package/dist/core/{p-5d3dd182.entry.js.map → p-f37a732a.entry.js.map} +1 -1
- package/dist/core/p-fca84a85.entry.js +2 -0
- package/dist/core/p-fca84a85.entry.js.map +1 -0
- package/dist/esm/core.js +1 -1
- package/dist/esm/{helpers-db00eae1.js → helpers-8b43d0d4.js} +42 -15
- package/dist/esm/helpers-8b43d0d4.js.map +1 -0
- package/dist/esm/ic-alert.entry.js +3 -2
- package/dist/esm/ic-alert.entry.js.map +1 -1
- package/dist/esm/ic-back-to-top.entry.js +3 -2
- package/dist/esm/ic-back-to-top.entry.js.map +1 -1
- package/dist/esm/{ic-breadcrumbs.entry.js → ic-breadcrumb-group.entry.js} +7 -6
- package/dist/esm/ic-breadcrumb-group.entry.js.map +1 -0
- package/dist/esm/ic-breadcrumb.entry.js +3 -2
- package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ic-button_3.entry.js +25 -29
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card.entry.js +3 -2
- package/dist/esm/ic-card.entry.js.map +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +3 -2
- package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
- package/dist/esm/ic-checkbox.entry.js +3 -2
- package/dist/esm/ic-checkbox.entry.js.map +1 -1
- package/dist/esm/ic-data-entity.entry.js +6 -6
- package/dist/esm/ic-data-entity.entry.js.map +1 -1
- package/dist/esm/ic-data-row.entry.js +6 -5
- package/dist/esm/ic-data-row.entry.js.map +1 -1
- package/dist/esm/ic-divider.entry.js +2 -1
- package/dist/esm/ic-divider.entry.js.map +1 -1
- package/dist/esm/ic-footer-link-group.entry.js +12 -11
- package/dist/esm/ic-footer-link-group.entry.js.map +1 -1
- package/dist/esm/ic-footer-link.entry.js +8 -7
- package/dist/esm/ic-footer-link.entry.js.map +1 -1
- package/dist/esm/ic-footer.entry.js +14 -13
- package/dist/esm/ic-footer.entry.js.map +1 -1
- package/dist/esm/ic-hero.entry.js +8 -7
- package/dist/esm/ic-hero.entry.js.map +1 -1
- package/dist/esm/ic-input-component-container_3.entry.js +83 -28
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-input-label_2.entry.js +2 -1
- package/dist/esm/ic-input-label_2.entry.js.map +1 -1
- package/dist/esm/ic-link.entry.js +9 -8
- package/dist/esm/ic-link.entry.js.map +1 -1
- package/dist/esm/ic-navigation-button.entry.js +8 -7
- package/dist/esm/ic-navigation-button.entry.js.map +1 -1
- package/dist/esm/ic-navigation-group.entry.js +2 -1
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +3 -2
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-menu.entry.js +3 -2
- package/dist/esm/ic-navigation-menu.entry.js.map +1 -1
- package/dist/esm/ic-page-header.entry.js +6 -5
- package/dist/esm/ic-page-header.entry.js.map +1 -1
- package/dist/esm/ic-radio-group.entry.js +3 -2
- package/dist/esm/ic-radio-group.entry.js.map +1 -1
- package/dist/esm/ic-radio-option.entry.js +3 -2
- package/dist/esm/ic-radio-option.entry.js.map +1 -1
- package/dist/esm/ic-search-bar.entry.js +12 -15
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-select.entry.js +218 -24
- package/dist/esm/ic-select.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +3 -2
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-skeleton.entry.js +10 -10
- package/dist/esm/ic-skeleton.entry.js.map +1 -1
- package/dist/esm/ic-status-tag.entry.js +9 -8
- package/dist/esm/ic-status-tag.entry.js.map +1 -1
- package/dist/esm/ic-step.entry.js +2 -1
- package/dist/esm/ic-step.entry.js.map +1 -1
- package/dist/esm/ic-stepper.entry.js +2 -1
- package/dist/esm/ic-stepper.entry.js.map +1 -1
- package/dist/esm/ic-switch.entry.js +8 -7
- package/dist/esm/ic-switch.entry.js.map +1 -1
- package/dist/esm/ic-tab-context.entry.js +12 -11
- package/dist/esm/ic-tab-context.entry.js.map +1 -1
- package/dist/esm/ic-tab-group.entry.js +142 -0
- package/dist/esm/ic-tab-group.entry.js.map +1 -0
- package/dist/esm/ic-tab-panel.entry.js +2 -1
- package/dist/esm/ic-tab-panel.entry.js.map +1 -1
- package/dist/esm/ic-tab.entry.js +5 -4
- 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 +2 -1
- package/dist/esm/ic-theme.entry.js.map +1 -1
- package/dist/esm/ic-top-navigation.entry.js +6 -5
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/ic-typography.entry.js +4 -4
- package/dist/esm/ic-typography.entry.js.map +1 -1
- package/dist/esm/index-1500de1f.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/types-dd515332.js +16 -0
- package/dist/esm/types-dd515332.js.map +1 -0
- package/dist/types/components/ic-breadcrumb-group/ic-breadcrumb-group-test-examples.d.ts +2 -0
- package/dist/types/components/{ic-breadcrumbs/ic-breadcrumbs.d.ts → ic-breadcrumb-group/ic-breadcrumb-group.d.ts} +2 -2
- package/dist/types/components/{ic-breadcrumbs/ic-breadcrumbs.test.a11y.d.ts → ic-breadcrumb-group/ic-breadcrumb-group.test.a11y.d.ts} +0 -0
- package/dist/types/components/ic-button/ic-button.d.ts +5 -11
- package/dist/types/components/ic-button/ic-button.types.d.ts +1 -2
- package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts +2 -2
- 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 +2 -2
- package/dist/types/components/ic-footer/ic-footer.d.ts +2 -2
- package/dist/types/components/ic-footer/ic-footer.types.d.ts +1 -1
- package/dist/types/components/ic-footer-link/ic-footer-link.d.ts +1 -1
- package/dist/types/components/ic-footer-link-group/ic-footer-link-group.d.ts +2 -2
- package/dist/types/components/ic-hero/ic-hero.d.ts +3 -3
- package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts +2 -2
- package/dist/types/components/ic-link/ic-link.d.ts +2 -2
- package/dist/types/components/ic-loading-indicator/ic-loading-indicator.d.ts +6 -5
- package/dist/types/components/ic-loading-indicator/ic-loading-indicator.types.d.ts +0 -1
- package/dist/types/components/ic-menu/ic-menu.d.ts +4 -2
- package/dist/types/components/ic-menu/ic-menu.types.d.ts +1 -0
- package/dist/types/components/ic-navigation-button/ic-navigation-button.d.ts +1 -1
- package/dist/types/components/ic-page-header/ic-page-header.d.ts +2 -2
- package/dist/types/components/ic-radio-group/ic-radio-group.d.ts +2 -2
- package/dist/types/components/ic-search-bar/ic-search-bar.d.ts +2 -6
- package/dist/types/components/ic-select/ic-select.d.ts +46 -4
- package/dist/types/components/ic-skeleton/ic-skeleton.d.ts +2 -2
- package/dist/types/components/ic-skeleton/ic-skeleton.types.d.ts +1 -1
- package/dist/types/components/ic-status-tag/ic-status-tag.d.ts +3 -3
- package/dist/types/components/ic-status-tag/ic-status-tag.types.d.ts +1 -1
- package/dist/types/components/ic-switch/ic-switch.d.ts +2 -2
- package/dist/types/components/ic-tab/ic-tab.d.ts +3 -2
- package/dist/types/components/ic-tab-context/ic-tab-context.d.ts +4 -4
- package/dist/types/components/{ic-tab-list/ic-tab-list.d.ts → ic-tab-group/ic-tab-group.d.ts} +6 -5
- package/dist/types/components/ic-text-field/ic-text-field.d.ts +2 -6
- package/dist/types/components/ic-tooltip/ic-tooltip.d.ts +2 -2
- package/dist/types/components/ic-typography/ic-typography.d.ts +2 -2
- package/dist/types/components.d.ts +239 -215
- package/dist/types/utils/helpers.d.ts +11 -2
- package/dist/types/utils/types.d.ts +2 -0
- package/hydrate/index.js +558 -277
- package/package.json +4 -4
- package/dist/cjs/helpers-9d4961dc.js.map +0 -1
- package/dist/cjs/ic-tab-list.cjs.entry.js +0 -145
- package/dist/cjs/ic-tab-list.cjs.entry.js.map +0 -1
- package/dist/collection/components/ic-breadcrumbs/ic-breadcrumbs-test-examples.js.map +0 -1
- package/dist/collection/components/ic-breadcrumbs/ic-breadcrumbs.js.map +0 -1
- package/dist/collection/components/ic-breadcrumbs/ic-breadcrumbs.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-tab-list/ic-tab-list.js.map +0 -1
- package/dist/components/ic-breadcrumbs.js.map +0 -1
- package/dist/components/ic-tab-list.js.map +0 -1
- package/dist/core/p-012dc33c.entry.js +0 -2
- package/dist/core/p-016fcce8.entry.js +0 -2
- package/dist/core/p-0d4ac3c9.entry.js +0 -2
- package/dist/core/p-13854b65.entry.js +0 -2
- package/dist/core/p-13854b65.entry.js.map +0 -1
- package/dist/core/p-16a81e12.entry.js +0 -2
- package/dist/core/p-16a81e12.entry.js.map +0 -1
- package/dist/core/p-17420c90.entry.js +0 -2
- package/dist/core/p-17420c90.entry.js.map +0 -1
- package/dist/core/p-17f3a2bd.entry.js +0 -2
- package/dist/core/p-17f3a2bd.entry.js.map +0 -1
- package/dist/core/p-22eb7fc8.entry.js +0 -2
- package/dist/core/p-22eb7fc8.entry.js.map +0 -1
- package/dist/core/p-263018da.entry.js +0 -2
- package/dist/core/p-263018da.entry.js.map +0 -1
- package/dist/core/p-3b9d4007.entry.js +0 -2
- package/dist/core/p-44355e34.entry.js +0 -2
- package/dist/core/p-44af91df.entry.js +0 -2
- package/dist/core/p-4b1b46f5.entry.js +0 -2
- package/dist/core/p-4b1b46f5.entry.js.map +0 -1
- package/dist/core/p-4cf60a22.entry.js +0 -2
- package/dist/core/p-4cf60a22.entry.js.map +0 -1
- package/dist/core/p-4fba6cae.entry.js +0 -2
- package/dist/core/p-4fba6cae.entry.js.map +0 -1
- package/dist/core/p-5d3dd182.entry.js +0 -2
- package/dist/core/p-5e0b88fa.entry.js +0 -2
- package/dist/core/p-6238313f.entry.js +0 -2
- package/dist/core/p-6238313f.entry.js.map +0 -1
- package/dist/core/p-7152788d.entry.js +0 -2
- package/dist/core/p-7ed79493.entry.js +0 -2
- package/dist/core/p-7ed79493.entry.js.map +0 -1
- package/dist/core/p-7f6ba60a.entry.js +0 -2
- package/dist/core/p-836c93b1.entry.js +0 -2
- package/dist/core/p-85436343.entry.js +0 -2
- package/dist/core/p-856d9516.entry.js +0 -2
- package/dist/core/p-856d9516.entry.js.map +0 -1
- package/dist/core/p-85a32ec7.entry.js +0 -2
- package/dist/core/p-8a677ff1.entry.js +0 -2
- package/dist/core/p-8a677ff1.entry.js.map +0 -1
- package/dist/core/p-8af2a343.entry.js +0 -2
- package/dist/core/p-a3df537f.entry.js +0 -2
- package/dist/core/p-a3df537f.entry.js.map +0 -1
- package/dist/core/p-a968ff18.entry.js +0 -2
- package/dist/core/p-b858dc5a.entry.js +0 -2
- package/dist/core/p-b858dc5a.entry.js.map +0 -1
- package/dist/core/p-b9253509.entry.js.map +0 -1
- package/dist/core/p-bbe0b521.entry.js +0 -2
- package/dist/core/p-bdd2f166.entry.js +0 -2
- package/dist/core/p-bddb885a.entry.js +0 -2
- package/dist/core/p-bddb885a.entry.js.map +0 -1
- package/dist/core/p-c09e9589.entry.js +0 -2
- package/dist/core/p-c09e9589.entry.js.map +0 -1
- package/dist/core/p-d10ce0a7.entry.js +0 -2
- package/dist/core/p-d10ce0a7.entry.js.map +0 -1
- package/dist/core/p-d198ae1f.entry.js +0 -2
- package/dist/core/p-dc79694a.entry.js +0 -2
- package/dist/core/p-dc79694a.entry.js.map +0 -1
- package/dist/core/p-e5a09372.js +0 -2
- package/dist/core/p-e5a09372.js.map +0 -1
- package/dist/core/p-ea93611e.entry.js +0 -2
- package/dist/core/p-ea93611e.entry.js.map +0 -1
- package/dist/core/p-ed1d8712.entry.js +0 -2
- package/dist/esm/helpers-db00eae1.js.map +0 -1
- package/dist/esm/ic-breadcrumbs.entry.js.map +0 -1
- package/dist/esm/ic-tab-list.entry.js +0 -141
- package/dist/esm/ic-tab-list.entry.js.map +0 -1
- package/dist/types/components/ic-breadcrumbs/ic-breadcrumbs-test-examples.d.ts +0 -2
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"names":["icHeroCss","Hero","this","rightContent","secondaryHeading","undefined","getThemeForegroundColor","[object Object]","ev","theme","detail","foregroundColor","mode","disableBackgroundParallax","scrolltotop","document","scrollingElement","scrollTop","factor","y","scrollFactor","slotHasContent","el","onComponentRequiredPropUndefined","prop","heading","propName","aligned","dense","subheading","secondarySubheading","backgroundImage","style","background-image","background-position","h","Host","class","IcThemeForegroundEnum","Dark","fullHeight","leftContentFullWidth","name","variant"],"mappings":"kHAAA,MAAMA,EAAY,s9LCkCLC,EAAI,iNA+B+B,mBAKf,2BAKmB,kBAKzB,wBAEQ,wBAED,0CAG7BC,KAAKC,cAAgBD,KAAKE,mBAAqBC,+BAEJC,IAG9CC,mBAAmBC,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BR,KAAKS,gBAAkBF,EAAMG,KAI/BL,WACE,GAAIL,KAAKW,0BAA2B,CAClC,OAGF,MAAMC,EAAcC,SAASC,iBAAiBC,UAC9C,MAAMC,EAAS,GACf,MAAMC,GAAK,IAAML,EAAcI,EAC/BhB,KAAKkB,aAAe,SAAWD,EAAI,KAGrCZ,oBACEL,KAAKC,aAAekB,EAAenB,KAAKoB,GAAI,iBAG9Cf,mBACEgB,EACE,CAAC,CAAEC,KAAMtB,KAAKuB,QAASC,SAAU,YACjC,QAIJnB,sBACEL,KAAKC,aAAekB,EAAenB,KAAKoB,GAAI,iBAG9Cf,SACE,MAAMoB,QACJA,EAAOC,MACPA,EAAKH,QACLA,EAAOI,WACPA,EAAUzB,iBACVA,EAAgB0B,oBAChBA,EAAmBnB,gBACnBA,EAAeoB,gBACfA,EAAeX,aACfA,GACElB,KAEJ,IAAI8B,EAAQ,GAEZ,GAAID,IAAoB1B,UAAW,CACjC2B,EAAQ,CACNC,mBAAoB,OAASF,EAAkB,IAC/CG,sBAAuBd,GAI3B,OACEe,EAACC,EAAI,CACHC,MAAO,CACL9B,CAAC+B,EAAsBC,MACrB5B,IAAoB2B,EAAsBC,KAC5ChC,CAAC,wBAAyBwB,IAAoB1B,WAEhD2B,MAAOA,GAEPG,EAAA,uBAAA,CACER,QAASA,EACTa,WAAU,KACVH,MAAM,qBAENF,EAAA,MAAA,CACEE,MAAO,CACL9B,CAAC,kBAAmB,KACpBA,CAAC,6BAA8BL,KAAKuC,uBAGtCN,EAAA,MAAA,CAAKE,MAAM,WACTF,EAAA,OAAA,CAAMO,KAAK,WACTP,EAAA,gBAAA,CAAeQ,QAASf,EAAQ,KAAO,MACpCH,KAIPU,EAAA,MAAA,CAAKE,MAAM,cACTF,EAAA,OAAA,CAAMO,KAAK,cACTP,EAAA,gBAAA,CAAeQ,QAAQ,QAAQd,KAGnCM,EAAA,MAAA,CAAKE,MAAM,yBACTF,EAAA,OAAA,CAAMO,KAAK,mBAGbtC,IAAqBC,WAAaH,KAAKC,eACvCgC,EAAA,MAAA,CAAKE,MAAM,mBACTF,EAAA,OAAA,CAAMO,KAAK,iBACRtC,GACC+B,EAAA,MAAA,CAAKE,MAAM,uBACTF,EAAA,MAAA,CAAKE,MAAM,qBACTF,EAAA,gBAAA,CAAeQ,QAAQ,MACpBvC,IAGL+B,EAAA,MAAA,CAAKE,MAAM,wBACTF,EAAA,gBAAA,CAAeQ,QAAQ,kBACpBb","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n background-color: var(--ic-theme-tertiary);\n color: var(--ic-theme-text);\n}\n\n:host(.dark) {\n background-color: var(--ic-theme-secondary);\n}\n\n:host(.has-background-image) {\n background-repeat: no-repeat;\n background-position: right -100px;\n background-size: auto calc(100% + 100px);\n box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n :host(.has-background-image) {\n background-position: right -100px !important;\n }\n}\n\n.section-container {\n display: flex;\n align-items: center;\n height: 100%;\n}\n\n.left-container {\n flex-basis: 50%;\n padding: var(--ic-space-xl) 0;\n}\n\n.right-container {\n flex-basis: 50%;\n}\n\n.interaction-container {\n display: flex;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-lg);\n}\n\n.secondary-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-left: var(--ic-space-xxxs) solid var(--ic-theme-text);\n}\n\n.secondary-subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n justify-content: flex-start;\n text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n justify-content: center;\n text-align: center;\n}\n\n.left-container-full-width {\n flex-basis: 100% !important;\n max-width: 66.6%;\n}\n\n@media (min-width: 1044px) {\n :host,\n .section-container {\n min-height: 208px;\n }\n\n :host([dense]),\n :host([dense]) .section-container {\n min-height: 173px;\n }\n\n .left-container {\n flex-basis: 66.6%;\n min-height: 144px;\n }\n\n .right-container {\n flex-basis: 33.3%;\n margin-left: 50px;\n }\n\n .secondary-container {\n min-height: 144px;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 63px;\n }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 256px;\n }\n\n :host([dense]),\n :host([dense]) .section-container {\n min-height: 240px;\n }\n\n :host([secondary-heading]),\n :host([secondary-heading]) .section-container {\n min-height: 224px;\n }\n\n .left-container {\n min-height: 160px;\n }\n\n .secondary-container {\n min-height: 160px;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 94.75px;\n }\n\n .right-container {\n margin-left: 50px;\n }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 256px;\n }\n\n :host([dense]),\n :host([dense]) .section-container {\n min-height: 240px;\n }\n\n :host([secondary-heading]),\n :host([secondary-heading]) .section-container {\n min-height: 224px;\n }\n\n .left-container {\n min-height: 160px;\n }\n\n .secondary-container {\n min-height: 160px;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 34px;\n }\n\n .right-container {\n margin-left: 50px;\n }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 208px;\n }\n\n :host([dense]),\n :host([dense]) .section-container {\n min-height: 173px;\n }\n\n :host([secondary-heading]),\n :host([secondary-heading]) .section-container {\n min-height: 280px;\n }\n\n :host([secondary-heading]) .section-container,\n :host([dense]) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n\n .right-container {\n margin-bottom: 40px;\n }\n}\n\n@media (max-width: 480px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 192px;\n }\n\n :host([dense]),\n :host([dense]) .section-container {\n min-height: 173px;\n }\n\n :host([secondary-heading]),\n :host([secondary-heading]) .section-container {\n min-height: 264px;\n }\n\n :host([secondary-heading]) .section-container,\n :host([dense]) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcAlignment,\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n slotHasContent,\n getThemeForegroundColor,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot right-content - Content will be rendered in the right content area.\n */\n\n@Component({\n tag: \"ic-hero\",\n styleUrl: \"ic-hero.css\",\n shadow: true,\n})\nexport class Hero {\n @Element() el: HTMLIcHeroElement;\n\n /**\n * The heading of the hero\n */\n @Prop() heading!: string;\n\n /**\n * Description for the hero\n */\n @Prop() subheading?: string;\n\n /**\n * Optional secondary heading, replaced by slotted right content\n */\n @Prop() secondaryHeading?: string;\n\n /**\n * Optional secondary subheading, replaced by slotted right content\n */\n @Prop() secondarySubheading?: string;\n\n /**\n * Optional background image\n */\n @Prop() backgroundImage?: string;\n\n /**\n * Whether the background image (if set) scrolls using a parallax effect.\n */\n @Prop() disableBackgroundParallax?: boolean = false;\n\n /**\n * The alignment of the hero content\n */\n @Prop() aligned: IcAlignment = \"left\";\n\n /**\n * The alignment of the hero content\n */\n @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n /**\n * Alter styling for use with dense content/pages\n */\n @Prop() dense: boolean = false;\n\n @State() rightContent: boolean = false;\n\n @State() scrollFactor: string = \"right -100px\";\n\n @State() leftContentFullWidth: boolean =\n !this.rightContent && this.secondaryHeading === undefined;\n\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n @Listen(\"icThemeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.foregroundColor = theme.mode;\n }\n\n @Listen(\"scroll\", { target: \"document\" })\n doScroll(): void {\n if (this.disableBackgroundParallax) {\n return;\n }\n\n const scrolltotop = document.scrollingElement.scrollTop;\n const factor = 0.4;\n const y = -100 + scrolltotop * factor;\n this.scrollFactor = \"right \" + y + \"px\";\n }\n\n componentWillLoad(): void {\n this.rightContent = slotHasContent(this.el, \"right-content\");\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Hero\"\n );\n }\n\n componentWillRender(): void {\n this.rightContent = slotHasContent(this.el, \"right-content\");\n }\n\n render() {\n const {\n aligned,\n dense,\n heading,\n subheading,\n secondaryHeading,\n secondarySubheading,\n foregroundColor,\n backgroundImage,\n scrollFactor,\n } = this;\n\n let style = {};\n\n if (backgroundImage !== undefined) {\n style = {\n \"background-image\": \"url(\" + backgroundImage + \")\",\n \"background-position\": scrollFactor,\n };\n }\n\n return (\n <Host\n class={{\n [IcThemeForegroundEnum.Dark]:\n foregroundColor === IcThemeForegroundEnum.Dark,\n [\"has-background-image\"]: backgroundImage !== undefined,\n }}\n style={style}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight\n class=\"section-container\"\n >\n <div\n class={{\n [\"left-container\"]: true,\n [\"left-container-full-width\"]: this.leftContentFullWidth,\n }}\n >\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography variant={dense ? \"h2\" : \"h1\"}>\n {heading}\n </ic-typography>\n </slot>\n </div>\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n <div class=\"interaction-container\">\n <slot name=\"interaction\"></slot>\n </div>\n </div>\n {(secondaryHeading !== undefined || this.rightContent) && (\n <div class=\"right-container\">\n <slot name=\"right-content\">\n {secondaryHeading && (\n <div class=\"secondary-container\">\n <div class=\"secondary-heading\">\n <ic-typography variant=\"h4\">\n {secondaryHeading}\n </ic-typography>\n </div>\n <div class=\"secondary-subheading\">\n <ic-typography variant=\"subtitle-small\">\n {secondarySubheading}\n </ic-typography>\n </div>\n </div>\n )}\n </slot>\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as e,h as o,H as i,g as a}from"./p-f9370be6.js";import{a as r}from"./p-e5a09372.js";const n='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--indicator-initial-color:rgba(23 89 188 / 0%);--indicator-color:var(--ic-action-default);--focus-indicator:var(--ic-border-focus);--label-color:var(--ic-color-primary-text);--background-color-hover:var(--ic-action-default-bg-hover);--background-color-active:var(--ic-action-default-bg-active);display:flex;align-items:center;border-radius:0;color:var(--label-color);height:40px;padding:0 var(--ic-space-md);cursor:pointer;position:relative;border-bottom:var(--ic-space-xxs) solid var(--indicator-initial-color);gap:var(--ic-space-xs);transition:all var(--ic-easing-transition-fast)}:host(:focus){box-shadow:var(--focus-indicator);border-radius:var(--ic-border-radius)}:host(:focus-visible){outline:none}:host(:hover){background-color:var(--background-color-hover)}:host(:active){background-color:var(--background-color-active)}:host(.ic-tab-dark){--indicator-initial-color:rgb(255 255 255 / 0%);--indicator-color:rgb(255 255 255 / 100%);--focus-indicator:var(--ic-border-focus);--label-color:white;--background-color-hover:var(--ic-action-dark-bg-hover);--background-color-active:var(--ic-action-dark-bg-active)}:host([selected]){border-bottom:var(--ic-space-xxs) solid var(--indicator-color)}:host([disabled]){pointer-events:none;color:var(--ic-architectural-300)}:host([selected].with-transition){transition:all var(--ic-easing-transition-slow),\n border-color var(--ic-transition-duration-slow)}.ic-tab-label{pointer-events:none}::slotted(svg){fill:var(--label-color)}';const s=class{constructor(o){t(this,o);this.tabClick=e(this,"tabClick",7);this.tabFocus=e(this,"tabFocus",7);this.isInitialRender=true;this.focusFromClick=false;this.handleClick=()=>{this.tabClick.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition});if(this.focusFromClick){this.tabFocus.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition});this.focusFromClick=false}};this.handleFocus=()=>{if(!this.focusFromClick){this.tabFocus.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition})}};this.handleMouseDown=()=>{this.focusFromClick=true};this.contextId="default";this.disabled=false;this.selected=false;this.tabId=undefined;this.tabPosition=undefined;this.dark=false}componentDidUpdate(){this.isInitialRender=false}componentDidLoad(){r([{prop:this.tabPosition,propName:"tab-position"}],"Tab")}render(){const{disabled:t,selected:e,dark:a}=this;return o(i,{class:{["with-transition"]:!this.isInitialRender,["ic-tab-dark"]:a},role:"tab","aria-selected":e?"true":"false",onClick:this.handleClick,onFocus:this.handleFocus,onMouseDown:this.handleMouseDown,"aria-disabled":t?"true":"false",tabindex:this.selected?0:-1},this.host.querySelector('[slot="icon"]')&&o("slot",{name:"icon"}),o("ic-typography",{class:"ic-tab-label",variant:"label"},o("span",null,o("slot",null))))}get host(){return a(this)}};s.style=n;export{s as ic_tab};
|
2
|
-
//# sourceMappingURL=p-17420c90.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-tab/ic-tab.css?tag=ic-tab&encapsulation=shadow","src/components/ic-tab/ic-tab.tsx"],"names":["icTabCss","Tab","this","isInitialRender","focusFromClick","handleClick","tabClick","emit","tabId","contextId","position","tabPosition","tabFocus","handleFocus","handleMouseDown","[object Object]","onComponentRequiredPropUndefined","prop","propName","disabled","selected","dark","h","Host","class","role","aria-selected","onClick","onFocus","onMouseDown","aria-disabled","tabindex","host","querySelector","name","variant"],"mappings":"oGAAA,MAAMA,EAAW,mzHCqBJC,EAAG,qGAiCNC,KAAAC,gBAA2B,KAC3BD,KAAAE,eAA0B,MAE1BF,KAAAG,YAAc,KACpBH,KAAKI,SAASC,KAAK,CACjBC,MAAON,KAAKM,MACZC,UAAWP,KAAKO,UAChBC,SAAUR,KAAKS,cAEjB,GAAIT,KAAKE,eAAgB,CACvBF,KAAKU,SAASL,KAAK,CACjBC,MAAON,KAAKM,MACZC,UAAWP,KAAKO,UAChBC,SAAUR,KAAKS,cAEjBT,KAAKE,eAAiB,QAIlBF,KAAAW,YAAc,KACpB,IAAKX,KAAKE,eAAgB,CACxBF,KAAKU,SAASL,KAAK,CACjBC,MAAON,KAAKM,MACZC,UAAWP,KAAKO,UAChBC,SAAUR,KAAKS,gBAKbT,KAAAY,gBAAkB,KAIxBZ,KAAKE,eAAiB,qBA9DsB,wBAKjB,oBAGiB,gEASrB,MAgDzBW,qBACEb,KAAKC,gBAAkB,MAGzBY,mBACEC,EACE,CAAC,CAAEC,KAAMf,KAAKS,YAAaO,SAAU,iBACrC,OAIJH,SACE,MAAMI,SAAEA,EAAQC,SAAEA,EAAQC,KAAEA,GAASnB,KACrC,OACEoB,EAACC,EAAI,CACHC,MAAO,CACLT,CAAC,oBAAqBb,KAAKC,gBAC3BY,CAAC,eAAgBM,GAEnBI,KAAK,MAAKC,gBACKN,EAAW,OAAS,QACnCO,QAASzB,KAAKG,YACduB,QAAS1B,KAAKW,YACdgB,YAAa3B,KAAKY,gBAAegB,gBAClBX,EAAW,OAAS,QACnCY,SAAU7B,KAAKkB,SAAW,GAAK,GAE9BlB,KAAK8B,KAAKC,cAAc,kBAAoBX,EAAA,OAAA,CAAMY,KAAK,SACxDZ,EAAA,gBAAA,CAAeE,MAAM,eAAeW,QAAQ,SAC1Cb,EAAA,OAAA,KACEA,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n --indicator-initial-color: rgba(23 89 188 / 0%);\n --indicator-color: var(--ic-action-default);\n --focus-indicator: var(--ic-border-focus);\n --label-color: var(--ic-color-primary-text);\n --background-color-hover: var(--ic-action-default-bg-hover);\n --background-color-active: var(--ic-action-default-bg-active);\n\n display: flex;\n align-items: center;\n border-radius: 0;\n color: var(--label-color);\n height: 40px;\n padding: 0 var(--ic-space-md);\n cursor: pointer;\n position: relative;\n border-bottom: var(--ic-space-xxs) solid var(--indicator-initial-color);\n gap: var(--ic-space-xs);\n transition: all var(--ic-easing-transition-fast);\n}\n\n:host(:focus) {\n box-shadow: var(--focus-indicator);\n border-radius: var(--ic-border-radius);\n}\n\n:host(:focus-visible) {\n outline: none;\n}\n\n:host(:hover) {\n background-color: var(--background-color-hover);\n}\n\n:host(:active) {\n background-color: var(--background-color-active);\n}\n\n:host(.ic-tab-dark) {\n --indicator-initial-color: rgb(255 255 255 / 0%);\n --indicator-color: rgb(255 255 255 / 100%);\n --focus-indicator: var(--ic-border-focus);\n --label-color: white;\n --background-color-hover: var(--ic-action-dark-bg-hover);\n --background-color-active: var(--ic-action-dark-bg-active);\n}\n\n:host([selected]) {\n border-bottom: var(--ic-space-xxs) solid var(--indicator-color);\n}\n\n:host([disabled]) {\n pointer-events: none;\n color: var(--ic-architectural-300);\n}\n\n:host([selected].with-transition) {\n transition: all var(--ic-easing-transition-slow),\n border-color var(--ic-transition-duration-slow);\n}\n\n.ic-tab-label {\n pointer-events: none;\n}\n\n::slotted(svg) {\n fill: var(--label-color);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n} from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\n\n/**\n * @slot icon - Content will be rendered next to the tab label.\n */\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n @Element() host: HTMLIcTabElement;\n\n /** @internal Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /**\n * Disables the tab.\n */\n @Prop() disabled?: boolean = false;\n\n /** @internal Will display a selected indicator and set tabIndex. */\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /** @internal The shared ID between panel and tab. */\n @Prop({ reflect: true }) tabId?: string;\n\n /** @internal The position of the tab inside the tabs array in context. */\n @Prop() tabPosition!: number;\n\n /** @internal Determines whether the dark variant of the tabs should be displayed. */\n @Prop() dark?: boolean = false;\n\n /**\n * Called when a tab is selected.\n */\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /**\n * @internal Called when a tab is focussed.\n */\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n private isInitialRender: boolean = true;\n private focusFromClick: boolean = false;\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a seperate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.tabPosition, propName: \"tab-position\" }],\n \"Tab\"\n );\n }\n\n render() {\n const { disabled, selected, dark } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-dark\"]: dark,\n }}\n role=\"tab\"\n aria-selected={selected ? \"true\" : \"false\"}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n aria-disabled={disabled ? \"true\" : \"false\"}\n tabindex={this.selected ? 0 : -1}\n >\n {this.host.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as i,h as t,H as a,g as e}from"./p-f9370be6.js";import{c as o}from"./p-44512ebe.js";import{c as n}from"./p-e28af65b.js";import{x as s,i as l,D as r,g as p,f as d,c,a as h,j as v,I as g}from"./p-e5a09372.js";const m=`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">\n <path d="M0 0h24v24H0V0z" fill="none" />\n <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />\n <title>menu icon</title>\n</svg>\n`;const b=":host{display:block;--side-navigation-position:fixed;--side-navigation-position-left:0;--side-navigation-position-top:var(--ic-space-xxl);--side-navigation-height:var(--ic-space-xxl);--sm-side-navigation-top-bar-height:56px;--sm-side-navigation-collapsed-labels-width:96px;--sm-side-navigation-expand-transition-duration:var(\n --ic-transition-duration-slow\n );--side-navigation-width:320px}:host>*{box-sizing:border-box}.side-navigation{display:flex;flex-direction:column;width:var(--side-navigation-width);color:var(--ic-theme-text);position:var(--side-navigation-position);top:var(--side-navigation-position-top);left:calc(var(--side-navigation-width) * -1);bottom:0;background-color:var(--ic-theme-primary)}:host(.inline) .side-navigation{position:absolute;height:100%}:host(.anchor-right) .side-navigation{right:calc(var(--side-navigation-width) * -1)}.classification-spacing{margin-bottom:var(--ic-space-lg)}.navigation-list{padding:0;margin:0;list-style:none}.side-navigation-inner{background-color:var(--ic-theme-primary);display:flex;flex-direction:column;flex:1 1 0;overflow:auto;visibility:hidden}:host(.inline) .side-navigation-inner{flex:1}:host(.xs-menu-open) .side-navigation{transition:left var(--ic-easing-transition-slow);left:0}:host(.xs-menu-close) .side-navigation{left:calc(var(--side-navigation-width) * -1);transition:left var(--ic-easing-transition-slow)}:host(.anchor-right.xs-menu-open) .side-navigation{right:0;left:auto}:host(.anchor-right.xs-menu-close) .side-navigation{right:calc(var(--side-navigation-width) * -1);left:auto;transition:right var(--ic-easing-transition-slow)}.bottom-wrapper{border-top:var(--ic-keyline-lighten);position:sticky;bottom:0;left:0;z-index:2;box-shadow:-3px -3px 8px rgb(0 0 0 / 20%);background-color:var(--ic-theme-primary);display:flex;flex-direction:column;visibility:hidden}:host(.dark) .bottom-wrapper{border-top:var(--ic-keyline-darken)}.top-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--side-navigation-height);padding:var(--ic-space-xs);box-sizing:border-box;background-color:var(--ic-theme-primary);position:fixed;top:0;left:0;right:0;border-bottom:var(--ic-keyline-darken);box-shadow:var(--ic-elevation-overlay);z-index:2;overflow:hidden;visibility:visible}:host(.inline) .top-bar{position:absolute}.top-bar.dark a:focus{box-shadow:var(--ic-border-focus)}.top-bar.light{border-bottom:var(--ic-keyline-lighten)}.app-title-wrapper{display:flex;margin-left:var(--ic-space-xs);border-left:var(--ic-keyline-darken);padding-left:var(--ic-space-xxs);color:var(--ic-theme-text);align-items:center}@media screen and (min-width: 340px){.app-title-wrapper ic-typography{margin-left:var(--ic-space-xs)}}:host .title-link:link{display:flex;align-items:center;transition:box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);text-decoration:none;padding:var(--ic-space-xxs);color:var(--ic-theme-text)}:host .title-link:visited,:host .title-link:active{color:var(--ic-theme-text)}:host .title-link:hover{border-radius:var(--ic-border-radius);background-color:var(--ic-theme-hover)}:host .title-link:active{background-color:var(--ic-theme-active)}:host .title-link:focus{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:none;background-color:transparent}:host .title-link ic-typography{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.app-title-wrapper ::slotted(svg){fill:var(--ic-theme-text)}.app-icon-container{display:none}.button-label{display:flex;align-items:center}.mobile-top-bar-menu-icon{display:flex}.menu-button{width:104px}.app-status-wrapper{position:absolute;right:var(--ic-space-md);top:0;bottom:0;width:auto;display:flex;align-items:center;pointer-events:none}.app-status-wrapper .app-version{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-status-wrapper .app-status{border-radius:80px;background-color:var(--ic-theme-text);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-right:var(--ic-space-xs);max-width:100px}.app-status-wrapper .app-status-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}:host(.dark) .app-status-wrapper .app-status{color:var(--ic-color-white-text)}.navigation-landmark-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}::slotted(ic-navigation-group){--navigation-group-height:44px;--navigation-group-width:100%;--navigation-group-justify-content:space-between;--navigation-group-hover:var(--ic-theme-hover);--navigation-group-text-hover:var(--ic-theme-text);--navigation-item-child-height:56px;--navigation-item-child-active:var(--ic-action-dark-bg-active);--navigation-item-child-color:var(--ic-theme-text);--navigation-group-expand-toggle-padding:4px}::slotted(ic-navigation-item),::slotted(ic-navigation-group){--navigation-item-height:56px;--navigation-item-width:auto;--navigation-item-justify-content:flex-start}.bottom-side-nav{position:relative;align-content:flex-end;height:var(--sm-side-navigation-top-bar-height)}.primary-navigation{flex:1;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}.primary-navigation::-webkit-scrollbar{display:none}.primary-navigation,.secondary-navigation{overflow-x:hidden}.bottom-side-nav .menu-expand-button{display:none}.menu-visibility-visible{visibility:visible}.menu-visibility-hidden{visibility:hidden}@media screen and (min-width: 340px){.app-icon-container{display:flex}}@media screen and (min-width: 577px){:host{display:flex;flex-direction:column;height:100vh;position:var(--side-navigation-position);left:0;top:0;bottom:0}:host(.inline){position:absolute}:host(.static){position:relative;left:auto;top:auto;bottom:auto}.app-icon-container{padding:var(--ic-space-xxs) 0}.top-bar{--side-navigation-height:var(--sm-side-navigation-top-bar-height);position:relative;padding:0;box-shadow:-3px 3px 8px rgb(0 0 0 / 20%)}:host(.inline) .top-bar{position:relative}:host(.anchor-right) .top-bar{box-shadow:3px 3px 8px rgb(0 0 0 / 20%)}:host(.anchor-right) .bottom-wrapper{box-shadow:3px -3px 8px rgb(0 0 0 / 20%)}.side-navigation,.top-bar{width:var(--sm-side-navigation-top-bar-height)}:host(.sm-collapsed){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed.collapsed-labels){width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-expanded){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow);box-shadow:var(--ic-elevation-overlay)}.side-navigation{--side-navigation-position-top:0;flex:1;position:relative;top:auto;left:auto;bottom:auto}:host(.inline) .side-navigation{position:relative}:host(.anchor-right) .side-navigation{left:auto;right:0}.side-navigation-inner{width:100%;visibility:visible}.bottom-wrapper{visibility:visible}.app-title-wrapper{margin-left:0;border-left:none;padding:var(--ic-space-sm)}.app-title-wrapper ::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg)}.app-title-wrapper ic-typography{margin:calc(-1 * 4.5px) 0 calc(-1 * 4.5px) var(--ic-space-md);font-weight:var(--ic-font-weight-semibold)}:host(.sm-collapsed) .app-title-wrapper ic-typography{position:absolute;left:-9999px;opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.sm-expanded) ic-typography{position:relative;left:0}:host(.sm-expanded) :is(.side-navigation,.top-bar){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed) :is(.side-navigation,.top-bar){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.anchor-right.sm-expanded) :is(.side-navigation,.top-bar){left:auto;right:0}.app-status-wrapper,:host(.sm-collapsed) .app-status-wrapper{display:none}:host(.sm-expanded) .app-status-wrapper{display:flex}.bottom-side-nav{justify-items:flex-end;display:flex;flex-direction:column}.bottom-side-nav .menu-expand-button{padding-left:var(--ic-space-md);height:var(--sm-side-navigation-top-bar-height);width:100%;color:var(--ic-theme-text);background-color:transparent;outline:none;border:none;cursor:pointer;display:flex;transition:var(--ic-easing-transition-fast)}.bottom-side-nav .menu-expand-button svg{justify-items:flex-start;align-self:center}.bottom-side-nav .menu-expand-button:hover{background-color:var(--ic-theme-hover)}:host .bottom-side-nav{outline:none}:host .bottom-side-nav .menu-expand-button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1);transition:transform var(--ic-easing-transition-slow)}:host(.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1);transition:transform var(--ic-easing-transition-slow)}:host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1)}:host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1)}:host(.sm-collapsed) ::slotted(ic-navigation-item){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-item),:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-item-label-opacity:0}:host(.sm-expanded) ::slotted(ic-navigation-item),:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-group-title-position:absolute;--navigation-group-title-position-left:-9999px;--navigation-group-title-opacity:none}:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-group-title-position:relative;--navigation-group-title-position-left:0;--navigation-group-expand-toggle-padding:4px;--navigation-group-title-opacity:flex}:host(.sm-collapsed.collapsed-labels) .side-navigation,:host(.sm-collapsed.collapsed-labels) .top-bar{width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-collapsed.collapsed-labels) .menu-expand-button{padding:0}:host(.sm-collapsed.collapsed-labels) .app-title-wrapper{width:100%;justify-content:center}:host(.sm-collapsed.collapsed-labels) ::slotted(ic-navigation-group){--navigation-group-justify-content:center;--navigation-item-label-opacity:1;--navigation-group-item-min-width:100%;--navigation-group-expand-toggle-padding:16px}:host(.collapsed-labels) .bottom-side-nav .menu-expand-button{justify-content:center}:host .collapsed-icon-labels-start{visibility:hidden;opacity:0}:host .collapsed-icon-labels-end{visibility:visible;opacity:1;transition:visibility 0s, opacity var(--ic-easing-transition-slow)}}@media screen and (min-width: 993px){:host{position:relative;left:auto;top:auto;bottom:auto}:host(.inline){position:relative}:host(.sm-expanded){box-shadow:none}}";const u=class{constructor(a){i(this,a);this.ANIMATION_DURATION=parseInt(s("--ic-transition-duration"))||0;this.emitSideNavigationExpanded=i=>{const t=new CustomEvent("sideNavExpanded",{detail:{sideNavExpanded:i.sideNavExpanded,sideNavMobile:i.sideNavMobile}});this.el.dispatchEvent(t)};this.toggleMenu=()=>{this.menuOpen=!this.menuOpen;this.setMobileMenuAriaAttributes(this.menuOpen);this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);this.emitSideNavigationExpanded({sideNavExpanded:this.menuOpen,sideNavMobile:true})};this.setToggleMenuFlyoutMenuVisibility=i=>{const t=this.el.shadowRoot.querySelector("#side-navigation");const a=t.querySelector(".side-navigation-inner");const e=t.querySelector(".bottom-wrapper");if(i){e.classList.add("menu-visibility-visible");a.classList.add("menu-visibility-visible")}else{setTimeout((()=>{a.classList.remove("menu-visibility-visible");e.classList.remove("menu-visibility-visible")}),this.ANIMATION_DURATION)}};this.setMobileMenuAriaAttributes=i=>{const t=this.el.shadowRoot.querySelector("#menu-button").shadowRoot.querySelector("button");if(i){t.setAttribute("aria-expanded","true");t.setAttribute("aria-label","Close navigation menu")}else{t.setAttribute("aria-expanded","false");t.setAttribute("aria-label","Open navigation menu")}};this.setAndRemoveNoWrapAfterMenuExpanded=()=>{const i=this.el.shadowRoot.querySelector(".title-link ic-typography");i.classList.add("ic-typography-no-wrap");setTimeout((()=>{i.classList.remove("ic-typography-no-wrap")}),this.ANIMATION_DURATION)};this.toggleMenuExpanded=()=>{this.menuExpanded=!this.menuExpanded;if(this.menuExpanded){this.setAndRemoveNoWrapAfterMenuExpanded()}this.arrangeSlottedNavigationItem(this.menuExpanded);this.displayTooltipWithExpandedLongLabel(this.menuExpanded);if(this.collapsedIconLabels){this.animateCollapsedIconLabels()}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded})};this.arrangeSlottedNavigationItem=i=>{const t=this.el.querySelectorAll("ic-navigation-item");t.forEach((t=>{const a=l(t,"navigation-item");if(a){const a=t.querySelector("[slot='navigation-item']");const e=document.createElement("div");const o=a.querySelector("svg");const n=t.textContent.trim();const s=document.createElement("ic-typography");s.classList.add("ic-typography-label","hydrated","navigation-item-side-nav-slotted-text");e.className="icon-container";e.append(o);a.textContent="";s.textContent=n;a.append(e);a.append(s);if(this.collapsedIconLabels){this.styleSlottedCollapsedIconLabels(i,s)}else{this.styleSlottedIconLabels(i,s)}}}))};this.styleSlottedCollapsedIconLabels=(i,t)=>{if(i){t.style.marginTop="0";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}else{t.style.marginTop="10px";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}};this.styleSlottedIconLabels=(i,t)=>{if(i){t.style.opacity="1";t.style.visibility="visible";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}else{t.style.opacity="0";t.style.visibility="hidden";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}};this.animateCollapsedIconLabels=()=>{const i=this.el.shadowRoot.querySelector(".primary-navigation");const t=this.el.shadowRoot.querySelector(".bottom-wrapper > .secondary-navigation");if(i){i.classList.remove("collapsed-icon-labels-end");i.classList.add("collapsed-icon-labels-start")}if(t){t.classList.remove("collapsed-icon-labels-end");t.classList.add("collapsed-icon-labels-start")}this.el.addEventListener("transitionend",(()=>{if(i){i.classList.remove("collapsed-icon-labels-start");i.classList.add("collapsed-icon-labels-end")}if(t){t.classList.remove("collapsed-icon-labels-start");t.classList.add("collapsed-icon-labels-end")}}))};this.paddingIconWidth=i=>{const t=i[0].shadowRoot&&i[0].shadowRoot.querySelector("ic-tooltip a")||i[0].querySelector("a");const a=i[0].querySelector("svg");const e={gap:window.getComputedStyle(t).gap,iconWidth:window.getComputedStyle(a).width,paddingLeft:window.getComputedStyle(t).paddingLeft};return Object.values(e).reduce(((i,t)=>i+=parseInt(t)),0)};this.displayTooltipWithExpandedLongLabel=i=>{let t;if(i){t=setTimeout((()=>{const i=this.el.clientWidth;const t=Array.from(this.el.querySelectorAll("ic-navigation-item"));const a=t.length?this.paddingIconWidth(t):0;t.forEach((t=>{var e,o;const n=((e=t.shadowRoot&&t.shadowRoot.querySelector("ic-tooltip .link ic-typography.ic-typography-label"))===null||e===void 0?void 0:e.scrollWidth)||((o=t.querySelector("ic-typography.ic-typography-label"))===null||o===void 0?void 0:o.scrollWidth);if(n>i-a){t.setAttribute("display-navigation-tooltip","true")}}))}),this.ANIMATION_DURATION)}else{clearTimeout(t);const i=Array.from(this.el.querySelectorAll("ic-navigation-item"));i.forEach((i=>{i.setAttribute("display-navigation-tooltip","false")}))}};this.setMenuExpanded=i=>{this.menuExpanded=i};this.setParentPaddingTop=i=>{this.el.parentElement.style.paddingTop=i};this.setParentPaddingLeft=i=>{this.el.parentElement.style.paddingLeft=i};this.resizeObserver=null;this.resizeObserverCallback=i=>{if(i!==this.deviceSize){this.deviceSize=i;if(i===r.S){if(!this.disableAutoParentStyling){const i=this.el.shadowRoot.querySelector(".top-bar").scrollHeight;this.setParentPaddingTop(`${i}px`);this.setParentPaddingLeft("0")}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:true})}else{if(!this.disableAutoParentStyling){this.setParentPaddingTop("0")}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:false})}if(i>r.L){if(!this.disableAutoParentStyling){this.setParentPaddingTop("0");this.setParentPaddingLeft("0")}}else if(i>r.S&&i<=r.L&&!this.static&&!this.disableAutoParentStyling){if(this.collapsedIconLabels){this.setParentPaddingLeft("calc(var(--ic-space-xxl) * 2)")}else{this.setParentPaddingLeft("calc(var(--ic-space-xxl) + var(--ic-space-xs))")}}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const i=p();this.deviceSizeAppTitle=i;this.resizeObserverCallback(i)}));this.resizeObserver.observe(document.body,{box:"content-box"})};this.setCollapsedIconLabels=()=>{const i=Array.from(this.el.querySelectorAll("ic-navigation-item"));i.forEach((i=>{i.setAttribute("collapsed-icon-label","true")}))};this.styleSlottedCollapsedIconLabel=()=>{const i=Array.from(this.el.querySelectorAll(".navigation-item-side-nav-slotted-text"));i.forEach((i=>{var t,a;if((a=(t=i===null||i===void 0?void 0:i.parentElement)===null||t===void 0?void 0:t.parentElement)===null||a===void 0?void 0:a.classList.contains("navigation-item-side-nav-collapsed-with-label")){i.style.whiteSpace="nowrap";i.style.overflow="hidden";i.style.textOverflow="ellipsis";i.style.marginTop="10px"}}))};this.renderTopBar=({isSDevice:i,foregroundColor:a,menuOpen:e,href:n,isAppNameSubtitleVariant:s,appTitle:l})=>t("div",{class:{"top-bar":true,[this.foregroundColor]:true}},i&&t("nav",{"aria-labelledby":"menu-navigation-toggle-button-landmark","aria-hidden":"false"},t("ic-button",{"aria-label":"Open navigation menu",class:"menu-button",id:"menu-button",variant:"secondary",size:"dense","full-width":"true",buttonStyle:a,onClick:this.toggleMenu,"aria-owns":"side-navigation","aria-haspopup":"true","aria-expanded":"false"},t("span",{class:"mobile-top-bar-menu-icon",slot:"icon",innerHTML:e?o:m}),e?"Close":"Menu"),t("span",{id:"menu-navigation-toggle-button-landmark",class:"navigation-landmark-title","aria-hidden":"true"},"Navigation menu toggle button")),t("div",{class:"app-title-wrapper"},t("a",{href:n,class:"title-link"},t("div",{class:"app-icon-container","aria-hidden":"true"},t("slot",{name:"app-icon"})),t("ic-typography",{variant:s?"subtitle-small":"h3"},l))));this.appTitle=undefined;this.status=undefined;this.version=undefined;this.expanded=false;this.href="/";this.static=false;this.collapsedIconLabels=false;this.inline=false;this.disableAutoParentStyling=false;this.foregroundColor=d();this.menuOpen=false;this.menuExpanded=false;this.deviceSize=r.XL;this.deviceSizeAppTitle=r.S;this.hasSecondaryNavigation=false}themeChangeHandler(i){const t=i.detail;this.foregroundColor=t.mode}componentWillLoad(){if(this.expanded){this.setMenuExpanded(true)}else{this.setMenuExpanded(false)}if(this.collapsedIconLabels){this.setCollapsedIconLabels()}this.hasSecondaryNavigation=l(this.el,"secondary-navigation")}componentDidLoad(){this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:this.deviceSize===r.S});c(this.runResizeObserver);this.arrangeSlottedNavigationItem();this.styleSlottedCollapsedIconLabel();this.displayTooltipWithExpandedLongLabel(this.menuExpanded);h([{prop:this.appTitle,propName:"app-title"}],"Side Navigation")}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){const{appTitle:i,menuOpen:e,foregroundColor:o,menuExpanded:s,href:p,status:d,version:c,collapsedIconLabels:h,inline:m}=this;const b=this.deviceSize===r.S;const u=this.deviceSize===r.M;const x=this.deviceSize>=r.L;const f=this.deviceSizeAppTitle===r.S;const y=u||x&&!this.static;const w={isSDevice:b,foregroundColor:o,menuOpen:e,href:p,isAppNameSubtitleVariant:f,appTitle:i};return t(a,{class:{"xs-menu-open":e&&b,"xs-menu-close":!e&&b,"sm-collapsed":!b&&!s,"sm-expanded":!b&&s,[g.Dark]:o===g.Dark,["collapsed-labels"]:!b&&!s&&h,["static"]:this.static,["inline"]:m}},b&&this.renderTopBar(Object.assign({},w)),t("div",{class:"side-navigation",id:"side-navigation"},!b&&this.renderTopBar(Object.assign({},w)),t("div",{class:"side-navigation-inner"},l(this.el,"primary-navigation")&&t("nav",{class:"primary-navigation","aria-labelledby":"primary-navigation-landmark"},t("span",{"aria-hidden":"true",class:"navigation-landmark-title",id:"primary-navigation-landmark"},"Primary"),t("ul",{class:"navigation-list"},t("slot",{name:"primary-navigation"})))),t("div",{class:{["bottom-wrapper"]:true,["classification-spacing"]:v()}},l(this.el,"secondary-navigation")&&t("nav",{class:"secondary-navigation","aria-labelledby":"secondary-navigation-landmark"},t("span",{"aria-hidden":"true",class:"navigation-landmark-title",id:"secondary-navigation-landmark"},"Secondary"),t("ul",{class:"navigation-list"},t("slot",{name:"secondary-navigation"}))),t("div",{class:"bottom-side-nav"},this.hasSecondaryNavigation&&t("ic-divider",null),y&&t("button",{class:"menu-expand-button",innerHTML:n,onClick:this.toggleMenuExpanded,"aria-label":`${s?"Collapse":"Expand"} side navigation`}),t("div",{class:"app-status-wrapper"},d!==""&&t("div",{class:{["app-status"]:true}},t("ic-typography",{"aria-label":"app tag",variant:"label-uppercase",class:"app-status-text"},d)),c!==""&&t("ic-typography",{variant:"label",class:"app-version","aria-label":"app version"},c))))))}get el(){return e(this)}};u.style=b;export{u as ic_side_navigation};
|
2
|
-
//# sourceMappingURL=p-17f3a2bd.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-side-navigation/ic-side-navigation.css?tag=ic-side-navigation&encapsulation=shadow","src/components/ic-side-navigation/ic-side-navigation.tsx"],"names":["icSideNavigationCss","SideNavigation","this","ANIMATION_DURATION","parseInt","getCssProperty","emitSideNavigationExpanded","objDetails","event","CustomEvent","detail","sideNavExpanded","sideNavMobile","el","dispatchEvent","toggleMenu","menuOpen","setMobileMenuAriaAttributes","setToggleMenuFlyoutMenuVisibility","sideNav","shadowRoot","querySelector","sideNavInner","bottomWrapper","classList","add","setTimeout","remove","nativeButton","setAttribute","setAndRemoveNoWrapAfterMenuExpanded","appTitle","toggleMenuExpanded","menuExpanded","arrangeSlottedNavigationItem","displayTooltipWithExpandedLongLabel","collapsedIconLabels","animateCollapsedIconLabels","navItems","querySelectorAll","forEach","navItem","hasUsedSlot","isSlotUsed","navItemSlot","iconWrapper","document","createElement","icon","label","textContent","trim","icTypography","className","append","styleSlottedCollapsedIconLabels","styleSlottedIconLabels","style","marginTop","whiteSpace","overflow","textOverflow","opacity","visibility","transition","primaryNavigationWrapper","secondaryNavigationWrapper","addEventListener","paddingIconWidth","navItemLink","navItemSVG","navStyles","gap","window","getComputedStyle","iconWidth","width","paddingLeft","Object","values","reduce","prev","curr","timer","sideNavWidth","clientWidth","navigationItems","Array","from","paddingIconDelta","length","navigationItem","icTypographyScrollWidth","_a","scrollWidth","_b","clearTimeout","setMenuExpanded","expanded","setParentPaddingTop","value","parentElement","paddingTop","setParentPaddingLeft","resizeObserver","resizeObserverCallback","currSize","deviceSize","DEVICE_SIZES","S","disableAutoParentStyling","topBarHeight","scrollHeight","L","static","runResizeObserver","ResizeObserver","getCurrentDeviceSize","deviceSizeAppTitle","observe","body","box","setCollapsedIconLabels","styleSlottedCollapsedIconLabel","dynamicSlottedIcTypographyComps","contains","renderTopBar","isSDevice","foregroundColor","href","isAppNameSubtitleVariant","h","class","top-bar","[object Object]","aria-labelledby","aria-hidden","aria-label","id","variant","size","full-width","buttonStyle","onClick","aria-owns","aria-haspopup","aria-expanded","slot","innerHTML","closeIcon","menuIcon","name","getThemeForegroundColor","XL","ev","theme","mode","hasSecondaryNavigation","checkResizeObserver","onComponentRequiredPropUndefined","prop","propName","disconnect","status","version","inline","isMdDevice","M","isLgDevice","displayExpandBtn","topBarProps","Host","xs-menu-open","xs-menu-close","sm-collapsed","sm-expanded","IcThemeForegroundEnum","Dark","assign","hasClassificationBanner","chevronIcon"],"mappings":"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","sourcesContent":[":host {\n display: block;\n\n --side-navigation-position: fixed;\n --side-navigation-position-left: 0;\n --side-navigation-position-top: var(--ic-space-xxl);\n --side-navigation-height: var(--ic-space-xxl);\n --sm-side-navigation-top-bar-height: 56px;\n --sm-side-navigation-collapsed-labels-width: 96px;\n --sm-side-navigation-expand-transition-duration: var(\n --ic-transition-duration-slow\n );\n --side-navigation-width: 320px;\n}\n\n:host > * {\n box-sizing: border-box;\n}\n\n.side-navigation {\n display: flex;\n flex-direction: column;\n width: var(--side-navigation-width);\n color: var(--ic-theme-text);\n position: var(--side-navigation-position);\n top: var(--side-navigation-position-top);\n left: calc(var(--side-navigation-width) * -1);\n bottom: 0;\n background-color: var(--ic-theme-primary);\n}\n\n:host(.inline) .side-navigation {\n position: absolute;\n height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n.side-navigation-inner {\n background-color: var(--ic-theme-primary);\n display: flex;\n flex-direction: column;\n flex: 1 1 0;\n overflow: auto;\n visibility: hidden;\n}\n\n:host(.inline) .side-navigation-inner {\n flex: 1;\n}\n\n:host(.xs-menu-open) .side-navigation {\n transition: left var(--ic-easing-transition-slow);\n left: 0;\n}\n\n:host(.xs-menu-close) .side-navigation {\n left: calc(var(--side-navigation-width) * -1);\n transition: left var(--ic-easing-transition-slow);\n}\n\n:host(.anchor-right.xs-menu-open) .side-navigation {\n right: 0;\n left: auto;\n}\n\n:host(.anchor-right.xs-menu-close) .side-navigation {\n right: calc(var(--side-navigation-width) * -1);\n left: auto;\n transition: right var(--ic-easing-transition-slow);\n}\n\n.bottom-wrapper {\n border-top: var(--ic-keyline-lighten);\n position: sticky;\n bottom: 0;\n left: 0;\n z-index: 2;\n box-shadow: -3px -3px 8px rgb(0 0 0 / 20%);\n background-color: var(--ic-theme-primary);\n display: flex;\n flex-direction: column;\n visibility: hidden;\n}\n\n:host(.dark) .bottom-wrapper {\n border-top: var(--ic-keyline-darken);\n}\n\n/* Mobile Top Bar */\n\n.top-bar {\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: var(--side-navigation-height);\n padding: var(--ic-space-xs);\n box-sizing: border-box;\n background-color: var(--ic-theme-primary);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n border-bottom: var(--ic-keyline-darken);\n box-shadow: var(--ic-elevation-overlay);\n z-index: 2;\n overflow: hidden;\n visibility: visible;\n}\n\n:host(.inline) .top-bar {\n position: absolute;\n}\n\n.top-bar.dark a:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.top-bar.light {\n border-bottom: var(--ic-keyline-lighten);\n}\n\n.app-title-wrapper {\n display: flex;\n margin-left: var(--ic-space-xs);\n border-left: var(--ic-keyline-darken);\n padding-left: var(--ic-space-xxs);\n color: var(--ic-theme-text);\n align-items: center;\n}\n\n@media screen and (min-width: 340px) {\n .app-title-wrapper ic-typography {\n margin-left: var(--ic-space-xs);\n }\n}\n\n:host .title-link:link {\n display: flex;\n align-items: center;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n text-decoration: none;\n padding: var(--ic-space-xxs);\n color: var(--ic-theme-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n color: var(--ic-theme-text);\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active {\n background-color: var(--ic-theme-active);\n}\n\n:host .title-link:focus {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: none;\n background-color: transparent;\n}\n\n:host .title-link ic-typography {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n fill: var(--ic-theme-text);\n}\n\n.app-icon-container {\n display: none;\n}\n\n.button-label {\n display: flex;\n align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n display: flex;\n}\n\n.menu-button {\n width: 104px;\n}\n\n.app-status-wrapper {\n position: absolute;\n right: var(--ic-space-md);\n top: 0;\n bottom: 0;\n width: auto;\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n\n.app-status-wrapper .app-version {\n max-width: 100px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.app-status-wrapper .app-status {\n border-radius: 80px;\n background-color: var(--ic-theme-text);\n color: var(--ic-color-primary-text);\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n margin-right: var(--ic-space-xs);\n max-width: 100px;\n}\n\n.app-status-wrapper .app-status-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 96px;\n}\n\n:host(.dark) .app-status-wrapper .app-status {\n color: var(--ic-color-white-text);\n}\n\n.navigation-landmark-title {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n --navigation-group-height: 44px;\n --navigation-group-width: 100%;\n --navigation-group-justify-content: space-between;\n --navigation-group-hover: var(--ic-theme-hover);\n --navigation-group-text-hover: var(--ic-theme-text);\n --navigation-item-child-height: 56px;\n --navigation-item-child-active: var(--ic-action-dark-bg-active);\n --navigation-item-child-color: var(--ic-theme-text);\n --navigation-group-expand-toggle-padding: 4px;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n --navigation-item-height: 56px;\n --navigation-item-width: auto;\n --navigation-item-justify-content: flex-start;\n}\n\n/* Toggle Chevron */\n\n.bottom-side-nav {\n position: relative;\n align-content: flex-end;\n height: var(--sm-side-navigation-top-bar-height);\n}\n\n.primary-navigation {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n /* Hide scrollbar when required but keep functionality */\n scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n display: none;\n}\n\n.menu-visibility-visible {\n visibility: visible;\n}\n\n.menu-visibility-hidden {\n visibility: hidden;\n}\n\n/* Media Queries */\n\n@media screen and (min-width: 340px) {\n .app-icon-container {\n display: flex;\n }\n}\n\n@media screen and (min-width: 577px) {\n :host {\n display: flex;\n flex-direction: column;\n height: 100vh;\n position: var(--side-navigation-position);\n left: 0;\n top: 0;\n bottom: 0;\n }\n\n :host(.inline) {\n position: absolute;\n }\n\n :host(.static) {\n position: relative;\n left: auto;\n top: auto;\n bottom: auto;\n }\n\n .app-icon-container {\n padding: var(--ic-space-xxs) 0;\n }\n\n .top-bar {\n --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n position: relative;\n padding: 0;\n box-shadow: -3px 3px 8px rgb(0 0 0 / 20%);\n }\n\n :host(.inline) .top-bar {\n position: relative;\n }\n\n :host(.anchor-right) .top-bar {\n box-shadow: 3px 3px 8px rgb(0 0 0 / 20%);\n }\n\n :host(.anchor-right) .bottom-wrapper {\n box-shadow: 3px -3px 8px rgb(0 0 0 / 20%);\n }\n\n .side-navigation,\n .top-bar {\n width: var(--sm-side-navigation-top-bar-height);\n }\n\n :host(.sm-collapsed) {\n width: var(--sm-side-navigation-top-bar-height);\n transition: width var(--ic-easing-transition-slow);\n }\n\n :host(.sm-collapsed.collapsed-labels) {\n width: var(--sm-side-navigation-collapsed-labels-width);\n }\n\n :host(.sm-expanded) {\n width: var(--side-navigation-width);\n transition: width var(--ic-easing-transition-slow);\n box-shadow: var(--ic-elevation-overlay);\n }\n\n .side-navigation {\n --side-navigation-position-top: 0;\n\n flex: 1;\n position: relative;\n top: auto;\n left: auto;\n bottom: auto;\n }\n\n :host(.inline) .side-navigation {\n position: relative;\n }\n\n :host(.anchor-right) .side-navigation {\n left: auto;\n right: 0;\n }\n\n .side-navigation-inner {\n width: 100%;\n visibility: visible;\n }\n\n .bottom-wrapper {\n visibility: visible;\n }\n\n .app-title-wrapper {\n margin-left: 0;\n border-left: none;\n padding: var(--ic-space-sm);\n }\n\n .app-title-wrapper ::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n }\n\n .app-title-wrapper ic-typography {\n margin: calc(-1 * 4.5px) 0 calc(-1 * 4.5px) var(--ic-space-md);\n font-weight: var(--ic-font-weight-semibold);\n }\n\n :host(.sm-collapsed) .app-title-wrapper ic-typography {\n position: absolute;\n left: -9999px;\n opacity: 0;\n transition: opacity var(--ic-easing-transition-slow);\n }\n\n :host(.sm-expanded) ic-typography {\n position: relative;\n left: 0;\n }\n\n :host(.sm-expanded) :is(.side-navigation, .top-bar) {\n width: var(--side-navigation-width);\n transition: width var(--ic-easing-transition-slow);\n }\n\n :host(.sm-collapsed) :is(.side-navigation, .top-bar) {\n width: var(--sm-side-navigation-top-bar-height);\n transition: width var(--ic-easing-transition-slow);\n }\n\n :host(.anchor-right.sm-expanded) :is(.side-navigation, .top-bar) {\n left: auto;\n right: 0;\n }\n\n .app-status-wrapper,\n :host(.sm-collapsed) .app-status-wrapper {\n display: none;\n }\n\n :host(.sm-expanded) .app-status-wrapper {\n display: flex;\n }\n\n .bottom-side-nav {\n justify-items: flex-end;\n display: flex;\n flex-direction: column;\n }\n\n .bottom-side-nav .menu-expand-button {\n padding-left: var(--ic-space-md);\n height: var(--sm-side-navigation-top-bar-height);\n width: 100%;\n color: var(--ic-theme-text);\n background-color: transparent;\n outline: none;\n border: none;\n cursor: pointer;\n display: flex;\n transition: var(--ic-easing-transition-fast);\n }\n\n .bottom-side-nav .menu-expand-button svg {\n justify-items: flex-start;\n align-self: center;\n }\n\n .bottom-side-nav .menu-expand-button:hover {\n background-color: var(--ic-theme-hover);\n }\n\n :host .bottom-side-nav {\n outline: none;\n }\n\n :host .bottom-side-nav .menu-expand-button:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n }\n\n :host(.sm-collapsed) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(1);\n transition: transform var(--ic-easing-transition-slow);\n }\n\n :host(.sm-expanded) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(-1);\n transition: transform var(--ic-easing-transition-slow);\n }\n\n :host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(-1);\n }\n\n :host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(1);\n }\n\n :host(.sm-collapsed) ::slotted(ic-navigation-item) {\n --navigation-item-label-opacity: 1;\n }\n\n :host(.sm-collapsed) ::slotted(ic-navigation-item),\n :host(.sm-collapsed) ::slotted(ic-navigation-group) {\n --navigation-item-label-opacity: 0;\n }\n\n :host(.sm-expanded) ::slotted(ic-navigation-item),\n :host(.sm-expanded) ::slotted(ic-navigation-group) {\n --navigation-item-label-opacity: 1;\n }\n\n :host(.sm-collapsed) ::slotted(ic-navigation-group) {\n --navigation-group-title-position: absolute;\n --navigation-group-title-position-left: -9999px;\n --navigation-group-title-opacity: none;\n }\n\n :host(.sm-expanded) ::slotted(ic-navigation-group) {\n --navigation-group-title-position: relative;\n --navigation-group-title-position-left: 0;\n --navigation-group-expand-toggle-padding: 4px;\n --navigation-group-title-opacity: flex;\n }\n\n :host(.sm-collapsed.collapsed-labels) .side-navigation,\n :host(.sm-collapsed.collapsed-labels) .top-bar {\n width: var(--sm-side-navigation-collapsed-labels-width);\n }\n\n :host(.sm-collapsed.collapsed-labels) .menu-expand-button {\n padding: 0;\n }\n\n :host(.sm-collapsed.collapsed-labels) .app-title-wrapper {\n width: 100%;\n justify-content: center;\n }\n\n :host(.sm-collapsed.collapsed-labels) ::slotted(ic-navigation-group) {\n --navigation-group-justify-content: center;\n --navigation-item-label-opacity: 1;\n --navigation-group-item-min-width: 100%;\n --navigation-group-expand-toggle-padding: 16px;\n }\n\n :host(.collapsed-labels) .bottom-side-nav .menu-expand-button {\n justify-content: center;\n }\n\n :host .collapsed-icon-labels-start {\n visibility: hidden;\n opacity: 0;\n }\n\n :host .collapsed-icon-labels-end {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n }\n}\n\n@media screen and (min-width: 993px) {\n :host {\n position: relative;\n left: auto;\n top: auto;\n bottom: auto;\n }\n\n :host(.inline) {\n position: relative;\n }\n\n :host(.sm-expanded) {\n box-shadow: none;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Listen,\n} from \"@stencil/core\";\n\nimport menuIcon from \"../../assets/hamburger-menu-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n getCurrentDeviceSize,\n DEVICE_SIZES,\n checkResizeObserver,\n isSlotUsed,\n getThemeForegroundColor,\n getCssProperty,\n hasClassificationBanner,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar } from \"./ic-side-navigation.types\";\n\n/**\n * @slot app-icon - Content will be rendered adjacent to the application title at the very top of the side navigation\n * @slot primary-navigation - Content will be rendered at the top of the side navigation\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation\n */\n\n@Component({\n tag: \"ic-side-navigation\",\n styleUrl: \"ic-side-navigation.css\",\n shadow: true,\n})\nexport class SideNavigation {\n @Element() el: HTMLIcSideNavigationElement;\n /**\n * Title to display.\n */\n @Prop() appTitle!: string;\n /**\n * Status of application\n */\n @Prop() status: string;\n /**\n * Version of application\n */\n @Prop() version: string;\n /**\n * If true, the ic-side-navigation will load in an expanded state\n */\n @Prop() expanded: boolean = false;\n /**\n * Set application title link\n */\n @Prop() href: string = \"/\";\n /**\n * If true, the menu expand button is removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)\n */\n @Prop() static: boolean = false;\n /**\n * If true, the icon and label will appear when side navigation is collapsed\n */\n\n @Prop() collapsedIconLabels: boolean = false;\n /**\n * If true, side navigation will be contained by parent element\n */\n @Prop() inline: boolean = false;\n\n /**\n * If true, disable automatic parent wrapper styling\n */\n @Prop() disableAutoParentStyling: boolean = false;\n\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n @State() menuOpen: boolean = false;\n @State() menuExpanded: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() deviceSizeAppTitle = DEVICE_SIZES.S;\n @State() hasSecondaryNavigation: boolean = false;\n\n private ANIMATION_DURATION =\n parseInt(getCssProperty(\"--ic-transition-duration\")) || 0;\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 emitSideNavigationExpanded = (objDetails: {\n sideNavExpanded: boolean;\n sideNavMobile?: boolean;\n }): void => {\n const event = new CustomEvent(\"sideNavExpanded\", {\n detail: {\n sideNavExpanded: objDetails.sideNavExpanded,\n sideNavMobile: objDetails.sideNavMobile,\n },\n });\n this.el.dispatchEvent(event);\n };\n\n private toggleMenu = (): void => {\n this.menuOpen = !this.menuOpen;\n this.setMobileMenuAriaAttributes(this.menuOpen);\n\n this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuOpen,\n sideNavMobile: true,\n });\n };\n\n private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n const sideNav = this.el.shadowRoot.querySelector(\n \"#side-navigation\"\n ) as HTMLDivElement;\n const sideNavInner = sideNav.querySelector(\n \".side-navigation-inner\"\n ) as HTMLElement;\n const bottomWrapper = sideNav.querySelector(\n \".bottom-wrapper\"\n ) as HTMLElement;\n\n if (menuOpen) {\n bottomWrapper.classList.add(\"menu-visibility-visible\");\n sideNavInner.classList.add(\"menu-visibility-visible\");\n } else {\n setTimeout(() => {\n sideNavInner.classList.remove(\"menu-visibility-visible\");\n bottomWrapper.classList.remove(\"menu-visibility-visible\");\n }, this.ANIMATION_DURATION);\n }\n };\n\n private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n const nativeButton = this.el.shadowRoot\n .querySelector(\"#menu-button\")\n .shadowRoot.querySelector(\"button\");\n\n if (menuOpen) {\n nativeButton.setAttribute(\"aria-expanded\", \"true\");\n nativeButton.setAttribute(\"aria-label\", \"Close navigation menu\");\n } else {\n nativeButton.setAttribute(\"aria-expanded\", \"false\");\n nativeButton.setAttribute(\"aria-label\", \"Open navigation menu\");\n }\n };\n\n private setAndRemoveNoWrapAfterMenuExpanded = () => {\n const appTitle = this.el.shadowRoot.querySelector(\n \".title-link ic-typography\"\n );\n\n appTitle.classList.add(\"ic-typography-no-wrap\");\n\n setTimeout(() => {\n appTitle.classList.remove(\"ic-typography-no-wrap\");\n }, this.ANIMATION_DURATION);\n };\n\n private toggleMenuExpanded = (): void => {\n this.menuExpanded = !this.menuExpanded;\n\n if (this.menuExpanded) {\n this.setAndRemoveNoWrapAfterMenuExpanded();\n }\n\n this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n if (this.collapsedIconLabels) {\n this.animateCollapsedIconLabels();\n }\n\n this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n };\n\n /**\n * In order to style nested slotted elements (e.g. using React Router components), this method\n * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not\n * do not take affect.\n * @param menuExpanded boolean - true or false depending on seide navigation state\n */\n private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n\n navItems.forEach((navItem) => {\n const hasUsedSlot = isSlotUsed(navItem, \"navigation-item\");\n\n if (hasUsedSlot) {\n const navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\n const iconWrapper = document.createElement(\"div\");\n const icon = navItemSlot.querySelector(\"svg\");\n const label = navItem.textContent.trim();\n const icTypography = document.createElement(\"ic-typography\");\n icTypography.classList.add(\n \"ic-typography-label\",\n \"hydrated\",\n \"navigation-item-side-nav-slotted-text\"\n );\n\n iconWrapper.className = \"icon-container\";\n iconWrapper.append(icon);\n\n navItemSlot.textContent = \"\";\n\n icTypography.textContent = label;\n\n navItemSlot.append(iconWrapper);\n navItemSlot.append(icTypography);\n\n if (this.collapsedIconLabels) {\n this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);\n } else {\n this.styleSlottedIconLabels(menuExpanded, icTypography);\n }\n }\n });\n };\n\n private styleSlottedCollapsedIconLabels = (\n menuExpanded: boolean,\n icTypography: HTMLIcTypographyElement\n ) => {\n if (menuExpanded) {\n icTypography.style.marginTop = \"0\";\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n } else {\n icTypography.style.marginTop = \"10px\";\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n }\n };\n\n private styleSlottedIconLabels = (\n menuExpanded: boolean,\n icTypography: HTMLSpanElement\n ) => {\n if (menuExpanded) {\n icTypography.style.opacity = \"1\";\n icTypography.style.visibility = \"visible\";\n icTypography.style.transition =\n \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n } else {\n icTypography.style.opacity = \"0\";\n icTypography.style.visibility = \"hidden\";\n icTypography.style.transition =\n \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n }\n };\n\n private animateCollapsedIconLabels = () => {\n const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n \".primary-navigation\"\n );\n const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n \".bottom-wrapper > .secondary-navigation\"\n );\n\n if (primaryNavigationWrapper) {\n primaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n }\n\n if (secondaryNavigationWrapper) {\n secondaryNavigationWrapper.classList.remove(\"collapsed-icon-labels-end\");\n secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-start\");\n }\n\n this.el.addEventListener(\"transitionend\", () => {\n if (primaryNavigationWrapper) {\n primaryNavigationWrapper.classList.remove(\n \"collapsed-icon-labels-start\"\n );\n primaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n }\n\n if (secondaryNavigationWrapper) {\n secondaryNavigationWrapper.classList.remove(\n \"collapsed-icon-labels-start\"\n );\n secondaryNavigationWrapper.classList.add(\"collapsed-icon-labels-end\");\n }\n });\n };\n\n private paddingIconWidth = (\n navItems: HTMLIcNavigationItemElement[]\n ): number => {\n const navItemLink =\n (navItems[0].shadowRoot &&\n navItems[0].shadowRoot.querySelector(\"ic-tooltip a\")) ||\n navItems[0].querySelector(\"a\");\n const navItemSVG = navItems[0].querySelector(\"svg\");\n\n const navStyles = {\n gap: window.getComputedStyle(navItemLink).gap,\n iconWidth: window.getComputedStyle(navItemSVG).width,\n paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,\n };\n\n return Object.values(navStyles).reduce((prev, curr) => {\n return (prev += parseInt(curr));\n }, 0);\n };\n\n private displayTooltipWithExpandedLongLabel = (menuExpanded: boolean) => {\n let timer;\n\n if (menuExpanded) {\n timer = setTimeout(() => {\n const sideNavWidth = this.el.clientWidth;\n\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(\"ic-navigation-item\")\n );\n\n const paddingIconDelta = navigationItems.length\n ? this.paddingIconWidth(navigationItems)\n : 0;\n\n navigationItems.forEach(\n (navigationItem: HTMLIcNavigationItemElement) => {\n const icTypographyScrollWidth =\n (\n navigationItem.shadowRoot &&\n navigationItem.shadowRoot.querySelector(\n \"ic-tooltip .link ic-typography.ic-typography-label\"\n )\n )?.scrollWidth ||\n navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n ?.scrollWidth;\n\n if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {\n navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n }\n }\n );\n }, this.ANIMATION_DURATION);\n } else {\n clearTimeout(timer);\n\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(\"ic-navigation-item\")\n );\n navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n });\n }\n };\n\n private setMenuExpanded = (expanded: boolean): void => {\n this.menuExpanded = expanded;\n };\n\n /**\n * As the mobile top bar is fixed, a padding top is required\n * to push main content down the height of the mobile top bar\n * @param value - padding-top css value\n */\n private setParentPaddingTop = (value: string) => {\n this.el.parentElement.style.paddingTop = value;\n };\n\n private setParentPaddingLeft = (value: string) => {\n this.el.parentElement.style.paddingLeft = value;\n };\n\n private resizeObserver: ResizeObserver = null;\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n\n if (currSize === DEVICE_SIZES.S) {\n if (!this.disableAutoParentStyling) {\n const topBarHeight =\n this.el.shadowRoot.querySelector(\".top-bar\").scrollHeight;\n this.setParentPaddingTop(`${topBarHeight}px`);\n this.setParentPaddingLeft(\"0\");\n }\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuExpanded,\n sideNavMobile: true,\n });\n } else {\n if (!this.disableAutoParentStyling) {\n this.setParentPaddingTop(\"0\");\n }\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuExpanded,\n sideNavMobile: false,\n });\n }\n\n if (currSize > DEVICE_SIZES.L) {\n if (!this.disableAutoParentStyling) {\n this.setParentPaddingTop(\"0\");\n this.setParentPaddingLeft(\"0\");\n }\n } else if (\n currSize > DEVICE_SIZES.S &&\n currSize <= DEVICE_SIZES.L &&\n !this.static &&\n !this.disableAutoParentStyling\n ) {\n if (this.collapsedIconLabels) {\n this.setParentPaddingLeft(\"calc(var(--ic-space-xxl) * 2)\");\n } else {\n this.setParentPaddingLeft(\n \"calc(var(--ic-space-xxl) + var(--ic-space-xs))\"\n );\n }\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.deviceSizeAppTitle = currSize;\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(document.body, { box: \"content-box\" });\n };\n\n private setCollapsedIconLabels = () => {\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(\"ic-navigation-item\")\n );\n navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n });\n };\n\n private styleSlottedCollapsedIconLabel = () => {\n const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n Array.from(\n this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n );\n\n dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n if (\n icTypography?.parentElement?.parentElement?.classList.contains(\n \"navigation-item-side-nav-collapsed-with-label\"\n )\n ) {\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n icTypography.style.marginTop = \"10px\";\n }\n });\n };\n\n private renderTopBar = ({\n isSDevice,\n foregroundColor,\n menuOpen,\n href,\n isAppNameSubtitleVariant,\n appTitle,\n }: IcTopBar) => (\n <div\n class={{\n \"top-bar\": true,\n [this.foregroundColor]: true,\n }}\n >\n {isSDevice && (\n <nav\n aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n aria-hidden=\"false\"\n >\n <ic-button\n aria-label=\"Open navigation menu\"\n class=\"menu-button\"\n id=\"menu-button\"\n variant=\"secondary\"\n size=\"dense\"\n full-width=\"true\"\n buttonStyle={foregroundColor}\n onClick={this.toggleMenu}\n aria-owns=\"side-navigation\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <span\n class=\"mobile-top-bar-menu-icon\"\n slot=\"icon\"\n innerHTML={menuOpen ? closeIcon : menuIcon}\n ></span>\n {menuOpen ? \"Close\" : \"Menu\"}\n </ic-button>\n <span\n id=\"menu-navigation-toggle-button-landmark\"\n class=\"navigation-landmark-title\"\n aria-hidden=\"true\"\n >\n Navigation menu toggle button\n </span>\n </nav>\n )}\n <div class=\"app-title-wrapper\">\n <a href={href} class=\"title-link\">\n <div class=\"app-icon-container\" aria-hidden=\"true\">\n <slot name=\"app-icon\"></slot>\n </div>\n <ic-typography\n variant={isAppNameSubtitleVariant ? \"subtitle-small\" : \"h3\"}\n >\n {appTitle}\n </ic-typography>\n </a>\n </div>\n </div>\n );\n\n componentWillLoad(): void {\n if (this.expanded) {\n this.setMenuExpanded(true);\n } else {\n this.setMenuExpanded(false);\n }\n\n if (this.collapsedIconLabels) {\n this.setCollapsedIconLabels();\n }\n\n this.hasSecondaryNavigation = isSlotUsed(this.el, \"secondary-navigation\");\n }\n\n componentDidLoad(): void {\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuExpanded,\n sideNavMobile: this.deviceSize === DEVICE_SIZES.S,\n });\n\n checkResizeObserver(this.runResizeObserver);\n this.arrangeSlottedNavigationItem();\n this.styleSlottedCollapsedIconLabel();\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Side Navigation\"\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const {\n appTitle,\n menuOpen,\n foregroundColor,\n menuExpanded,\n href,\n status,\n version,\n collapsedIconLabels,\n inline,\n } = this;\n\n const isSDevice = this.deviceSize === DEVICE_SIZES.S;\n const isMdDevice = this.deviceSize === DEVICE_SIZES.M;\n const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;\n const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;\n const displayExpandBtn = isMdDevice || (isLgDevice && !this.static);\n\n const topBarProps: IcTopBar = {\n isSDevice,\n foregroundColor,\n menuOpen,\n href,\n isAppNameSubtitleVariant,\n appTitle,\n };\n\n return (\n <Host\n class={{\n \"xs-menu-open\": menuOpen && isSDevice,\n \"xs-menu-close\": !menuOpen && isSDevice,\n \"sm-collapsed\": !isSDevice && !menuExpanded,\n \"sm-expanded\": !isSDevice && menuExpanded,\n [IcThemeForegroundEnum.Dark]:\n foregroundColor === IcThemeForegroundEnum.Dark,\n [\"collapsed-labels\"]:\n !isSDevice && !menuExpanded && collapsedIconLabels,\n [\"static\"]: this.static,\n [\"inline\"]: inline,\n }}\n >\n {isSDevice && this.renderTopBar({ ...topBarProps })}\n <div class=\"side-navigation\" id=\"side-navigation\">\n {!isSDevice && this.renderTopBar({ ...topBarProps })}\n <div class=\"side-navigation-inner\">\n {isSlotUsed(this.el, \"primary-navigation\") && (\n <nav\n class=\"primary-navigation\"\n aria-labelledby=\"primary-navigation-landmark\"\n >\n <span\n aria-hidden=\"true\"\n class=\"navigation-landmark-title\"\n id=\"primary-navigation-landmark\"\n >\n Primary\n </span>\n <ul class=\"navigation-list\">\n <slot name=\"primary-navigation\"></slot>\n </ul>\n </nav>\n )}\n </div>\n <div\n class={{\n [\"bottom-wrapper\"]: true,\n [\"classification-spacing\"]: hasClassificationBanner(),\n }}\n >\n {isSlotUsed(this.el, \"secondary-navigation\") && (\n <nav\n class=\"secondary-navigation\"\n aria-labelledby=\"secondary-navigation-landmark\"\n >\n <span\n aria-hidden=\"true\"\n class=\"navigation-landmark-title\"\n id=\"secondary-navigation-landmark\"\n >\n Secondary\n </span>\n <ul class=\"navigation-list\">\n <slot name=\"secondary-navigation\"></slot>\n </ul>\n </nav>\n )}\n <div class=\"bottom-side-nav\">\n {this.hasSecondaryNavigation && <ic-divider></ic-divider>}\n {displayExpandBtn && (\n <button\n class=\"menu-expand-button\"\n innerHTML={chevronIcon}\n onClick={this.toggleMenuExpanded}\n aria-label={`${\n menuExpanded ? \"Collapse\" : \"Expand\"\n } side navigation`}\n ></button>\n )}\n <div class=\"app-status-wrapper\">\n {status !== \"\" && (\n <div\n class={{\n [\"app-status\"]: true,\n }}\n >\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {status}\n </ic-typography>\n </div>\n )}\n {version !== \"\" && (\n <ic-typography\n variant=\"label\"\n class=\"app-version\"\n aria-label=\"app version\"\n >\n {version}\n </ic-typography>\n )}\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as i,h as e,H as s,g as a}from"./p-f9370be6.js";import{q as n,t as o,u as h,a as r,d as l,r as c,I as u}from"./p-e5a09372.js";const d=`<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 p='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.search){--divider-height:24px}:host(.search.dense){--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: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 f=0;const m=class{constructor(e){t(this,e);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-${f++}`;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;if(this.options.length>0){this.setMenuChange(true);if(this.disableFilter===false){const t=this.options.filter((t=>t.label.toLowerCase().includes(this.value.toLowerCase())));const i=[{label:this.emptyOptionListText,value:""}];this.filteredOptions=t.length>0?t:i}}if(!this.showClearButton){this.handleShowClearButton(true)}this.debounceAriaLiveUpdate();this.icInput.emit({value:this.value})};this.onInputBlur=t=>{const i=t.target.value;const e=t.relatedTarget;this.icInputBlur.emit({value:i,relatedTarget:e})};this.onInputFocus=t=>{const i=t.target.value;this.icInputFocus.emit({value:i});this.handleShowClearButton(true)};this.handleClear=t=>{const i=t;const e=t;if(e.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 e=(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(e&&Object.keys(e).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(e.after!==undefined){e.after(this.assistiveHintEl)}}};this.updateSearchResultAriaLive=()=>{const t=this.el.shadowRoot.querySelector(".search-results-status");if(!this.open||this.value===""){t.innerText=""}else if(this.options.length>0&&this.filteredOptions.length>0&&this.open&&t){t.innerText=`${this.filteredOptions.length} result${this.filteredOptions.length>1?"s":""} available`}};this.hasOptionsOrFilterDisabled=()=>this.options.length>0||this.disableFilter;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.dense=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.dark=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=o(this.icChange,this.debounce)}watchOptionsHandler(t){if(this.disableFilter){this.filteredOptions=t}}watchValueHandler(t){if(this.inputEl&&this.options&&!!h(t,this.options)){this.inputEl.value=h(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){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}}r([{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,dense:o,placeholder:r,helperText:p,disabled:f,value:m,readonly:v,spellcheck:g,fullWidth:w,options:x,open:y,hideLabel:k,menuId:L,ariaActiveDescendant:z,dark:C,truncateValue:S,autofocus:B,autocapitalize:T,autocomplete:M,filteredOptions:F}=this;const I=v||f?true:false;const H=l(t,p!=="",false).trim();let O;if(H!==""&&this.hasOptionsOrFilterDisabled()){O=`${H} ${this.inputId}-assistive-hint`}else if(this.hasOptionsOrFilterDisabled()){O=`${this.inputId}-assistive-hint`}else if(H!==""){O=H}else{O=undefined}const $=I&&!v;const E=m&&x.length>0;const W=m===undefined||m===null||m==="";const j=E&&y&&F.length>0;const q=F.length>0&&F[0].label===this.emptyOptionListText;let D;if(x.length>0){if(j){D="true"}else{D="false"}}else{D=undefined}c(true,this.el,i,m,I);return e(s,{class:{["search"]:true,["fullwidth"]:w,["dark"]:C,["disabled"]:f,["dense"]:o},onFocus:this.handleHostFocus,onBlur:this.handleHostBlur},e("ic-text-field",{ref:t=>this.inputEl=t,inputId:t,label:a,helperText:p,required:n,disabled:$,readonly:v,dense:o,hideLabel:k,fullWidth:w,name:i,truncateValue:S,dark:C,value:x&&!!h(m,x)?h(m,x):m,placeholder:r,onInput:this.onInput,onBlur:this.onInputBlur,onFocus:this.onInputFocus,"aria-label":k?a:"","aria-describedby":O,"aria-owns":E?L:undefined,"aria-haspopup":x.length>0?"listbox":undefined,ariaExpanded:D,ariaActiveDescendant:z,"aria-autocomplete":E?"list":undefined,role:E?"combobox":undefined,autocomplete:M,autocapitalize:T,autoFocus:B,spellcheck:g,inputmode:"search"},e("div",{class:{"clear-button-container":true,"clear-button-visible":m&&!I&&this.showClearButton},slot:"clear-button"},e("ic-button",{id:"clear-button",class:"clear-button","aria-label":"Clear",innerHTML:d,onClick:this.handleClear,size:o?"dense":"default",onFocus:this.handleFocusClearButton,onBlur:this.handleClearBlur,onKeyDown:this.handleClear,type:"submit",variant:"icon",buttonStyle:this.clearButtonFocused?u.Light:u.Dark}),e("div",{class:"divider"})),e("div",{class:{"search-submit-button-container":true,"search-submit-button-disabled":W||f||q},slot:"search-submit-button"},e("ic-button",{id:"search-submit-button","aria-label":"Search",ref:t=>this.searchSubmitButton=t,class:{["search-submit-button"]:true,["search-submit-button-dense"]:!!o},disabled:W||f||q,innerHTML:b,size:o?"dense":"default",onClick:this.handleSubmitSearch,onBlur:this.handleSubmitSearchBlur,onFocus:this.handleSubmitSearchFocus,type:"submit",variant:"icon",buttonStyle:this.searchSubmitFocused?u.Light:u.Default})),e("div",{class:{"menu-container":true,fullwidth:w},slot:"menu"},j&&m.length>=this.charactersUntilSuggestion&&e("ic-menu",{class:{"no-results":q},activationType:"manual",anchorEl:this.anchorEl,autoFocusOnSelected:false,inputEl:this.inputEl,inputLabel:a,ref:t=>this.menu=t,dense:o,fullWidth:w,menuId:L,open:true,options:F,onOptionSelect:this.handleOptionSelect,onMenuChange:this.handleMenuChange,parentEl:this.el,value:m}))),e("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"]}}};m.style=p;export{m as ic_search_bar};
|
2
|
-
//# sourceMappingURL=p-22eb7fc8.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","options","length","setMenuChange","disableFilter","rawFilteredOptions","filter","option","label","toLowerCase","includes","noOptions","emptyOptionListText","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","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","dense","placeholder","helperText","disabled","readonly","spellcheck","fullWidth","hideLabel","dark","autofocus","autocapitalize","autocomplete","disabledMode","describedBy","getInputDescribedByText","trim","describedById","disabledText","hasSuggestedSearch","valueNotSet","menuOpen","hadNoOptions","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","buttonStyle","IcThemeForegroundEnum","Light","Dark","search-submit-button-container","search-submit-button-disabled","searchIcon","Default","menu-container","fullwidth","charactersUntilSuggestion","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.dense) {\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: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} 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 dense styling is to be applied to the element.\n */\n @Prop() dense?: 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 * Determines whether the dark variant of the search bar should be displayed.\n */\n @Prop() dark?: 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) {\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 if (this.options.length > 0) {\n this.setMenuChange(true);\n\n if (this.disableFilter === false) {\n const rawFilteredOptions = this.options.filter((option) => {\n return option.label.toLowerCase().includes(this.value.toLowerCase());\n });\n\n const noOptions = [{ label: this.emptyOptionListText, value: \"\" }];\n\n this.filteredOptions =\n rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;\n }\n }\n\n if (!this.showClearButton) {\n this.handleShowClearButton(true);\n }\n\n this.debounceAriaLiveUpdate();\n\n 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 (!this.open || this.value === \"\") {\n searchResultsStatusEl.innerText = \"\";\n } else if (\n this.options.length > 0 &&\n this.filteredOptions.length > 0 &&\n this.open &&\n searchResultsStatusEl\n ) {\n searchResultsStatusEl.innerText = `${this.filteredOptions.length} result${\n this.filteredOptions.length > 1 ? \"s\" : \"\"\n } available`;\n }\n };\n\n private hasOptionsOrFilterDisabled = (): boolean =>\n this.options.length > 0 || this.disableFilter;\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 dense,\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 dark,\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 && options.length > 0;\n const valueNotSet = value === undefined || value === null || value === \"\";\n const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;\n\n const hadNoOptions =\n filteredOptions.length > 0 &&\n filteredOptions[0].label === this.emptyOptionListText;\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 [\"dark\"]: dark,\n [\"disabled\"]: disabled,\n [\"dense\"]: dense,\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 dense={dense}\n hideLabel={hideLabel}\n fullWidth={fullWidth}\n name={name}\n truncateValue={truncateValue}\n dark={dark}\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={dense ? \"dense\" : \"default\"}\n onFocus={this.handleFocusClearButton}\n onBlur={this.handleClearBlur}\n onKeyDown={this.handleClear}\n type=\"submit\"\n variant=\"icon\"\n buttonStyle={\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\":\n valueNotSet || disabled || hadNoOptions,\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-dense\"]: !!dense,\n }}\n disabled={valueNotSet || disabled || hadNoOptions}\n innerHTML={searchIcon}\n size={dense ? \"dense\" : \"default\"}\n onClick={this.handleSubmitSearch}\n onBlur={this.handleSubmitSearchBlur}\n onFocus={this.handleSubmitSearchFocus}\n type=\"submit\"\n variant=\"icon\"\n buttonStyle={\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\": 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 dense={dense}\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,h as r,H as i,g as s}from"./p-f9370be6.js";import{c as a}from"./p-e28af65b.js";import{i as t}from"./p-e5a09372.js";const n=`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>\n</svg>\n`;const c=':host{display:block;margin-right:var(--ic-space-xs);margin-bottom:var(--ic-space-xs)}:host .breadcrumb{display:flex;align-items:center;white-space:nowrap;gap:var(--ic-space-xs);min-height:var(--ic-space-lg)}:host .chevron{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host .chevron svg{color:var(--ic-architectural-400)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-hyperlink)}:host(.back){display:flex;align-items:center}:host(.back) .chevron{display:none}ic-link{--breadcrumb-link-display:flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current="page"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper){margin-right:var(--ic-space-xs) !important;display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb){border:none;background-color:transparent;color:var(--ic-hyperlink);text-decoration:underline;font-weight:var(--ic-font-weight-bold);cursor:pointer}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){outline:none;text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}';const o=class{constructor(i){e(this,i);this.renderDefaultBreadcrumb=(e,i,s,a)=>{const c=i!==null&&i!==undefined&&i!=="";if(e&&c){return r("span",{class:{"current-page-container":e}},t(this.el,"icon")&&r("slot",{name:"icon"}),i)}return r("ic-link",{href:a,class:"breadcrumb-link","aria-describedby":this.showBackIcon&&s&&s},this.showBackIcon&&r("div",{class:"back-icon",innerHTML:n}),t(this.el,"icon")&&r("slot",{name:"icon"}),i)};this.setSlottedCurrentPageClass=()=>{const e=this.el.querySelector("ic-link");if(e){e.classList.remove("current-page");if(this.current){const r=e.classList.contains("current-page");if(!r){e.classList.add("breadcrumb-link","current-page")}}}};this.pageTitle=undefined;this.href=undefined;this.current=false;this.showBackIcon=false}componentWillRender(){this.setSlottedCurrentPageClass()}render(){const{current:e,href:s,pageTitle:t}=this;const n=`${t&&t.toLowerCase().replace(" ","-")}-describedby`;const c=t!==null&&t!==undefined&&t!=="";const o=s!==null&&s!==undefined&&s!=="";return r(i,{class:{back:this.showBackIcon},"aria-current":e&&"page",role:"listitem"},r("div",{class:"breadcrumb"},r("span",{innerHTML:a,class:"chevron","aria-hidden":"true"}),this.showBackIcon&&n&&r("span",{id:n,class:"hide"},`Back to ${t}`),c&&o?this.renderDefaultBreadcrumb(e,t,n,s):r("slot",null)))}get el(){return s(this)}};o.style=c;export{o as ic_breadcrumb};
|
2
|
-
//# sourceMappingURL=p-263018da.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"names":["icBreadcrumbCss","Breadcrumb","this","renderDefaultBreadcrumb","current","pageTitle","describedById","href","hasPageTitle","undefined","h","class","current-page-container","isSlotUsed","el","name","aria-describedby","showBackIcon","innerHTML","backIcon","setSlottedCurrentPageClass","icLink","querySelector","classList","remove","hasCurrentPageClass","contains","add","[object Object]","toLowerCase","replace","hasHref","Host","back","aria-current","role","chevronIcon","aria-hidden","id"],"mappings":"wVAAA,MAAMA,EAAkB,w3CCYXC,EAAU,+BAwBbC,KAAAC,wBAA0B,CAChCC,EACAC,EACAC,EACAC,KAEA,MAAMC,EACJH,IAAc,MAAQA,IAAcI,WAAaJ,IAAc,GAEjE,GAAID,GAAWI,EAAc,CAC3B,OACEE,EAAA,OAAA,CACEC,MAAO,CACLC,yBAA0BR,IAG3BS,EAAWX,KAAKY,GAAI,SAAWJ,EAAA,OAAA,CAAMK,KAAK,SAC1CV,GAKP,OACEK,EAAA,UAAA,CACEH,KAAMA,EACNI,MAAM,kBAAiBK,mBACLd,KAAKe,cAAgBX,GAAiBA,GAEvDJ,KAAKe,cACJP,EAAA,MAAA,CAAKC,MAAM,YAAYO,UAAWC,IAEnCN,EAAWX,KAAKY,GAAI,SAAWJ,EAAA,OAAA,CAAMK,KAAK,SAC1CV,IAKCH,KAAAkB,2BAA6B,KACnC,MAAMC,EAASnB,KAAKY,GAAGQ,cAAc,WACrC,GAAID,EAAQ,CACVA,EAAOE,UAAUC,OAAO,gBACxB,GAAItB,KAAKE,QAAS,CAChB,MAAMqB,EAAsBJ,EAAOE,UAAUG,SAAS,gBACtD,IAAKD,EAAqB,CACxBJ,EAAOE,UAAUI,IAAI,kBAAmB,8EAnDpB,wBAKqB,MAoDjDC,sBACE1B,KAAKkB,6BAGPQ,SACE,MAAMxB,QAAEA,EAAOG,KAAEA,EAAIF,UAAEA,GAAcH,KACrC,MAAMI,EAAgB,GACpBD,GAAaA,EAAUwB,cAAcC,QAAQ,IAAK,mBAGpD,MAAMtB,EACJH,IAAc,MAAQA,IAAcI,WAAaJ,IAAc,GACjE,MAAM0B,EAAUxB,IAAS,MAAQA,IAASE,WAAaF,IAAS,GAEhE,OACEG,EAACsB,EAAI,CACHrB,MAAO,CACLsB,KAAM/B,KAAKe,cACZiB,eACa9B,GAAW,OACzB+B,KAAK,YAELzB,EAAA,MAAA,CAAKC,MAAM,cACTD,EAAA,OAAA,CAAMQ,UAAWkB,EAAazB,MAAM,UAAS0B,cAAa,SACzDnC,KAAKe,cAAgBX,GACpBI,EAAA,OAAA,CACE4B,GAAIhC,EACJK,MAAM,QACN,WAAWN,KAEdG,GAAgBuB,EACf7B,KAAKC,wBACHC,EACAC,EACAC,EACAC,GAGFG,EAAA,OAAA","sourcesContent":[":host {\n display: block;\n margin-right: var(--ic-space-xs);\n margin-bottom: var(--ic-space-xs);\n}\n\n:host .breadcrumb {\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: var(--ic-space-xs);\n min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host .chevron svg {\n color: var(--ic-architectural-400);\n}\n\n:host(:first-child) .chevron {\n display: none;\n}\n\n.back-icon svg {\n color: var(--ic-hyperlink);\n}\n\n:host(.back) {\n display: flex;\n align-items: center;\n}\n\n:host(.back) .chevron {\n display: none;\n}\n\nic-link {\n --breadcrumb-link-display: flex;\n --breadcrumb-link-align-items: center;\n --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container {\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) {\n margin-right: var(--ic-space-xs) !important;\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb) {\n border: none;\n background-color: transparent;\n color: var(--ic-hyperlink);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n cursor: pointer;\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n outline: none;\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n display: none;\n}\n","import { Component, Host, Prop, h, Element } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-breadcrumb\",\n styleUrl: \"ic-breadcrumb.css\",\n shadow: true,\n})\nexport class Breadcrumb {\n /**\n * @slot icon - Content will be rendered to the left of the breadcrumb page title\n */\n\n @Element() el: HTMLIcBreadcrumbElement;\n /**\n * Set breadcrumb title\n */\n @Prop() pageTitle!: string;\n /**\n * Set breadcrumb location\n */\n @Prop() href?: string;\n /**\n * If true, aria-current will be set on the breadcrumb\n */\n @Prop() current?: boolean = false;\n\n /**\n * @internal If true, display back icon\n */\n @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n private renderDefaultBreadcrumb = (\n current: boolean,\n pageTitle: string,\n describedById: string,\n href: string\n ): IcBreadcrumbDefault => {\n const hasPageTitle =\n pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n\n if (current && hasPageTitle) {\n return (\n <span\n class={{\n \"current-page-container\": current,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </span>\n );\n }\n\n return (\n <ic-link\n href={href}\n class=\"breadcrumb-link\"\n aria-describedby={this.showBackIcon && describedById && describedById}\n >\n {this.showBackIcon && (\n <div class=\"back-icon\" innerHTML={backIcon}></div>\n )}\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </ic-link>\n );\n };\n\n private setSlottedCurrentPageClass = () => {\n const icLink = this.el.querySelector(\"ic-link\");\n if (icLink) {\n icLink.classList.remove(\"current-page\");\n if (this.current) {\n const hasCurrentPageClass = icLink.classList.contains(\"current-page\");\n if (!hasCurrentPageClass) {\n icLink.classList.add(\"breadcrumb-link\", \"current-page\");\n }\n }\n }\n };\n\n componentWillRender(): void {\n this.setSlottedCurrentPageClass();\n }\n\n render() {\n const { current, href, pageTitle } = this;\n const describedById = `${\n pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n }-describedby`;\n\n const hasPageTitle =\n pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n const hasHref = href !== null && href !== undefined && href !== \"\";\n\n return (\n <Host\n class={{\n back: this.showBackIcon,\n }}\n aria-current={current && \"page\"}\n role=\"listitem\"\n >\n <div class=\"breadcrumb\">\n <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n {this.showBackIcon && describedById && (\n <span\n id={describedById}\n class=\"hide\"\n >{`Back to ${pageTitle}`}</span>\n )}\n {hasPageTitle && hasHref ? (\n this.renderDefaultBreadcrumb(\n current,\n pageTitle,\n describedById,\n href\n )\n ) : (\n <slot />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,h as e,H as i,g as a}from"./p-f9370be6.js";import{g as s,D as n,c as o,i as r}from"./p-e5a09372.js";const d='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(.sticky){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay)}header{background-color:var(--ic-architectural-40)}header.border-bottom{border-bottom:1px solid var(--ic-architectural-300)}header.tabs{padding-top:var(--ic-space-md)}.breadcrumb-area{margin-bottom:var(--ic-space-md)}.main-content{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"title-area action-area"\n "input-area action-area";-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md);justify-content:space-between;width:100%}.title-area{display:flex;flex-direction:column;flex:1;min-width:304px;grid-area:title-area}.header-content{display:flex;align-items:center;width:100%;flex-wrap:wrap;row-gap:var(--ic-space-xs);-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md)}.heading{display:inline-block;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.subheading.dense{margin-top:var(--ic-space-xs)}.action-area{display:flex;gap:var(--ic-space-md);flex-flow:row wrap;justify-self:end;justify-content:flex-end;height:-moz-fit-content;height:fit-content;grid-area:action-area}.input-area,.navigation-area{margin-top:var(--ic-space-md);width:100%}.tabs-slot{display:flex;overflow-x:auto;padding:8px;margin:-8px}.input-area{grid-area:input-area}@media screen and (max-width: 576px){.main-content{grid-template-areas:"title-area"\n "action-area"\n "input-area";justify-content:flex-start}.action-area{min-width:100%;margin-top:var(--ic-space-md);justify-content:start}}@media screen and (min-width: 992px){:host(.sticky-desktop){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay)}}';const l=class{constructor(e){t(this,e);this.resizeObserver=null;this.resizeObserverCallback=()=>{if(this.reverseOrder){this.applyReverseOrder()}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.el)};this.applyReverseOrder=()=>{const t=s();if(t!==this.deviceSize){this.deviceSize=t}const e=this.el.shadowRoot.querySelector("div.action-area");const i=[];for(let t=0;t<this.actionContent.length;t++){const e=this.actionContent[t];let a=e.offsetHeight;if(a===undefined){a=0}i.push(a)}const a=Math.max(...i);let o=e.offsetHeight;if(o===undefined){o=0}if(this.deviceSize>n.S&&o<=a&&!this.areButtonsReversed){this.actionContent=this.actionContent.reverse();this.actionContent.forEach((t=>{this.el.append(t)}));this.areButtonsReversed=!this.areButtonsReversed}else if((this.deviceSize>n.S&&o>a||this.deviceSize<=n.S)&&this.areButtonsReversed){this.actionContent=this.actionContent.reverse();this.actionContent.forEach((t=>{this.el.append(t)}));this.areButtonsReversed=!this.areButtonsReversed}};this.heading=undefined;this.subheading=undefined;this.aligned="left";this.dense=false;this.border=true;this.sticky=false;this.stickyDesktopOnly=false;this.reverseOrder=false;this.deviceSize=n.XL;this.areButtonsReversed=false;this.actionContent=undefined}componentWillLoad(){this.actionContent=Array.from(this.el.querySelectorAll(`[slot="actions"]`))}componentDidLoad(){o(this.runResizeObserver)}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){const{dense:t,border:a,heading:s,subheading:n,aligned:o,sticky:d,stickyDesktopOnly:l}=this;return e(i,{class:{["sticky"]:d,["sticky-desktop"]:!d&&l}},e("header",{class:{["border-bottom"]:a,["tabs"]:r(this.el,"tabs")}},e("ic-section-container",{aligned:o,fullHeight:r(this.el,"tabs")},r(this.el,"breadcrumbs")&&e("div",{class:"breadcrumb-area"},e("slot",{name:"breadcrumbs"})),e("div",{class:"main-content"},e("div",{class:"title-area"},e("div",{class:"header-content"},e("slot",{name:"heading"},e("ic-typography",{variant:t?"h4":"h2",class:"heading"},e("h2",null,s))),e("slot",{name:"heading-adornment"})),e("div",null,e("slot",{name:"subheading"},n&&e("ic-typography",{variant:"body",class:{["subheading"]:true,["dense"]:t}},n)))),r(this.el,"actions")&&e("div",{class:"action-area"},e("slot",{name:"actions"})),r(this.el,"input")&&e("div",{class:"input-area"},e("slot",{name:"input"}))),(r(this.el,"stepper")||r(this.el,"tabs"))&&e("div",{class:"navigation-area"},r(this.el,"stepper")&&!r(this.el,"tabs")&&e("slot",{name:"stepper"}),r(this.el,"tabs")&&e("nav",{class:"tabs-slot","aria-label":"navigation-landmark-page-header"},e("slot",{name:"tabs"}))))))}get el(){return a(this)}};l.style=d;export{l as ic_page_header};
|
2
|
-
//# sourceMappingURL=p-3b9d4007.entry.js.map
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as e,h as i,H as s,g as o}from"./p-f9370be6.js";import{a as n,r as a,h as r}from"./p-e5a09372.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)}';const h=class{constructor(i){t(this,i);this.icChange=e(this,"icChange",7);this.handleKeyDown=t=>{switch(t.key){case"ArrowDown":case"ArrowRight":this.radioOptions[this.getNextItemToSelect(this.selectedChild,true)].selected=true;t.preventDefault();break;case"ArrowUp":case"ArrowLeft":this.radioOptions[this.getNextItemToSelect(this.selectedChild,false)].selected=true;t.preventDefault()}};this.getNextItemToSelect=(t,e)=>{const i=this.radioOptions.length-1;if(t<1){t=0}let s=e?t+1:t-1;if(s<0){s=i}else if(s>i){s=0}if(this.radioOptions[s].disabled){s=this.getNextItemToSelect(s,e)}return s};this.label=undefined;this.name=undefined;this.required=false;this.hideLabel=false;this.disabled=false;this.helperText=undefined;this.dense=false;this.validationStatus="";this.validationText="";this.checkedValue="";this.selectedChild=-1}selectHandler(t){this.checkedValue=t.detail.value;this.icChange.emit({value:this.checkedValue});if(this.radioOptions!==undefined){this.radioOptions.forEach(((t,e)=>{t.selected=this.checkedValue===t.value;if(t.selected){this.selectedChild=e}}));this.radioOptions[0].shadowRoot.querySelector("input").tabIndex=this.selectedChild>0?-1:0}}componentDidLoad(){this.radioOptions=Array.from(this.host.querySelectorAll("ic-radio-option"));this.radioOptions.forEach(((t,e)=>{if(!t.selected){t.selected=this.checkedValue===t.value}t.name=this.name;t.groupLabel=this.label;if(t.selected){this.selectedChild=e;this.checkedValue=t.value}}));this.radioOptions[0].shadowRoot.querySelector("input").tabIndex=this.selectedChild>0?-1:0;n([{prop:this.label,propName:"label"},{prop:this.name,propName:"name"}],"Radio Group")}render(){const t=r(this.validationStatus,this.disabled);a(true,this.host,this.name,this.checkedValue,this.disabled);return i(s,{onKeyDown:this.handleKeyDown},i("div",{role:"radiogroup","aria-label":`${this.label}${this.required?", required":""}`},!this.hideLabel&&i("ic-input-label",{class:{[`${this.validationStatus}`]:true},label:this.label,helperText:this.helperText,required:this.required,disabled:this.disabled}),i("slot",null)),i("ic-input-validation",{ariaLiveMode:"polite",status:t?this.validationStatus:"",message:t?this.validationText:""}))}get host(){return o(this)}};h.style=l;export{h as ic_radio_group};
|
2
|
-
//# sourceMappingURL=p-44355e34.entry.js.map
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as i,c as e,h as t,H as c,g as a}from"./p-f9370be6.js";import{a as s,r as o,d as r}from"./p-e5a09372.js";const n='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}: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-dense{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-dense{gap:var(--ic-space-xxxs)}.ic-switch-dense .ic-switch-checked-status{padding-left:6px}.ic-switch-dense .ic-switch-toggle{width:var(--ic-space-xxl);height:var(--ic-space-lg)}.ic-switch-dense .ic-switch-toggle::before{width:var(--ic-space-md);height:var(--ic-space-md);left:var(--ic-space-xxs)}.ic-switch-dense .ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-lg), -50%)}::slotted(*){margin-left:var(--ic-space-sm)}';let l=0;const h=class{constructor(t){i(this,t);this.icChange=e(this,"icChange",7);this.icFocus=e(this,"icFocus",7);this.icBlur=e(this,"icBlur",7);this.inputId=`ic-switch-input-${l++}`;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.label=undefined;this.hideLabel=false;this.helperText="";this.checked=null;this.dense=false;this.disabled=false;this.name=this.inputId;this.showState=false;this.value="on";this.checkedState=false}componentDidLoad(){s([{prop:this.label,propName:"label"}],"Switch")}render(){const{label:i,checked:e,checkedState:a,dense:s,disabled:n,name:l,showState:h,value:d,hideLabel:p,helperText:b,inputId:u}=this;const g=e==null?a:e;o(true,this.el,l,g?d:"",n);const w=r(u,b!=="",false);return t(c,null,t("label",{class:{["ic-switch-container"]:true,["ic-switch-disabled"]:n,["ic-switch-dense"]:s},htmlFor:u},!p&&t("ic-input-label",{for:u,label:i,helperText:b,readonly:true,disabled:n,class:{["ic-switch-label"]:true,["ic-switch-label-dense"]:s}}),!p&&t("span",{class:"ic-switch-line-break"}),t("input",{checked:g,disabled:n,"aria-label":i,"aria-checked":g?"true":"false","aria-describedby":w,role:"switch",class:"ic-switch-input",type:"checkbox",name:"toggle",id:u,onFocus:this.onFocus,onBlur:this.onBlur,onChange:this.handleChange}),t("span",{class:"ic-switch-toggle"},t("svg",{class:"ic-switch-icon","aria-hidden":"true",focusable:"false",viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},t("line",{class:"ic-switch-icon-line",x1:"9",y1:s?"2":"1",x2:"9",y2:s?"8":"9"})),t("svg",{class:"ic-switch-icon","aria-hidden":"true",focusable:"false",viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},t("circle",{class:"ic-switch-icon-circle",fill:"none",cx:"5",cy:"5",r:s?"3.335":"4.445"}))),t("slot",{name:"right-adornment"}),h&&t("ic-typography",{"aria-hidden":"true",variant:"label",class:"ic-switch-checked-status"},g?"On":"Off")))}get el(){return a(this)}};h.style=n;export{h as ic_switch};
|
2
|
-
//# sourceMappingURL=p-44af91df.entry.js.map
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,h as e,H as o,g as i}from"./p-f9370be6.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{display:block}:host(.ic-typography-spacing-h2){margin:var(--ic-space-xxl) 0 var(--ic-space-lg)}:host(.ic-typography-spacing-h3){margin:var(--ic-space-xl) 0 var(--ic-space-md)}:host(.ic-typography-spacing-h4){margin:var(--ic-space-lg) 0 var(--ic-space-md)}:host(.ic-typography-spacing-subtitle-large){margin:0 0 var(--ic-space-lg)}:host(.ic-typography-spacing-body){margin:0 0 var(--ic-space-md)}:host(.ic-typography-spacing-h2:first-child),:host(.ic-typography-spacing-h3:first-child),:host(.ic-typography-spacing-h4:first-child){margin-top:0}:host(.ic-typography-h1){font:var(--ic-font-h1)}:host(.ic-typography-h2){font:var(--ic-font-h2);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-h3){font:var(--ic-font-h3)}:host(.ic-typography-h4){font:var(--ic-font-h4);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-subtitle-large){font:var(--ic-font-subtitle-large);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-subtitle-small){font:var(--ic-font-subtitle-small);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-body){font:var(--ic-font-body);letter-spacing:var(--ic-font-letter-spacing-0pt005)}:host(.ic-typography-caption){font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-caption-uppercase){font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025);text-transform:uppercase}:host(.ic-typography-label){font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025)}:host(.ic-typography-label-uppercase){font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025);text-transform:uppercase}:host(.ic-typography-no-wrap){white-space:nowrap}:host ::slotted(h1),:host ::slotted(h2),:host ::slotted(h3),:host ::slotted(h4),:host ::slotted(h5),:host ::slotted(h6),:host ::slotted(p),:host ::slotted(label){font:inherit;letter-spacing:inherit}';const n=class{constructor(e){t(this,e);this.variant="body";this.spacing=false}render(){const{variant:t,spacing:i}=this;return e(o,{class:{[`ic-typography-${t}`]:true,[`ic-typography-spacing-${t}`]:i}},e("slot",null))}get el(){return i(this)}};n.style=a;export{n as ic_typography};
|
2
|
-
//# sourceMappingURL=p-4b1b46f5.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-typography/ic-typography.css?tag=ic-typography&encapsulation=shadow","src/components/ic-typography/ic-typography.tsx"],"names":["icTypographyCss","Typography","[object Object]","variant","spacing","this","h","Host","class"],"mappings":"yDAAA,MAAMA,EAAkB,0wICSXC,EAAU,4CAMoB,oBAKb,MAE5BC,SACE,MAAMC,QAAEA,EAAOC,QAAEA,GAAYC,KAE7B,OACEC,EAACC,EAAI,CACHC,MAAO,CACLN,CAAC,iBAAiBC,KAAY,KAC9BD,CAAC,yBAAyBC,KAAYC,IAGxCE,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n}\n\n:host(.ic-typography-spacing-h2) {\n margin: var(--ic-space-xxl) 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-spacing-h3) {\n margin: var(--ic-space-xl) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-spacing-h4) {\n margin: var(--ic-space-lg) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-spacing-subtitle-large) {\n margin: 0 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-spacing-body) {\n margin: 0 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-spacing-h2:first-child),\n:host(.ic-typography-spacing-h3:first-child),\n:host(.ic-typography-spacing-h4:first-child) {\n margin-top: 0;\n}\n\n:host(.ic-typography-h1) {\n font: var(--ic-font-h1);\n}\n\n:host(.ic-typography-h2) {\n font: var(--ic-font-h2);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-h3) {\n font: var(--ic-font-h3);\n}\n\n:host(.ic-typography-h4) {\n font: var(--ic-font-h4);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-large) {\n font: var(--ic-font-subtitle-large);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-small) {\n font: var(--ic-font-subtitle-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-body) {\n font: var(--ic-font-body);\n letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-caption) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-caption-uppercase) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-label) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-label-uppercase) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-no-wrap) {\n white-space: nowrap;\n}\n\n:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label) {\n font: inherit;\n letter-spacing: inherit;\n}\n","import { Component, Prop, h, Element, Host } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\n\n@Component({\n styleUrl: \"ic-typography.css\",\n tag: \"ic-typography\",\n shadow: true,\n})\nexport class Typography {\n @Element() el: HTMLIcTypographyElement;\n\n /**\n * The ICDS typography style to use.\n */\n @Prop() variant?: IcTypographyVariants = \"body\";\n\n /**\n * Adds margin to the bottom of the typography relative to the font-size.\n */\n @Prop() spacing?: boolean = false;\n\n render() {\n const { variant, spacing } = this;\n\n return (\n <Host\n class={{\n [`ic-typography-${variant}`]: true,\n [`ic-typography-spacing-${variant}`]: spacing,\n }}\n >\n <slot />\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,c as t,h as o,H as i,g as r}from"./p-f9370be6.js";import{g as n,e as a,f as s,c as l,j as c,I as d}from"./p-e5a09372.js";const p='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(.footer-sparse){--footer-links-padding:24px 0;--footer-compliance-padding:24px 0 8px 0;--footer-logo-margin-bottom:var(--ic-space-lg);--footer-link-inner-flex-direction:row}:host(.footer-dense){--footer-links-padding:0 0;--footer-compliance-padding:16px 0 8px;--footer-logo-margin-bottom:var(--ic-space-md);--footer-link-inner-flex-direction:column}:host(.footer-light){--footer-theme-secondary:var(--ic-theme-secondary);--footer-theme-tertiary:var(--ic-theme-tertiary);--footer-keyline:var(--ic-keyline-lighten)}:host(.footer-dark){--footer-theme-secondary:var(--ic-theme-secondary-light);--footer-theme-tertiary:var(--ic-theme-tertiary-light);--footer-keyline:var(--ic-keyline-darken)}:host(.footer-dense.footer-ungrouped){--footer-links-padding:var(--ic-space-md) 0 0 0}footer{display:flex;flex-direction:column;width:100%}.footer-description{background-color:var(--footer-theme-secondary);color:var(--ic-theme-text);border-bottom:var(--footer-keyline)}.footer-description-inner{padding:16px 0}.footer-links{padding:var(--footer-links-padding);background-color:var(--footer-theme-secondary);color:var(--ic-theme-text)}.footer-links-inner{display:flex;flex-direction:var(--footer-link-inner-flex-direction)}.footer-compliance{background-color:var(--footer-theme-tertiary);color:var(--ic-theme-text)}.footer-compliance-inner{padding:var(--footer-compliance-padding)}.footer-logo{margin-bottom:var(--footer-logo-margin-bottom);display:flex;gap:var(--ic-space-xxl)}.footer-logo>::slotted(){margin-right:var(--ic-space-md)}.footer-caption{margin-bottom:var(--ic-space-md)}.classification-spacing{margin-bottom:var(--ic-space-lg)}';const f=class{constructor(o){e(this,o);this.icFooterResized=t(this,"icFooterResized",7);this.resizeObserverCallback=e=>{if(e!==this.deviceSize){this.deviceSize=e}this.icFooterResized.emit()};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const e=n();this.resizeObserverCallback(e)}));this.resizeObserver.observe(this.footerEl)};this.description=undefined;this.aligned="left";this.breakpoint="M";this.groupLinks=false;this.caption=undefined;this.copyright=true;this.deviceSize=a.XL;this.foregroundColor=s()}isDense(){const e=this.breakpoint.toUpperCase();return e==="XS"?this.deviceSize<a.XS:e==="S"?this.deviceSize<a.S:e==="M"?this.deviceSize<a.M:e==="L"?this.deviceSize<a.L:e==="XL"?this.deviceSize<a.XL:false}themeChangeHandler(e){const t=e.detail;this.foregroundColor=t.mode}componentWillLoad(){this.deviceSize=n()}componentDidLoad(){l(this.runResizeObserver)}disconnectedCallback(){this.resizeObserver.disconnect()}render(){const{aligned:e,caption:t,copyright:r,description:n,groupLinks:s,foregroundColor:l}=this;const p=this.isDense();return o(i,{class:{footer:true,[`footer-${p?"dense":"sparse"}`]:true,[`footer-${s?"grouped":"ungrouped"}`]:true,[`footer-${l}`]:true,[d.Dark]:l===d.Dark,[d.Light]:l===d.Light}},o("footer",{ref:e=>this.footerEl=e},o("div",{class:"footer-description"},o("ic-section-container",{aligned:e,fullHeight:true},o("div",{class:"footer-description-inner"},o("ic-typography",{variant:"body"},o("slot",{name:"description"},n))))),o("div",{class:"footer-links"},s&&p?o("div",{class:"footer-links-inner"},o("slot",{name:"link"})):o("ic-section-container",{fullHeight:true,aligned:e},o("div",{class:"footer-links-inner"},o("slot",{name:"link"})))),o("div",{class:"footer-compliance"},o("ic-section-container",{aligned:e,fullHeight:true},o("div",{class:"footer-compliance-inner"},o("div",{class:"footer-logo"},o("slot",{name:"logo"})),o("div",{class:"footer-caption"},o("ic-typography",{variant:this.deviceSize<=a.M?"caption":"body"},o("slot",{name:"caption"},t))),r&&o("div",{class:{["footer-copyright"]:true,["classification-spacing"]:c()}},o("ic-typography",{variant:this.deviceSize<=a.M?"caption-uppercase":"label-uppercase"},"© Crown Copyright")))))))}get el(){return r(this)}};f.style=p;export{f as ic_footer};
|
2
|
-
//# sourceMappingURL=p-4cf60a22.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","src/components/ic-footer/ic-footer.tsx"],"names":["icFooterCss","Footer","this","resizeObserverCallback","currSize","deviceSize","icFooterResized","emit","runResizeObserver","resizeObserver","ResizeObserver","getCurrentDeviceSize","observe","footerEl","IC_DEVICE_SIZES","XL","getThemeForegroundColor","[object Object]","bp","breakpoint","toUpperCase","XS","S","M","L","ev","theme","detail","foregroundColor","mode","checkResizeObserver","disconnect","aligned","caption","copyright","description","groupLinks","dense","isDense","h","Host","class","footer","IcThemeForegroundEnum","Dark","Light","ref","fullHeight","variant","name","hasClassificationBanner"],"mappings":"uIAAA,MAAMA,EAAc,+9HCsCPC,EAAM,gFAmETC,KAAAC,uBAA0BC,IAChC,GAAIA,IAAaF,KAAKG,WAAY,CAChCH,KAAKG,WAAaD,EAEpBF,KAAKI,gBAAgBC,QAGfL,KAAAM,kBAAoB,KAC1BN,KAAKO,eAAiB,IAAIC,gBAAe,KACvC,MAAMN,EAAWO,IACjBT,KAAKC,uBAAuBC,MAG9BF,KAAKO,eAAeG,QAAQV,KAAKW,mDAhEH,uBAKW,oBAKZ,4CAUF,qBAECC,EAAgBC,wBAEAC,IAEtCC,UACN,MAAMC,EAAKhB,KAAKiB,WAAWC,cAE3B,OAAOF,IAAO,KACVhB,KAAKG,WAAaS,EAAgBO,GAClCH,IAAO,IACPhB,KAAKG,WAAaS,EAAgBQ,EAClCJ,IAAO,IACPhB,KAAKG,WAAaS,EAAgBS,EAClCL,IAAO,IACPhB,KAAKG,WAAaS,EAAgBU,EAClCN,IAAO,KACPhB,KAAKG,WAAaS,EAAgBC,GAClC,MAINE,mBAAmBQ,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BzB,KAAK0B,gBAAkBF,EAAMG,KAsB/BZ,oBACEf,KAAKG,WAAaM,IAGpBM,mBACEa,EAAoB5B,KAAKM,mBAG3BS,uBACEf,KAAKO,eAAesB,aAGtBd,SACE,MAAMe,QACJA,EAAOC,QACPA,EAAOC,UACPA,EAASC,YACTA,EAAWC,WACXA,EAAUR,gBACVA,GACE1B,KACJ,MAAMmC,EAAQnC,KAAKoC,UAEnB,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,OAAQ,KACRzB,CAAC,UAAUoB,EAAQ,QAAU,YAAa,KAC1CpB,CAAC,UAAUmB,EAAa,UAAY,eAAgB,KACpDnB,CAAC,UAAUW,KAAoB,KAE/BX,CAAC0B,EAAsBC,MACrBhB,IAAoBe,EAAsBC,KAC5C3B,CAAC0B,EAAsBE,OACrBjB,IAAoBe,EAAsBE,QAG9CN,EAAA,SAAA,CAAQO,IAAMjC,GAAcX,KAAKW,SAAWA,GAE1C0B,EAAA,MAAA,CAAKE,MAAM,sBACTF,EAAA,uBAAA,CAAsBP,QAASA,EAASe,WAAY,MAClDR,EAAA,MAAA,CAAKE,MAAM,4BACTF,EAAA,gBAAA,CAAeS,QAAQ,QACrBT,EAAA,OAAA,CAAMU,KAAK,eAAed,OAOlCI,EAAA,MAAA,CAAKE,MAAM,gBACRL,GAAcC,EACbE,EAAA,MAAA,CAAKE,MAAM,sBACTF,EAAA,OAAA,CAAMU,KAAK,UAGbV,EAAA,uBAAA,CAAsBQ,WAAU,KAACf,QAASA,GACxCO,EAAA,MAAA,CAAKE,MAAM,sBACTF,EAAA,OAAA,CAAMU,KAAK,YAOnBV,EAAA,MAAA,CAAKE,MAAM,qBACTF,EAAA,uBAAA,CAAsBP,QAASA,EAASe,WAAY,MAClDR,EAAA,MAAA,CAAKE,MAAM,2BACTF,EAAA,MAAA,CAAKE,MAAM,eAETF,EAAA,OAAA,CAAMU,KAAK,UAEbV,EAAA,MAAA,CAAKE,MAAM,kBACTF,EAAA,gBAAA,CACES,QACE9C,KAAKG,YAAcS,EAAgBS,EAAI,UAAY,QAGrDgB,EAAA,OAAA,CAAMU,KAAK,WAAWhB,KAGzBC,GACCK,EAAA,MAAA,CACEE,MAAO,CACLxB,CAAC,oBAAqB,KACtBA,CAAC,0BAA2BiC,MAG9BX,EAAA,gBAAA,CACES,QACE9C,KAAKG,YAAcS,EAAgBS,EAC/B,oBACA,mBAAiB","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n}\n\n:host(.footer-sparse) {\n --footer-links-padding: 24px 0;\n --footer-compliance-padding: 24px 0 8px 0;\n --footer-logo-margin-bottom: var(--ic-space-lg);\n --footer-link-inner-flex-direction: row;\n}\n\n:host(.footer-dense) {\n --footer-links-padding: 0 0;\n --footer-compliance-padding: 16px 0 8px;\n --footer-logo-margin-bottom: var(--ic-space-md);\n --footer-link-inner-flex-direction: column;\n}\n\n:host(.footer-light) {\n --footer-theme-secondary: var(--ic-theme-secondary);\n --footer-theme-tertiary: var(--ic-theme-tertiary);\n --footer-keyline: var(--ic-keyline-lighten);\n}\n\n:host(.footer-dark) {\n --footer-theme-secondary: var(--ic-theme-secondary-light);\n --footer-theme-tertiary: var(--ic-theme-tertiary-light);\n --footer-keyline: var(--ic-keyline-darken);\n}\n\n:host(.footer-dense.footer-ungrouped) {\n --footer-links-padding: var(--ic-space-md) 0 0 0;\n}\n\n/* Main inner footer element */\nfooter {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n/* Description */\n\n.footer-description {\n background-color: var(--footer-theme-secondary);\n color: var(--ic-theme-text);\n border-bottom: var(--footer-keyline);\n}\n\n.footer-description-inner {\n padding: 16px 0;\n}\n\n/* Links */\n\n.footer-links {\n padding: var(--footer-links-padding);\n background-color: var(--footer-theme-secondary);\n color: var(--ic-theme-text);\n}\n\n.footer-links-inner {\n display: flex;\n flex-direction: var(--footer-link-inner-flex-direction);\n}\n\n/* Compliance */\n\n.footer-compliance {\n background-color: var(--footer-theme-tertiary);\n color: var(--ic-theme-text);\n}\n\n.footer-compliance-inner {\n padding: var(--footer-compliance-padding);\n}\n\n.footer-logo {\n margin-bottom: var(--footer-logo-margin-bottom);\n display: flex;\n gap: var(--ic-space-xxl);\n}\n\n.footer-logo > ::slotted() {\n margin-right: var(--ic-space-md);\n}\n\n.footer-caption {\n margin-bottom: var(--ic-space-md);\n}\n\n.classification-spacing {\n margin-bottom: var(--ic-space-lg);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Prop,\n State,\n h,\n Host,\n Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n getCurrentDeviceSize,\n getThemeForegroundColor,\n checkResizeObserver,\n hasClassificationBanner,\n} from \"../../utils/helpers\";\nimport {\n IcAlignment,\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer\n * @slot link - Content will be rendered between description and logos\n * @slot logo - Content will be rendered underneath footer links\n * @slot caption - Content will be rendered above Crown Copyright\n */\n\n@Component({\n tag: \"ic-footer\",\n styleUrl: \"ic-footer.css\",\n shadow: true,\n})\nexport class Footer {\n @Element() el: HTMLIcFooterElement;\n\n /**\n * Triggers on page resize and triggers style changes in footer links and link groups\n */\n @Event() icFooterResized: EventEmitter<void>;\n\n /**\n * The description displayed at the top of the footer\n */\n @Prop() description: string;\n\n /**\n * Sets the aligned parameter for the section containers used within the footer\n */\n @Prop() aligned?: IcAlignment = \"left\";\n\n /**\n * Sets the screen size breakpoint at which to switch to the dense layout\n */\n @Prop() breakpoint?: IcFooterBreakpoints = \"M\";\n\n /**\n * Sets the footer up to handle link groups instead of standalone links\n */\n @Prop() groupLinks?: boolean = false;\n\n /**\n * The caption displayed at the bottom of the footer\n */\n @Prop() caption: string;\n\n /**\n * Whether the footer displays the crown copyright at the bottom\n */\n @Prop() copyright: boolean = true;\n\n @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n private isDense() {\n const bp = this.breakpoint.toUpperCase();\n\n return bp === \"XS\"\n ? this.deviceSize < IC_DEVICE_SIZES.XS\n : bp === \"S\"\n ? this.deviceSize < IC_DEVICE_SIZES.S\n : bp === \"M\"\n ? this.deviceSize < IC_DEVICE_SIZES.M\n : bp === \"L\"\n ? this.deviceSize < IC_DEVICE_SIZES.L\n : bp === \"XL\"\n ? this.deviceSize < IC_DEVICE_SIZES.XL\n : false;\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 resizeObserver: ResizeObserver;\n private footerEl: HTMLElement;\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n this.icFooterResized.emit();\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.footerEl);\n };\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n disconnectedCallback(): void {\n this.resizeObserver.disconnect();\n }\n\n render() {\n const {\n aligned,\n caption,\n copyright,\n description,\n groupLinks,\n foregroundColor,\n } = this;\n const dense = this.isDense();\n\n return (\n <Host\n class={{\n footer: true,\n [`footer-${dense ? \"dense\" : \"sparse\"}`]: true,\n [`footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n [`footer-${foregroundColor}`]: true,\n // Slots will be able to infer their own color\n [IcThemeForegroundEnum.Dark]:\n foregroundColor === IcThemeForegroundEnum.Dark,\n [IcThemeForegroundEnum.Light]:\n foregroundColor === IcThemeForegroundEnum.Light,\n }}\n >\n <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n {/* Description */}\n <div class=\"footer-description\">\n <ic-section-container aligned={aligned} fullHeight={true}>\n <div class=\"footer-description-inner\">\n <ic-typography variant=\"body\">\n <slot name=\"description\">{description}</slot>\n </ic-typography>\n </div>\n </ic-section-container>\n </div>\n\n {/* Links */}\n <div class=\"footer-links\">\n {groupLinks && dense ? (\n <div class=\"footer-links-inner\">\n <slot name=\"link\" />\n </div>\n ) : (\n <ic-section-container fullHeight aligned={aligned}>\n <div class=\"footer-links-inner\">\n <slot name=\"link\" />\n </div>\n </ic-section-container>\n )}\n </div>\n\n {/* Compliance (logo, caption, copyright) */}\n <div class=\"footer-compliance\">\n <ic-section-container aligned={aligned} fullHeight={true}>\n <div class=\"footer-compliance-inner\">\n <div class=\"footer-logo\">\n {/* Logo */}\n <slot name=\"logo\" />\n </div>\n <div class=\"footer-caption\">\n <ic-typography\n variant={\n this.deviceSize <= IC_DEVICE_SIZES.M ? \"caption\" : \"body\"\n }\n >\n <slot name=\"caption\">{caption}</slot>\n </ic-typography>\n </div>\n {copyright && (\n <div\n class={{\n [\"footer-copyright\"]: true,\n [\"classification-spacing\"]: hasClassificationBanner(),\n }}\n >\n <ic-typography\n variant={\n this.deviceSize <= IC_DEVICE_SIZES.M\n ? \"caption-uppercase\"\n : \"label-uppercase\"\n }\n >\n © Crown Copyright\n </ic-typography>\n </div>\n )}\n </div>\n </ic-section-container>\n </div>\n </footer>\n </Host>\n );\n }\n}\n"]}
|