@ukic/web-components 2.0.0-alpha.125 → 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-ea79c7b0.js → helpers-60fda93f.js} +9 -20
- 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 +2 -1
- 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 +9 -8
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js +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 +15 -16
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-select.cjs.entry.js +14 -13
- 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-42876f02.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 -5
- 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-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 +12 -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 +2 -2
- 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 +2 -2
- package/dist/collection/components/ic-menu/ic-menu.js +4 -4
- package/dist/collection/components/ic-menu/ic-menu.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 +1 -1
- package/dist/collection/components/ic-search-bar/ic-search-bar.js +11 -31
- package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select.css +2 -2
- package/dist/collection/components/ic-select/ic-select.js +9 -9
- 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 +12 -12
- package/dist/collection/components/ic-typography/ic-typography.js +5 -5
- package/dist/collection/components/ic-typography/ic-typography.js.map +1 -1
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/components/helpers.js +2 -13
- 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-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 +3 -3
- 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 +12 -14
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-select.js +10 -9
- 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.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-b70f2538.entry.js.map → p-21025b10.entry.js.map} +1 -1
- package/dist/core/p-27528d04.entry.js +2 -0
- package/dist/core/{p-0cf51da5.entry.js.map → p-27528d04.entry.js.map} +1 -1
- package/dist/core/p-3013158d.entry.js +2 -0
- package/dist/core/{p-01a17304.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-211465cf.entry.js.map → p-3d6902a3.entry.js.map} +1 -1
- package/dist/core/p-400b34b9.entry.js +2 -0
- package/dist/core/{p-7f27efda.entry.js.map → p-400b34b9.entry.js.map} +1 -1
- package/dist/core/p-438e327e.entry.js +2 -0
- package/dist/core/{p-10531d9a.entry.js.map → p-438e327e.entry.js.map} +1 -1
- package/dist/core/p-4aa8c1e1.entry.js +2 -0
- package/dist/core/{p-92cc098f.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-08239789.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-3a7725ed.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-889744b7.entry.js.map → p-71282f37.entry.js.map} +1 -1
- package/dist/core/p-73d41c36.entry.js +2 -0
- package/dist/core/{p-01450166.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-49831676.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-36e9f6ff.entry.js.map → p-a301cf67.entry.js.map} +1 -1
- package/dist/core/p-aebc7562.entry.js +2 -0
- package/dist/core/{p-3d95b097.entry.js.map → p-aebc7562.entry.js.map} +1 -1
- package/dist/core/p-be583c9b.entry.js +2 -0
- package/dist/core/{p-961c9038.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-5928296a.entry.js.map → p-c817e46b.entry.js.map} +1 -1
- 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-bbff1667.entry.js.map → p-c96985bc.entry.js.map} +1 -1
- package/dist/core/p-d4c6f4fb.entry.js +2 -0
- package/dist/core/{p-09c0cd28.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-a334ed34.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-e2304886.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-63cb8828.js → helpers-8b43d0d4.js} +3 -14
- 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 +2 -1
- 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 +8 -7
- 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 +11 -12
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-select.entry.js +9 -8
- 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 +2 -2
- 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 +2 -2
- 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 +1 -1
- package/dist/types/components.d.ts +191 -215
- package/dist/types/utils/types.d.ts +1 -0
- package/hydrate/index.js +223 -235
- package/package.json +4 -4
- package/dist/cjs/helpers-ea79c7b0.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-01450166.entry.js +0 -2
- package/dist/core/p-01a17304.entry.js +0 -2
- package/dist/core/p-08239789.entry.js +0 -2
- package/dist/core/p-09c0cd28.entry.js +0 -2
- package/dist/core/p-0cf51da5.entry.js +0 -2
- package/dist/core/p-10531d9a.entry.js +0 -2
- package/dist/core/p-14ba2f18.js +0 -2
- package/dist/core/p-14ba2f18.js.map +0 -1
- package/dist/core/p-211465cf.entry.js +0 -2
- package/dist/core/p-2c687b76.entry.js +0 -2
- package/dist/core/p-2c687b76.entry.js.map +0 -1
- package/dist/core/p-2d5824f1.entry.js +0 -2
- package/dist/core/p-2d5824f1.entry.js.map +0 -1
- package/dist/core/p-34e5ee10.entry.js +0 -2
- package/dist/core/p-34e5ee10.entry.js.map +0 -1
- package/dist/core/p-35b91376.entry.js +0 -2
- package/dist/core/p-35b91376.entry.js.map +0 -1
- package/dist/core/p-36e9f6ff.entry.js +0 -2
- package/dist/core/p-3a7725ed.entry.js +0 -2
- package/dist/core/p-3d95b097.entry.js +0 -2
- package/dist/core/p-40a17d61.entry.js +0 -2
- package/dist/core/p-40a17d61.entry.js.map +0 -1
- package/dist/core/p-41dab885.entry.js +0 -2
- package/dist/core/p-41dab885.entry.js.map +0 -1
- package/dist/core/p-42876f02.entry.js +0 -2
- package/dist/core/p-483ba0f6.entry.js +0 -2
- package/dist/core/p-483ba0f6.entry.js.map +0 -1
- package/dist/core/p-49831676.entry.js +0 -2
- package/dist/core/p-55a8f5b6.entry.js +0 -2
- package/dist/core/p-55a8f5b6.entry.js.map +0 -1
- package/dist/core/p-5928296a.entry.js +0 -2
- package/dist/core/p-66800ec4.entry.js +0 -2
- package/dist/core/p-66800ec4.entry.js.map +0 -1
- package/dist/core/p-7c207056.entry.js +0 -2
- package/dist/core/p-7c207056.entry.js.map +0 -1
- package/dist/core/p-7f27efda.entry.js +0 -2
- package/dist/core/p-87fc80f1.entry.js +0 -2
- package/dist/core/p-87fc80f1.entry.js.map +0 -1
- package/dist/core/p-886e7a24.entry.js +0 -2
- package/dist/core/p-886e7a24.entry.js.map +0 -1
- package/dist/core/p-889744b7.entry.js +0 -2
- package/dist/core/p-92cc098f.entry.js +0 -2
- package/dist/core/p-961c9038.entry.js +0 -2
- package/dist/core/p-9753e5f2.entry.js +0 -2
- package/dist/core/p-9753e5f2.entry.js.map +0 -1
- package/dist/core/p-a334ed34.entry.js +0 -2
- package/dist/core/p-b70f2538.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-bbff1667.entry.js +0 -2
- package/dist/core/p-c0bfb272.entry.js +0 -2
- package/dist/core/p-c0bfb272.entry.js.map +0 -1
- package/dist/core/p-cd14a9dc.entry.js +0 -2
- package/dist/core/p-cd14a9dc.entry.js.map +0 -1
- package/dist/core/p-d7af7446.entry.js +0 -2
- package/dist/core/p-d7af7446.entry.js.map +0 -1
- package/dist/core/p-e2304886.entry.js +0 -2
- package/dist/core/p-f90ce9ca.entry.js +0 -2
- package/dist/core/p-f90ce9ca.entry.js.map +0 -1
- package/dist/esm/helpers-63cb8828.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
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as t,c as i,h as e,H as o,g as a}from"./p-f9370be6.js";import{C as r,j as n,k as s,a as c}from"./p-c15bb762.js";import{I as l}from"./p-6f57b13c.js";import{c as d}from"./p-ec26fc38.js";const u='/*! 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;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-active);--button-default-background-hover:var(--ic-action-default-bg-hover);--button-default-background-active:var(--ic-action-default-bg-active);--icon-width:100%;--icon-height:100%}.button{font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:14px;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:100px;display:inline-flex;gap:var(--ic-space-xs);flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}.button:hover{cursor:pointer}.button:focus,:host .button:focus{box-shadow:var(--ic-border-focus)}:host(.light) .button:focus{box-shadow:var(--ic-border-focus)}.button:focus-visible{outline:none}:host(.dark) .button{--button-default:var(--ic-action-dark);--button-default-hover:var(--ic-action-dark);--button-default-active:var(--ic-action-dark);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-active)}:host(.light) .button{--button-default:var(--ic-action-light);--button-default-hover:var(--ic-action-light);--button-default-active:var(--ic-action-light);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-active)}:host(.button-variant-primary.light) .button{color:var(--ic-color-primary-text);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}:host(.button-variant-primary.dark) .button{--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}:host(.disabled),:host(.disabled) .button,:host(.loading),:host(.loading) .button{pointer-events:none}:host(.button-variant-primary) .button{color:var(--ic-architectural-white);background-color:var(--button-default)}:host(.button-variant-primary) .button:hover:not(:focus){background-color:var(--button-default-hover)}:host(.button-variant-primary) .button:active:not(:focus),:host(.button-variant-primary.loading) .button{background-color:var(--button-default-active)}:host(.button-variant-primary.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-variant-primary.light.disabled) .button{background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.button-variant-secondary) .button{border:1px solid var(--button-default);color:var(--button-default)}:host(.button-variant-secondary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.button-variant-secondary) .button:active:not(:focus){border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.disabled) .button,:host(.button-variant-secondary.disabled) .button:hover,:host(.button-variant-secondary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-secondary.light.disabled) .button,:host(.button-variant-secondary.light.disabled) .button:hover,:host(.button-variant-secondary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-tertiary) .button{color:var(--button-default)}:host(.button-variant-tertiary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-tertiary) .button:active:not(:focus),:host(.button-variant-tertiary.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-tertiary.disabled) .button,:host(.button-variant-tertiary.disabled) .button:hover,:host(.button-variant-tertiary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-tertiary.light.disabled) .button,:host(.button-variant-tertiary.light.disabled) .button:hover,:host(.button-variant-tertiary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-icon) .button{color:var(--button-default);min-width:0}:host(.button-variant-icon) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button:active:not(:focus),:host(.button-variant-icon.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-icon.disabled) .button,:host(.button-variant-icon.disabled) .button:hover,:host(.button-variant-icon.disabled) .button:active{color:var(--ic-architectural-300);background:none}:host(.button-variant-destructive) .button{color:var(--ic-architectural-white);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.button-variant-destructive) .button:hover:not(:focus){background-color:var(--ic-action-destructive-hover)}:host(.button-variant-destructive) .button:active:not(:focus),:host(.button-variant-destructive.loading) .button{background-color:var(--ic-action-destructive-active)}:host(.button-variant-destructive.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-size-default) .button{height:40px;padding:var(--ic-space-xs) var(--ic-space-md)}:host(.button-size-small) .button{height:var(--ic-space-xl);padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.button-size-large) .button{height:var(--ic-space-xxl);padding:var(--ic-space-sm) var(--ic-space-md)}:host(.button-size-default.button-variant-icon) .button{height:var(--ic-space-xl);width:var(--ic-space-xl);padding:6px}:host(.button-size-small.button-variant-icon) .button{height:var(--ic-space-lg);width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.button-size-large.button-variant-icon) .button{height:40px;width:40px;padding:var(--ic-space-xs)}:host(.full-width),:host(.full-width) .button{width:100%}div.loading-container{position:relative;align-items:center}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center}::slotted(svg){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:20px;--icon-width:20px}:host(.search-submit-button-small) ::slotted(svg){--icon-height:16px;--icon-width:16px}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.menu-close-button) ::slotted(svg){--icon-height:14px;--icon-width:14px}:host(.popout-menu-button) .button{justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}';var h=undefined&&undefined.__rest||function(t,i){var e={};for(var o in t)if(Object.prototype.hasOwnProperty.call(t,o)&&i.indexOf(o)<0)e[o]=t[o];if(t!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,o=Object.getOwnPropertySymbols(t);a<o.length;a++){if(i.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(t,o[a]))e[o[a]]=t[o[a]]}return e};let b=0;const p=class{constructor(e){t(this,e);this.icFocus=i(this,"icFocus",7);this.icBlur=i(this,"icBlur",7);this.calculatedWidth=68;this.inheritedAttributes={};this.hasTooltip=false;this.buttonIdNum=b++;this.handleClick=()=>{if((this.el.type==="submit"||this.el.type==="reset")&&!!this.el.closest("FORM")){this.handleHiddenFormButtonClick(this.el.closest("FORM"))}};this.onFocus=()=>{this.icFocus.emit()};this.onBlur=()=>{this.icBlur.emit()};this.disabled=false;this.loading=false;this.type="button";this.href=undefined;this.target=undefined;this.rel=undefined;this.download=false;this.hreflang=undefined;this.referrerpolicy=undefined;this.variant="primary";this.size="default";this.fullWidth=false;this.disableTooltip=false;this.tooltipPlacement="bottom";this.appearance="default"}calculateWidth(){this.calculatedWidth=this.el.offsetWidth-2*this.el.offsetLeft}handleHostClick(t){if(this.disabled||this.loading){t.stopImmediatePropagation()}}themeChangeHandler(t){const i=t.detail;this.updateTheme(i.mode)}async setFocus(){if(this.buttonEl){this.buttonEl.focus()}}async updateAriaLabel(t){if(this.hasTooltip){this.tooltipEl.label=t;this.buttonEl.setAttribute("aria-label",t)}}getLoadingBarWidth(){return{width:`${this.calculatedWidth.toString()}px`}}hasIconSlot(){const t=this.el.querySelector(`[slot="icon"]`);if(t!=null){return true}return false}handleHiddenFormButtonClick(t){const i=document.createElement("button");i.setAttribute("type",this.el.type);i.style.display="none";t.appendChild(i);i.click();i.remove()}updateTheme(t=null){const i=r(this.el,t||null);if(i!==l.Default){this.appearance=i}}componentWillLoad(){this.inheritedAttributes=n(this.el,[...s,"aria-expanded","title"]);const t=this.el.id;this.id=t!==undefined?t:null;this.hasTooltip=this.variant==="icon"}componentDidLoad(){this.calculateWidth();this.updateTheme()}render(){const t=this.href&&"a"||"button";const i=this.inheritedAttributes,{title:a,"aria-label":r}=i,n=h(i,["title","aria-label"]);const s=t==="button"?{type:this.type,disabled:this.disabled}:{download:this.download!==false?this.download:null,href:this.href,rel:this.rel,target:this.target,referrerpolicy:this.referrerpolicy,hreflang:this.hreflang};const c=a&&a;const d=this.hasTooltip?{}:{title:c};let u="";if(this.hasTooltip){if(c!==undefined){u=c}else if(r!==null){u=r}}let b=null;let p=null;if(this.hasTooltip){p=this.id!==null?`ic-button-with-tooltip-${this.id}`:`ic-button-with-tooltip-${this.buttonIdNum}`;b=`ic-tooltip-${p}`}const v=()=>e(t,Object.assign({class:"button","aria-disabled":this.loading||this.disabled?"true":null,"aria-label":this.loading?"Loading":r},s,n,d,{onFocus:this.onFocus,onBlur:this.onBlur,ref:t=>this.buttonEl=t,id:p,"aria-describedby":b}),this.hasIconSlot()&&!this.loading&&e("div",{class:"icon-container"},e("slot",{name:"icon"})),this.loading?e("div",{class:"loading-container",style:this.getLoadingBarWidth()},e("ic-loading-indicator",{type:"linear",appearance:this.variant==="primary"||this.variant==="destructive"||this.appearance===l.Dark||this.appearance===l.Light?"light":"dark"})):e("slot",null));return e(o,{class:{["disabled"]:this.disabled&&!this.loading,[`button-variant-${this.variant}`]:true,[`button-size-${this.size}`]:true,["loading"]:this.loading,["dark"]:this.appearance===l.Dark,["light"]:this.appearance===l.Light,["full-width"]:this.fullWidth},onClick:this.handleClick},this.hasTooltip&&e("ic-tooltip",{class:{["tooltip-disabled-button"]:this.disableTooltip},ref:t=>this.tooltipEl=t,label:u,target:p,placement:this.tooltipPlacement},e(v,null)),!this.hasTooltip&&e(v,null))}get el(){return a(this)}static get watchers(){return{loading:["calculateWidth"]}}};p.style=u;const v='/*! 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;--linear-border-radius:4px;--inner-color:var(--ic-action-default);--outer-color:var(--ic-architectural-100);--label-color:var(--ic-color-primary-text);--margin:none;--linear-line-height:var(--ic-space-xs)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size="small"]){--circular-diameter:40px;--linear-line-height:var(--ic-space-xxs)}:host([size="default"]){--circular-diameter:80px}:host([size="large"]){--circular-diameter:160px}:host([size="icon"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:20px}:host([label]){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{white-space:nowrap;color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{box-shadow:inset 0 0 0 var(--circular-line-width) var(--outer-color);height:var(--circular-diameter);width:var(--circular-diameter);border-radius:50%;position:relative}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}.ic-loading-circular-inner{height:var(--circular-diameter);width:var(--circular-diameter);border-radius:50%;position:relative}.indeterminate>.ic-loading-circular-inner{box-shadow:inset 0 0 0 var(--circular-line-width) var(--inner-color);-webkit-clip-path:inset(0 50% 50% 0);clip-path:inset(0 50% 50% 0)}.determinate>.ic-loading-circular-inner{position:absolute;top:0;left:0;bottom:0;right:0}.determinate>.ic-loading-circular-inner.clip{clip:rect(\n 0,\n var(--circular-diameter),\n var(--circular-diameter),\n calc(var(--circular-diameter) / 2)\n )}.ic-loading-circular-inner .left,.ic-loading-circular-inner .right{height:100%;width:100%;border:var(--circular-line-width) solid var(--inner-color);border-radius:50%;box-sizing:border-box;clip:rect(\n 0,\n calc(var(--circular-diameter) / 2),\n var(--circular-diameter),\n 0\n );position:absolute;left:0;top:0}.indeterminate>.ic-loading-circular-inner .left,.indeterminate>.ic-loading-circular-inner .right{display:none}.determinate>.ic-loading-circular-inner .left{transform:rotate(var(--circular-rotation))}.determinate>.ic-loading-circular-inner .right{transform:rotate(180deg)}.determinate>.ic-loading-circular-inner.clip .right{display:none}.ic-loading-circular-outer::before{content:"";height:var(--circular-line-width);width:var(--circular-line-width);border-radius:50%;background-color:var(--inner-color);position:absolute;display:block;top:calc(50% - var(--circular-line-width) / 2)}.ic-loading-circular-outer::after{content:"";height:var(--circular-line-width);width:var(--circular-line-width);border-radius:50%;background-color:var(--inner-color);position:absolute;display:block;top:0;left:calc(50% - var(--circular-line-width) / 2)}.ic-loading-circular-outer.determinate::before,.ic-loading-circular-outer.determinate::after{display:none}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host([full-width]){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}:host(.light){--inner-color:var(--ic-architectural-white);--outer-color:var(--ic-architectural-800);--label-color:var(--ic-architectural-white)}';const f=class{constructor(i){t(this,i);this.getLabel=(t,i)=>new Promise((()=>{setInterval((()=>{if(t<this.labelList.length-1){t++}else{t=0}i(this.labelList[t])}),this.labelDuration)}));this.getLabelVariant=()=>{var t;let i="h4";const e=(t=this.outerElement)===null||t===void 0?void 0:t.offsetWidth;if(this.size==="small"||this.type==="circular"&&e<60){i="label"}else if(this.size==="large"||this.type==="circular"&&e>=120){i="h2"}return i};this.setCircleLineWidth=()=>{var t;const i=(t=this.outerElement)===null||t===void 0?void 0:t.offsetWidth;if(i){this.outerElement.style.setProperty("--circular-line-width",`${i*.1}px`)}};this.setDeterminateWidth=()=>{if(!this.innerElement)return;const t=Math.min(this.max,Math.max(this.min,this.progress));const i=(t-this.min)/(this.max-this.min);this.showSecond=i>.5;if(this.showSecond){this.innerElement.classList.remove("clip")}else{this.innerElement.classList.add("clip")}this.innerElement.style.setProperty("--circular-rotation",`${i*360}deg`);this.innerElement.style.setProperty("--linear-width",`${i*100}%`)};this.calcOuterClass=()=>{let t=`ic-loading-${this.type}-outer`;t+=this.indeterminate?" indeterminate":" determinate";return t};this.updateLabel=()=>{if(this.label!==undefined){this.labelList=this.label.split("/");const t=0;this.indicatorLabel=this.labelList[t];if(this.labelList.length>1){this.getLabel(t,(t=>{this.indicatorLabel=t}))}}};this.progress=undefined;this.min=0;this.max=100;this.label=undefined;this.description="Loading";this.labelDuration=8e3;this.size="default";this.type="circular";this.fullWidth=false;this.appearance="dark";this.indicatorLabel=undefined;this.indeterminate=undefined;this.showSecond=false}watchPropHandler(){this.updateLabel()}componentWillLoad(){this.indeterminate=this.progress===undefined;this.updateLabel()}componentDidLoad(){this.setCircleLineWidth();if(Number(this.progress)>=0){this.setDeterminateWidth()}}componentWillUpdate(){this.indeterminate=this.progress===undefined}componentDidUpdate(){if(Number(this.progress)>=0){this.setDeterminateWidth()}}render(){const{appearance:t,label:i,description:a,size:r}=this;return e(o,{class:{["light"]:t===l.Light}},e("div",{class:"ic-loading-container"},e("div",{ref:t=>this.outerElement=t,class:this.calcOuterClass(),role:"progressbar","aria-labelledby":this.label&&this.size!=="icon"&&"ic-loading-label","aria-label":a,"aria-valuenow":this.progress,"aria-valuemin":this.min,"aria-valuemax":this.max},e("div",{ref:t=>this.innerElement=t,class:`ic-loading-${this.type}-inner`},this.indeterminate||e("div",{class:"left"}),this.indeterminate||e("div",{class:"right"}))),i&&r!=="icon"&&e("ic-typography",{id:"ic-loading-label",class:"ic-loading-label",role:"status",variant:this.getLabelVariant()},e("p",null,this.indicatorLabel))))}get host(){return a(this)}static get watchers(){return{label:["watchPropHandler"]}}};f.style=v;const m='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-tooltip) .ic-tooltip-container{background-color:var(--ic-architectural-800);color:#ffff;text-align:center;padding:var(--ic-space-xxxs) 10px;border-radius:var(--ic-border-radius);position:absolute;max-width:320px;display:none;z-index:calc(var(--ic-z-index-overlay) / 2);box-shadow:var(--ic-elevation-overlay)}:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed)) .ic-tooltip-container,:host(.tooltip-disabled-button) .ic-tooltip-container{display:none !important}:host(.tooltip-long-label-navigation-item-side-nav-expanded) .ic-tooltip-container[data-show]{display:block !important}:host(.ic-tooltip) .ic-tooltip-arrow,:host(.ic-tooltip) .ic-tooltip-arrow::before{position:absolute;background:inherit;width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-tooltip) .ic-tooltip-arrow{visibility:hidden}:host(.ic-tooltip) .ic-tooltip-arrow::before{visibility:visible;content:""}:host(.ic-tooltip) .ic-tooltip-container[data-show]{display:block}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="top"]>.ic-tooltip-arrow{bottom:calc(-1 * var(--ic-space-md))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="top"]>.ic-tooltip-arrow::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;height:var(--ic-space-xxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="bottom"]>.ic-tooltip-arrow{top:calc(-1 * var(--ic-space-xxs))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="bottom"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;height:var(--ic-space-xxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="left"]>.ic-tooltip-arrow{right:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="left"]>.ic-tooltip-arrow::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="right"]>.ic-tooltip-arrow{left:-14px}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^="right"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius)}:host([target="ic-button-with-tooltip-search-submit-button"]) .ic-tooltip-container,:host([target="ic-button-with-tooltip-clear-button"]) .ic-tooltip-container{z-index:calc(var(--ic-z-index-popup-menu) + 1)}';const g=class{constructor(i){t(this,i);this.mouseOverTool=false;this.showEvents=["mouseenter","focusin"];this.instantHideEvents=["focusout"];this.delayedHideEvents=["mouseleave"];this.show=t=>{this.toolTip.setAttribute("data-show","");t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:true}]})));t.update()};this.hide=t=>{this.toolTip.removeAttribute("data-show");t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:false}]})))};this.checkCloseTooltip=t=>{setTimeout((()=>{if(!this.mouseOverTool){this.hide(t)}}),100)};this.mouseEnterTooltip=()=>{this.mouseOverTool=true};this.mouseLeaveTooltip=t=>{this.mouseOverTool=false;this.checkCloseTooltip(t)};this.handleKeyDown=t=>{if(t==="Escape"){this.hide(this.popperInstance)}};this.manageEventListeners=t=>{const i=t==="add"?"addEventListener":"removeEventListener";this.showEvents.forEach((t=>{this.el[i](t,(()=>this.show(this.popperInstance)));this.toolTip[i](t,(()=>this.mouseEnterTooltip()))}));this.instantHideEvents.forEach((t=>{this.el[i](t,(()=>this.hide(this.popperInstance)))}));this.delayedHideEvents.forEach((t=>{this.el[i](t,(()=>this.checkCloseTooltip(this.popperInstance)));this.toolTip[i](t,(()=>this.mouseLeaveTooltip(this.popperInstance)))}));document[i]("keydown",(t=>this.handleKeyDown(t.key)))};this.screenReaderOnlyStyles={position:"absolute",left:"-10000px",top:"auto",width:"1px",height:"1px",overflow:"hidden"};this.target=undefined;this.placement="bottom";this.label=undefined}updateLabel(t){const i=this.el.previousElementSibling;i.innerText=t}componentDidLoad(){this.popperInstance=d(this.el,this.toolTip,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,10]}},{name:"arrow",options:{element:this.arrow}}]});this.manageEventListeners("add");c([{prop:this.label,propName:"label"}],"Tooltip");if(this.target!==undefined){const t=document.createElement("span");t.id=`ic-tooltip-${this.target}`;t.innerText=this.label;t.classList.add("ic-tooltip-label");Object.assign(t.style,this.screenReaderOnlyStyles);this.el.insertAdjacentElement("beforebegin",t)}}disconnectedCallback(){this.manageEventListeners("remove")}render(){const{label:t}=this;return e(o,{class:{"ic-tooltip":true}},e("div",{ref:t=>this.toolTip=t,role:"tooltip",class:"ic-tooltip-container"},e("ic-typography",{variant:"caption"},t),e("div",{ref:t=>this.arrow=t,class:"ic-tooltip-arrow","data-popper-arrow":true})),e("slot",null))}get el(){return a(this)}static get watchers(){return{label:["updateLabel"]}}};g.style=m;export{p as ic_button,f as ic_loading_indicator,g as ic_tooltip};
|
2
|
+
//# sourceMappingURL=p-605e4270.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","src/components/ic-button/ic-button.tsx","src/components/ic-loading-indicator/ic-loading-indicator.css?tag=ic-loading-indicator&encapsulation=shadow","src/components/ic-loading-indicator/ic-loading-indicator.tsx","src/components/ic-tooltip/ic-tooltip.css?tag=ic-tooltip&encapsulation=shadow","src/components/ic-tooltip/ic-tooltip.tsx"],"names":["icButtonCss","buttonIds","Button","this","calculatedWidth","inheritedAttributes","hasTooltip","buttonIdNum","handleClick","el","type","closest","handleHiddenFormButtonClick","onFocus","icFocus","emit","onBlur","icBlur","[object Object]","offsetWidth","offsetLeft","event","disabled","loading","stopImmediatePropagation","ev","theme","detail","updateTheme","mode","buttonEl","focus","newValue","tooltipEl","label","setAttribute","width","toString","iconEl","querySelector","form","hiddenFormButton","document","createElement","style","display","appendChild","click","remove","newTheme","foregroundColor","getThemeFromContext","IcThemeForegroundEnum","Default","appearance","inheritAttributes","IC_INHERITED_ARIA","id","undefined","variant","calculateWidth","TagType","href","_a","title","aria-label","ariaLabel","restInheritedAttributes","__rest","buttonAttrs","download","rel","target","referrerpolicy","hreflang","newTitle","titleAttr","tooltipText","describedBy","buttonId","ButtonContent","h","Object","assign","class","aria-disabled","ref","aria-describedby","hasIconSlot","name","getLoadingBarWidth","Dark","Light","Host","size","fullWidth","onClick","disableTooltip","placement","tooltipPlacement","icLoadingIndicatorCss","LoadingIndicator","getLabel","labelIndex","setLabel","Promise","setInterval","labelList","length","labelDuration","getLabelVariant","outerElement","setCircleLineWidth","setProperty","setDeterminateWidth","innerElement","progress","Math","min","max","proportion","showSecond","classList","add","calcOuterClass","cls","indeterminate","updateLabel","split","indicatorLabel","Number","description","role","aria-labelledby","aria-valuenow","aria-valuemin","aria-valuemax","icTooltipCss","Tooltip","mouseOverTool","showEvents","instantHideEvents","delayedHideEvents","show","popper","toolTip","setOptions","options","modifiers","enabled","update","hide","removeAttribute","checkCloseTooltip","setTimeout","mouseEnterTooltip","mouseLeaveTooltip","handleKeyDown","key","popperInstance","manageEventListeners","action","method","forEach","screenReaderOnlyStyles","position","left","top","height","overflow","describedBySpan","previousElementSibling","innerText","createPopper","offset","element","arrow","onComponentRequiredPropUndefined","prop","propName","ariaDescribedBy","insertAdjacentElement","ic-tooltip","data-popper-arrow"],"mappings":"iMAAA,MAAMA,EAAc,6qVC2BpB,IAAIC,EAAY,QAUHC,EAAM,+FAwETC,KAAAC,gBAA0B,GAC1BD,KAAAE,oBAAgD,GAEhDF,KAAAG,WAAsB,MACtBH,KAAAI,YAAcN,IAoEdE,KAAAK,YAAc,KACpB,IACGL,KAAKM,GAAGC,OAAS,UAAYP,KAAKM,GAAGC,OAAS,YAC7CP,KAAKM,GAAGE,QAAQ,QAClB,CACAR,KAAKS,4BAA4BT,KAAKM,GAAGE,QAAQ,WAI7CR,KAAAU,QAAU,KAChBV,KAAKW,QAAQC,QAGPZ,KAAAa,OAAS,KACfb,KAAKc,OAAOF,sBAzJe,mBAID,gBAIG,oFAgBO,yEAYD,oBAIN,yBAID,0BAIK,4BAImB,yBAII,UAoB1DG,iBAEEf,KAAKC,gBAAkBD,KAAKM,GAAGU,YAAc,EAAIhB,KAAKM,GAAGW,WAI3DF,gBAAgBG,GACd,GAAIlB,KAAKmB,UAAYnB,KAAKoB,QAAS,CACjCF,EAAMG,4BAKVN,mBAAmBO,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BxB,KAAKyB,YAAYF,EAAMG,MAOzBX,iBACE,GAAIf,KAAK2B,SAAU,CACjB3B,KAAK2B,SAASC,SAQlBb,sBAAsBc,GACpB,GAAI7B,KAAKG,WAAY,CACnBH,KAAK8B,UAAUC,MAAQF,EACvB7B,KAAK2B,SAASK,aAAa,aAAcH,IAIrCd,qBACN,MAAO,CAAEkB,MAAO,GAAGjC,KAAKC,gBAAgBiC,gBAGlCnB,cACN,MAAMoB,EAASnC,KAAKM,GAAG8B,cAAc,iBACrC,GAAID,GAAU,KAAM,CAClB,OAAO,KAET,OAAO,MAGDpB,4BAA4BsB,GAClC,MAAMC,EAAmBC,SAASC,cAAc,UAEhDF,EAAiBN,aAAa,OAAQhC,KAAKM,GAAGC,MAC9C+B,EAAiBG,MAAMC,QAAU,OAEjCL,EAAKM,YAAYL,GAEjBA,EAAiBM,QACjBN,EAAiBO,SAoBX9B,YAAY+B,EAA8B,MAChD,MAAMC,EAAkBC,EAAoBhD,KAAKM,GAAIwC,GAAY,MAEjE,GAAIC,IAAoBE,EAAsBC,QAAS,CACrDlD,KAAKmD,WAAaJ,GAItBhC,oBACEf,KAAKE,oBAAsBkD,EAAkBpD,KAAKM,GAAI,IACjD+C,EACH,gBACA,UAGF,MAAMC,EAAKtD,KAAKM,GAAGgD,GACnBtD,KAAKsD,GAAKA,IAAOC,UAAYD,EAAK,KAClCtD,KAAKG,WAAaH,KAAKwD,UAAY,OAGrCzC,mBACEf,KAAKyD,iBACLzD,KAAKyB,cAGPV,SACE,MAAM2C,EAAW1D,KAAK2D,MAAQ,KAAQ,SACtC,MAAMC,EAIF5D,KAAKE,qBAJH2D,MACJA,EACAC,aAAcC,GAASH,EACpBI,EAAuBC,EAAAL,EAHtB,CAAA,QAAA,eAKN,MAAMM,EACJR,IAAY,SACR,CAAEnD,KAAMP,KAAKO,KAAMY,SAAUnB,KAAKmB,UAClC,CACEgD,SAAUnE,KAAKmE,WAAa,MAAQnE,KAAKmE,SAAW,KACpDR,KAAM3D,KAAK2D,KACXS,IAAKpE,KAAKoE,IACVC,OAAQrE,KAAKqE,OACbC,eAAgBtE,KAAKsE,eACrBC,SAAUvE,KAAKuE,UAEvB,MAAMC,EAAWX,GAAUA,EAC3B,MAAMY,EAAYzE,KAAKG,WAAa,GAAK,CAAE0D,MAAOW,GAClD,IAAIE,EAAc,GAClB,GAAI1E,KAAKG,WAAY,CACnB,GAAIqE,IAAajB,UAAW,CAC1BmB,EAAcF,OACT,GAAIT,IAAc,KAAM,CAC7BW,EAAcX,GAIlB,IAAIY,EAAsB,KAC1B,IAAIC,EAAmB,KACvB,GAAI5E,KAAKG,WAAY,CACnByE,EACE5E,KAAKsD,KAAO,KACR,0BAA0BtD,KAAKsD,KAC/B,0BAA0BtD,KAAKI,cACrCuE,EAAc,cAAcC,IAG9B,MAAMC,EAAgB,IAElBC,EAACpB,EAAOqB,OAAAC,OAAA,CACNC,MAAM,SAAQC,gBACClF,KAAKoB,SAAWpB,KAAKmB,SAAW,OAAS,KAAI2C,aAChD9D,KAAKoB,QAAU,UAAY2C,GACnCG,EACAF,EACAS,EAAS,CACb/D,QAASV,KAAKU,QACdG,OAAQb,KAAKa,OACbsE,IAAM7E,GAAQN,KAAK2B,SAAWrB,EAC9BgD,GAAIsB,EAAQQ,mBACMT,IAEjB3E,KAAKqF,gBAAkBrF,KAAKoB,SAC3B0D,EAAA,MAAA,CAAKG,MAAM,kBACTH,EAAA,OAAA,CAAMQ,KAAK,UAGdtF,KAAKoB,QACJ0D,EAAA,MAAA,CAAKG,MAAM,oBAAoBxC,MAAOzC,KAAKuF,sBACzCT,EAAA,uBAAA,CACEvE,KAAK,SACL4C,WACEnD,KAAKwD,UAAY,WACjBxD,KAAKwD,UAAY,eACjBxD,KAAKmD,aAAeF,EAAsBuC,MAC1CxF,KAAKmD,aAAeF,EAAsBwC,MACtC,QACA,UAKVX,EAAA,OAAA,OAMR,OACEA,EAACY,EAAI,CACHT,MAAO,CACLlE,CAAC,YAAaf,KAAKmB,WAAanB,KAAKoB,QACrCL,CAAC,kBAAkBf,KAAKwD,WAAY,KACpCzC,CAAC,eAAef,KAAK2F,QAAS,KAC9B5E,CAAC,WAAYf,KAAKoB,QAClBL,CAAC,QAASf,KAAKmD,aAAeF,EAAsBuC,KACpDzE,CAAC,SAAUf,KAAKmD,aAAeF,EAAsBwC,MACrD1E,CAAC,cAAef,KAAK4F,WAEvBC,QAAS7F,KAAKK,aAEbL,KAAKG,YACJ2E,EAAA,aAAA,CACEG,MAAO,CAAElE,CAAC,2BAA4Bf,KAAK8F,gBAC3CX,IAAM7E,GAAQN,KAAK8B,UAAYxB,EAC/ByB,MAAO2C,EACPL,OAAQO,EACRmB,UAAW/F,KAAKgG,kBAEhBlB,EAACD,EAAa,QAIhB7E,KAAKG,YAAc2E,EAACD,EAAa,oGCxU3C,MAAMoB,EAAwB,qlMCYjBC,EAAgB,+BAsEnBlG,KAAAmG,SAAW,CACjBC,EACAC,IAEO,IAAIC,SAAQ,KACjBC,aAAY,KACV,GAAIH,EAAapG,KAAKwG,UAAUC,OAAS,EAAG,CAC1CL,QACK,CACLA,EAAa,EAEfC,EAASrG,KAAKwG,UAAUJ,MACvBpG,KAAK0G,kBAIJ1G,KAAA2G,gBAAkB,WACxB,IAAInD,EAAiC,KACrC,MAAMvB,GAAQ2B,EAAA5D,KAAK4G,gBAAY,MAAAhD,SAAA,OAAA,EAAAA,EAAE5C,YACjC,GAAIhB,KAAK2F,OAAS,SAAY3F,KAAKO,OAAS,YAAc0B,EAAQ,GAAK,CACrEuB,EAAU,aACL,GACLxD,KAAK2F,OAAS,SACb3F,KAAKO,OAAS,YAAc0B,GAAS,IACtC,CACAuB,EAAU,KAEZ,OAAOA,GAIDxD,KAAA6G,mBAAqB,WAC3B,MAAM5E,GAAQ2B,EAAA5D,KAAK4G,gBAAY,MAAAhD,SAAA,OAAA,EAAAA,EAAE5C,YACjC,GAAIiB,EAAO,CACTjC,KAAK4G,aAAanE,MAAMqE,YACtB,wBACA,GAAG7E,EAAQ,UAKTjC,KAAA+G,oBAAsB,KAC5B,IAAK/G,KAAKgH,aAAc,OAGxB,MAAMC,EAAWC,KAAKC,IAAInH,KAAKoH,IAAKF,KAAKE,IAAIpH,KAAKmH,IAAKnH,KAAKiH,WAC5D,MAAMI,GAAcJ,EAAWjH,KAAKmH,MAAQnH,KAAKoH,IAAMpH,KAAKmH,KAC5DnH,KAAKsH,WAAaD,EAAa,GAC/B,GAAIrH,KAAKsH,WAAY,CACnBtH,KAAKgH,aAAaO,UAAU1E,OAAO,YAC9B,CACL7C,KAAKgH,aAAaO,UAAUC,IAAI,QAElCxH,KAAKgH,aAAavE,MAAMqE,YACtB,sBACA,GAAGO,EAAa,UAElBrH,KAAKgH,aAAavE,MAAMqE,YACtB,iBACA,GAAGO,EAAa,SAIZrH,KAAAyH,eAAiB,KACvB,IAAIC,EAAM,cAAc1H,KAAKO,aAC7BmH,GAAO1H,KAAK2H,cAAgB,iBAAmB,eAC/C,OAAOD,GAGD1H,KAAA4H,YAAc,KACpB,GAAI5H,KAAK+B,QAAUwB,UAAW,CAC5BvD,KAAKwG,UAAYxG,KAAK+B,MAAM8F,MAAM,KAClC,MAAMzB,EAAa,EACnBpG,KAAK8H,eAAiB9H,KAAKwG,UAAUJ,GACrC,GAAIpG,KAAKwG,UAAUC,OAAS,EAAG,CAC7BzG,KAAKmG,SAASC,GAAarE,IACzB/B,KAAK8H,eAAiB/F,yCArIP,WAMA,0CAWQ,6BAKE,cAKgB,oBAKA,0BAKF,sBAKG,kFAInB,MAG/BhB,mBACEf,KAAK4H,cAyFP7G,oBACEf,KAAK2H,cAAgB3H,KAAKiH,WAAa1D,UACvCvD,KAAK4H,cAGP7G,mBACEf,KAAK6G,qBACL,GAAIkB,OAAO/H,KAAKiH,WAAa,EAAG,CAC9BjH,KAAK+G,uBAIThG,sBACEf,KAAK2H,cAAgB3H,KAAKiH,WAAa1D,UAGzCxC,qBACE,GAAIgH,OAAO/H,KAAKiH,WAAa,EAAG,CAC9BjH,KAAK+G,uBAIThG,SACE,MAAMoC,WAAEA,EAAUpB,MAAEA,EAAKiG,YAAEA,EAAWrC,KAAEA,GAAS3F,KACjD,OACE8E,EAACY,EAAI,CAACT,MAAO,CAAElE,CAAC,SAAUoC,IAAeF,EAAsBwC,QAC7DX,EAAA,MAAA,CAAKG,MAAM,wBACTH,EAAA,MAAA,CACEK,IAAM7E,GAAQN,KAAK4G,aAAetG,EAClC2E,MAAOjF,KAAKyH,iBACZQ,KAAK,cAAaC,kBAEhBlI,KAAK+B,OAAS/B,KAAK2F,OAAS,QAAU,mBAAkB7B,aAE9CkE,EAAWG,gBACRnI,KAAKiH,SAAQmB,gBACbpI,KAAKmH,IAAGkB,gBACRrI,KAAKoH,KAEpBtC,EAAA,MAAA,CACEK,IAAM7E,GAAQN,KAAKgH,aAAe1G,EAClC2E,MAAO,cAAcjF,KAAKO,cAEzBP,KAAK2H,eAAiB7C,EAAA,MAAA,CAAKG,MAAM,SACjCjF,KAAK2H,eAAiB7C,EAAA,MAAA,CAAKG,MAAM,YAGrClD,GAAS4D,IAAS,QACjBb,EAAA,gBAAA,CACExB,GAAG,mBACH2B,MAAM,mBACNgD,KAAK,SACLzE,QAASxD,KAAK2G,mBAEd7B,EAAA,IAAA,KAAI9E,KAAK8H,kHC1NvB,MAAMQ,EAAe,+rJCURC,EAAO,+BA0BVvI,KAAAwI,cAAyB,MACzBxI,KAAAyI,WAAa,CAAC,aAAc,WAC5BzI,KAAA0I,kBAAoB,CAAC,YACrB1I,KAAA2I,kBAAoB,CAAC,cAGrB3I,KAAA4I,KAAQC,IACd7I,KAAK8I,QAAQ9G,aAAa,YAAa,IACvC6G,EAAOE,YAAYC,GAAOjE,OAAAC,OAAAD,OAAAC,OAAA,GACrBgE,GAAO,CACVC,UAAW,IACND,EAAQC,UACX,CAAE3D,KAAM,iBAAkB4D,QAAS,WAGvCL,EAAOM,UAGDnJ,KAAAoJ,KAAQP,IACd7I,KAAK8I,QAAQO,gBAAgB,aAC7BR,EAAOE,YAAYC,GAAOjE,OAAAC,OAAAD,OAAAC,OAAA,GACrBgE,GAAO,CACVC,UAAW,IACND,EAAQC,UACX,CAAE3D,KAAM,iBAAkB4D,QAAS,aAKjClJ,KAAAsJ,kBAAqBT,IAC3BU,YAAW,KACT,IAAKvJ,KAAKwI,cAAe,CACvBxI,KAAKoJ,KAAKP,MAEX,MAGG7I,KAAAwJ,kBAAoB,KAC1BxJ,KAAKwI,cAAgB,MAGfxI,KAAAyJ,kBAAqBZ,IAC3B7I,KAAKwI,cAAgB,MACrBxI,KAAKsJ,kBAAkBT,IAGjB7I,KAAA0J,cAAiBC,IACvB,GAAIA,IAAQ,SAAU,CACpB3J,KAAKoJ,KAAKpJ,KAAK4J,kBAIX5J,KAAA6J,qBAAwBC,IAC9B,MAAMC,EACJD,IAAW,MAAQ,mBAAqB,sBAE1C9J,KAAKyI,WAAWuB,SAAS9I,IACvBlB,KAAKM,GAAGyJ,GAAQ7I,GAAO,IAAMlB,KAAK4I,KAAK5I,KAAK4J,kBAC5C5J,KAAK8I,QAAQiB,GAAQ7I,GAAO,IAAMlB,KAAKwJ,yBAGzCxJ,KAAK0I,kBAAkBsB,SAAS9I,IAC9BlB,KAAKM,GAAGyJ,GAAQ7I,GAAO,IAAMlB,KAAKoJ,KAAKpJ,KAAK4J,qBAG9C5J,KAAK2I,kBAAkBqB,SAAS9I,IAC9BlB,KAAKM,GAAGyJ,GAAQ7I,GAAO,IAAMlB,KAAKsJ,kBAAkBtJ,KAAK4J,kBACzD5J,KAAK8I,QAAQiB,GAAQ7I,GAAO,IAC1BlB,KAAKyJ,kBAAkBzJ,KAAK4J,qBAIhCrH,SAASwH,GAAQ,WAAY7I,GAC3BlB,KAAK0J,cAAcxI,EAAMyI,QAIrB3J,KAAAiK,uBAAyB,CAC/BC,SAAU,WACVC,KAAM,WACNC,IAAK,OACLnI,MAAO,MACPoI,OAAQ,MACRC,SAAU,+CAlG8B,8BAQ1CvJ,YAAYc,GACV,MAAM0I,EAAkBvK,KAAKM,GAAGkK,uBAChCD,EAAgBE,UAAY5I,EA2F9Bd,mBACEf,KAAK4J,eAAiBc,EAAa1K,KAAKM,GAAIN,KAAK8I,QAAS,CACxD/C,UAAW/F,KAAK+F,UAChBkD,UAAW,CACT,CACE3D,KAAM,SACN0D,QAAS,CACP2B,OAAQ,CAAC,EAAG,MAGhB,CACErF,KAAM,QACN0D,QAAS,CACP4B,QAAS5K,KAAK6K,WAMtB7K,KAAK6J,qBAAqB,OAE1BiB,EACE,CAAC,CAAEC,KAAM/K,KAAK+B,MAAOiJ,SAAU,UAC/B,WAGF,GAAIhL,KAAKqE,SAAWd,UAAW,CAC7B,MAAM0H,EAAkB1I,SAASC,cAAc,QAC/CyI,EAAgB3H,GAAK,cAActD,KAAKqE,SACxC4G,EAAgBR,UAAYzK,KAAK+B,MACjCkJ,EAAgB1D,UAAUC,IAAI,oBAC9BzC,OAAOC,OAAOiG,EAAgBxI,MAAOzC,KAAKiK,wBAE1CjK,KAAKM,GAAG4K,sBAAsB,cAAeD,IAIjDlK,uBACEf,KAAK6J,qBAAqB,UAG5B9I,SACE,MAAMgB,MAAEA,GAAU/B,KAClB,OACE8E,EAACY,EAAI,CAACT,MAAO,CAAEkG,aAAc,OAC3BrG,EAAA,MAAA,CACEK,IAAM7E,GAAQN,KAAK8I,QAAUxI,EAC7B2H,KAAK,UACLhD,MAAM,wBAENH,EAAA,gBAAA,CAAetB,QAAQ,WAAWzB,GAClC+C,EAAA,MAAA,CACEK,IAAM7E,GAAQN,KAAK6K,MAAQvK,EAC3B2E,MAAM,mBAAkBmG,oBAAA,QAI5BtG,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: inline-block;\n\n --button-default: var(--ic-action-default);\n --button-default-hover: var(--ic-action-default-hover);\n --button-default-active: var(--ic-action-default-active);\n --button-default-background-hover: var(--ic-action-default-bg-hover);\n --button-default-background-active: var(--ic-action-default-bg-active);\n --icon-width: 100%;\n --icon-height: 100%;\n}\n\n.button {\n font-family: var(--ic-font-body-family);\n text-decoration: none;\n font-weight: 600;\n font-size: 14px;\n transition: var(--ic-easing-transition-fast);\n border-radius: var(--ic-border-radius);\n min-width: 100px;\n display: inline-flex;\n gap: var(--ic-space-xs);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background: none;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n vertical-align: middle;\n}\n\n.button:hover {\n cursor: pointer;\n}\n\n.button:focus,\n:host .button:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.light) .button:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible {\n outline: none;\n}\n\n:host(.dark) .button {\n --button-default: var(--ic-action-dark);\n --button-default-hover: var(--ic-action-dark);\n --button-default-active: var(--ic-action-dark);\n --button-default-background-hover: var(--ic-action-dark-bg-hover);\n --button-default-background-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.light) .button {\n --button-default: var(--ic-action-light);\n --button-default-hover: var(--ic-action-light);\n --button-default-active: var(--ic-action-light);\n --button-default-background-hover: var(--ic-action-light-bg-hover);\n --button-default-background-active: var(--ic-action-light-bg-active);\n}\n\n:host(.button-variant-primary.light) .button {\n color: var(--ic-color-primary-text);\n\n --button-default-hover: var(--ic-action-light-hover);\n --button-default-active: var(--ic-action-light-active);\n}\n\n:host(.button-variant-primary.dark) .button {\n --button-default-hover: var(--ic-action-dark-hover);\n --button-default-active: var(--ic-action-dark-active);\n}\n\n:host(.disabled),\n:host(.disabled) .button,\n:host(.loading),\n:host(.loading) .button {\n pointer-events: none;\n}\n\n/* Variants */\n\n/* Primary */\n\n:host(.button-variant-primary) .button {\n color: var(--ic-architectural-white);\n background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover:not(:focus) {\n background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary) .button:active:not(:focus),\n:host(.button-variant-primary.loading) .button {\n background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary.disabled) .button {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button {\n background: var(--ic-architectural-600);\n color: var(--ic-architectural-500);\n}\n\n/* Secondary */\n\n:host(.button-variant-secondary) .button {\n border: 1px solid var(--button-default);\n color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover:not(:focus) {\n background-color: var(--button-default-background-hover);\n border-color: var(--button-default-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-secondary) .button:active:not(:focus) {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.loading) .button {\n border-color: var(--button-default-active);\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) .button:hover,\n:host(.button-variant-secondary.disabled) .button:active {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) .button:hover,\n:host(.button-variant-secondary.light.disabled) .button:active {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n background: none;\n}\n\n/* Tertiary */\n\n:host(.button-variant-tertiary) .button {\n color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover:not(:focus) {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active:not(:focus),\n:host(.button-variant-tertiary.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) .button:hover,\n:host(.button-variant-tertiary.disabled) .button:active {\n border-color: var(--ic-architectural-300);\n color: var(--ic-architectural-300);\n background: none;\n}\n\n:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) .button:hover,\n:host(.button-variant-tertiary.light.disabled) .button:active {\n border-color: var(--ic-architectural-500);\n color: var(--ic-architectural-500);\n background: none;\n}\n\n/* Icon */\n\n:host(.button-variant-icon) .button {\n color: var(--button-default);\n min-width: 0;\n}\n\n:host(.button-variant-icon) .button:hover:not(:focus) {\n background-color: var(--button-default-background-hover);\n color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon.loading) .button {\n background-color: var(--button-default-background-active);\n color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) .button:hover,\n:host(.button-variant-icon.disabled) .button:active {\n color: var(--ic-architectural-300);\n background: none;\n}\n\n/* Destructive */\n\n:host(.button-variant-destructive) .button {\n color: var(--ic-architectural-white);\n background-color: var(--ic-action-destructive);\n text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover:not(:focus) {\n background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active:not(:focus),\n:host(.button-variant-destructive.loading) .button {\n background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-destructive.disabled) .button {\n background: var(--ic-architectural-200);\n color: var(--ic-architectural-300);\n}\n\n/* Sizing */\n\n:host(.button-size-default) .button {\n height: 40px;\n padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-small) .button {\n height: var(--ic-space-xl);\n padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.button-size-large) .button {\n height: var(--ic-space-xxl);\n padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.button-size-default.button-variant-icon) .button {\n height: var(--ic-space-xl);\n width: var(--ic-space-xl);\n padding: 6px;\n}\n\n:host(.button-size-small.button-variant-icon) .button {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n padding: var(--ic-space-xxs);\n}\n\n:host(.button-size-large.button-variant-icon) .button {\n height: 40px;\n width: 40px;\n padding: var(--ic-space-xs);\n}\n\n/* Width */\n:host(.full-width),\n:host(.full-width) .button {\n width: 100%;\n}\n\n/* Loading */\n\ndiv.loading-container {\n position: relative;\n align-items: center;\n}\n\n@keyframes loading-animation {\n 0% {\n width: 0%;\n left: 0%;\n }\n\n 25% {\n width: 0%;\n left: 0%;\n opacity: 0;\n }\n\n 50% {\n width: 100%;\n left: 0%;\n opacity: 1;\n }\n\n 75% {\n width: 0%;\n left: 100%;\n }\n\n 100% {\n width: 0%;\n left: 100%;\n opacity: 0;\n }\n}\n\n/* Icons */\n\ndiv.icon-container {\n box-sizing: border-box;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n::slotted(svg) {\n width: var(--icon-width) !important;\n height: var(--icon-height) !important;\n fill: currentcolor !important;\n pointer-events: none;\n}\n\n:host(.button-variant-icon) .button .icon-container {\n margin: 0;\n pointer-events: none;\n}\n\n/** SEARCH **/\n\n:host(.search-submit-button) ::slotted(svg) {\n --icon-height: 20px;\n --icon-width: 20px;\n}\n\n:host(.search-submit-button-small) ::slotted(svg) {\n --icon-height: 16px;\n --icon-width: 16px;\n}\n\n:host(.clear-button) {\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:focus {\n box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n box-shadow: none;\n background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) {\n display: flex;\n align-items: center;\n margin: 0 var(--ic-space-xxs);\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n --icon-height: 14px;\n --icon-width: 14px;\n}\n\n:host(.popout-menu-button) .button {\n justify-content: left;\n border-radius: 0;\n white-space: pre-line;\n text-align: start;\n}\n\n:host(.popout-menu-button) div.icon-container {\n flex: none;\n}\n\n:host(.popout-menu-button) .button:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n display: none;\n}\n\n:host .ic-tooltip {\n display: block;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n Watch,\n h,\n} from \"@stencil/core\";\n\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcButtonSizes,\n IcButtonTypes,\n IcButtonVariants,\n IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n@Component({\n tag: \"ic-button\",\n styleUrl: \"ic-button.css\",\n shadow: true,\n})\nexport class Button {\n @Element() el: HTMLIcButtonElement;\n /**\n * Determines whether the button should be in disabled state.\n */\n @Prop() disabled?: boolean = false;\n /**\n * Determines whether the button should be in loading state.\n */\n @Prop() loading?: boolean = false;\n /**\n * The type of the button.\n */\n @Prop() type?: IcButtonTypes = \"button\";\n /**\n * The URL that the link points to. This will render the button as an \"a\" tag.\n */\n @Prop() href?: string;\n /**\n * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n /**\n * Prompts the user to save the linked URL instead of navigating to it.\n */\n @Prop() download?: string | boolean = false;\n /**\n * Hints at the human language of the linked URL.\n */\n @Prop() hreflang?: string;\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n /**\n * The button variant to be displayed.\n */\n @Prop() variant?: IcButtonVariants = \"primary\";\n /**\n * The size of the button to be displayed.\n */\n @Prop() size?: IcButtonSizes = \"default\";\n /**\n * Fill the width of the container if true.\n */\n @Prop() fullWidth?: boolean = false;\n /**\n * Disable ic-tooltip which is shown for icon variant. Title or aria-label must be set if this prop is not applied.\n */\n @Prop() disableTooltip?: boolean = false;\n /**\n * The position of the tooltip in relation to the button.\n */\n @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n /**\n * Determines the whether the appearance of the button is dark, light, or the default.\n */\n @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n /**\n * Emitted when button has focus\n */\n @Event() icFocus!: EventEmitter<void>;\n /**\n * Emitted when button has blur\n */\n @Event() icBlur!: EventEmitter<void>;\n\n // CalculatedWidth must have a default value, since width is only calculated once button is rendered (with text).\n private calculatedWidth: number = 68;\n private inheritedAttributes: { [k: string]: unknown } = {};\n private buttonEl: HTMLElement;\n private hasTooltip: boolean = false;\n private buttonIdNum = buttonIds++;\n private tooltipEl: HTMLIcTooltipElement;\n private id: string;\n\n @Watch(\"loading\")\n calculateWidth(): void {\n // Assume even padding on left and right\n this.calculatedWidth = this.el.offsetWidth - 2 * this.el.offsetLeft;\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled || this.loading) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"icThemeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n /**\n * Sets focus on the native `button`\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.buttonEl) {\n this.buttonEl.focus();\n }\n }\n\n /**\n * @internal Updates tooltip/aria-label text - needed as can't watch an aria attribute change.\n */\n @Method()\n async updateAriaLabel(newValue: string): Promise<void> {\n if (this.hasTooltip) {\n this.tooltipEl.label = newValue;\n this.buttonEl.setAttribute(\"aria-label\", newValue);\n }\n }\n\n private getLoadingBarWidth(): { [key: string]: string } {\n return { width: `${this.calculatedWidth.toString()}px` };\n }\n\n private hasIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n if (iconEl != null) {\n return true;\n }\n return false;\n }\n\n private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n const hiddenFormButton = document.createElement(\"button\");\n\n hiddenFormButton.setAttribute(\"type\", this.el.type);\n hiddenFormButton.style.display = \"none\";\n\n form.appendChild(hiddenFormButton);\n\n hiddenFormButton.click();\n hiddenFormButton.remove();\n }\n\n private handleClick = (): void => {\n if (\n (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n !!this.el.closest(\"FORM\")\n ) {\n this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n }\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"aria-expanded\",\n \"title\",\n ]);\n\n const id = this.el.id;\n this.id = id !== undefined ? id : null;\n this.hasTooltip = this.variant === \"icon\";\n }\n\n componentDidLoad(): void {\n this.calculateWidth();\n this.updateTheme();\n }\n\n render() {\n const TagType = (this.href && \"a\") || \"button\";\n const {\n title,\n \"aria-label\": ariaLabel,\n ...restInheritedAttributes\n } = this.inheritedAttributes;\n const buttonAttrs =\n TagType === \"button\"\n ? { type: this.type, disabled: this.disabled }\n : {\n download: this.download !== false ? this.download : null,\n href: this.href,\n rel: this.rel,\n target: this.target,\n referrerpolicy: this.referrerpolicy,\n hreflang: this.hreflang,\n };\n const newTitle = title && (title as string);\n const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n let tooltipText = \"\";\n if (this.hasTooltip) {\n if (newTitle !== undefined) {\n tooltipText = newTitle;\n } else if (ariaLabel !== null) {\n tooltipText = ariaLabel as string;\n }\n }\n\n let describedBy: string = null;\n let buttonId: string = null;\n if (this.hasTooltip) {\n buttonId =\n this.id !== null\n ? `ic-button-with-tooltip-${this.id}`\n : `ic-button-with-tooltip-${this.buttonIdNum}`;\n describedBy = `ic-tooltip-${buttonId}`;\n }\n\n const ButtonContent = () => {\n return (\n <TagType\n class=\"button\"\n aria-disabled={this.loading || this.disabled ? \"true\" : null}\n aria-label={this.loading ? \"Loading\" : ariaLabel}\n {...buttonAttrs}\n {...restInheritedAttributes}\n {...titleAttr}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ref={(el) => (this.buttonEl = el)}\n id={buttonId}\n aria-describedby={describedBy}\n >\n {this.hasIconSlot() && !this.loading && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n {this.loading ? (\n <div class=\"loading-container\" style={this.getLoadingBarWidth()}>\n <ic-loading-indicator\n type=\"linear\"\n appearance={\n this.variant === \"primary\" ||\n this.variant === \"destructive\" ||\n this.appearance === IcThemeForegroundEnum.Dark ||\n this.appearance === IcThemeForegroundEnum.Light\n ? \"light\"\n : \"dark\"\n }\n ></ic-loading-indicator>\n </div>\n ) : (\n <slot />\n )}\n </TagType>\n );\n };\n\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled && !this.loading,\n [`button-variant-${this.variant}`]: true,\n [`button-size-${this.size}`]: true,\n [\"loading\"]: this.loading,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n [\"full-width\"]: this.fullWidth,\n }}\n onClick={this.handleClick}\n >\n {this.hasTooltip && (\n <ic-tooltip\n class={{ [\"tooltip-disabled-button\"]: this.disableTooltip }}\n ref={(el) => (this.tooltipEl = el)}\n label={tooltipText}\n target={buttonId}\n placement={this.tooltipPlacement}\n >\n <ButtonContent />\n </ic-tooltip>\n )}\n\n {!this.hasTooltip && <ButtonContent />}\n </Host>\n );\n }\n}\n","@import \"../../global/normalise.css\";\n\n:host {\n /**\n * @prop --circular-diameter: Diameter of the circular-indicator\n */\n\n display: block;\n\n --linear-border-radius: 4px;\n --inner-color: var(--ic-action-default);\n --outer-color: var(--ic-architectural-100);\n --label-color: var(--ic-color-primary-text);\n --margin: none;\n --linear-line-height: var(--ic-space-xs);\n}\n\n.ic-loading-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n:host([size=\"small\"]) {\n --circular-diameter: 40px;\n --linear-line-height: var(--ic-space-xxs);\n}\n\n:host([size=\"default\"]) {\n --circular-diameter: 80px;\n}\n\n:host([size=\"large\"]) {\n --circular-diameter: 160px;\n}\n\n:host([size=\"icon\"]) {\n display: inline-block;\n\n --margin: var(--ic-space-xxxs);\n --circular-diameter: 20px;\n}\n\n:host([label]) {\n --margin: 0 0 var(--ic-space-xs) 0;\n}\n\n.ic-loading-label {\n white-space: nowrap;\n color: var(--label-color);\n margin-left: var(--label-margin-left);\n}\n\n.ic-loading-circular-outer {\n box-shadow: inset 0 0 0 var(--circular-line-width) var(--outer-color);\n height: var(--circular-diameter);\n width: var(--circular-diameter);\n border-radius: 50%;\n position: relative;\n}\n\n.ic-loading-circular-outer.indeterminate {\n animation: circular-animation 1s linear;\n animation-iteration-count: infinite;\n}\n\n.ic-loading-circular-inner {\n height: var(--circular-diameter);\n width: var(--circular-diameter);\n border-radius: 50%;\n position: relative;\n}\n\n.indeterminate > .ic-loading-circular-inner {\n box-shadow: inset 0 0 0 var(--circular-line-width) var(--inner-color);\n clip-path: inset(0 50% 50% 0);\n}\n\n.determinate > .ic-loading-circular-inner {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n\n.determinate > .ic-loading-circular-inner.clip {\n clip: rect(\n 0,\n var(--circular-diameter),\n var(--circular-diameter),\n calc(var(--circular-diameter) / 2)\n );\n}\n\n.ic-loading-circular-inner .left,\n.ic-loading-circular-inner .right {\n height: 100%;\n width: 100%;\n border: var(--circular-line-width) solid var(--inner-color);\n border-radius: 50%;\n box-sizing: border-box;\n clip: rect(\n 0,\n calc(var(--circular-diameter) / 2),\n var(--circular-diameter),\n 0\n );\n position: absolute;\n left: 0;\n top: 0;\n}\n\n.indeterminate > .ic-loading-circular-inner .left,\n.indeterminate > .ic-loading-circular-inner .right {\n display: none;\n}\n\n.determinate > .ic-loading-circular-inner .left {\n transform: rotate(var(--circular-rotation));\n}\n\n.determinate > .ic-loading-circular-inner .right {\n transform: rotate(180deg);\n}\n\n.determinate > .ic-loading-circular-inner.clip .right {\n display: none;\n}\n\n.ic-loading-circular-outer::before {\n content: \"\";\n height: var(--circular-line-width);\n width: var(--circular-line-width);\n border-radius: 50%;\n background-color: var(--inner-color);\n position: absolute;\n display: block;\n top: calc(50% - var(--circular-line-width) / 2);\n}\n\n.ic-loading-circular-outer::after {\n content: \"\";\n height: var(--circular-line-width);\n width: var(--circular-line-width);\n border-radius: 50%;\n background-color: var(--inner-color);\n position: absolute;\n display: block;\n top: 0;\n left: calc(50% - var(--circular-line-width) / 2);\n}\n\n.ic-loading-circular-outer.determinate::before,\n.ic-loading-circular-outer.determinate::after {\n display: none;\n}\n\n@keyframes circular-animation {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.ic-loading-circular-outer,\n.ic-loading-linear-outer {\n margin: var(--margin);\n}\n\n.ic-loading-linear-outer {\n background-color: var(--outer-color);\n height: var(--linear-line-height);\n width: 100%;\n border-radius: var(--linear-border-radius);\n overflow: hidden;\n}\n\n.ic-loading-linear-inner {\n position: relative;\n height: 100%;\n background-color: var(--inner-color);\n border-radius: var(--linear-border-radius);\n}\n\n.indeterminate > .ic-loading-linear-inner {\n animation: linear-animation 2s infinite;\n}\n\n.determinate > .ic-loading-linear-inner {\n transition: width 0.5s;\n width: var(--linear-width);\n}\n\n:host([full-width]) {\n --linear-border-radius: none;\n}\n\n@keyframes linear-animation {\n 0% {\n width: 0%;\n left: -1%;\n }\n\n 25% {\n width: 0%;\n left: -1%;\n }\n\n 50% {\n width: 101%;\n left: -1%;\n }\n\n 75% {\n width: 0%;\n left: 101%;\n }\n\n 100% {\n width: 0%;\n left: 101%;\n }\n}\n\n:host(.light) {\n --inner-color: var(--ic-architectural-white);\n --outer-color: var(--ic-architectural-800);\n --label-color: var(--ic-architectural-white);\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { IcLoadingSizes, IcLoadingTypes } from \"./ic-loading-indicator.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n@Component({\n tag: \"ic-loading-indicator\",\n styleUrl: \"ic-loading-indicator.css\",\n shadow: true,\n})\nexport class LoadingIndicator {\n @Element() host: HTMLIcLoadingIndicatorElement;\n\n /**\n * The current amount of progress made.\n * If not provided, component acts as an indeterminate loading indicator.\n */\n @Prop() progress?: number;\n\n /**\n * The minimum value that the progress value can take.\n * Used to calculate the proportional width of the progress bar.\n */\n @Prop() min?: number = 0;\n\n /**\n * The maximum value that the progress value can take.\n * Used to calculate the proportional width of the progress bar.\n */\n @Prop() max?: number = 100;\n\n /**\n * The label to be displayed beneath the loading indicator.\n * Display a changing label by separating multiple messages with forward slashes.\n */\n @Prop() label?: string;\n\n /**\n * Provide a description to be set as the aria-label of the loading indicator when not using a visible label.\n */\n @Prop() description?: string = \"Loading\";\n\n /**\n * The time in milliseconds before the label changes.\n */\n @Prop() labelDuration?: number = 8000;\n\n /**\n * The size of the loading indicator.\n */\n @Prop({ reflect: true }) size?: IcLoadingSizes = \"default\";\n\n /**\n * The type of indicator, either linear or circular.\n */\n @Prop({ reflect: true }) type?: IcLoadingTypes = \"circular\";\n\n /**\n * When linear, determines whether the full-width version (i.e. without a border radius) should be displayed.\n */\n @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n /**\n * Determines whether the dark or light loading indicator should be displayed.\n */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n @State() indicatorLabel: string;\n @State() indeterminate: boolean;\n @State() showSecond: boolean = false;\n\n @Watch(\"label\")\n watchPropHandler(): void {\n this.updateLabel();\n }\n\n private outerElement?: HTMLDivElement;\n private innerElement?: HTMLDivElement;\n private labelList: string[];\n\n private getLabel = (\n labelIndex: number,\n setLabel: (label: string) => void\n ) => {\n return new Promise(() => {\n setInterval(() => {\n if (labelIndex < this.labelList.length - 1) {\n labelIndex++;\n } else {\n labelIndex = 0;\n }\n setLabel(this.labelList[labelIndex]);\n }, this.labelDuration);\n });\n };\n\n private getLabelVariant = () => {\n let variant: \"label\" | \"h4\" | \"h2\" = \"h4\";\n const width = this.outerElement?.offsetWidth;\n if (this.size === \"small\" || (this.type === \"circular\" && width < 60)) {\n variant = \"label\";\n } else if (\n this.size === \"large\" ||\n (this.type === \"circular\" && width >= 120)\n ) {\n variant = \"h2\";\n }\n return variant;\n };\n\n // Sets the circular indicator line width - accounting for the circle size being altered using the CSS custom property\n private setCircleLineWidth = () => {\n const width = this.outerElement?.offsetWidth;\n if (width) {\n this.outerElement.style.setProperty(\n \"--circular-line-width\",\n `${width * 0.1}px`\n );\n }\n };\n\n private setDeterminateWidth = () => {\n if (!this.innerElement) return;\n // Ensure progress cannot be out of bounds\n\n const progress = Math.min(this.max, Math.max(this.min, this.progress));\n const proportion = (progress - this.min) / (this.max - this.min);\n this.showSecond = proportion > 0.5;\n if (this.showSecond) {\n this.innerElement.classList.remove(\"clip\");\n } else {\n this.innerElement.classList.add(\"clip\");\n }\n this.innerElement.style.setProperty(\n \"--circular-rotation\",\n `${proportion * 360}deg`\n );\n this.innerElement.style.setProperty(\n \"--linear-width\",\n `${proportion * 100}%`\n );\n };\n\n private calcOuterClass = (): string => {\n let cls = `ic-loading-${this.type}-outer`;\n cls += this.indeterminate ? \" indeterminate\" : \" determinate\";\n return cls;\n };\n\n private updateLabel = (): void => {\n if (this.label !== undefined) {\n this.labelList = this.label.split(\"/\");\n const labelIndex = 0;\n this.indicatorLabel = this.labelList[labelIndex];\n if (this.labelList.length > 1) {\n this.getLabel(labelIndex, (label) => {\n this.indicatorLabel = label;\n });\n }\n }\n };\n\n componentWillLoad(): void {\n this.indeterminate = this.progress === undefined;\n this.updateLabel();\n }\n\n componentDidLoad(): void {\n this.setCircleLineWidth();\n if (Number(this.progress) >= 0) {\n this.setDeterminateWidth();\n }\n }\n\n componentWillUpdate(): void {\n this.indeterminate = this.progress === undefined;\n }\n\n componentDidUpdate(): void {\n if (Number(this.progress) >= 0) {\n this.setDeterminateWidth();\n }\n }\n\n render() {\n const { appearance, label, description, size } = this;\n return (\n <Host class={{ [\"light\"]: appearance === IcThemeForegroundEnum.Light }}>\n <div class=\"ic-loading-container\">\n <div\n ref={(el) => (this.outerElement = el as HTMLDivElement)}\n class={this.calcOuterClass()}\n role=\"progressbar\"\n aria-labelledby={\n this.label && this.size !== \"icon\" && \"ic-loading-label\"\n }\n aria-label={description}\n aria-valuenow={this.progress}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n >\n <div\n ref={(el) => (this.innerElement = el as HTMLDivElement)}\n class={`ic-loading-${this.type}-inner`}\n >\n {this.indeterminate || <div class=\"left\" />}\n {this.indeterminate || <div class=\"right\" />}\n </div>\n </div>\n {label && size !== \"icon\" && (\n <ic-typography\n id=\"ic-loading-label\"\n class=\"ic-loading-label\"\n role=\"status\"\n variant={this.getLabelVariant()}\n >\n <p>{this.indicatorLabel}</p>\n </ic-typography>\n )}\n </div>\n </Host>\n );\n }\n}\n","@import \"../../global/normalise.css\";\n\n:host(.ic-tooltip) .ic-tooltip-container {\n background-color: var(--ic-architectural-800);\n color: #ffff;\n text-align: center;\n padding: var(--ic-space-xxxs) 10px;\n border-radius: var(--ic-border-radius);\n position: absolute;\n max-width: 320px;\n display: none;\n z-index: calc(var(--ic-z-index-overlay) / 2);\n box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed))\n .ic-tooltip-container,\n:host(.tooltip-disabled-button) .ic-tooltip-container {\n display: none !important;\n}\n\n:host(.tooltip-long-label-navigation-item-side-nav-expanded)\n .ic-tooltip-container[data-show] {\n display: block !important;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow,\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n position: absolute;\n background: inherit;\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow {\n visibility: hidden;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n visibility: visible;\n content: \"\";\n}\n\n:host(.ic-tooltip) .ic-tooltip-container[data-show] {\n display: block;\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"top\"]\n > .ic-tooltip-arrow {\n bottom: calc(-1 * var(--ic-space-md));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"top\"]\n > .ic-tooltip-arrow::before {\n border-radius: 0 0 var(--ic-border-radius) var(--ic-border-radius);\n left: 0;\n height: var(--ic-space-xxs);\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n > .ic-tooltip-arrow {\n top: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n > .ic-tooltip-arrow::before {\n border-radius: var(--ic-border-radius) var(--ic-border-radius) 0 0;\n left: 0;\n height: var(--ic-space-xxs);\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"left\"]\n > .ic-tooltip-arrow {\n right: var(--ic-space-xxxs);\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"left\"]\n > .ic-tooltip-arrow::before {\n border-radius: 0 var(--ic-border-radius) var(--ic-border-radius) 0;\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"right\"]\n > .ic-tooltip-arrow {\n left: -14px;\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"right\"]\n > .ic-tooltip-arrow::before {\n border-radius: var(--ic-border-radius) 0 0 var(--ic-border-radius);\n}\n\n:host([target=\"ic-button-with-tooltip-search-submit-button\"])\n .ic-tooltip-container,\n:host([target=\"ic-button-with-tooltip-clear-button\"]) .ic-tooltip-container {\n z-index: calc(var(--ic-z-index-popup-menu) + 1);\n}\n","import { Component, Element, Host, Prop, h, Watch } from \"@stencil/core\";\nimport { Instance, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-tooltip\",\n styleUrl: \"ic-tooltip.css\",\n shadow: true,\n})\nexport class Tooltip {\n @Element() el: HTMLIcTooltipElement;\n\n /**\n * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n */\n @Prop() target?: string;\n\n /**\n * The position of the tool-tip in relation to the parent element.\n */\n @Prop() placement?: IcTooltipPlacements = \"bottom\";\n\n /**\n * The text to display on the tooltip.\n */\n @Prop() label!: string;\n\n @Watch(\"label\")\n updateLabel(newValue: string): void {\n const describedBySpan = this.el.previousElementSibling as HTMLElement;\n describedBySpan.innerText = newValue;\n }\n\n private toolTip: HTMLDivElement;\n private arrow: HTMLDivElement;\n private mouseOverTool: boolean = false;\n private showEvents = [\"mouseenter\", \"focusin\"];\n private instantHideEvents = [\"focusout\"];\n private delayedHideEvents = [\"mouseleave\"];\n private popperInstance: Instance;\n\n private show = (popper: Instance) => {\n this.toolTip.setAttribute(\"data-show\", \"\");\n popper.setOptions((options) => ({\n ...options,\n modifiers: [\n ...options.modifiers,\n { name: \"eventListeners\", enabled: true },\n ],\n }));\n popper.update();\n };\n\n private hide = (popper: Instance) => {\n this.toolTip.removeAttribute(\"data-show\");\n popper.setOptions((options) => ({\n ...options,\n modifiers: [\n ...options.modifiers,\n { name: \"eventListeners\", enabled: false },\n ],\n }));\n };\n\n private checkCloseTooltip = (popper: Instance) => {\n setTimeout(() => {\n if (!this.mouseOverTool) {\n this.hide(popper);\n }\n }, 100);\n };\n\n private mouseEnterTooltip = () => {\n this.mouseOverTool = true;\n };\n\n private mouseLeaveTooltip = (popper: Instance) => {\n this.mouseOverTool = false;\n this.checkCloseTooltip(popper);\n };\n\n private handleKeyDown = (key: string) => {\n if (key === \"Escape\") {\n this.hide(this.popperInstance);\n }\n };\n\n private manageEventListeners = (action: \"add\" | \"remove\") => {\n const method =\n action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n this.showEvents.forEach((event) => {\n this.el[method](event, () => this.show(this.popperInstance));\n this.toolTip[method](event, () => this.mouseEnterTooltip());\n });\n\n this.instantHideEvents.forEach((event) => {\n this.el[method](event, () => this.hide(this.popperInstance));\n });\n\n this.delayedHideEvents.forEach((event) => {\n this.el[method](event, () => this.checkCloseTooltip(this.popperInstance));\n this.toolTip[method](event, () =>\n this.mouseLeaveTooltip(this.popperInstance)\n );\n });\n\n document[method](\"keydown\", (event: KeyboardEvent) =>\n this.handleKeyDown(event.key)\n );\n };\n\n private screenReaderOnlyStyles = {\n position: \"absolute\",\n left: \"-10000px\",\n top: \"auto\",\n width: \"1px\",\n height: \"1px\",\n overflow: \"hidden\",\n };\n\n componentDidLoad(): void {\n this.popperInstance = createPopper(this.el, this.toolTip, {\n placement: this.placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 10],\n },\n },\n {\n name: \"arrow\",\n options: {\n element: this.arrow,\n },\n },\n ],\n });\n\n this.manageEventListeners(\"add\");\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Tooltip\"\n );\n\n if (this.target !== undefined) {\n const ariaDescribedBy = document.createElement(\"span\");\n ariaDescribedBy.id = `ic-tooltip-${this.target}`;\n ariaDescribedBy.innerText = this.label;\n ariaDescribedBy.classList.add(\"ic-tooltip-label\");\n Object.assign(ariaDescribedBy.style, this.screenReaderOnlyStyles);\n\n this.el.insertAdjacentElement(\"beforebegin\", ariaDescribedBy);\n }\n }\n\n disconnectedCallback(): void {\n this.manageEventListeners(\"remove\");\n }\n\n render() {\n const { label } = this;\n return (\n <Host class={{ \"ic-tooltip\": true }}>\n <div\n ref={(el) => (this.toolTip = el as HTMLDivElement)}\n role=\"tooltip\"\n class=\"ic-tooltip-container\"\n >\n <ic-typography variant=\"caption\">{label}</ic-typography>\n <div\n ref={(el) => (this.arrow = el as HTMLDivElement)}\n class=\"ic-tooltip-arrow\"\n data-popper-arrow\n ></div>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as e,h as t,H as n,g as i}from"./p-f9370be6.js";import{I as o}from"./p-6f57b13c.js";import{e as a,s,a as r}from"./p-c15bb762.js";const c='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-theme-tertiary);color:var(--ic-theme-text);--hero-heading-bottom-margin:var(--ic-space-md)}:host(.dark){background-color:var(--ic-theme-secondary)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -100px;background-size:auto calc(100% + 100px);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -100px !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{flex-basis:50%;padding:var(--ic-space-xl) 0}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg)}.secondary-container{display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--ic-theme-text)}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned="left"]) .left-container,:host([content-aligned="left"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned="center"]) .left-container,:host([content-aligned="center"]) .interaction-container{justify-content:center;text-align:center}.left-container-full-width{flex-basis:100% !important;max-width:66.6%}@media (min-width: 1044px){:host,.section-container{min-height:208px}:host([small]),:host([small]) .section-container{min-height:173px}.left-container{flex-basis:66.6%;min-height:144px}.right-container{flex-basis:33.3%;margin-left:50px}.secondary-container{min-height:144px}.secondary-heading,.secondary-subheading{margin-left:63px}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:256px}:host([small]),:host([small]) .section-container{min-height:240px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:224px}.left-container{min-height:160px}.secondary-container{min-height:160px}.secondary-heading,.secondary-subheading{margin-left:94.75px}.right-container{margin-left:50px}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:256px}:host([small]),:host([small]) .section-container{min-height:240px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:224px}.left-container{min-height:160px}.secondary-container{min-height:160px}.secondary-heading,.secondary-subheading{margin-left:34px}.right-container{margin-left:50px}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:208px}:host([small]),:host([small]) .section-container{min-height:173px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:280px}:host([secondary-heading]) .section-container,:host([small]) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:40px}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:192px}:host([small]),:host([small]) .section-container{min-height:173px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:264px}:host([secondary-heading]) .section-container,:host([small]) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}';const h=class{constructor(t){e(this,t);this.heading=undefined;this.subheading=undefined;this.secondaryHeading=undefined;this.secondarySubheading=undefined;this.backgroundImage=undefined;this.disableBackgroundParallax=false;this.aligned="left";this.contentAligned="left";this.small=false;this.rightContent=false;this.scrollFactor="right -100px";this.leftContentFullWidth=!this.rightContent&&this.secondaryHeading===undefined;this.foregroundColor=a()}themeChangeHandler(e){const t=e.detail;this.foregroundColor=t.mode}doScroll(){if(this.disableBackgroundParallax){return}const e=document.scrollingElement.scrollTop;const t=.4;const n=-100+e*t;this.scrollFactor="right "+n+"px"}componentWillLoad(){this.rightContent=s(this.el,"secondary")}componentDidLoad(){r([{prop:this.heading,propName:"heading"}],"Hero")}componentWillRender(){this.rightContent=s(this.el,"secondary")}render(){const{aligned:e,small:i,heading:a,subheading:s,secondaryHeading:r,secondarySubheading:c,foregroundColor:h,backgroundImage:d,scrollFactor:l}=this;let m={};if(d!==undefined){m={"background-image":"url("+d+")","background-position":l}}return t(n,{class:{[o.Dark]:h===o.Dark,["has-background-image"]:d!==undefined},style:m},t("ic-section-container",{aligned:e,fullHeight:true,class:"section-container"},t("div",{class:{["left-container"]:true,["left-container-full-width"]:this.leftContentFullWidth}},t("div",{class:"heading"},t("slot",{name:"heading"},t("ic-typography",{variant:i?"h2":"h1",class:{["heading-bottom-spacing"]:!i}},a))),t("div",{class:"subheading"},t("slot",{name:"subheading"},t("ic-typography",{variant:"body"},s))),t("div",{class:"interaction-container"},t("slot",{name:"interaction"}))),(r!==undefined||this.rightContent)&&t("div",{class:"right-container"},t("slot",{name:"secondary"},r&&t("div",{class:"secondary-container"},t("div",{class:"secondary-heading"},t("ic-typography",{variant:"h4"},r)),t("div",{class:"secondary-subheading"},t("ic-typography",{variant:"subtitle-small"},c)))))))}get el(){return i(this)}};h.style=c;export{h as ic_hero};
|
2
|
+
//# sourceMappingURL=p-682686a6.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"names":["icHeroCss","Hero","this","rightContent","secondaryHeading","undefined","getThemeForegroundColor","[object Object]","ev","theme","detail","foregroundColor","mode","disableBackgroundParallax","scrolltotop","document","scrollingElement","scrollTop","factor","y","scrollFactor","slotHasContent","el","onComponentRequiredPropUndefined","prop","heading","propName","aligned","small","subheading","secondarySubheading","backgroundImage","style","background-image","background-position","h","Host","class","IcThemeForegroundEnum","Dark","fullHeight","leftContentFullWidth","name","variant"],"mappings":"0IAAA,MAAMA,EAAY,2lMCkCLC,EAAI,iNA+B+B,mBAKf,2BAKmB,kBAKzB,wBAEQ,wBAED,0CAG7BC,KAAKC,cAAgBD,KAAKE,mBAAqBC,+BAEJC,IAG9CC,mBAAmBC,GACjB,MAAMC,EAAiBD,EAAGE,OAC1BR,KAAKS,gBAAkBF,EAAMG,KAI/BL,WACE,GAAIL,KAAKW,0BAA2B,CAClC,OAGF,MAAMC,EAAcC,SAASC,iBAAiBC,UAC9C,MAAMC,EAAS,GACf,MAAMC,GAAK,IAAML,EAAcI,EAC/BhB,KAAKkB,aAAe,SAAWD,EAAI,KAGrCZ,oBACEL,KAAKC,aAAekB,EAAenB,KAAKoB,GAAI,aAG9Cf,mBACEgB,EACE,CAAC,CAAEC,KAAMtB,KAAKuB,QAASC,SAAU,YACjC,QAIJnB,sBACEL,KAAKC,aAAekB,EAAenB,KAAKoB,GAAI,aAG9Cf,SACE,MAAMoB,QACJA,EAAOC,MACPA,EAAKH,QACLA,EAAOI,WACPA,EAAUzB,iBACVA,EAAgB0B,oBAChBA,EAAmBnB,gBACnBA,EAAeoB,gBACfA,EAAeX,aACfA,GACElB,KAEJ,IAAI8B,EAAQ,GAEZ,GAAID,IAAoB1B,UAAW,CACjC2B,EAAQ,CACNC,mBAAoB,OAASF,EAAkB,IAC/CG,sBAAuBd,GAI3B,OACEe,EAACC,EAAI,CACHC,MAAO,CACL9B,CAAC+B,EAAsBC,MACrB5B,IAAoB2B,EAAsBC,KAC5ChC,CAAC,wBAAyBwB,IAAoB1B,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,CACEQ,QAASf,EAAQ,KAAO,KACxBS,MAAO,CAAE9B,CAAC,2BAA4BqB,IAErCH,KAIPU,EAAA,MAAA,CAAKE,MAAM,cACTF,EAAA,OAAA,CAAMO,KAAK,cACTP,EAAA,gBAAA,CAAeQ,QAAQ,QAAQd,KAGnCM,EAAA,MAAA,CAAKE,MAAM,yBACTF,EAAA,OAAA,CAAMO,KAAK,mBAGbtC,IAAqBC,WAAaH,KAAKC,eACvCgC,EAAA,MAAA,CAAKE,MAAM,mBACTF,EAAA,OAAA,CAAMO,KAAK,aACRtC,GACC+B,EAAA,MAAA,CAAKE,MAAM,uBACTF,EAAA,MAAA,CAAKE,MAAM,qBACTF,EAAA,gBAAA,CAAeQ,QAAQ,MACpBvC,IAGL+B,EAAA,MAAA,CAAKE,MAAM,wBACTF,EAAA,gBAAA,CAAeQ,QAAQ,kBACpBb","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n background-color: var(--ic-theme-tertiary);\n color: var(--ic-theme-text);\n --hero-heading-bottom-margin: var(--ic-space-md);\n}\n\n:host(.dark) {\n background-color: var(--ic-theme-secondary);\n}\n\n:host(.has-background-image) {\n background-repeat: no-repeat;\n background-position: right -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\nic-typography.heading-bottom-spacing {\n margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n display: flex;\n align-items: center;\n height: 100%;\n}\n\n.left-container {\n 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([small]),\n :host([small]) .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([small]),\n :host([small]) .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([small]),\n :host([small]) .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([small]),\n :host([small]) .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([small]) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n\n .right-container {\n margin-bottom: 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([small]),\n :host([small]) .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([small]) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcAlignment,\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n slotHasContent,\n getThemeForegroundColor,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n tag: \"ic-hero\",\n styleUrl: \"ic-hero.css\",\n shadow: true,\n})\nexport class Hero {\n @Element() el: HTMLIcHeroElement;\n\n /**\n * The heading of the hero\n */\n @Prop() heading!: string;\n\n /**\n * 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 small content/pages\n */\n @Prop() small: boolean = false;\n\n @State() rightContent: boolean = false;\n\n @State() scrollFactor: string = \"right -100px\";\n\n @State() leftContentFullWidth: boolean =\n !this.rightContent && this.secondaryHeading === undefined;\n\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n @Listen(\"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, \"secondary\");\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Hero\"\n );\n }\n\n componentWillRender(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n render() {\n const {\n aligned,\n small,\n heading,\n subheading,\n secondaryHeading,\n secondarySubheading,\n foregroundColor,\n backgroundImage,\n scrollFactor,\n } = this;\n\n let style = {};\n\n if (backgroundImage !== undefined) {\n style = {\n \"background-image\": \"url(\" + backgroundImage + \")\",\n \"background-position\": scrollFactor,\n };\n }\n\n return (\n <Host\n class={{\n [IcThemeForegroundEnum.Dark]:\n foregroundColor === IcThemeForegroundEnum.Dark,\n [\"has-background-image\"]: backgroundImage !== undefined,\n }}\n style={style}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight\n class=\"section-container\"\n >\n <div\n class={{\n [\"left-container\"]: true,\n [\"left-container-full-width\"]: this.leftContentFullWidth,\n }}\n >\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography\n variant={small ? \"h2\" : \"h1\"}\n class={{ [\"heading-bottom-spacing\"]: !small }}\n >\n {heading}\n </ic-typography>\n </slot>\n </div>\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n <div class=\"interaction-container\">\n <slot name=\"interaction\"></slot>\n </div>\n </div>\n {(secondaryHeading !== undefined || this.rightContent) && (\n <div class=\"right-container\">\n <slot name=\"secondary\">\n {secondaryHeading && (\n <div class=\"secondary-container\">\n <div class=\"secondary-heading\">\n <ic-typography variant=\"h4\">\n {secondaryHeading}\n </ic-typography>\n </div>\n <div class=\"secondary-subheading\">\n <ic-typography variant=\"subtitle-small\">\n {secondarySubheading}\n </ic-typography>\n </div>\n </div>\n )}\n </slot>\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as t,h as e,g as i}from"./p-f9370be6.js";import{o,a as n}from"./p-c15bb762.js";import"./p-6f57b13c.js";const a=`<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" aria-hidden="true">\n <path d="M0 8L1.41 9.41L7 3.83V16H9V3.83L14.58 9.42L16 8L8 0L0 8Z"/>\n</svg>`;const s='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;position:absolute;right:0}button{position:fixed;right:var(--ic-space-md);bottom:var(--ic-space-md);height:40px;align-items:center;padding:var(--ic-space-xs) var(--ic-space-md) var(--ic-space-xs)\n var(--ic-space-sm);margin:0;gap:var(--ic-space-xs);display:flex;background-color:var(--ic-architectural-white);border:1px solid var(--ic-action-default);outline-width:inherit;box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);border-radius:80px;text-decoration:none;visibility:hidden;opacity:0;transition:visibility 0s linear var(--ic-transition-duration-slow),\n opacity var(--ic-transition-duration-slow);cursor:pointer;z-index:var(--ic-z-index-overlay)}button:hover{text-decoration:none;background-color:var(--ic-action-default-bg-hover-no-alpha);border:1px solid var(--ic-action-default-hover)}button:active{text-decoration:none;background-color:var(--ic-action-default-bg-active-no-alpha);border:1px solid var(--ic-action-default-active)}button:focus{box-shadow:var(--ic-border-focus)}.ic-back-to-top-link.show{visibility:visible;opacity:1;transition:visibility 0s linear 0s,\n opacity var(--ic-transition-duration-slow),\n box-shadow var(--ic-easing-transition-fast)}.ic-back-to-top-link.by-footer{position:relative;right:var(--ic-space-md);bottom:56px}.ic-back-to-top-link.offset-banner{margin-bottom:var(--ic-space-lg)}.ic-back-to-top-icon{fill:var(--ic-action-default);padding-left:var(--ic-space-xxs);padding-top:var(--ic-space-xxxs)}.ic-back-to-top-link span{color:var(--ic-action-default)}.ic-back-to-top-link:hover .ic-back-to-top-icon{fill:var(--ic-action-default-hover)}.ic-back-to-top-link:hover span{color:var(--ic-action-default-hover)}';const r="Back to top";const c=class{constructor(e){t(this,e);this.topObserver=null;this.setTargetElVisible=t=>{this.targetElVisible=t};this.setFooterVisible=t=>{this.footerVisible=t};this.targetElObserverCallback=t=>{this.setTargetElVisible(t[0].isIntersecting)};this.footerObserverCallback=t=>{this.setFooterVisible(t[0].isIntersecting)};this.findTargetEl=t=>{let e=null;if(t===null||t===undefined){console.log("Error: No target ID specified for back to top component - defaulting to top of page")}else{e=document.querySelector(t.indexOf("#")===0?t:"#"+t);if(e===null){console.log(`Error: Back to top target element '${t}' not found - defaulting to top of page`)}}return e};this.createTopObserver=t=>{this.targetEl=this.findTargetEl(t);let e;if(this.topObserver!==null){const t=document.querySelector("#ic-back-to-top-target");if(t!==null){this.topObserver.unobserve(t);t.remove()}}if(this.targetEl===null){e=document.body;this.targetEl=e.firstElementChild;this.isTargetElNull=true}else{e=this.targetEl.parentNode;this.isTargetElNull=false}const i=document.createElement("div");i.setAttribute("id","ic-back-to-top-target");e.insertBefore(i,this.targetEl);const o=getComputedStyle(this.targetEl).marginTop;this.topObserver=new IntersectionObserver(this.targetElObserverCallback,{threshold:[0],rootMargin:`${o} 0px 0px 0px`});this.topObserver.observe(i)};this.handleClick=()=>{if(this.isTargetElNull){window.scrollTo(0,0)}else{this.targetEl.scrollIntoView()}};this.target=undefined;this.bannerOffset=false;this.targetElVisible=true;this.footerVisible=false}watchPropHandler(t,e){o(e,t,(()=>{this.createTopObserver(t)}))}componentWillLoad(){this.createTopObserver(this.target);const t=document.querySelectorAll("ic-classification-banner:not([inline='true'])");if(t.length){this.bannerOffset=true}const e=document.querySelectorAll("footer");if(e.length){const t=e[e.length-1];const i=this.bannerOffset?.15:0;const o=new IntersectionObserver(this.footerObserverCallback,{threshold:[i]});o.observe(t)}}componentDidLoad(){n([{prop:this.target,propName:"target"}],"Back to Top")}render(){const{bannerOffset:t,targetElVisible:i,footerVisible:o}=this;return e("button",{class:{["ic-back-to-top-link"]:true,["offset-banner"]:t,["show"]:!i,["by-footer"]:o},"aria-label":r,onClick:this.handleClick},e("span",{class:"ic-back-to-top-icon",innerHTML:a}),e("ic-typography",{variant:"subtitle-small"},e("span",null,r)))}get el(){return i(this)}static get watchers(){return{target:["watchPropHandler"]}}};c.style=s;export{c as ic_back_to_top};
|
2
|
+
//# sourceMappingURL=p-6ac7757f.entry.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-back-to-top/ic-back-to-top.css?tag=ic-back-to-top&encapsulation=shadow","src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":["icBackToTopCss","backToTopLabel","BackToTop","this","topObserver","setTargetElVisible","visible","targetElVisible","setFooterVisible","footerVisible","targetElObserverCallback","entries","isIntersecting","footerObserverCallback","findTargetEl","target","targetElement","undefined","console","log","document","querySelector","indexOf","createTopObserver","targetEl","objParent","observedEl","unobserve","remove","body","firstElementChild","isTargetElNull","parentNode","objBackToTopTargetEl","createElement","setAttribute","insertBefore","marginTop","getComputedStyle","IntersectionObserver","threshold","rootMargin","observe","handleClick","window","scrollTo","scrollIntoView","[object Object]","newValue","oldValue","onComponentPropUndefinedChange","banners","querySelectorAll","length","bannerOffset","footers","footerEl","footerObserver","onComponentRequiredPropUndefined","prop","propName","h","class","aria-label","onClick","innerHTML","ArrowUpward","variant"],"mappings":"+RAAA,MAAMA,EAAiB,igICOvB,MAAMC,EAAiB,oBAOVC,EAAS,+BAqBZC,KAAAC,YAAoC,KAIpCD,KAAAE,mBAAsBC,IAC5BH,KAAKI,gBAAkBD,GAGjBH,KAAAK,iBAAoBF,IAC1BH,KAAKM,cAAgBH,GAGfH,KAAAO,yBAA4BC,IAClCR,KAAKE,mBAAmBM,EAAQ,GAAGC,iBAG7BT,KAAAU,uBAA0BF,IAChCR,KAAKK,iBAAiBG,EAAQ,GAAGC,iBAG3BT,KAAAW,aAAgBC,IACtB,IAAIC,EAAyB,KAC7B,GAAID,IAAW,MAAQA,IAAWE,UAAW,CAC3CC,QAAQC,IACN,2FAEG,CACLH,EAAgBI,SAASC,cACvBN,EAAOO,QAAQ,OAAS,EAAIP,EAAS,IAAMA,GAE7C,GAAIC,IAAkB,KAAM,CAC1BE,QAAQC,IACN,sCAAsCJ,6CAI5C,OAAOC,GAGDb,KAAAoB,kBAAqBR,IAC3BZ,KAAKqB,SAAWrB,KAAKW,aAAaC,GAClC,IAAIU,EAGJ,GAAItB,KAAKC,cAAgB,KAAM,CAC7B,MAAMsB,EAAaN,SAASC,cAAc,0BAC1C,GAAIK,IAAe,KAAM,CACvBvB,KAAKC,YAAYuB,UAAUD,GAC3BA,EAAWE,UAIf,GAAIzB,KAAKqB,WAAa,KAAM,CAC1BC,EAAYL,SAASS,KACrB1B,KAAKqB,SAAWC,EAAUK,kBAC1B3B,KAAK4B,eAAiB,SACjB,CACLN,EAAYtB,KAAKqB,SAASQ,WAC1B7B,KAAK4B,eAAiB,MAIxB,MAAME,EAAuBb,SAASc,cAAc,OACpDD,EAAqBE,aAAa,KAAM,yBACxCV,EAAUW,aAAaH,EAAsB9B,KAAKqB,UAGlD,MAAMa,EAAYC,iBAAiBnC,KAAKqB,UAAUa,UAClDlC,KAAKC,YAAc,IAAImC,qBAAqBpC,KAAKO,yBAA0B,CACzE8B,UAAW,CAAC,GACZC,WAAY,GAAGJ,kBAEjBlC,KAAKC,YAAYsC,QAAQT,IAGnB9B,KAAAwC,YAAc,KACpB,GAAIxC,KAAK4B,eAAgB,CACvBa,OAAOC,SAAS,EAAG,OACd,CACL1C,KAAKqB,SAASsB,2DA5Fe,2BAEG,wBAEF,MAGlCC,iBAAiBC,EAAkBC,GAEjCC,EAA+BD,EAAUD,GAAU,KACjD7C,KAAKoB,kBAAkByB,MAsF3BD,oBACE5C,KAAKoB,kBAAkBpB,KAAKY,QAG5B,MAAMoC,EAAU/B,SAASgC,iBACvB,iDAEF,GAAID,EAAQE,OAAQ,CAClBlD,KAAKmD,aAAe,KAItB,MAAMC,EAAUnC,SAASgC,iBAAiB,UAC1C,GAAIG,EAAQF,OAAQ,CAClB,MAAMG,EAAWD,EAAQA,EAAQF,OAAS,GAC1C,MAAMb,EAAYrC,KAAKmD,aAAe,IAAO,EAC7C,MAAMG,EAAiB,IAAIlB,qBACzBpC,KAAKU,uBACL,CAAE2B,UAAW,CAACA,KAEhBiB,EAAef,QAAQc,IAI3BT,mBACEW,EACE,CAAC,CAAEC,KAAMxD,KAAKY,OAAQ6C,SAAU,cAChC,eAIJb,SACE,MAAMO,aAAEA,EAAY/C,gBAAEA,EAAeE,cAAEA,GAAkBN,KACzD,OACE0D,EAAA,SAAA,CACEC,MAAO,CACLf,CAAC,uBAAwB,KACzBA,CAAC,iBAAkBO,EACnBP,CAAC,SAAUxC,EACXwC,CAAC,aAActC,GAChBsD,aACW9D,EACZ+D,QAAS7D,KAAKwC,aAEdkB,EAAA,OAAA,CAAMC,MAAM,sBAAsBG,UAAWC,IAE7CL,EAAA,gBAAA,CAAeM,QAAQ,kBACrBN,EAAA,OAAA,KAAO5D","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n position: absolute;\n right: 0;\n}\n\nbutton {\n position: fixed;\n right: var(--ic-space-md);\n bottom: var(--ic-space-md);\n height: 40px;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-md) var(--ic-space-xs)\n var(--ic-space-sm);\n margin: 0;\n gap: var(--ic-space-xs);\n display: flex;\n background-color: var(--ic-architectural-white);\n border: 1px solid var(--ic-action-default);\n outline-width: inherit;\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n border-radius: 80px;\n text-decoration: none;\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s linear var(--ic-transition-duration-slow),\n opacity var(--ic-transition-duration-slow);\n cursor: pointer;\n z-index: var(--ic-z-index-overlay);\n}\n\nbutton:hover {\n text-decoration: none;\n background-color: var(--ic-action-default-bg-hover-no-alpha);\n border: 1px solid var(--ic-action-default-hover);\n}\n\nbutton:active {\n text-decoration: none;\n background-color: var(--ic-action-default-bg-active-no-alpha);\n border: 1px solid var(--ic-action-default-active);\n}\n\nbutton:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.ic-back-to-top-link.show {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s linear 0s,\n opacity var(--ic-transition-duration-slow),\n box-shadow var(--ic-easing-transition-fast);\n}\n\n.ic-back-to-top-link.by-footer {\n position: relative;\n right: var(--ic-space-md);\n bottom: 56px;\n}\n\n.ic-back-to-top-link.offset-banner {\n margin-bottom: var(--ic-space-lg);\n}\n\n.ic-back-to-top-icon {\n fill: var(--ic-action-default);\n padding-left: var(--ic-space-xxs);\n padding-top: var(--ic-space-xxxs);\n}\n\n.ic-back-to-top-link span {\n color: var(--ic-action-default);\n}\n\n.ic-back-to-top-link:hover .ic-back-to-top-icon {\n fill: var(--ic-action-default-hover);\n}\n\n.ic-back-to-top-link:hover span {\n color: var(--ic-action-default-hover);\n}\n","import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n tag: \"ic-back-to-top\",\n styleUrl: \"ic-back-to-top.css\",\n shadow: true,\n})\nexport class BackToTop {\n @Element() el: HTMLIcBackToTopElement;\n\n /**\n * The ID of the element to jump back to when the link is clicked.\n */\n @Prop() target!: string;\n\n @State() bannerOffset: boolean = false;\n\n @State() targetElVisible: boolean = true;\n\n @State() footerVisible: boolean = false;\n\n @Watch(\"target\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n onComponentPropUndefinedChange(oldValue, newValue, () => {\n this.createTopObserver(newValue);\n });\n }\n private topObserver: IntersectionObserver = null;\n private targetEl: Element;\n private isTargetElNull: boolean;\n\n private setTargetElVisible = (visible: boolean) => {\n this.targetElVisible = visible;\n };\n\n private setFooterVisible = (visible: boolean) => {\n this.footerVisible = visible;\n };\n\n private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setTargetElVisible(entries[0].isIntersecting);\n };\n\n private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setFooterVisible(entries[0].isIntersecting);\n };\n\n private findTargetEl = (target: string): Element => {\n let targetElement: Element = null;\n if (target === null || target === undefined) {\n console.log(\n \"Error: No target ID specified for back to top component - defaulting to top of page\"\n );\n } else {\n targetElement = document.querySelector(\n target.indexOf(\"#\") === 0 ? target : \"#\" + target\n );\n if (targetElement === null) {\n console.log(\n `Error: Back to top target element '${target}' not found - defaulting to top of page`\n );\n }\n }\n return targetElement;\n };\n\n private createTopObserver = (target: string) => {\n this.targetEl = this.findTargetEl(target);\n let objParent: HTMLElement;\n\n //remove old element & observer\n if (this.topObserver !== null) {\n const observedEl = document.querySelector(\"#ic-back-to-top-target\");\n if (observedEl !== null) {\n this.topObserver.unobserve(observedEl);\n observedEl.remove();\n }\n }\n\n if (this.targetEl === null) {\n objParent = document.body;\n this.targetEl = objParent.firstElementChild;\n this.isTargetElNull = true;\n } else {\n objParent = this.targetEl.parentNode as HTMLElement;\n this.isTargetElNull = false;\n }\n\n //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n const objBackToTopTargetEl = document.createElement(\"div\");\n objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n // resize observer needs to factor in any top margin on the target el\n const marginTop = getComputedStyle(this.targetEl).marginTop;\n this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n threshold: [0],\n rootMargin: `${marginTop} 0px 0px 0px`,\n });\n this.topObserver.observe(objBackToTopTargetEl);\n };\n\n private handleClick = () => {\n if (this.isTargetElNull) {\n window.scrollTo(0, 0);\n } else {\n this.targetEl.scrollIntoView();\n }\n };\n\n componentWillLoad(): void {\n this.createTopObserver(this.target);\n\n //adjust position for classification banner at bottom\n const banners = document.querySelectorAll(\n \"ic-classification-banner:not([inline='true'])\"\n );\n if (banners.length) {\n this.bannerOffset = true;\n }\n\n //observer for when footer scrolls into view\n const footers = document.querySelectorAll(\"footer\");\n if (footers.length) {\n const footerEl = footers[footers.length - 1];\n const threshold = this.bannerOffset ? 0.15 : 0;\n const footerObserver = new IntersectionObserver(\n this.footerObserverCallback,\n { threshold: [threshold] }\n );\n footerObserver.observe(footerEl);\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.target, propName: \"target-id\" }],\n \"Back to Top\"\n );\n }\n\n render() {\n const { bannerOffset, targetElVisible, footerVisible } = this;\n return (\n <button\n class={{\n [\"ic-back-to-top-link\"]: true,\n [\"offset-banner\"]: bannerOffset,\n [\"show\"]: !targetElVisible,\n [\"by-footer\"]: footerVisible,\n }}\n aria-label={backToTopLabel}\n onClick={this.handleClick}\n >\n <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n <ic-typography variant=\"subtitle-small\">\n <span>{backToTopLabel}</span>\n </ic-typography>\n </button>\n );\n }\n}\n"]}
|
1
|
+
{"version":3,"sources":["src/components/ic-back-to-top/ic-back-to-top.css?tag=ic-back-to-top&encapsulation=shadow","src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":["icBackToTopCss","backToTopLabel","BackToTop","this","topObserver","setTargetElVisible","visible","targetElVisible","setFooterVisible","footerVisible","targetElObserverCallback","entries","isIntersecting","footerObserverCallback","findTargetEl","target","targetElement","undefined","console","log","document","querySelector","indexOf","createTopObserver","targetEl","objParent","observedEl","unobserve","remove","body","firstElementChild","isTargetElNull","parentNode","objBackToTopTargetEl","createElement","setAttribute","insertBefore","marginTop","getComputedStyle","IntersectionObserver","threshold","rootMargin","observe","handleClick","window","scrollTo","scrollIntoView","[object Object]","newValue","oldValue","onComponentPropUndefinedChange","banners","querySelectorAll","length","bannerOffset","footers","footerEl","footerObserver","onComponentRequiredPropUndefined","prop","propName","h","class","aria-label","onClick","innerHTML","ArrowUpward","variant"],"mappings":"uTAAA,MAAMA,EAAiB,igICOvB,MAAMC,EAAiB,oBAOVC,EAAS,+BAqBZC,KAAAC,YAAoC,KAIpCD,KAAAE,mBAAsBC,IAC5BH,KAAKI,gBAAkBD,GAGjBH,KAAAK,iBAAoBF,IAC1BH,KAAKM,cAAgBH,GAGfH,KAAAO,yBAA4BC,IAClCR,KAAKE,mBAAmBM,EAAQ,GAAGC,iBAG7BT,KAAAU,uBAA0BF,IAChCR,KAAKK,iBAAiBG,EAAQ,GAAGC,iBAG3BT,KAAAW,aAAgBC,IACtB,IAAIC,EAAyB,KAC7B,GAAID,IAAW,MAAQA,IAAWE,UAAW,CAC3CC,QAAQC,IACN,2FAEG,CACLH,EAAgBI,SAASC,cACvBN,EAAOO,QAAQ,OAAS,EAAIP,EAAS,IAAMA,GAE7C,GAAIC,IAAkB,KAAM,CAC1BE,QAAQC,IACN,sCAAsCJ,6CAI5C,OAAOC,GAGDb,KAAAoB,kBAAqBR,IAC3BZ,KAAKqB,SAAWrB,KAAKW,aAAaC,GAClC,IAAIU,EAGJ,GAAItB,KAAKC,cAAgB,KAAM,CAC7B,MAAMsB,EAAaN,SAASC,cAAc,0BAC1C,GAAIK,IAAe,KAAM,CACvBvB,KAAKC,YAAYuB,UAAUD,GAC3BA,EAAWE,UAIf,GAAIzB,KAAKqB,WAAa,KAAM,CAC1BC,EAAYL,SAASS,KACrB1B,KAAKqB,SAAWC,EAAUK,kBAC1B3B,KAAK4B,eAAiB,SACjB,CACLN,EAAYtB,KAAKqB,SAASQ,WAC1B7B,KAAK4B,eAAiB,MAIxB,MAAME,EAAuBb,SAASc,cAAc,OACpDD,EAAqBE,aAAa,KAAM,yBACxCV,EAAUW,aAAaH,EAAsB9B,KAAKqB,UAGlD,MAAMa,EAAYC,iBAAiBnC,KAAKqB,UAAUa,UAClDlC,KAAKC,YAAc,IAAImC,qBAAqBpC,KAAKO,yBAA0B,CACzE8B,UAAW,CAAC,GACZC,WAAY,GAAGJ,kBAEjBlC,KAAKC,YAAYsC,QAAQT,IAGnB9B,KAAAwC,YAAc,KACpB,GAAIxC,KAAK4B,eAAgB,CACvBa,OAAOC,SAAS,EAAG,OACd,CACL1C,KAAKqB,SAASsB,2DA5Fe,2BAEG,wBAEF,MAGlCC,iBAAiBC,EAAkBC,GAEjCC,EAA+BD,EAAUD,GAAU,KACjD7C,KAAKoB,kBAAkByB,MAsF3BD,oBACE5C,KAAKoB,kBAAkBpB,KAAKY,QAG5B,MAAMoC,EAAU/B,SAASgC,iBACvB,iDAEF,GAAID,EAAQE,OAAQ,CAClBlD,KAAKmD,aAAe,KAItB,MAAMC,EAAUnC,SAASgC,iBAAiB,UAC1C,GAAIG,EAAQF,OAAQ,CAClB,MAAMG,EAAWD,EAAQA,EAAQF,OAAS,GAC1C,MAAMb,EAAYrC,KAAKmD,aAAe,IAAO,EAC7C,MAAMG,EAAiB,IAAIlB,qBACzBpC,KAAKU,uBACL,CAAE2B,UAAW,CAACA,KAEhBiB,EAAef,QAAQc,IAI3BT,mBACEW,EACE,CAAC,CAAEC,KAAMxD,KAAKY,OAAQ6C,SAAU,WAChC,eAIJb,SACE,MAAMO,aAAEA,EAAY/C,gBAAEA,EAAeE,cAAEA,GAAkBN,KACzD,OACE0D,EAAA,SAAA,CACEC,MAAO,CACLf,CAAC,uBAAwB,KACzBA,CAAC,iBAAkBO,EACnBP,CAAC,SAAUxC,EACXwC,CAAC,aAActC,GAChBsD,aACW9D,EACZ+D,QAAS7D,KAAKwC,aAEdkB,EAAA,OAAA,CAAMC,MAAM,sBAAsBG,UAAWC,IAE7CL,EAAA,gBAAA,CAAeM,QAAQ,kBACrBN,EAAA,OAAA,KAAO5D","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n position: absolute;\n right: 0;\n}\n\nbutton {\n position: fixed;\n right: var(--ic-space-md);\n bottom: var(--ic-space-md);\n height: 40px;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-md) var(--ic-space-xs)\n var(--ic-space-sm);\n margin: 0;\n gap: var(--ic-space-xs);\n display: flex;\n background-color: var(--ic-architectural-white);\n border: 1px solid var(--ic-action-default);\n outline-width: inherit;\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n border-radius: 80px;\n text-decoration: none;\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s linear var(--ic-transition-duration-slow),\n opacity var(--ic-transition-duration-slow);\n cursor: pointer;\n z-index: var(--ic-z-index-overlay);\n}\n\nbutton:hover {\n text-decoration: none;\n background-color: var(--ic-action-default-bg-hover-no-alpha);\n border: 1px solid var(--ic-action-default-hover);\n}\n\nbutton:active {\n text-decoration: none;\n background-color: var(--ic-action-default-bg-active-no-alpha);\n border: 1px solid var(--ic-action-default-active);\n}\n\nbutton:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.ic-back-to-top-link.show {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s linear 0s,\n opacity var(--ic-transition-duration-slow),\n box-shadow var(--ic-easing-transition-fast);\n}\n\n.ic-back-to-top-link.by-footer {\n position: relative;\n right: var(--ic-space-md);\n bottom: 56px;\n}\n\n.ic-back-to-top-link.offset-banner {\n margin-bottom: var(--ic-space-lg);\n}\n\n.ic-back-to-top-icon {\n fill: var(--ic-action-default);\n padding-left: var(--ic-space-xxs);\n padding-top: var(--ic-space-xxxs);\n}\n\n.ic-back-to-top-link span {\n color: var(--ic-action-default);\n}\n\n.ic-back-to-top-link:hover .ic-back-to-top-icon {\n fill: var(--ic-action-default-hover);\n}\n\n.ic-back-to-top-link:hover span {\n color: var(--ic-action-default-hover);\n}\n","import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n tag: \"ic-back-to-top\",\n styleUrl: \"ic-back-to-top.css\",\n shadow: true,\n})\nexport class BackToTop {\n @Element() el: HTMLIcBackToTopElement;\n\n /**\n * The ID of the element to jump back to when the link is clicked.\n */\n @Prop() target!: string;\n\n @State() bannerOffset: boolean = false;\n\n @State() targetElVisible: boolean = true;\n\n @State() footerVisible: boolean = false;\n\n @Watch(\"target\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n onComponentPropUndefinedChange(oldValue, newValue, () => {\n this.createTopObserver(newValue);\n });\n }\n private topObserver: IntersectionObserver = null;\n private targetEl: Element;\n private isTargetElNull: boolean;\n\n private setTargetElVisible = (visible: boolean) => {\n this.targetElVisible = visible;\n };\n\n private setFooterVisible = (visible: boolean) => {\n this.footerVisible = visible;\n };\n\n private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setTargetElVisible(entries[0].isIntersecting);\n };\n\n private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setFooterVisible(entries[0].isIntersecting);\n };\n\n private findTargetEl = (target: string): Element => {\n let targetElement: Element = null;\n if (target === null || target === undefined) {\n console.log(\n \"Error: No target ID specified for back to top component - defaulting to top of page\"\n );\n } else {\n targetElement = document.querySelector(\n target.indexOf(\"#\") === 0 ? target : \"#\" + target\n );\n if (targetElement === null) {\n console.log(\n `Error: Back to top target element '${target}' not found - defaulting to top of page`\n );\n }\n }\n return targetElement;\n };\n\n private createTopObserver = (target: string) => {\n this.targetEl = this.findTargetEl(target);\n let objParent: HTMLElement;\n\n //remove old element & observer\n if (this.topObserver !== null) {\n const observedEl = document.querySelector(\"#ic-back-to-top-target\");\n if (observedEl !== null) {\n this.topObserver.unobserve(observedEl);\n observedEl.remove();\n }\n }\n\n if (this.targetEl === null) {\n objParent = document.body;\n this.targetEl = objParent.firstElementChild;\n this.isTargetElNull = true;\n } else {\n objParent = this.targetEl.parentNode as HTMLElement;\n this.isTargetElNull = false;\n }\n\n //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n const objBackToTopTargetEl = document.createElement(\"div\");\n objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n // resize observer needs to factor in any top margin on the target el\n const marginTop = getComputedStyle(this.targetEl).marginTop;\n this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n threshold: [0],\n rootMargin: `${marginTop} 0px 0px 0px`,\n });\n this.topObserver.observe(objBackToTopTargetEl);\n };\n\n private handleClick = () => {\n if (this.isTargetElNull) {\n window.scrollTo(0, 0);\n } else {\n this.targetEl.scrollIntoView();\n }\n };\n\n componentWillLoad(): void {\n this.createTopObserver(this.target);\n\n //adjust position for classification banner at bottom\n const banners = document.querySelectorAll(\n \"ic-classification-banner:not([inline='true'])\"\n );\n if (banners.length) {\n this.bannerOffset = true;\n }\n\n //observer for when footer scrolls into view\n const footers = document.querySelectorAll(\"footer\");\n if (footers.length) {\n const footerEl = footers[footers.length - 1];\n const threshold = this.bannerOffset ? 0.15 : 0;\n const footerObserver = new IntersectionObserver(\n this.footerObserverCallback,\n { threshold: [threshold] }\n );\n footerObserver.observe(footerEl);\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.target, propName: \"target\" }],\n \"Back to Top\"\n );\n }\n\n render() {\n const { bannerOffset, targetElVisible, footerVisible } = this;\n return (\n <button\n class={{\n [\"ic-back-to-top-link\"]: true,\n [\"offset-banner\"]: bannerOffset,\n [\"show\"]: !targetElVisible,\n [\"by-footer\"]: footerVisible,\n }}\n aria-label={backToTopLabel}\n onClick={this.handleClick}\n >\n <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n <ic-typography variant=\"subtitle-small\">\n <span>{backToTopLabel}</span>\n </ic-typography>\n </button>\n );\n }\n}\n"]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as t,h as e,H as i,g as o}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-vertical-margins-h1){margin:0 0 var(--ic-space-xl)}:host(.ic-typography-vertical-margins-h2){margin:var(--ic-space-xxl) 0 var(--ic-space-lg)}:host(.ic-typography-vertical-margins-h3){margin:var(--ic-space-xl) 0 var(--ic-space-md)}:host(.ic-typography-vertical-margins-h4){margin:var(--ic-space-lg) 0 var(--ic-space-md)}:host(.ic-typography-vertical-margins-subtitle-large),:host(.ic-typography-vertical-margins-subtitle-small),:host(.ic-typography-vertical-margins-body){margin:0 0 var(--ic-space-md)}:host(.ic-typography-vertical-margins-caption),:host(.ic-typography-vertical-margins-caption-uppercase){margin:0 0 var(--ic-space-xs)}:host(.ic-typography-vertical-margins-h2:first-child),:host(.ic-typography-vertical-margins-h3:first-child),:host(.ic-typography-vertical-margins-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 r=class{constructor(e){t(this,e);this.variant="body";this.applyVerticalMargins=false}render(){const{variant:t,applyVerticalMargins:o}=this;return e(i,{class:{[`ic-typography-${t}`]:true,[`ic-typography-vertical-margins-${t}`]:o}},e("slot",null))}get el(){return o(this)}};r.style=a;export{r as ic_typography};
|
2
|
+
//# sourceMappingURL=p-6d0eaaeb.entry.js.map
|
@@ -0,0 +1 @@
|
|
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","applyVerticalMargins","this","h","Host","class"],"mappings":"yDAAA,MAAMA,EAAkB,wjJCSXC,EAAU,4CAMoB,iCAKA,MAEzCC,SACE,MAAMC,QAAEA,EAAOC,qBAAEA,GAAyBC,KAE1C,OACEC,EAACC,EAAI,CACHC,MAAO,CACLN,CAAC,iBAAiBC,KAAY,KAC9BD,CAAC,kCAAkCC,KAAYC,IAGjDE,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n}\n\n:host(.ic-typography-vertical-margins-h1) {\n margin: 0 0 var(--ic-space-xl);\n}\n\n:host(.ic-typography-vertical-margins-h2) {\n margin: var(--ic-space-xxl) 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-vertical-margins-h3) {\n margin: var(--ic-space-xl) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-h4) {\n margin: var(--ic-space-lg) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body) {\n margin: 0 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase) {\n margin: 0 0 var(--ic-space-xs);\n}\n\n:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child) {\n margin-top: 0;\n}\n\n:host(.ic-typography-h1) {\n font: var(--ic-font-h1);\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 appropriate margins to the top and bottom of the typography.\n */\n @Prop() applyVerticalMargins?: boolean = false;\n\n render() {\n const { variant, applyVerticalMargins } = this;\n\n return (\n <Host\n class={{\n [`ic-typography-${variant}`]: true,\n [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n }}\n >\n <slot />\n </Host>\n );\n }\n}\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["src/utils/types.ts"],"names":["IcInformationStatus","IcThemeForegroundEnum"],"mappings":"IAAYA,GAAZ,SAAYA,GACVA,EAAA,WAAA,UACAA,EAAA,SAAA,QACAA,EAAA,WAAA,WAHF,CAAYA,IAAAA,EAAmB,SAsEnBC,GAAZ,SAAYA,GACVA,EAAA,WAAA,UACAA,EAAA,QAAA,OACAA,EAAA,SAAA,SAHF,CAAYA,IAAAA,EAAqB","sourcesContent":["export enum IcInformationStatus {\n Warning = \"warning\",\n Error = \"error\",\n Success = \"success\",\n}\n\nexport type IcInformationStatusOrEmpty = \"warning\" | \"error\" | \"success\" | \"\";\n\nexport type IcNavType = \"side\" | \"top\" | \"page-header\";\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type IcAutocompleteTypes =\n | \"on\"\n | \"off\"\n | \"name\"\n | \"honorific-prefix\"\n | \"given-name\"\n | \"additional-name\"\n | \"family-name\"\n | \"honorific-suffix\"\n | \"nickname\"\n | \"email\"\n | \"username\"\n | \"new-password\"\n | \"current-password\"\n | \"one-time-code\"\n | \"organization-title\"\n | \"organization\"\n | \"street-address\"\n | \"address-line1\"\n | \"address-line2\"\n | \"address-line3\"\n | \"address-level4\"\n | \"address-level3\"\n | \"address-level2\"\n | \"address-level1\"\n | \"country\"\n | \"country-name\"\n | \"postal-code\"\n | \"cc-name\"\n | \"cc-given-name\"\n | \"cc-additional-name\"\n | \"cc-family-name\"\n | \"cc-family-name\"\n | \"cc-number\"\n | \"cc-exp\"\n | \"cc-exp-month\"\n | \"cc-exp-year\"\n | \"cc-csc\"\n | \"cc-type\"\n | \"transaction-currency\"\n | \"transaction-amount\"\n | \"language\"\n | \"bday\"\n | \"bday-day\"\n | \"bday-month\"\n | \"bday-year\"\n | \"sex\"\n | \"tel\"\n | \"tel-country-code\"\n | \"tel-national\"\n | \"tel-area-code\"\n | \"tel-local\"\n | \"tel-extension\"\n | \"impp\"\n | \"url\"\n | \"photo\";\n\nexport type IcAlignment = \"left\" | \"center\" | \"full-width\";\n\nexport enum IcThemeForegroundEnum {\n Default = \"default\",\n Dark = \"dark\",\n Light = \"light\",\n}\n\nexport type IcThemeForeground = \"default\" | \"dark\" | \"light\";\n\nexport type IcThemeForegroundNoDefault = \"dark\" | \"light\";\n\nexport type IcTheme = {\n mode: IcThemeForeground;\n color: IcColorRGB;\n};\n\nexport type IcAdditionalFieldTypes = \"static\" | \"dynamic\";\n\nexport type IcColorRGB = {\n r: number;\n g: number;\n b: number;\n};\n\nexport type IcActivationTypes = \"automatic\" | \"manual\";\n\nexport type IcAutocorrectStates = \"on\" | \"off\";\n\nexport type IcNavParentDetails = {\n navType: IcNavType | \"\";\n parent: HTMLElement;\n};\n\nexport type IcTypographyVariants =\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"subtitle-large\"\n | \"subtitle-small\"\n | \"body\"\n | \"label\"\n | \"label-uppercase\"\n | \"caption\"\n | \"caption-uppercase\";\n\nexport interface IcMenuOption {\n value?: string;\n label: string;\n description?: string;\n disabled?: boolean;\n recommended?: boolean;\n children?: IcMenuOption[];\n}\n\nexport type IcSearchMatchPositions = \"start\" | \"anywhere\";\n\nexport type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;\n\nexport type IcRequiredPropsTypes =\n | string\n | boolean\n | number\n | HTMLElement\n | IcMenuOption[];\n\nexport type IcPropObject = { prop: IcRequiredPropsTypes; propName: string };\n\nexport type IcRelatedTarget = EventTarget | undefined;\n\nexport interface IcValueEventDetail {\n value: string;\n}\nexport interface IcBlurEventDetail {\n relatedTarget: IcRelatedTarget;\n}\n"]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as e,c as t,h as i,H as o,g as a}from"./p-f9370be6.js";import{a as r,r as n,b as c,i as s}from"./p-c15bb762.js";import"./p-6f57b13c.js";const d='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host([disabled]){color:var(--ic-architectural-200);pointer-events:none}:host([small]) .container{margin-bottom:10px}.container{display:flex;width:-moz-fit-content;width:fit-content;margin-bottom:var(--ic-space-sm);margin-left:var(--ic-space-xxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:transparent;border:1px solid var(--ic-architectural-300);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast)}.checkbox:checked{background-color:var(--ic-action-default);border:1px solid var(--ic-action-default);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-architectural-200)}.checkbox.indeterminate:checked{background-color:transparent;border:2px solid var(--ic-action-default)}.checkbox:checked:hover{background-color:var(--ic-action-default-hover)}.checkbox.indeterminate:checked:hover{background-color:var(--ic-action-default-bg-hover);border:2px solid var(--ic-action-default-hover)}.checkbox:checked:active{background-color:var(--ic-action-default-active)}.checkbox.indeterminate:checked:active{background-color:var(--ic-action-default-bg-active);border:2px solid var(--ic-action-default-active)}.checkbox:hover{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 4px var(--ic-action-default-bg-hover);border:1px solid var(--ic-action-default-hover)}.checkbox:active{background-color:var(--ic-action-default-bg-active);box-shadow:0 0 0 4px var(--ic-action-default-bg-active);border:1px solid var(--ic-action-default-active)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:1px dashed var(--ic-architectural-200)}.checkbox-label{padding-left:var(--ic-space-sm)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:white;z-index:1;background-color:transparent;pointer-events:none}.indeterminate-symbol{position:relative;width:14px;height:var(--ic-space-xxxs);top:11px;right:-19px;margin-left:-14px;z-index:1;background-color:var(--ic-action-default);pointer-events:none}.container:hover .indeterminate-symbol{background-color:var(--ic-action-default-hover)}.container:active .indeterminate-symbol{background-color:var(--ic-action-default-active)}.additional-field-wrapper{margin-left:44px;margin-top:var(--ic-space-xs)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 3px;border-bottom:2px solid var(--ic-action-default);border-left:2px solid var(--ic-action-default)}.dynamic-container{display:flex;position:relative;margin-left:15px;margin-top:-6px;margin-bottom:var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-text{color:var(--ic-action-default);margin-top:7px;margin-bottom:var(--ic-space-xs);border-radius:2%}';const l=class{constructor(i){e(this,i);this.checkboxChecked=t(this,"checkboxChecked",7);this.handleClick=()=>{this.checked=!this.checked;this.checkboxChecked.emit()};this.checked=false;this.disabled=false;this.label=undefined;this.value=undefined;this.name=undefined;this.groupLabel=undefined;this.dynamicText="This selection requires additional answers";this.additionalFieldDisplay="static";this.indeterminate=false}componentDidRender(){if(this.additionalFieldDisplay==="static"){const e=this.host.querySelector("ic-text-field");if(!this.checked){e&&e.setAttribute("disabled","")}else{e&&e.removeAttribute("disabled")}}else{if(!this.checked){this.additionalFieldContainer.style.display="none"}else{this.additionalFieldContainer.style.display="flex"}}}componentDidLoad(){r([{prop:this.label,propName:"label"},{prop:this.value,propName:"value"}],"Checkbox")}render(){const e=`ic-checkbox-${this.label!==undefined?this.label:this.value}-${this.groupLabel}`;this.checked?n(true,this.host,this.name,this.checked&&this.value,this.disabled):c(this.host);return i(o,null,i("div",{class:{["container"]:true,["disabled"]:this.disabled}},this.checked&&!this.indeterminate&&i("svg",{class:"checkmark",width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg","fill-rule":"evenodd","clip-rule":"evenodd"},i("title",null,"checkmark icon"),i("path",{d:"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z"})),this.checked&&this.indeterminate&&i("div",{class:"indeterminate-symbol"}),i("input",{role:"checkbox",class:{["checkbox"]:true,["checked"]:this.checked,["indeterminate"]:this.indeterminate},type:"checkbox",name:this.name,id:e,value:this.value,disabled:this.disabled?true:null,checked:this.checked,onClick:this.handleClick}),i("ic-typography",{variant:"body"},i("label",{class:"checkbox-label",htmlFor:e},this.label))),s(this.host,"additional-field")&&i("div",{class:"dynamic-container",ref:e=>this.additionalFieldContainer=e},this.additionalFieldDisplay==="dynamic"&&i("div",{class:"branch-corner"}),i("div",null,this.additionalFieldDisplay==="dynamic"&&i("ic-typography",{variant:"caption"},i("p",{class:"dynamic-text","aria-live":"polite"},this.dynamicText)),i("div",{class:{"additional-field-wrapper":this.additionalFieldDisplay==="static"}},i("slot",{name:"additional-field"})))))}get host(){return a(this)}};l.style=d;export{l as ic_checkbox};
|
2
|
+
//# sourceMappingURL=p-71282f37.entry.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"names":["icCheckboxCss","Checkbox","this","handleClick","checked","checkboxChecked","emit","[object Object]","additionalFieldDisplay","textfield","host","querySelector","setAttribute","removeAttribute","additionalFieldContainer","style","display","onComponentRequiredPropUndefined","prop","label","propName","value","id","undefined","groupLabel","renderHiddenInput","name","disabled","removeHiddenInput","h","Host","class","indeterminate","width","height","xmlns","fill-rule","clip-rule","d","role","type","onClick","variant","htmlFor","isSlotUsed","ref","el","aria-live","dynamicText","additional-field-wrapper"],"mappings":"yHAAA,MAAMA,EAAgB,kvKCsBTC,EAAQ,gFAgDXC,KAAAC,YAAc,KACpBD,KAAKE,SAAWF,KAAKE,QACrBF,KAAKG,gBAAgBC,qBA9CsB,oBAIhB,+GAoBC,yEAK5B,4BAI+B,MAgBjCC,qBACE,GAAIL,KAAKM,yBAA2B,SAAU,CAC5C,MAAMC,EAAYP,KAAKQ,KAAKC,cAAc,iBAC1C,IAAKT,KAAKE,QAAS,CACjBK,GAAaA,EAAUG,aAAa,WAAY,QAC3C,CACLH,GAAaA,EAAUI,gBAAgB,iBAEpC,CACL,IAAKX,KAAKE,QAAS,CACjBF,KAAKY,yBAAyBC,MAAMC,QAAU,WACzC,CACLd,KAAKY,yBAAyBC,MAAMC,QAAU,SAKpDT,mBACEU,EACE,CACE,CAAEC,KAAMhB,KAAKiB,MAAOC,SAAU,SAC9B,CAAEF,KAAMhB,KAAKmB,MAAOD,SAAU,UAEhC,YAIJb,SACE,MAAMe,EAAK,eACTpB,KAAKiB,QAAUI,UAAYrB,KAAKiB,MAAQjB,KAAKmB,SAC3CnB,KAAKsB,aAETtB,KAAKE,QACDqB,EACE,KACAvB,KAAKQ,KACLR,KAAKwB,KACLxB,KAAKE,SAAWF,KAAKmB,MACrBnB,KAAKyB,UAEPC,EAAkB1B,KAAKQ,MAE3B,OACEmB,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKE,MAAO,CAAExB,CAAC,aAAc,KAAMA,CAAC,YAAaL,KAAKyB,WACnDzB,KAAKE,UAAYF,KAAK8B,eACrBH,EAAA,MAAA,CACEE,MAAM,YACNE,MAAM,KACNC,OAAO,KACPC,MAAM,6BAA4BC,YACxB,UAASC,YACT,WAEVR,EAAA,QAAA,KAAA,kBACAA,EAAA,OAAA,CAAMS,EAAE,yFAGXpC,KAAKE,SAAWF,KAAK8B,eACpBH,EAAA,MAAA,CAAKE,MAAM,yBAEbF,EAAA,QAAA,CACEU,KAAK,WACLR,MAAO,CACLxB,CAAC,YAAa,KACdA,CAAC,WAAYL,KAAKE,QAClBG,CAAC,iBAAkBL,KAAK8B,eAE1BQ,KAAK,WACLd,KAAMxB,KAAKwB,KACXJ,GAAIA,EACJD,MAAOnB,KAAKmB,MACZM,SAAUzB,KAAKyB,SAAW,KAAO,KACjCvB,QAASF,KAAKE,QACdqC,QAASvC,KAAKC,cAEhB0B,EAAA,gBAAA,CAAea,QAAQ,QACrBb,EAAA,QAAA,CAAOE,MAAM,iBAAiBY,QAASrB,GACpCpB,KAAKiB,SAIXyB,EAAW1C,KAAKQ,KAAM,qBACrBmB,EAAA,MAAA,CACEE,MAAM,oBACNc,IAAMC,GAAQ5C,KAAKY,yBAA2BgC,GAE7C5C,KAAKM,yBAA2B,WAC/BqB,EAAA,MAAA,CAAKE,MAAM,kBAEbF,EAAA,MAAA,KACG3B,KAAKM,yBAA2B,WAC/BqB,EAAA,gBAAA,CAAea,QAAQ,WACrBb,EAAA,IAAA,CAAGE,MAAM,eAAcgB,YAAW,UAC/B7C,KAAK8C,cAIZnB,EAAA,MAAA,CACEE,MAAO,CACLkB,2BACE/C,KAAKM,yBAA2B,WAGpCqB,EAAA,OAAA,CAAMH,KAAK","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host([disabled]) {\n color: var(--ic-architectural-200);\n pointer-events: none;\n}\n\n:host([dense]) .container {\n margin-bottom: 10px;\n}\n\n.container {\n display: flex;\n width: fit-content;\n margin-bottom: var(--ic-space-sm);\n margin-left: var(--ic-space-xxs);\n}\n\n.checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: transparent;\n border: 1px solid var(--ic-architectural-300);\n border-radius: var(--ic-border-radius);\n outline: none;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n}\n\n.checkbox:checked {\n background-color: var(--ic-action-default);\n border: 1px solid var(--ic-action-default);\n transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n background-color: var(--ic-architectural-200);\n}\n\n.checkbox.indeterminate:checked {\n background-color: transparent;\n border: 2px solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n background-color: var(--ic-action-default-hover);\n}\n\n.checkbox.indeterminate:checked:hover {\n background-color: var(--ic-action-default-bg-hover);\n border: 2px solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n background-color: var(--ic-action-default-active);\n}\n\n.checkbox.indeterminate:checked:active {\n background-color: var(--ic-action-default-bg-active);\n border: 2px solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n background-color: var(--ic-action-default-bg-hover);\n box-shadow: 0 0 0 4px var(--ic-action-default-bg-hover);\n border: 1px solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n background-color: var(--ic-action-default-bg-active);\n box-shadow: 0 0 0 4px var(--ic-action-default-bg-active);\n border: 1px solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n border: 1px dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n cursor: pointer;\n}\n\n.checkmark {\n position: relative;\n right: calc(-1 * var(--ic-space-lg));\n margin-left: calc(-1 * var(--ic-space-lg));\n fill: white;\n z-index: 1;\n background-color: transparent;\n pointer-events: none;\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 14px;\n height: var(--ic-space-xxxs);\n top: 11px;\n right: -19px;\n margin-left: -14px;\n z-index: 1;\n background-color: var(--ic-action-default);\n pointer-events: none;\n}\n\n.container:hover .indeterminate-symbol {\n background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n margin-left: 44px;\n margin-top: var(--ic-space-xs);\n}\n\n.branch-corner {\n color: var(--ic-action-default);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 3px;\n border-bottom: 2px solid var(--ic-action-default);\n border-left: 2px solid var(--ic-action-default);\n}\n\n.dynamic-container {\n display: flex;\n position: relative;\n margin-left: 15px;\n margin-top: -6px;\n margin-bottom: var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n color: var(--ic-action-default);\n margin-top: 7px;\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: true,\n})\nexport class Checkbox {\n /**\n * Set the checkbox to the checked state\n */\n @Prop({ reflect: true }) checked?: boolean = false;\n /**\n * Set the checkbox to the disabled state\n */\n @Prop() disabled?: boolean = false;\n /**\n * Provide a label for the input\n */\n @Prop() label!: string;\n /**\n * Provide a value for the input\n */\n @Prop() value!: string;\n /**\n * Provide a name for the input\n */\n @Prop() name: string;\n /**\n * Provide a group label for the input\n */\n @Prop() groupLabel: string;\n /**\n * Provide a text prop for the dynamic text\n */\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n /**\n * Set which style of additionalField will be displayed if used\n */\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n /**\n * Display the indeterminate state when checked\n */\n @Prop() indeterminate: boolean = false;\n\n @Element() host: HTMLIcCheckboxElement;\n\n /**\n * Emitted when a checkbox has been checked\n */\n @Event() checkboxChecked: EventEmitter<void>;\n\n private additionalFieldContainer: HTMLDivElement;\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.checkboxChecked.emit();\n };\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.host.querySelector(\"ic-text-field\");\n if (!this.checked) {\n textfield && textfield.setAttribute(\"disabled\", \"\");\n } else {\n textfield && textfield.removeAttribute(\"disabled\");\n }\n } else {\n if (!this.checked) {\n this.additionalFieldContainer.style.display = \"none\";\n } else {\n this.additionalFieldContainer.style.display = \"flex\";\n }\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.value, propName: \"value\" },\n ],\n \"Checkbox\"\n );\n }\n\n render() {\n const id = `ic-checkbox-${\n this.label !== undefined ? this.label : this.value\n }-${this.groupLabel}`;\n\n this.checked\n ? renderHiddenInput(\n true,\n this.host,\n this.name,\n this.checked && this.value,\n this.disabled\n )\n : removeHiddenInput(this.host);\n\n return (\n <Host>\n <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n {this.checked && !this.indeterminate && (\n <svg\n class=\"checkmark\"\n width=\"24\"\n height=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n </svg>\n )}\n {this.checked && this.indeterminate && (\n <div class=\"indeterminate-symbol\" />\n )}\n <input\n role=\"checkbox\"\n class={{\n [\"checkbox\"]: true,\n [\"checked\"]: this.checked,\n [\"indeterminate\"]: this.indeterminate,\n }}\n type=\"checkbox\"\n name={this.name}\n id={id}\n value={this.value}\n disabled={this.disabled ? true : null}\n checked={this.checked}\n onClick={this.handleClick}\n ></input>\n <ic-typography variant=\"body\">\n <label class=\"checkbox-label\" htmlFor={id}>\n {this.label}\n </label>\n </ic-typography>\n </div>\n {isSlotUsed(this.host, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {this.additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {this.additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {this.dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n this.additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
|
1
|
+
{"version":3,"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"names":["icCheckboxCss","Checkbox","this","handleClick","checked","checkboxChecked","emit","[object Object]","additionalFieldDisplay","textfield","host","querySelector","setAttribute","removeAttribute","additionalFieldContainer","style","display","onComponentRequiredPropUndefined","prop","label","propName","value","id","undefined","groupLabel","renderHiddenInput","name","disabled","removeHiddenInput","h","Host","class","indeterminate","width","height","xmlns","fill-rule","clip-rule","d","role","type","onClick","variant","htmlFor","isSlotUsed","ref","el","aria-live","dynamicText","additional-field-wrapper"],"mappings":"iJAAA,MAAMA,EAAgB,kvKCsBTC,EAAQ,gFAgDXC,KAAAC,YAAc,KACpBD,KAAKE,SAAWF,KAAKE,QACrBF,KAAKG,gBAAgBC,qBA9CsB,oBAIhB,+GAoBC,yEAK5B,4BAI+B,MAgBjCC,qBACE,GAAIL,KAAKM,yBAA2B,SAAU,CAC5C,MAAMC,EAAYP,KAAKQ,KAAKC,cAAc,iBAC1C,IAAKT,KAAKE,QAAS,CACjBK,GAAaA,EAAUG,aAAa,WAAY,QAC3C,CACLH,GAAaA,EAAUI,gBAAgB,iBAEpC,CACL,IAAKX,KAAKE,QAAS,CACjBF,KAAKY,yBAAyBC,MAAMC,QAAU,WACzC,CACLd,KAAKY,yBAAyBC,MAAMC,QAAU,SAKpDT,mBACEU,EACE,CACE,CAAEC,KAAMhB,KAAKiB,MAAOC,SAAU,SAC9B,CAAEF,KAAMhB,KAAKmB,MAAOD,SAAU,UAEhC,YAIJb,SACE,MAAMe,EAAK,eACTpB,KAAKiB,QAAUI,UAAYrB,KAAKiB,MAAQjB,KAAKmB,SAC3CnB,KAAKsB,aAETtB,KAAKE,QACDqB,EACE,KACAvB,KAAKQ,KACLR,KAAKwB,KACLxB,KAAKE,SAAWF,KAAKmB,MACrBnB,KAAKyB,UAEPC,EAAkB1B,KAAKQ,MAE3B,OACEmB,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKE,MAAO,CAAExB,CAAC,aAAc,KAAMA,CAAC,YAAaL,KAAKyB,WACnDzB,KAAKE,UAAYF,KAAK8B,eACrBH,EAAA,MAAA,CACEE,MAAM,YACNE,MAAM,KACNC,OAAO,KACPC,MAAM,6BAA4BC,YACxB,UAASC,YACT,WAEVR,EAAA,QAAA,KAAA,kBACAA,EAAA,OAAA,CAAMS,EAAE,yFAGXpC,KAAKE,SAAWF,KAAK8B,eACpBH,EAAA,MAAA,CAAKE,MAAM,yBAEbF,EAAA,QAAA,CACEU,KAAK,WACLR,MAAO,CACLxB,CAAC,YAAa,KACdA,CAAC,WAAYL,KAAKE,QAClBG,CAAC,iBAAkBL,KAAK8B,eAE1BQ,KAAK,WACLd,KAAMxB,KAAKwB,KACXJ,GAAIA,EACJD,MAAOnB,KAAKmB,MACZM,SAAUzB,KAAKyB,SAAW,KAAO,KACjCvB,QAASF,KAAKE,QACdqC,QAASvC,KAAKC,cAEhB0B,EAAA,gBAAA,CAAea,QAAQ,QACrBb,EAAA,QAAA,CAAOE,MAAM,iBAAiBY,QAASrB,GACpCpB,KAAKiB,SAIXyB,EAAW1C,KAAKQ,KAAM,qBACrBmB,EAAA,MAAA,CACEE,MAAM,oBACNc,IAAMC,GAAQ5C,KAAKY,yBAA2BgC,GAE7C5C,KAAKM,yBAA2B,WAC/BqB,EAAA,MAAA,CAAKE,MAAM,kBAEbF,EAAA,MAAA,KACG3B,KAAKM,yBAA2B,WAC/BqB,EAAA,gBAAA,CAAea,QAAQ,WACrBb,EAAA,IAAA,CAAGE,MAAM,eAAcgB,YAAW,UAC/B7C,KAAK8C,cAIZnB,EAAA,MAAA,CACEE,MAAO,CACLkB,2BACE/C,KAAKM,yBAA2B,WAGpCqB,EAAA,OAAA,CAAMH,KAAK","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host([disabled]) {\n color: var(--ic-architectural-200);\n pointer-events: none;\n}\n\n:host([small]) .container {\n margin-bottom: 10px;\n}\n\n.container {\n display: flex;\n width: fit-content;\n margin-bottom: var(--ic-space-sm);\n margin-left: var(--ic-space-xxs);\n}\n\n.checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: transparent;\n border: 1px solid var(--ic-architectural-300);\n border-radius: var(--ic-border-radius);\n outline: none;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n}\n\n.checkbox:checked {\n background-color: var(--ic-action-default);\n border: 1px solid var(--ic-action-default);\n transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n background-color: var(--ic-architectural-200);\n}\n\n.checkbox.indeterminate:checked {\n background-color: transparent;\n border: 2px solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n background-color: var(--ic-action-default-hover);\n}\n\n.checkbox.indeterminate:checked:hover {\n background-color: var(--ic-action-default-bg-hover);\n border: 2px solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n background-color: var(--ic-action-default-active);\n}\n\n.checkbox.indeterminate:checked:active {\n background-color: var(--ic-action-default-bg-active);\n border: 2px solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n background-color: var(--ic-action-default-bg-hover);\n box-shadow: 0 0 0 4px var(--ic-action-default-bg-hover);\n border: 1px solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n background-color: var(--ic-action-default-bg-active);\n box-shadow: 0 0 0 4px var(--ic-action-default-bg-active);\n border: 1px solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n border: 1px dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n cursor: pointer;\n}\n\n.checkmark {\n position: relative;\n right: calc(-1 * var(--ic-space-lg));\n margin-left: calc(-1 * var(--ic-space-lg));\n fill: white;\n z-index: 1;\n background-color: transparent;\n pointer-events: none;\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 14px;\n height: var(--ic-space-xxxs);\n top: 11px;\n right: -19px;\n margin-left: -14px;\n z-index: 1;\n background-color: var(--ic-action-default);\n pointer-events: none;\n}\n\n.container:hover .indeterminate-symbol {\n background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n margin-left: 44px;\n margin-top: var(--ic-space-xs);\n}\n\n.branch-corner {\n color: var(--ic-action-default);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 3px;\n border-bottom: 2px solid var(--ic-action-default);\n border-left: 2px solid var(--ic-action-default);\n}\n\n.dynamic-container {\n display: flex;\n position: relative;\n margin-left: 15px;\n margin-top: -6px;\n margin-bottom: var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n color: var(--ic-action-default);\n margin-top: 7px;\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: true,\n})\nexport class Checkbox {\n /**\n * Set the checkbox to the checked state\n */\n @Prop({ reflect: true }) checked?: boolean = false;\n /**\n * Set the checkbox to the disabled state\n */\n @Prop() disabled?: boolean = false;\n /**\n * Provide a label for the input\n */\n @Prop() label!: string;\n /**\n * Provide a value for the input\n */\n @Prop() value!: string;\n /**\n * Provide a name for the input\n */\n @Prop() name: string;\n /**\n * Provide a group label for the input\n */\n @Prop() groupLabel: string;\n /**\n * Provide a text prop for the dynamic text\n */\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n /**\n * Set which style of additionalField will be displayed if used\n */\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n /**\n * Display the indeterminate state when checked\n */\n @Prop() indeterminate: boolean = false;\n\n @Element() host: HTMLIcCheckboxElement;\n\n /**\n * Emitted when a checkbox has been checked\n */\n @Event() checkboxChecked: EventEmitter<void>;\n\n private additionalFieldContainer: HTMLDivElement;\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.checkboxChecked.emit();\n };\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.host.querySelector(\"ic-text-field\");\n if (!this.checked) {\n textfield && textfield.setAttribute(\"disabled\", \"\");\n } else {\n textfield && textfield.removeAttribute(\"disabled\");\n }\n } else {\n if (!this.checked) {\n this.additionalFieldContainer.style.display = \"none\";\n } else {\n this.additionalFieldContainer.style.display = \"flex\";\n }\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.value, propName: \"value\" },\n ],\n \"Checkbox\"\n );\n }\n\n render() {\n const id = `ic-checkbox-${\n this.label !== undefined ? this.label : this.value\n }-${this.groupLabel}`;\n\n this.checked\n ? renderHiddenInput(\n true,\n this.host,\n this.name,\n this.checked && this.value,\n this.disabled\n )\n : removeHiddenInput(this.host);\n\n return (\n <Host>\n <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n {this.checked && !this.indeterminate && (\n <svg\n class=\"checkmark\"\n width=\"24\"\n height=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n </svg>\n )}\n {this.checked && this.indeterminate && (\n <div class=\"indeterminate-symbol\" />\n )}\n <input\n role=\"checkbox\"\n class={{\n [\"checkbox\"]: true,\n [\"checked\"]: this.checked,\n [\"indeterminate\"]: this.indeterminate,\n }}\n type=\"checkbox\"\n name={this.name}\n id={id}\n value={this.value}\n disabled={this.disabled ? true : null}\n checked={this.checked}\n onClick={this.handleClick}\n ></input>\n <ic-typography variant=\"body\">\n <label class=\"checkbox-label\" htmlFor={id}>\n {this.label}\n </label>\n </ic-typography>\n </div>\n {isSlotUsed(this.host, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {this.additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {this.additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {this.dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n this.additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as o,h as t,H as e,g as r}from"./p-f9370be6.js";import{e as i,D as n,a as l}from"./p-c15bb762.js";import"./p-6f57b13c.js";const a='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.footer-link-group-sparse){--footer-link-group-margin-right:95px;--footer-link-group-border-bottom:0 solid transparent;--footer-link-group-title-margin-top:0;--footer-link-group-title-margin-bottom:var(--ic-space-md)}:host(.footer-link-group-small){--footer-link-group-margin-right:0;--footer-link-group-title-margin-top:var(--ic-space-md);--footer-link-group-title-margin-bottom:var(--ic-space-md);--footer-link-group-links-padding-left:var(--ic-space-md);--footer-link-group-links-padding-bottom:var(--ic-space-md)}:host(.footer-link-group-light.footer-link-group-small){--footer-link-group-border-bottom:var(--ic-keyline-lighten)}:host(.footer-link-group-dark.footer-link-group-small){--footer-link-group-border-bottom:var(--ic-keyline-darken)}:host(.footer-link-group){margin-right:var(--footer-link-group-margin-right);border-bottom:var(--footer-link-group-border-bottom)}:host(.footer-link-group-small.footer-link-group-light:hover){background-color:var(--ic-action-light-bg-hover);cursor:pointer}:host(.footer-link-group-small.footer-link-group-dark:hover){background-color:var(--ic-action-dark-bg-hover);cursor:pointer}:host(.footer-link-group-sparse:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:none;z-index:1}:host(.footer-link-group-small:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:none;z-index:1}:host(.footer-link-group-small.footer-link-group-light:active){background-color:var(--ic-action-light-bg-active)}:host(.footer-link-group-small.footer-link-group-dark:active){background-color:var(--ic-action-dark-bg-active)}.footer-link-group-title{margin-top:var(--footer-link-group-title-margin-top);margin-bottom:var(--footer-link-group-title-margin-bottom);flex-grow:1}.footer-link-group-toggle{fill:white !important}.footer-link-group-links{display:flex;flex-direction:column}.footer-link-group-header{display:flex;align-items:center}';const s=class{constructor(t){o(this,t);this.handleKeydown=o=>{if(o.key===" "||o.key==="Enter"){this.toggleExpanded()}};this.toggleExpanded=()=>{this.expanded=!this.expanded};this.groupTitle=undefined;this.small=false;this.expanded=false;this.dropdownIconStyle=i();this.deviceSize=n.XL}isSmall(o){if(o.parentElement!==null){if(o.parentElement.classList.contains("footer")){return o.parentElement.classList.contains("footer-small")}else{return this.isSmall(o.parentElement)}}else{return false}}footerResizeHandler(){this.small=this.isSmall(this.el)}footerThemeChangeHandler(o){const t=o.detail;this.dropdownIconStyle=t.mode}componentWillLoad(){this.small=this.isSmall(this.el)}componentDidLoad(){l([{prop:this.groupTitle,propName:"group-title"}],"Footer Link Group")}render(){const{small:o,groupTitle:r}=this;return!o?t(e,{class:{["footer-link-group footer-link-group-sparse"]:true,[`footer-link-group-${this.dropdownIconStyle}`]:true}},t("div",{class:"footer-link-group-title"},t("ic-typography",{variant:"subtitle-small"},r)),t("div",{class:"footer-link-group-links"},t("slot",null))):t(e,{class:{["footer-link-group footer-link-group-small"]:true,[`footer-link-group-${this.dropdownIconStyle}`]:true},tabIndex:"1",onClick:this.toggleExpanded,onKeydown:this.handleKeydown,"aria-haspopup":"true","aria-expanded":this.expanded},t("ic-section-container",{fullHeight:true},t("div",{class:"footer-link-group-header"},t("div",{class:"footer-link-group-title"},t("ic-typography",{variant:"label"},r)),this.expanded?t("svg",{class:"footer-link-group-toggle",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",width:"1em",height:"1em",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 1200 1200"},t("path",{fill:"currentColor",d:"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z"})):t("svg",{class:"footer-link-group-toggle",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",width:"1em",height:"1em",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 1200 1200"},t("g",{transform:"translate(0 1200) scale(1 -1)"},t("path",{fill:"currentColor",d:"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z"})))),this.expanded&&t("div",{class:"footer-link-group-links"},t("slot",null))))}get el(){return r(this)}};s.style=a;export{s as ic_footer_link_group};
|
2
|
+
//# sourceMappingURL=p-73d41c36.entry.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-footer-link-group/ic-footer-link-group.css?tag=ic-footer-link-group&encapsulation=shadow","src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"names":["icFooterLinkGroupCss","FooterLinkGroup","this","handleKeydown","event","key","toggleExpanded","expanded","getThemeForegroundColor","DEVICE_SIZES","XL","[object Object]","e","parentElement","classList","contains","
|
1
|
+
{"version":3,"sources":["src/components/ic-footer-link-group/ic-footer-link-group.css?tag=ic-footer-link-group&encapsulation=shadow","src/components/ic-footer-link-group/ic-footer-link-group.tsx"],"names":["icFooterLinkGroupCss","FooterLinkGroup","this","handleKeydown","event","key","toggleExpanded","expanded","getThemeForegroundColor","DEVICE_SIZES","XL","[object Object]","e","parentElement","classList","contains","isSmall","small","el","ev","theme","detail","dropdownIconStyle","mode","onComponentRequiredPropUndefined","prop","groupTitle","propName","h","Host","class","variant","tabIndex","onClick","onKeydown","aria-haspopup","aria-expanded","fullHeight","xmlns","aria-hidden","role","width","height","preserveAspectRatio","viewBox","fill","d","transform"],"mappings":"mIAAA,MAAMA,EAAuB,qxICqBhBC,EAAe,+BA4BlBC,KAAAC,cAAiBC,IACvB,GAAIA,EAAMC,MAAQ,KAAOD,EAAMC,MAAQ,QAAS,CAC9CH,KAAKI,mBAIDJ,KAAAI,eAAiB,KACvBJ,KAAKK,UAAYL,KAAKK,+CA3BE,oBAEG,6BAEAC,oBAECC,EAAaC,GAEnCC,QAAQC,GACd,GAAIA,EAAEC,gBAAkB,KAAM,CAC5B,GAAID,EAAEC,cAAcC,UAAUC,SAAS,UAAW,CAChD,OAAOH,EAAEC,cAAcC,UAAUC,SAAS,oBACrC,CACL,OAAOb,KAAKc,QAAQJ,EAAEC,oBAEnB,CACL,OAAO,OAeXF,sBACET,KAAKe,MAAQf,KAAKc,QAAQd,KAAKgB,IAIjCP,yBAAyBQ,GACvB,MAAMC,EAAiBD,EAAGE,OAC1BnB,KAAKoB,kBAAoBF,EAAMG,KAGjCZ,oBACET,KAAKe,MAAQf,KAAKc,QAAQd,KAAKgB,IAGjCP,mBACEa,EACE,CAAC,CAAEC,KAAMvB,KAAKwB,WAAYC,SAAU,gBACpC,qBAIJhB,SACE,MAAMM,MAAEA,EAAKS,WAAEA,GAAexB,KAE9B,OAAQe,EACNW,EAACC,EAAI,CACHC,MAAO,CACLnB,CAAC,8CAA+C,KAChDA,CAAC,qBAAqBT,KAAKoB,qBAAsB,OAGnDM,EAAA,MAAA,CAAKE,MAAM,2BACTF,EAAA,gBAAA,CAAeG,QAAQ,kBAAkBL,IAE3CE,EAAA,MAAA,CAAKE,MAAM,2BACTF,EAAA,OAAA,QAIJA,EAACC,EAAI,CACHC,MAAO,CACLnB,CAAC,6CAA8C,KAC/CA,CAAC,qBAAqBT,KAAKoB,qBAAsB,MAEnDU,SAAS,IACTC,QAAS/B,KAAKI,eACd4B,UAAWhC,KAAKC,cAAagC,gBACf,OAAMC,gBACLlC,KAAKK,UAEpBqB,EAAA,uBAAA,CAAsBS,WAAY,MAChCT,EAAA,MAAA,CAAKE,MAAM,4BACTF,EAAA,MAAA,CAAKE,MAAM,2BACTF,EAAA,gBAAA,CAAeG,QAAQ,SAASL,IAEjCxB,KAAKK,SACJqB,EAAA,MAAA,CACEE,MAAM,2BACNQ,MAAM,6BAA4BC,cACtB,OACZC,KAAK,MACLC,MAAM,MACNC,OAAO,MACPC,oBAAoB,gBACpBC,QAAQ,iBAERhB,EAAA,OAAA,CACEiB,KAAK,eACLC,EAAE,8IAINlB,EAAA,MAAA,CACEE,MAAM,2BACNQ,MAAM,6BAA4BC,cACtB,OACZC,KAAK,MACLC,MAAM,MACNC,OAAO,MACPC,oBAAoB,gBACpBC,QAAQ,iBAERhB,EAAA,IAAA,CAAGmB,UAAU,iCACXnB,EAAA,OAAA,CACEiB,KAAK,eACLC,EAAE,gJAMX5C,KAAKK,UACJqB,EAAA,MAAA,CAAKE,MAAM,2BACTF,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host(.footer-link-group-sparse) {\n --footer-link-group-margin-right: 95px;\n --footer-link-group-border-bottom: 0 solid transparent;\n --footer-link-group-title-margin-top: 0;\n --footer-link-group-title-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-small) {\n --footer-link-group-margin-right: 0;\n --footer-link-group-title-margin-top: var(--ic-space-md);\n --footer-link-group-title-margin-bottom: var(--ic-space-md);\n --footer-link-group-links-padding-left: var(--ic-space-md);\n --footer-link-group-links-padding-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-group-light.footer-link-group-small) {\n --footer-link-group-border-bottom: var(--ic-keyline-lighten);\n}\n\n:host(.footer-link-group-dark.footer-link-group-small) {\n --footer-link-group-border-bottom: var(--ic-keyline-darken);\n}\n\n:host(.footer-link-group) {\n margin-right: var(--footer-link-group-margin-right);\n border-bottom: var(--footer-link-group-border-bottom);\n}\n\n:host(.footer-link-group-small.footer-link-group-light:hover) {\n background-color: var(--ic-action-light-bg-hover);\n cursor: pointer;\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:hover) {\n background-color: var(--ic-action-dark-bg-hover);\n cursor: pointer;\n}\n\n:host(.footer-link-group-sparse:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n outline: none;\n z-index: 1;\n}\n\n:host(.footer-link-group-small:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n outline: none;\n z-index: 1;\n}\n\n:host(.footer-link-group-small.footer-link-group-light:active) {\n background-color: var(--ic-action-light-bg-active);\n}\n\n:host(.footer-link-group-small.footer-link-group-dark:active) {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n.footer-link-group-title {\n margin-top: var(--footer-link-group-title-margin-top);\n margin-bottom: var(--footer-link-group-title-margin-bottom);\n flex-grow: 1;\n}\n\n.footer-link-group-toggle {\n fill: white !important;\n}\n\n.footer-link-group-links {\n display: flex;\n flex-direction: column;\n}\n\n.footer-link-group-header {\n display: flex;\n align-items: center;\n}\n","import {\n Component,\n Host,\n Element,\n Listen,\n Prop,\n h,\n State,\n} from \"@stencil/core\";\nimport {\n DEVICE_SIZES,\n getThemeForegroundColor,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTheme } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-footer-link-group\",\n styleUrl: \"ic-footer-link-group.css\",\n shadow: true,\n})\nexport class FooterLinkGroup {\n @Element() el: HTMLIcFooterLinkGroupElement;\n\n /**\n * Sets the title of the link group for display\n */\n @Prop() groupTitle!: string;\n\n @State() small: boolean = false;\n\n @State() expanded: boolean = false;\n\n @State() dropdownIconStyle = getThemeForegroundColor();\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n private isSmall(e: HTMLElement): boolean {\n if (e.parentElement !== null) {\n if (e.parentElement.classList.contains(\"footer\")) {\n return e.parentElement.classList.contains(\"footer-small\");\n } else {\n return this.isSmall(e.parentElement);\n }\n } else {\n return false;\n }\n }\n\n private handleKeydown = (event: KeyboardEvent): void => {\n if (event.key === \" \" || event.key === \"Enter\") {\n this.toggleExpanded();\n }\n };\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n @Listen(\"icFooterResized\", { target: \"document\" })\n footerResizeHandler(): void {\n this.small = this.isSmall(this.el);\n }\n\n @Listen(\"icThemeChange\", { target: \"document\" })\n footerThemeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.dropdownIconStyle = theme.mode;\n }\n\n componentWillLoad(): void {\n this.small = this.isSmall(this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.groupTitle, propName: \"group-title\" }],\n \"Footer Link Group\"\n );\n }\n\n render() {\n const { small, groupTitle } = this;\n\n return !small ? (\n <Host\n class={{\n [\"footer-link-group footer-link-group-sparse\"]: true,\n [`footer-link-group-${this.dropdownIconStyle}`]: true,\n }}\n >\n <div class=\"footer-link-group-title\">\n <ic-typography variant=\"subtitle-small\">{groupTitle}</ic-typography>\n </div>\n <div class=\"footer-link-group-links\">\n <slot />\n </div>\n </Host>\n ) : (\n <Host\n class={{\n [\"footer-link-group footer-link-group-small\"]: true,\n [`footer-link-group-${this.dropdownIconStyle}`]: true,\n }}\n tabIndex=\"1\"\n onClick={this.toggleExpanded}\n onKeydown={this.handleKeydown}\n aria-haspopup=\"true\"\n aria-expanded={this.expanded}\n >\n <ic-section-container fullHeight={true}>\n <div class=\"footer-link-group-header\">\n <div class=\"footer-link-group-title\">\n <ic-typography variant=\"label\">{groupTitle}</ic-typography>\n </div>\n {this.expanded ? (\n <svg\n class=\"footer-link-group-toggle\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"img\"\n width=\"1em\"\n height=\"1em\"\n preserveAspectRatio=\"xMidYMid meet\"\n viewBox=\"0 0 1200 1200\"\n >\n <path\n fill=\"currentColor\"\n d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n />\n </svg>\n ) : (\n <svg\n class=\"footer-link-group-toggle\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n role=\"img\"\n width=\"1em\"\n height=\"1em\"\n preserveAspectRatio=\"xMidYMid meet\"\n viewBox=\"0 0 1200 1200\"\n >\n <g transform=\"translate(0 1200) scale(1 -1)\">\n <path\n fill=\"currentColor\"\n d=\"M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z\"\n />\n </g>\n </svg>\n )}\n </div>\n {this.expanded && (\n <div class=\"footer-link-group-links\">\n <slot />\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"]}
|