@ukic/web-components 2.0.0 → 2.1.0-beta.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +173 -0
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/{helpers-60fda93f.js → helpers-d0eeccf0.js} +18 -1
- package/dist/cjs/helpers-d0eeccf0.js.map +1 -0
- package/dist/cjs/ic-alert.cjs.entry.js +2 -2
- package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-back-to-top.cjs.entry.js +1 -1
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +2 -2
- package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +2 -2
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card.cjs.entry.js +2 -2
- package/dist/cjs/ic-card.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +12 -2
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +2 -2
- package/dist/cjs/ic-data-row.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +1 -1
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-footer-link-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js +2 -2
- package/dist/cjs/ic-footer-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer.cjs.entry.js +1 -1
- package/dist/cjs/ic-hero.cjs.entry.js +2 -2
- package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +3 -3
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js +1 -1
- package/dist/cjs/ic-link.cjs.entry.js +2 -2
- package/dist/cjs/ic-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-button.cjs.entry.js +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +2 -2
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-menu.cjs.entry.js +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +2 -2
- package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js +16 -3
- package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +27 -13
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-select.cjs.entry.js +13 -2
- package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +2 -2
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-status-tag.cjs.entry.js +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +16 -6
- package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-context.cjs.entry.js +4 -3
- package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +4 -4
- package/dist/cjs/ic-tab-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js +8 -5
- package/dist/cjs/ic-tab-panel.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab.cjs.entry.js +4 -4
- package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-text-field.cjs.entry.js +9 -1
- package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-theme.cjs.entry.js +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +2 -2
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ic-alert/ic-alert.css +1 -6
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.css +1 -1
- package/dist/collection/components/ic-button/ic-button.css +1 -1
- package/dist/collection/components/ic-card/ic-card.css +2 -2
- package/dist/collection/components/ic-checkbox/ic-checkbox.css +7 -1
- package/dist/collection/components/ic-checkbox/ic-checkbox.js +17 -2
- package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
- package/dist/collection/components/ic-data-row/ic-data-row.css +8 -0
- package/dist/collection/components/ic-footer-link/ic-footer-link.css +12 -3
- package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.css +2 -2
- package/dist/collection/components/ic-hero/ic-hero.css +17 -5
- package/dist/collection/components/ic-input-component-container/ic-input-component-container.css +5 -0
- package/dist/collection/components/ic-link/ic-link.css +11 -2
- package/dist/collection/components/ic-link/ic-link.js +3 -0
- package/dist/collection/components/ic-link/ic-link.js.map +1 -1
- package/dist/collection/components/ic-menu/ic-menu.css +1 -1
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.css +6 -2
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.css +5 -5
- package/dist/collection/components/ic-page-header/ic-page-header.css +9 -0
- package/dist/collection/components/ic-radio-option/ic-radio-option.css +8 -2
- package/dist/collection/components/ic-radio-option/ic-radio-option.js +22 -4
- package/dist/collection/components/ic-radio-option/ic-radio-option.js.map +1 -1
- package/dist/collection/components/ic-search-bar/ic-search-bar.js +26 -12
- package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select.css +1 -1
- package/dist/collection/components/ic-select/ic-select.js +15 -3
- package/dist/collection/components/ic-select/ic-select.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.css +2 -2
- package/dist/collection/components/ic-switch/ic-switch.js +21 -10
- package/dist/collection/components/ic-switch/ic-switch.js.map +1 -1
- package/dist/collection/components/ic-tab/ic-tab.css +2 -2
- package/dist/collection/components/ic-tab/ic-tab.js +3 -3
- package/dist/collection/components/ic-tab/ic-tab.js.map +1 -1
- package/dist/collection/components/ic-tab-context/ic-tab-context.js +5 -4
- package/dist/collection/components/ic-tab-context/ic-tab-context.js.map +1 -1
- package/dist/collection/components/ic-tab-group/ic-tab-group.css +3 -3
- package/dist/collection/components/ic-tab-group/ic-tab-group.js +3 -3
- package/dist/collection/components/ic-tab-group/ic-tab-group.js.map +1 -1
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.css +4 -0
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.js +32 -2
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.js.map +1 -1
- package/dist/collection/components/ic-text-field/ic-text-field.js +11 -2
- package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
- package/dist/collection/components/ic-tooltip/ic-tooltip.js +1 -1
- package/dist/collection/components/ic-tooltip/ic-tooltip.js.map +1 -1
- package/dist/collection/components/ic-top-navigation/ic-top-navigation.css +1 -1
- package/dist/collection/utils/helpers.js +15 -0
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/components/helpers.js +16 -1
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/ic-alert.js +1 -1
- package/dist/components/ic-alert.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 +2 -2
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-card.js +1 -1
- package/dist/components/ic-card.js.map +1 -1
- package/dist/components/ic-checkbox-group.js +1 -1
- package/dist/components/ic-checkbox.js +15 -4
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/components/ic-data-row.js +1 -1
- package/dist/components/ic-data-row.js.map +1 -1
- package/dist/components/ic-divider2.js +1 -1
- package/dist/components/ic-footer-link-group.js +2 -2
- package/dist/components/ic-footer-link-group.js.map +1 -1
- package/dist/components/ic-footer-link.js +2 -2
- package/dist/components/ic-footer-link.js.map +1 -1
- package/dist/components/ic-footer.js +1 -1
- package/dist/components/ic-hero.js +2 -2
- package/dist/components/ic-hero.js.map +1 -1
- package/dist/components/ic-input-component-container2.js +1 -1
- package/dist/components/ic-input-component-container2.js.map +1 -1
- package/dist/components/ic-input-label2.js +1 -1
- package/dist/components/ic-input-validation2.js +1 -1
- package/dist/components/ic-link2.js +2 -2
- package/dist/components/ic-link2.js.map +1 -1
- package/dist/components/ic-menu2.js +1 -1
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-button.js +1 -1
- package/dist/components/ic-navigation-group.js +2 -2
- package/dist/components/ic-navigation-group.js.map +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 +1 -1
- package/dist/components/ic-page-header.js +1 -1
- package/dist/components/ic-page-header.js.map +1 -1
- package/dist/components/ic-radio-group.js +1 -1
- package/dist/components/ic-radio-option.js +20 -6
- package/dist/components/ic-radio-option.js.map +1 -1
- package/dist/components/ic-search-bar.js +27 -13
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-select.js +15 -3
- package/dist/components/ic-select.js.map +1 -1
- package/dist/components/ic-side-navigation.js +2 -2
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-switch.js +18 -7
- package/dist/components/ic-switch.js.map +1 -1
- package/dist/components/ic-tab-context.js +4 -3
- package/dist/components/ic-tab-context.js.map +1 -1
- package/dist/components/ic-tab-group.js +4 -4
- package/dist/components/ic-tab-group.js.map +1 -1
- package/dist/components/ic-tab-panel.js +9 -4
- package/dist/components/ic-tab-panel.js.map +1 -1
- package/dist/components/ic-tab.js +3 -3
- package/dist/components/ic-tab.js.map +1 -1
- package/dist/components/ic-text-field2.js +10 -1
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-theme.js +1 -1
- package/dist/components/ic-tooltip2.js +1 -1
- package/dist/components/ic-tooltip2.js.map +1 -1
- package/dist/components/ic-top-navigation.js +2 -2
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/core/core.css +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/p-037273aa.entry.js +2 -0
- package/dist/core/{p-27528d04.entry.js.map → p-037273aa.entry.js.map} +1 -1
- package/dist/core/{p-da6f09cd.entry.js → p-0d63bfe4.entry.js} +2 -2
- package/dist/core/{p-da6f09cd.entry.js.map → p-0d63bfe4.entry.js.map} +0 -0
- package/dist/core/{p-73d41c36.entry.js → p-12e113bf.entry.js} +2 -2
- package/dist/core/p-12e113bf.entry.js.map +1 -0
- package/dist/core/p-155114db.entry.js +2 -0
- package/dist/core/p-155114db.entry.js.map +1 -0
- package/dist/core/{p-438e327e.entry.js → p-17d0d631.entry.js} +2 -2
- package/dist/core/p-17d0d631.entry.js.map +1 -0
- package/dist/core/p-1b619302.entry.js +2 -0
- package/dist/core/p-1b619302.entry.js.map +1 -0
- package/dist/core/{p-be583c9b.entry.js → p-2177dae2.entry.js} +2 -2
- package/dist/core/p-2177dae2.entry.js.map +1 -0
- package/dist/core/p-378a7270.entry.js +2 -0
- package/dist/core/p-378a7270.entry.js.map +1 -0
- package/dist/core/{p-0522eb9a.entry.js → p-3c6defd7.entry.js} +2 -2
- package/dist/core/{p-0522eb9a.entry.js.map → p-3c6defd7.entry.js.map} +0 -0
- package/dist/core/p-40d3fd89.entry.js +2 -0
- package/dist/core/p-40d3fd89.entry.js.map +1 -0
- package/dist/core/{p-a301cf67.entry.js → p-48029498.entry.js} +2 -2
- package/dist/core/{p-a301cf67.entry.js.map → p-48029498.entry.js.map} +0 -0
- package/dist/core/{p-36b25af4.entry.js → p-50a0f1a0.entry.js} +2 -2
- package/dist/core/p-50a0f1a0.entry.js.map +1 -0
- package/dist/core/{p-d8b6271d.entry.js → p-54b77947.entry.js} +2 -2
- package/dist/core/{p-d8b6271d.entry.js.map → p-54b77947.entry.js.map} +0 -0
- package/dist/core/{p-f37a732a.entry.js → p-59041cfc.entry.js} +2 -2
- package/dist/core/{p-f37a732a.entry.js.map → p-59041cfc.entry.js.map} +0 -0
- package/dist/core/p-5977c1e0.entry.js +2 -0
- package/dist/core/p-5977c1e0.entry.js.map +1 -0
- package/dist/core/{p-6ac7757f.entry.js → p-6009c5bc.entry.js} +2 -2
- package/dist/core/{p-6ac7757f.entry.js.map → p-6009c5bc.entry.js.map} +0 -0
- package/dist/core/p-7577c6a3.entry.js +2 -0
- package/dist/core/p-7577c6a3.entry.js.map +1 -0
- package/dist/core/p-8054c2c0.entry.js +2 -0
- package/dist/core/p-8054c2c0.entry.js.map +1 -0
- package/dist/core/{p-c96985bc.entry.js → p-89d46b9b.entry.js} +2 -2
- package/dist/core/{p-c96985bc.entry.js.map → p-89d46b9b.entry.js.map} +0 -0
- package/dist/core/{p-14153fa0.entry.js → p-972f4e69.entry.js} +2 -2
- package/dist/core/{p-14153fa0.entry.js.map → p-972f4e69.entry.js.map} +0 -0
- package/dist/core/{p-530b7fe0.entry.js → p-9a3d6bca.entry.js} +2 -2
- package/dist/core/{p-530b7fe0.entry.js.map → p-9a3d6bca.entry.js.map} +0 -0
- package/dist/core/p-9db8edb7.entry.js +2 -0
- package/dist/core/{p-3013158d.entry.js.map → p-9db8edb7.entry.js.map} +1 -1
- package/dist/core/p-9e1f450f.entry.js +2 -0
- package/dist/core/p-9e1f450f.entry.js.map +1 -0
- package/dist/core/{p-994111b7.entry.js → p-a183353c.entry.js} +2 -2
- package/dist/core/{p-994111b7.entry.js.map → p-a183353c.entry.js.map} +0 -0
- package/dist/core/p-a6715f61.entry.js +2 -0
- package/dist/core/p-a6715f61.entry.js.map +1 -0
- package/dist/core/p-a9237c61.entry.js +2 -0
- package/dist/core/p-a9237c61.entry.js.map +1 -0
- package/dist/core/p-aad5da60.entry.js +2 -0
- package/dist/core/p-aad5da60.entry.js.map +1 -0
- package/dist/core/p-af6a41bd.entry.js +2 -0
- package/dist/core/p-af6a41bd.entry.js.map +1 -0
- package/dist/core/p-bf4ddf33.entry.js +2 -0
- package/dist/core/p-bf4ddf33.entry.js.map +1 -0
- package/dist/core/p-bfa9392f.entry.js +2 -0
- package/dist/core/p-bfa9392f.entry.js.map +1 -0
- package/dist/core/p-c023c49c.entry.js +2 -0
- package/dist/core/p-c023c49c.entry.js.map +1 -0
- package/dist/core/p-c96adfd7.entry.js +2 -0
- package/dist/core/p-c96adfd7.entry.js.map +1 -0
- package/dist/core/p-d38168f0.entry.js +2 -0
- package/dist/core/p-d38168f0.entry.js.map +1 -0
- package/dist/core/{p-aebc7562.entry.js → p-d61c2983.entry.js} +2 -2
- package/dist/core/{p-aebc7562.entry.js.map → p-d61c2983.entry.js.map} +0 -0
- package/dist/core/p-db6566c0.entry.js +2 -0
- package/dist/core/p-db6566c0.entry.js.map +1 -0
- package/dist/core/{p-400b34b9.entry.js → p-ee3a9fd0.entry.js} +2 -2
- package/dist/core/p-ee3a9fd0.entry.js.map +1 -0
- package/dist/core/p-ef59f111.entry.js +2 -0
- package/dist/core/p-ef59f111.entry.js.map +1 -0
- package/dist/core/{p-c15bb762.js → p-f228c232.js} +2 -2
- package/dist/core/p-f228c232.js.map +1 -0
- package/dist/core/p-fce4b26b.entry.js +2 -0
- package/dist/core/p-fce4b26b.entry.js.map +1 -0
- package/dist/esm/core.js +1 -1
- package/dist/esm/{helpers-8b43d0d4.js → helpers-e090fe7e.js} +17 -2
- package/dist/esm/helpers-e090fe7e.js.map +1 -0
- package/dist/esm/ic-alert.entry.js +2 -2
- package/dist/esm/ic-alert.entry.js.map +1 -1
- package/dist/esm/ic-back-to-top.entry.js +1 -1
- package/dist/esm/ic-breadcrumb-group.entry.js +1 -1
- package/dist/esm/ic-breadcrumb.entry.js +2 -2
- package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ic-button_3.entry.js +2 -2
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card.entry.js +2 -2
- package/dist/esm/ic-card.entry.js.map +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +1 -1
- package/dist/esm/ic-checkbox.entry.js +12 -2
- package/dist/esm/ic-checkbox.entry.js.map +1 -1
- package/dist/esm/ic-data-row.entry.js +2 -2
- package/dist/esm/ic-data-row.entry.js.map +1 -1
- package/dist/esm/ic-divider.entry.js +1 -1
- package/dist/esm/ic-footer-link-group.entry.js +2 -2
- package/dist/esm/ic-footer-link-group.entry.js.map +1 -1
- package/dist/esm/ic-footer-link.entry.js +2 -2
- package/dist/esm/ic-footer-link.entry.js.map +1 -1
- package/dist/esm/ic-footer.entry.js +1 -1
- package/dist/esm/ic-hero.entry.js +2 -2
- package/dist/esm/ic-hero.entry.js.map +1 -1
- package/dist/esm/ic-input-component-container_3.entry.js +3 -3
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-input-label_2.entry.js +1 -1
- package/dist/esm/ic-link.entry.js +2 -2
- package/dist/esm/ic-link.entry.js.map +1 -1
- package/dist/esm/ic-navigation-button.entry.js +1 -1
- package/dist/esm/ic-navigation-group.entry.js +2 -2
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +2 -2
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-menu.entry.js +1 -1
- package/dist/esm/ic-page-header.entry.js +2 -2
- package/dist/esm/ic-page-header.entry.js.map +1 -1
- package/dist/esm/ic-radio-group.entry.js +1 -1
- package/dist/esm/ic-radio-option.entry.js +16 -3
- package/dist/esm/ic-radio-option.entry.js.map +1 -1
- package/dist/esm/ic-search-bar.entry.js +27 -13
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-select.entry.js +13 -2
- package/dist/esm/ic-select.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +2 -2
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-status-tag.entry.js +1 -1
- package/dist/esm/ic-step.entry.js +1 -1
- package/dist/esm/ic-stepper.entry.js +1 -1
- package/dist/esm/ic-switch.entry.js +16 -6
- package/dist/esm/ic-switch.entry.js.map +1 -1
- package/dist/esm/ic-tab-context.entry.js +4 -3
- package/dist/esm/ic-tab-context.entry.js.map +1 -1
- package/dist/esm/ic-tab-group.entry.js +4 -4
- package/dist/esm/ic-tab-group.entry.js.map +1 -1
- package/dist/esm/ic-tab-panel.entry.js +8 -5
- package/dist/esm/ic-tab-panel.entry.js.map +1 -1
- package/dist/esm/ic-tab.entry.js +4 -4
- package/dist/esm/ic-tab.entry.js.map +1 -1
- package/dist/esm/ic-text-field.entry.js +9 -1
- package/dist/esm/ic-text-field.entry.js.map +1 -1
- package/dist/esm/ic-theme.entry.js +1 -1
- package/dist/esm/ic-top-navigation.entry.js +2 -2
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +4 -0
- package/dist/types/components/ic-link/ic-link.d.ts +3 -0
- package/dist/types/components/ic-radio-option/ic-radio-option.d.ts +4 -0
- package/dist/types/components/ic-search-bar/ic-search-bar.d.ts +2 -0
- package/dist/types/components/ic-select/ic-select.d.ts +3 -0
- package/dist/types/components/ic-switch/ic-switch.d.ts +6 -2
- package/dist/types/components/ic-tab-panel/ic-tab-panel.d.ts +3 -0
- package/dist/types/components/ic-text-field/ic-text-field.d.ts +3 -0
- package/dist/types/components.d.ts +5 -4
- package/dist/types/utils/helpers.d.ts +3 -0
- package/hydrate/index.js +153 -59
- package/package.json +4 -4
- package/dist/cjs/helpers-60fda93f.js.map +0 -1
- package/dist/core/p-1bec5ccb.entry.js +0 -2
- package/dist/core/p-1bec5ccb.entry.js.map +0 -1
- package/dist/core/p-21025b10.entry.js +0 -2
- package/dist/core/p-21025b10.entry.js.map +0 -1
- package/dist/core/p-27528d04.entry.js +0 -2
- package/dist/core/p-3013158d.entry.js +0 -2
- package/dist/core/p-36b25af4.entry.js.map +0 -1
- package/dist/core/p-3d6902a3.entry.js +0 -2
- package/dist/core/p-3d6902a3.entry.js.map +0 -1
- package/dist/core/p-400b34b9.entry.js.map +0 -1
- package/dist/core/p-438e327e.entry.js.map +0 -1
- package/dist/core/p-4aa8c1e1.entry.js +0 -2
- package/dist/core/p-4aa8c1e1.entry.js.map +0 -1
- package/dist/core/p-4af4a9e7.entry.js +0 -2
- package/dist/core/p-4af4a9e7.entry.js.map +0 -1
- package/dist/core/p-4c1e1d04.entry.js +0 -2
- package/dist/core/p-4c1e1d04.entry.js.map +0 -1
- package/dist/core/p-4e498c03.entry.js +0 -2
- package/dist/core/p-4e498c03.entry.js.map +0 -1
- package/dist/core/p-59a917d4.entry.js +0 -2
- package/dist/core/p-59a917d4.entry.js.map +0 -1
- package/dist/core/p-605e4270.entry.js +0 -2
- package/dist/core/p-605e4270.entry.js.map +0 -1
- package/dist/core/p-682686a6.entry.js +0 -2
- package/dist/core/p-682686a6.entry.js.map +0 -1
- package/dist/core/p-71282f37.entry.js +0 -2
- package/dist/core/p-71282f37.entry.js.map +0 -1
- package/dist/core/p-73d41c36.entry.js.map +0 -1
- package/dist/core/p-8bcadf55.entry.js +0 -2
- package/dist/core/p-8bcadf55.entry.js.map +0 -1
- package/dist/core/p-98e9eccc.entry.js +0 -2
- package/dist/core/p-98e9eccc.entry.js.map +0 -1
- package/dist/core/p-9bf3f413.entry.js +0 -2
- package/dist/core/p-9bf3f413.entry.js.map +0 -1
- package/dist/core/p-be583c9b.entry.js.map +0 -1
- package/dist/core/p-c15bb762.js.map +0 -1
- package/dist/core/p-c817e46b.entry.js +0 -2
- package/dist/core/p-c817e46b.entry.js.map +0 -1
- package/dist/core/p-c8772106.entry.js +0 -2
- package/dist/core/p-c8772106.entry.js.map +0 -1
- package/dist/core/p-d4c6f4fb.entry.js +0 -2
- package/dist/core/p-d4c6f4fb.entry.js.map +0 -1
- package/dist/core/p-d78bded9.entry.js +0 -2
- package/dist/core/p-d78bded9.entry.js.map +0 -1
- package/dist/core/p-d8973266.entry.js +0 -2
- package/dist/core/p-d8973266.entry.js.map +0 -1
- package/dist/core/p-fca84a85.entry.js +0 -2
- package/dist/core/p-fca84a85.entry.js.map +0 -1
- package/dist/esm/helpers-8b43d0d4.js.map +0 -1
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@ukic/web-components",
|
3
|
-
"version": "2.0.0",
|
3
|
+
"version": "2.1.0-beta.0",
|
4
4
|
"description": "A web component UI library compiled with StencilJS",
|
5
5
|
"main": "dist/index.cjs.js",
|
6
6
|
"module": "./dist/index.js",
|
@@ -9,7 +9,7 @@
|
|
9
9
|
"types": "dist/types/interface.d.ts",
|
10
10
|
"collection": "dist/collection/collection-manifest.json",
|
11
11
|
"collection:main": "dist/collection/index.js",
|
12
|
-
"unpkg": "dist/
|
12
|
+
"unpkg": "dist/core/core.esm.js",
|
13
13
|
"files": [
|
14
14
|
"dist/",
|
15
15
|
"loader/",
|
@@ -40,7 +40,7 @@
|
|
40
40
|
"dependencies": {
|
41
41
|
"@popperjs/core": "^2.11.2",
|
42
42
|
"@stencil/core": "^2.16.1",
|
43
|
-
"@ukic/fonts": "^2.0.0"
|
43
|
+
"@ukic/fonts": "^2.1.0-beta.0"
|
44
44
|
},
|
45
45
|
"devDependencies": {
|
46
46
|
"@babel/core": "^7.16.0",
|
@@ -71,5 +71,5 @@
|
|
71
71
|
"ts-jest": "^26.5.6"
|
72
72
|
},
|
73
73
|
"license": "MIT",
|
74
|
-
"gitHead": "
|
74
|
+
"gitHead": "49287b9feaeb8200c08c2e21243bc4b8e537f969"
|
75
75
|
}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"helpers-60fda93f.js","mappings":"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","names":["IcThemeForegroundEnum"],"sources":["./src/utils/constants.ts","./src/utils/helpers.ts"],"sourcesContent":["// Global ARIA attributes\nexport const IC_INHERITED_ARIA = [\n \"aria-atomic\",\n \"aria-busy\",\n \"aria-controls\",\n \"aria-current\",\n \"aria-describedby\",\n \"aria-description\",\n \"aria-details\",\n \"aria-disabled\",\n \"aria-dropeffect\",\n \"aria-errormessage\",\n \"aria-flowto\",\n \"aria-grabbed\",\n \"aria-haspopup\",\n \"aria-hidden\",\n \"aria-invalid\",\n \"aria-keyshortcuts\",\n \"aria-label\",\n \"aria-labelledby\",\n \"aria-live\",\n \"aria-owns\",\n \"aria-relevant\",\n \"aria-roledescription\",\n];\n\nexport const IC_DEVICE_SIZES = {\n XS: 576,\n S: 768,\n M: 992,\n L: 1200,\n XL: 99999,\n};\n\nexport const IC_BLOCK_COLOR_COMPONENTS = [\n \"ic-hero\",\n \"ic-top-navigation\",\n \"ic-footer\",\n \"ic-side-navigation\",\n \"ic-alert\",\n];\n\nexport const IC_FIXED_COLOR_COMPONENTS = [\"ic-alert\"];\n\nexport interface IcColorExceptions {\n [details: string]: string[];\n}\n\nexport const IC_BLOCK_COLOR_EXCEPTIONS: IcColorExceptions = {\n \"ic-alert\": [\"ic-link\"],\n};\n","import { EventEmitter } from \"@stencil/core\";\nimport {\n IcCallbackFunctionNoReturn,\n IcInformationStatusOrEmpty,\n IcNavParentDetails,\n IcPropObject,\n IcColorRGB,\n IcSearchMatchPositions,\n} from \"./types\";\n\nimport {\n IcMenuOption,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../utils/types\";\nimport {\n IC_BLOCK_COLOR_COMPONENTS,\n IC_BLOCK_COLOR_EXCEPTIONS,\n IC_FIXED_COLOR_COMPONENTS,\n} from \"./constants\";\n\nconst DARK_MODE_THRESHOLD = 128;\n\n/**\n * Used to inherit global attributes set on the host. Called in componentWillLoad and assigned\n * to a variable that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (\n element: HTMLElement,\n attributes: string[] = []\n): { [key: string]: unknown } => {\n const attributeObject: { [key: string]: unknown } = {};\n\n attributes.forEach((attr) => {\n if (element.hasAttribute(attr)) {\n const value = element.getAttribute(attr);\n if (value !== null) {\n attributeObject[attr] = element.getAttribute(attr);\n }\n element.removeAttribute(attr);\n }\n });\n\n return attributeObject;\n};\n\nexport const debounceEvent = (\n event: EventEmitter,\n wait: number\n): EventEmitter => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const original = (event as any)._original || event;\n return {\n _original: event,\n emit: debounce(original.emit.bind(original), wait),\n } as EventEmitter;\n};\n\nexport const debounce = (\n func: (...args: unknown[]) => void,\n wait = 0\n): unknown => {\n let timer: ReturnType<typeof setTimeout>;\n return (...args: unknown[]) => {\n clearTimeout(timer);\n timer = setTimeout(func, wait, ...args);\n };\n};\n\n/**\n * This method is used to add a hidden input to a host element that contains\n * a Shadow DOM. It does not add the input inside of the Shadow root which\n * allows it to be picked up inside of forms. It should contain the same\n * values as the host element.\n *\n * @param always Add a hidden input even if the container does not use Shadow\n * @param container The element where the input will be added\n * @param name The name of the input\n * @param value The value of the input\n * @param disabled If true, the input is disabled\n */\nexport const renderHiddenInput = (\n always: boolean,\n container: HTMLElement,\n name: string,\n value: string | undefined | null,\n disabled: boolean\n): void => {\n if (always || hasShadowDom(container)) {\n let input = container.querySelector(\n \"input.ic-input\"\n ) as HTMLInputElement | null;\n if (input === null) {\n input = container.ownerDocument.createElement(\"input\");\n input.type = \"hidden\";\n input.classList.add(\"ic-input\");\n container.appendChild(input);\n }\n input.disabled = disabled;\n input.name = name;\n input.value = value || \"\";\n }\n};\n\nexport const removeHiddenInput = (container: HTMLElement): void => {\n const input = container.querySelector(\n \"input.ic-input\"\n ) as HTMLInputElement | null;\n input?.remove();\n};\n\nexport const hasShadowDom = (el: HTMLElement): boolean => {\n return !!el.shadowRoot && !!el.attachShadow;\n};\n\nexport const getInputHelperTextID = (id: string): string => {\n return id + \"-helper-text\";\n};\n\nexport const getInputValidationTextID = (id: string): string => {\n return id + \"-validation-text\";\n};\n\nexport const getInputDescribedByText = (\n inputId: string,\n helperText: boolean,\n validationText: boolean\n): string => {\n return `${helperText ? getInputHelperTextID(inputId) : \"\"} ${\n validationText ? getInputValidationTextID(inputId) : \"\"\n }`.trim();\n};\n\n/**\n * This method helps to understand the context in which a component exists,\n * to assist with choosing appropriate foreground colours to use. For example,\n * this method will help you use the 'white' version of a button if it's within\n * a block colour element using white foreground text.\n *\n * This only works for components/elements passed via <slot> and not if they\n * are part of an IC component.\n *\n * \"\"\n * @returns IcThemeForeground depending on the context\n */\nexport const getThemeFromContext = (\n el: Element,\n themeFromEvent: IcThemeForeground = null\n): IcThemeForeground => {\n const blockColorParent = el.parentElement.closest(\n IC_BLOCK_COLOR_COMPONENTS.join(\",\")\n );\n\n // If within a block color component\n if (blockColorParent !== null) {\n const parentTag = blockColorParent.tagName.toLowerCase();\n const currentTag = el.tagName.toLowerCase();\n\n if (IC_BLOCK_COLOR_EXCEPTIONS[parentTag]?.includes(currentTag)) {\n return IcThemeForegroundEnum.Default;\n } else if (\n themeFromEvent !== null &&\n !IC_FIXED_COLOR_COMPONENTS.includes(parentTag)\n ) {\n return themeFromEvent;\n } else if (\n blockColorParent.classList.contains(IcThemeForegroundEnum.Dark)\n ) {\n return IcThemeForegroundEnum.Dark;\n }\n\n return IcThemeForegroundEnum.Light;\n }\n\n return IcThemeForegroundEnum.Default;\n};\n\nexport const isMobileOrTablet = (): boolean => {\n let isMobileOrTablet = false;\n if (\"maxTouchPoints\" in navigator) {\n isMobileOrTablet = navigator.maxTouchPoints > 0;\n }\n return isMobileOrTablet;\n};\n\n/**\n * Will create a button within the lightDOM which interacts with the parent form.\n * This is required as buttons within the shadowDOM will not invoke a submit or reset\n *\n * @param form - parent form element which contains shadowDom button\n * @param button - shadowDOM button\n */\nexport const handleHiddenFormButtonClick = (\n form: HTMLFormElement,\n button: HTMLIcButtonElement | HTMLButtonElement\n): void => {\n const hiddenFormButton = document.createElement(\"button\");\n\n hiddenFormButton.setAttribute(\"type\", button.type);\n hiddenFormButton.style.display = \"none\";\n\n form.appendChild(hiddenFormButton);\n\n hiddenFormButton.click();\n hiddenFormButton.remove();\n};\n\nexport const isEmptyString = (value: string): boolean =>\n value.trim().length === 0;\n\n/**\n * Extracts the label using the value from an object. Requires the object to have a label and value property.\n * @param value - value from object\n * @param options - list of menu items\n * @returns - label corresponding to value\n */\nexport const getLabelFromValue = (\n value: string,\n options: IcMenuOption[]\n): string | undefined => {\n const ungroupedOptions: IcMenuOption[] = [];\n if (options.length > 0) {\n options.map((option) => {\n if (option.children) {\n option.children.map((option: IcMenuOption) =>\n ungroupedOptions.push(option)\n );\n } else {\n ungroupedOptions.push(option);\n }\n });\n return ungroupedOptions.find((option) => option.value === value)?.label;\n }\n\n return undefined;\n};\n\n/**\n * Filters the options based on the search string.\n * @param options - array of options\n * @param includeDescriptions - determines whether option descriptions are included when filtering options\n * @param searchString - string used to filter the options\n * @param position - whether the search string matches the start of or anywhere in the options\n * @returns filtered array of options\n */\nexport const getFilteredMenuOptions = (\n options: IcMenuOption[],\n includeDescriptions: boolean,\n searchString: string,\n position: IcSearchMatchPositions\n): IcMenuOption[] => {\n let rawFilteredOptions;\n\n if (position === \"anywhere\") {\n rawFilteredOptions = options.filter((option) => {\n if (includeDescriptions) {\n return (\n option.label.toLowerCase().includes(searchString.toLowerCase()) ||\n option.description?.toLowerCase().includes(searchString.toLowerCase())\n );\n } else {\n return option.label.toLowerCase().includes(searchString.toLowerCase());\n }\n });\n } else {\n rawFilteredOptions = options.filter((option) => {\n if (includeDescriptions) {\n return (\n option.label.toLowerCase().startsWith(searchString.toLowerCase()) ||\n option.description\n ?.toLowerCase()\n .startsWith(searchString.toLowerCase())\n );\n } else {\n return option.label\n .toLowerCase()\n .startsWith(searchString.toLowerCase());\n }\n });\n }\n\n return rawFilteredOptions;\n};\n\nexport const deviceSizeMatches = (size: number): boolean =>\n window.matchMedia(`(max-width: ${size}px)`).matches;\n\nexport const getCurrentDeviceSize = (): number => {\n if (deviceSizeMatches(DEVICE_SIZES.S)) {\n return DEVICE_SIZES.S;\n }\n if (deviceSizeMatches(DEVICE_SIZES.M)) {\n return DEVICE_SIZES.M;\n }\n if (deviceSizeMatches(DEVICE_SIZES.L)) {\n return DEVICE_SIZES.L;\n }\n if (deviceSizeMatches(DEVICE_SIZES.XL)) {\n return DEVICE_SIZES.XL;\n }\n //fallback needed as all of above get initialised to 0 in jest tests\n return DEVICE_SIZES.UNDEFINED;\n};\n\nexport const getCssProperty = (cssVar: string): string => {\n return getComputedStyle(document.documentElement).getPropertyValue(cssVar);\n};\n\nexport const getThemeForegroundColor = (): IcThemeForeground => {\n /*\n Returns if dark or light font colors should be used for color contrast reasons, calculated by using the theme RGB CSS values by:\n - Multiplying each RGB value by a set number: https://www.w3.org/TR/AERT/#color-contrast\n - Adding them together and dividing by 1000\n - If the result is greater than 128 return \"dark\" color, else return \"light\" color\n This is a similar calculation to it's CSS counterpart: \"--ic-theme-text\"\n */\n const themeRed = getCssProperty(\"--ic-theme-primary-r\");\n const themeGreen = getCssProperty(\"--ic-theme-primary-g\");\n const themeBlue = getCssProperty(\"--ic-theme-primary-b\");\n const fontColor = Math.round(\n (parseInt(themeRed) * 299 +\n parseInt(themeGreen) * 587 +\n parseInt(themeBlue) * 114) /\n 1000\n );\n\n return fontColor > DARK_MODE_THRESHOLD\n ? IcThemeForegroundEnum.Dark\n : IcThemeForegroundEnum.Light;\n};\n\nexport const getSlot = (element: HTMLElement, name: string): Element | null => {\n if (element && element.querySelector) {\n return element.querySelector(`[slot=\"${name}\"]`);\n }\n return null;\n};\n\nexport const slotHasContent = (element: HTMLElement, name: string): boolean =>\n getSlot(element, name) !== null;\n\nexport const getSlotContent = (\n element: HTMLElement,\n name: string\n): Element[] | NodeListOf<ChildNode> | null => {\n const slot = getSlot(element, name);\n if (slot) {\n return getSlotElements(slot);\n }\n\n return null;\n};\n\nconst getSlotElements = (slot: Element) => {\n const slotContent = slot.firstElementChild as HTMLSlotElement;\n\n if (slotContent !== null) {\n const elements = slotContent.assignedElements\n ? slotContent.assignedElements()\n : slotContent.childNodes;\n return elements.length ? elements : null;\n } else {\n //check for single element\n return slot === null ? null : [slot];\n }\n};\n\nexport const getNavItemParentDetails = (\n el: HTMLElement\n): IcNavParentDetails => {\n let navType: IcNavParentDetails = { navType: \"\", parent: null };\n switch (getParentElementType(el)) {\n case \"IC-NAVIGATION-GROUP\":\n navType = getNavItemParentDetails(el.parentElement);\n break;\n case \"IC-TOP-NAVIGATION\":\n navType = { navType: \"top\", parent: getParentElement(el) };\n break;\n case \"IC-SIDE-NAVIGATION\":\n navType = { navType: \"side\", parent: getParentElement(el) };\n break;\n case \"IC-PAGE-HEADER\":\n navType = { navType: \"page-header\", parent: null };\n break;\n }\n return navType;\n};\n\nexport const DEVICE_SIZES = {\n XS: Number(getCssProperty(\"--ic-breakpoint-xs\").replace(\"px\", \"\")), // 0\n S: Number(getCssProperty(\"--ic-breakpoint-sm\").replace(\"px\", \"\")), // 576\n M: Number(getCssProperty(\"--ic-breakpoint-md\").replace(\"px\", \"\")), // 768\n L: Number(getCssProperty(\"--ic-breakpoint-lg\").replace(\"px\", \"\")), // 992\n XL: Number(getCssProperty(\"--ic-breakpoint-xl\").replace(\"px\", \"\")), // 1200\n UNDEFINED: 1200,\n};\n\nexport const hasValidationStatus = (\n status: IcInformationStatusOrEmpty,\n disabled: boolean\n): boolean => {\n return status !== \"\" && !disabled;\n};\n\nexport const isSlotUsed = (element: HTMLElement, slotName: string): boolean => {\n return !!element.querySelector(`[slot=\"${slotName}\"]`);\n};\n\n// added as a common method to allow detection of gatsby hydration issue, where (camelCase) props are initially undefined & then update\n// with a value. Allows a callback function to be executed when this is the case\nexport const onComponentPropUndefinedChange = (\n oldValue: string | undefined,\n newValue: string | undefined,\n callback: IcCallbackFunctionNoReturn\n): void => {\n if (oldValue === undefined && newValue !== oldValue) {\n callback();\n }\n};\n\nexport const onComponentRequiredPropUndefined = (\n props: IcPropObject[],\n component: string\n): void => {\n for (let i = 0; i < props.length; i++) {\n const { prop, propName } = props[i];\n if (prop === null || prop === undefined) {\n console.error(\n `No ${propName} specified for ${component} component - prop '${propName}' (web components) / '${kebabToCamelCase(\n propName\n )}' (react) required`\n );\n }\n }\n};\n\nexport const kebabToCamelCase = (kebabCase: string): string => {\n kebabCase = kebabCase.toLowerCase();\n const individualWords: string[] = kebabCase.split(\"-\");\n let camelCase = individualWords[0];\n for (let i = 1; i < individualWords.length; i++) {\n camelCase +=\n individualWords[i].substring(0, 1).toUpperCase() +\n individualWords[i].substring(1);\n }\n return camelCase;\n};\n\nexport const checkResizeObserver = (\n callbackFn: IcCallbackFunctionNoReturn\n): void => {\n if (\n typeof window !== \"undefined\" &&\n typeof window.ResizeObserver !== \"undefined\"\n ) {\n callbackFn();\n }\n};\n\nconst hex2dec = function (v: string) {\n return parseInt(v, 16);\n};\n\nexport const hexToRgb = (hex: string): IcColorRGB => {\n let c;\n if (hex.length === 4) {\n c = hex.replace(\"#\", \"\").split(\"\");\n return {\n r: hex2dec(c[0] + c[0]),\n g: hex2dec(c[1] + c[1]),\n b: hex2dec(c[2] + c[2]),\n };\n } else {\n return {\n r: hex2dec(hex.slice(1, 3)),\n g: hex2dec(hex.slice(3, 5)),\n b: hex2dec(hex.slice(5)),\n };\n }\n};\n\nexport const rgbStrToObj = (rgbStr: string): IcColorRGB => {\n const colorRGB: IcColorRGB = { r: null, g: null, b: null };\n const rgb = rgbStr\n .substring(4, rgbStr.length - 1)\n .replace(/ /g, \"\")\n .split(\",\");\n colorRGB.r = Number(rgb[0]);\n colorRGB.g = Number(rgb[1]);\n colorRGB.b = Number(rgb[2]);\n\n return colorRGB;\n};\n\nexport const elementOverflowsX = (element: HTMLElement): boolean => {\n return element.scrollWidth > element.clientWidth;\n};\n/**\n *\n * @param child - The child element\n * @returns string\n */\nexport const getParentElementType = (child: HTMLElement): string =>\n child.parentElement.tagName;\n\nexport const getParentElement = (child: HTMLElement): HTMLElement =>\n child.parentElement;\n\nexport const hasClassificationBanner = (): boolean => {\n if (document.querySelector(\"ic-classification-banner:not([inline='true'])\")) {\n return true;\n } else {\n return false;\n }\n};\n"],"version":3}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as e,h as i,H as a,g as n}from"./p-f9370be6.js";import{I as s}from"./p-6f57b13c.js";import{A as o,D as r,g as l,e as c,o as h,i as d,c as p,a as m}from"./p-c15bb762.js";const g='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;color:var(--ic-theme-text);width:100%;position:relative}:host .top-navigation{background-color:var(--ic-theme-primary);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name="search"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);margin-left:calc(-1 * var(--ic-space-xxs));transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active{color:var(--ic-theme-text)}:host .title-link:hover:not(:focus){background-color:var(--ic-theme-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-theme-active)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:none}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-keyline-lighten);padding-left:var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-keyline-darken)}.top-panel-container{display:flex;padding-top:8px;padding-bottom:8px}.navigation-tabs{margin-top:-1px}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.app-title{padding-right:var(--ic-space-lg)}:host .app-status{border-radius:80px;background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md)}:host(.dark) .app-status{background-color:var(--ic-theme-text);color:var(--ic-color-white-text)}:host .app-version{border-radius:16px;background-color:var(--ic-theme-active);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs)}.app-status-text,.app-version-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}slot[name="app-icon"]::slotted(svg){fill:var(--ic-theme-text);width:2em;height:2em}slot[name="toggle-icon"] svg{fill:var(--ic-theme-text)}.search-menu-container{justify-content:right;display:flex;align-items:center;flex:1 auto}.menu-button-container{margin-left:var(--ic-space-md)}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:44px}:host([content-aligned="left"]) .app-details-container{flex-basis:1}:host([content-aligned="left"]) .app-details-container,:host([content-aligned="left"]) .nav-panel-container,:host([content-aligned="center"]) .nav-panel-container,:host([content-aligned="left"]) .search-menu-container,:host([content-aligned="center"]) .search-menu-container{justify-content:flex-start}:host([content-aligned="center"]) .app-details-container{justify-content:flex-end}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}:host([content-aligned="center"]) .top-navigation{display:flex;justify-content:center}:host([content-aligned="left"]) .top-navigation{display:flex}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding-left:var(--ic-space-md)}@media screen and (max-width: 992px){:host .nav-panel-container,:host .app-status,:host .app-version{display:none}:host .title-link{margin-right:var(--ic-space-xs)}.search-menu-container{max-width:160px}.search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-keyline-darken);height:64px;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}:host([content-aligned="left"]) .app-details-container,:host([content-aligned="left"]) .search-menu-container,:host([content-aligned="center"]) .search-menu-container,:host([content-aligned="center"]) .app-details-container{justify-content:flex-start}}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.top-panel-container{min-height:40px}.searchbox-inline{display:none}.search-bar-container{margin-top:0;height:56px;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name="app-icon"]::slotted(svg){width:1.5em;height:1.5em}slot[name="toggle-icon"] svg{width:1.5em;height:1.5em}:host([content-aligned="left"]) .app-details-container,:host([content-aligned="left"]) .search-menu-container,:host([content-aligned="center"]) .app-details-container,:host([content-aligned="center"]) .search-menu-container{justify-content:flex-start}}}';const u=class{constructor(i){t(this,i);this.icNavigationMenuOpened=e(this,"icNavigationMenuOpened",7);this.icNavigationMenuClosed=e(this,"icNavigationMenuClosed",7);this.hasAppIcon=false;this.hasNavigation=false;this.hasIconButtons=false;this.hasSearchSlotContent=false;this.searchBar=null;this.initialiseSearchBar=()=>{if(this.hasSearchSlotContent){const t=o(this.el,"search");if(t&&t.tagName==="IC-SEARCH-BAR"){this.searchBar=t}else if(t&&t.tagName==="FORM"){this.searchBar=t.querySelector("ic-search-bar")}if(this.searchBar!==null){this.searchBar.hideLabel=true}}};this.emitTopNavResized=t=>{const e=new CustomEvent("topNavResized",{detail:{size:t}});this.el.dispatchEvent(e)};this.menuButtonClick=()=>{this.showNavMenu(true)};this.searchButtonMouseDownHandler=()=>{this.searchButtonClick=true};this.searchButtonClickHandler=()=>{this.toggleSearchBar();this.searchButtonClick=false};this.resizeObserver=null;this.resizeObserverCallback=t=>{if(t!==this.deviceSize){this.deviceSize=t;if(t>r.L){this.showNavMenu(false);if(this.mobileSearchBarVisible){this.toggleSearchBar()}}this.emitTopNavResized(t);if(document.activeElement!==null&&document.activeElement!==undefined&&document.activeElement.tagName==="IC-SEARCH-BAR"){this.searchBar.setAttribute("hidden","true");this.searchBar.removeAttribute("hidden");setTimeout((()=>{this.searchBar.setFocus()}),100)}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const t=l();this.resizeObserverCallback(t)}));this.resizeObserver.observe(this.el)};this.appTitle=undefined;this.href="/";this.version="";this.status="";this.contentAligned="full-width";this.inline=false;this.menuOpen=false;this.deviceSize=r.XL;this.mobileSearchBarVisible=false;this.navMenuVisible=false;this.searchValue="";this.mobileSearchHiddenOnBlur=false;this.searchButtonClick=false;this.foregroundColor=c();this.hasFullWidthSearchBar=false}watchPropHandler(t,e){h(e,t,this.initialiseSearchBar)}navBarMenuCloseHandler(){this.showNavMenu(false);const t=this.el.shadowRoot.querySelector("#menu-button");t.setFocus()}searchInputBlurHandler(t){if(t.detail!==null){if(this.mobileSearchBarVisible&&!this.searchButtonClick){this.toggleSearchBar()}this.searchValue=t.detail.value}}searchValueChangeHandler(t){this.searchValue=t.detail.value}themeChangeHandler(t){const e=t.detail;this.foregroundColor=e.mode}toggleSearchBar(){this.mobileSearchBarVisible=!this.mobileSearchBarVisible;if(this.searchBar!==null){if(this.mobileSearchBarVisible){this.mobileSearchButtonEl.updateAriaLabel("Hide search");this.hasFullWidthSearchBar=true;this.searchBar.fullWidth=true;setTimeout((()=>{this.searchBar.setFocus()}),100)}else{this.mobileSearchButtonEl.updateAriaLabel("Show search");this.hasFullWidthSearchBar=false;this.searchBar.fullWidth=false}}}showNavMenu(t){this.navMenuVisible=t;if(t){this.icNavigationMenuOpened.emit()}else{this.icNavigationMenuClosed.emit()}}componentWillLoad(){this.hasAppIcon=d(this.el,"app-icon");this.hasNavigation=d(this.el,"navigation");this.hasIconButtons=d(this.el,"buttons");this.hasSearchSlotContent=d(this.el,"search");this.deviceSize=l();this.initialiseSearchBar()}componentWillRender(){this.hasNavigation=d(this.el,"navigation");this.hasSearchSlotContent=d(this.el,"search");this.hasIconButtons=d(this.el,"buttons");this.hasAppIcon=d(this.el,"app-icon")}componentDidLoad(){p(this.runResizeObserver);m([{prop:this.appTitle,propName:"app-title"}],"Top Navigation")}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){const t=this.hasNavigation||this.hasIconButtons||this.status!==""||this.version!=="";const e=this.deviceSize<=r.S?"default":"large";let n="h3";const o=this.appTitle!==""&&this.appTitle!==undefined;if(this.deviceSize<=r.L){n="h4";if(this.deviceSize<=r.S){n="subtitle-small"}}const l=this.mobileSearchBarVisible?"Hide search":"Show search";const c=this.deviceSize<=r.S?"small":"default";return i(a,{class:{["fullwidth-searchbar"]:this.hasFullWidthSearchBar,[s.Dark]:this.foregroundColor===s.Dark}},i("div",{class:"top-navigation"},i("ic-section-container",{aligned:"full-width","full-height":true},i("header",{role:"banner"},i("div",{class:"top-panel-container"},i("div",{class:"app-details-container"},o&&i("a",{class:"title-link",href:this.href},this.hasAppIcon&&i("div",{class:"app-icon-container","aria-hidden":"true"},i("slot",{name:"app-icon"})),i("ic-typography",{variant:n},i("h1",null,this.appTitle))),this.status!==""&&i("div",{class:"app-status"},i("ic-typography",{"aria-label":"app tag",variant:"label-uppercase",class:"app-status-text"},this.status)),this.version!==""&&i("div",{class:"app-version"},i("ic-typography",{variant:"label",class:"app-version-text","aria-label":"app version"},this.version))),(this.hasSearchSlotContent||t)&&i("div",{class:"search-menu-container"},i("div",{class:"search-actions-container"},this.deviceSize>r.L&&i("slot",{name:"search"}),this.hasSearchSlotContent&&this.deviceSize<=r.L&&i("ic-button",{id:"search-toggle-button",ref:t=>this.mobileSearchButtonEl=t,onMouseDown:this.searchButtonMouseDownHandler,variant:"icon",size:e,"aria-label":l,appearance:this.foregroundColor,onClick:this.searchButtonClickHandler},i("slot",{name:"toggle-icon",slot:"icon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#ffffff"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))),this.hasIconButtons&&this.deviceSize>r.L&&i("div",{class:"icon-buttons-container"},i("slot",{name:"buttons"})),t&&this.deviceSize<=r.L&&i("div",{class:"menu-button-container"},i("nav",{"aria-labelledby":"navigation-landmark-text","aria-hidden":!this.hasNavigation||this.navMenuVisible?"true":"false"},i("ic-button",{id:"menu-button",appearance:this.foregroundColor,variant:"secondary","aria-expanded":this.menuOpen?"true":"false","aria-haspopup":"true","aria-label":`Open ${this.hasNavigation?"navigation":"app"} menu`,size:c,onClick:this.menuButtonClick},"Menu",i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#ffffff",slot:"icon"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("path",{d:"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"})))))))),this.mobileSearchBarVisible&&i("div",{class:"search-bar-container"},i("slot",{name:"search"})),this.hasNavigation&&this.deviceSize>r.L&&i("div",{class:"navigation-tabs"},i("span",{id:"navigation-landmark-text",class:"navigation-landmark-text","aria-hidden":"true"},"Main navigation"),i("nav",{"aria-labelledby":"navigation-landmark-text",class:"nav-panel-container"},i("ul",{class:"navigation-item-list"},i("slot",{name:"navigation"}))))))),this.navMenuVisible&&i("ic-navigation-menu",{version:this.version,status:this.status,class:{["inline"]:this.inline}},i("div",{class:"menu-buttons-slot",slot:"buttons"},i("slot",{name:"buttons"})),i("ul",{slot:"navigation"},i("slot",{name:"navigation"}))))}get el(){return n(this)}static get watchers(){return{appTitle:["watchPropHandler"]}}};u.style=g;export{u as ic_top_navigation};
|
2
|
-
//# sourceMappingURL=p-1bec5ccb.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":["icTopNavigationCss","TopNavigation","this","hasAppIcon","hasNavigation","hasIconButtons","hasSearchSlotContent","searchBar","initialiseSearchBar","slot","getSlot","el","tagName","querySelector","hideLabel","emitTopNavResized","size","event","CustomEvent","detail","dispatchEvent","menuButtonClick","showNavMenu","searchButtonMouseDownHandler","searchButtonClick","searchButtonClickHandler","toggleSearchBar","resizeObserver","resizeObserverCallback","currSize","deviceSize","DEVICE_SIZES","L","mobileSearchBarVisible","document","activeElement","undefined","setAttribute","removeAttribute","setTimeout","setFocus","runResizeObserver","ResizeObserver","getCurrentDeviceSize","observe","XL","getThemeForegroundColor","[object Object]","newValue","oldValue","onComponentPropUndefinedChange","menuBtn","shadowRoot","ev","searchValue","value","theme","foregroundColor","mode","mobileSearchButtonEl","updateAriaLabel","hasFullWidthSearchBar","fullWidth","show","navMenuVisible","icNavigationMenuOpened","emit","icNavigationMenuClosed","isSlotUsed","checkResizeObserver","onComponentRequiredPropUndefined","prop","appTitle","propName","disconnect","hasMenuContent","status","version","searchButtonSize","S","appTitleVariant","hasTitle","mobileSearchButtonTitle","menuSize","h","Host","class","IcThemeForegroundEnum","Dark","aligned","full-height","role","href","aria-hidden","name","variant","aria-label","id","ref","onMouseDown","appearance","onClick","xmlns","height","viewBox","width","fill","d","aria-labelledby","aria-expanded","menuOpen","aria-haspopup","inline"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n color: var(--ic-theme-text);\n width: 100%;\n position: relative;\n}\n\n:host .top-navigation {\n background-color: var(--ic-theme-primary);\n height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n width: 100%;\n}\n\n:host .title-link {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n padding: var(--ic-space-xxs);\n margin-left: calc(-1 * var(--ic-space-xxs));\n transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active {\n color: var(--ic-theme-text);\n}\n\n:host .title-link:hover:not(:focus) {\n background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active:not(:focus) {\n background-color: var(--ic-theme-active);\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: none;\n}\n\n:host .title-link ic-typography {\n font-weight: 600;\n}\n\n:host .nav-panel-container {\n border-top: var(--ic-keyline-lighten);\n padding-left: var(--ic-space-lg);\n margin-left: calc(-1 * var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n border-top: var(--ic-keyline-darken);\n}\n\n.top-panel-container {\n display: flex;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n.navigation-tabs {\n margin-top: -1px;\n}\n\n.app-details-container {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n display: flex;\n padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n display: flex;\n margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n display: flex;\n}\n\n.app-title {\n padding-right: var(--ic-space-lg);\n}\n\n:host .app-status {\n border-radius: 80px;\n background-color: var(--ic-architectural-white);\n color: var(--ic-color-primary-text);\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n:host(.dark) .app-status {\n background-color: var(--ic-theme-text);\n color: var(--ic-color-white-text);\n}\n\n:host .app-version {\n border-radius: 16px;\n background-color: var(--ic-theme-active);\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n margin-left: var(--ic-space-xs);\n}\n\n.app-status-text,\n.app-version-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 96px;\n}\n\nslot[name=\"app-icon\"]::slotted(svg) {\n fill: var(--ic-theme-text);\n width: 2em;\n height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n fill: var(--ic-theme-text);\n}\n\n.search-menu-container {\n justify-content: right;\n display: flex;\n align-items: center;\n flex: 1 auto;\n}\n\n.menu-button-container {\n margin-left: var(--ic-space-md);\n}\n\n.search-actions-container {\n display: flex;\n}\n\n.menu-buttons-slot {\n display: flex;\n flex-direction: column;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n}\n\n.navigation-item-list {\n display: flex;\n list-style: none;\n height: 44px;\n}\n\n:host([content-aligned=\"left\"]) .app-details-container {\n flex-basis: 1;\n}\n\n:host([content-aligned=\"left\"]) .app-details-container,\n:host([content-aligned=\"left\"]) .nav-panel-container,\n:host([content-aligned=\"center\"]) .nav-panel-container,\n:host([content-aligned=\"left\"]) .search-menu-container,\n:host([content-aligned=\"center\"]) .search-menu-container {\n justify-content: flex-start;\n}\n\n:host([content-aligned=\"center\"]) .app-details-container {\n justify-content: flex-end;\n}\n\n@media screen and (min-width: 993px) {\n .app-details-container {\n margin-right: var(--ic-space-lg);\n }\n\n :host([content-aligned=\"center\"]) .top-navigation {\n display: flex;\n justify-content: center;\n }\n\n :host([content-aligned=\"left\"]) .top-navigation {\n display: flex;\n }\n}\n\n/* large */\n@media screen and (max-width: 1200px) {\n :host .nav-panel-container {\n padding-left: var(--ic-space-md);\n }\n\n /* medium */\n @media screen and (max-width: 992px) {\n :host .nav-panel-container,\n :host .app-status,\n :host .app-version {\n display: none;\n }\n\n :host .title-link {\n margin-right: var(--ic-space-xs);\n }\n\n .search-menu-container {\n max-width: 160px;\n }\n\n .search-bar-container {\n display: flex;\n justify-content: center;\n align-items: center;\n border-top: var(--ic-keyline-darken);\n height: 64px;\n padding-left: var(--ic-space-md);\n padding-right: var(--ic-space-md);\n margin-left: calc(-1 * var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n }\n\n :host([content-aligned=\"left\"]) .app-details-container,\n :host([content-aligned=\"left\"]) .search-menu-container,\n :host([content-aligned=\"center\"]) .search-menu-container,\n :host([content-aligned=\"center\"]) .app-details-container {\n justify-content: flex-start;\n }\n }\n\n /* x small */\n @media screen and (max-width: 576px) {\n :host .title-link {\n margin-right: var(--ic-space-xxxs);\n word-break: break-word;\n hyphens: auto;\n }\n\n .top-panel-container {\n min-height: 40px;\n }\n\n .searchbox-inline {\n display: none;\n }\n\n .search-bar-container {\n margin-top: 0;\n height: 56px;\n padding-left: var(--ic-space-xs);\n padding-right: var(--ic-space-xs);\n }\n\n .menu-button-container {\n margin-left: var(--ic-space-sm);\n }\n\n slot[name=\"app-icon\"]::slotted(svg) {\n width: 1.5em;\n height: 1.5em;\n }\n\n slot[name=\"toggle-icon\"] svg {\n width: 1.5em;\n height: 1.5em;\n }\n\n :host([content-aligned=\"left\"]) .app-details-container,\n :host([content-aligned=\"left\"]) .search-menu-container,\n :host([content-aligned=\"center\"]) .app-details-container,\n :host([content-aligned=\"center\"]) .search-menu-container {\n justify-content: flex-start;\n }\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n IcTypographyVariants,\n IcAlignment,\n IcThemeForeground,\n IcThemeForegroundEnum,\n IcTheme,\n} from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getSlot,\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n} from \"../../utils/helpers\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title.\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n tag: \"ic-top-navigation\",\n styleUrl: \"ic-top-navigation.css\",\n shadow: true,\n})\nexport class TopNavigation {\n @Element() el: HTMLIcTopNavigationElement;\n\n /**\n * Title to display\n */\n @Prop() appTitle!: string;\n\n /**\n * The url to navigate to when title is clicked\n */\n @Prop() href: string = \"/\";\n\n /**\n * Version info to display\n */\n @Prop() version: string = \"\";\n\n /**\n * Status info to display\n */\n @Prop() status: string = \"\";\n\n /**\n * The alignment of the top nav content\n */\n @Prop() contentAligned: IcAlignment = \"full-width\";\n\n /**\n * If true, the flyout navigation menu on small devices will be contained by the parent element\n */\n @Prop() inline: boolean = false;\n\n @State() menuOpen: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() mobileSearchBarVisible: boolean = false;\n @State() navMenuVisible: boolean = false;\n @State() searchValue: string = \"\";\n @State() mobileSearchHiddenOnBlur: boolean = false;\n @State() searchButtonClick: boolean = false;\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n @State() hasFullWidthSearchBar: boolean = false;\n\n @Watch(\"appTitle\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n //this watch can be removed once gatbsy hydration issue is resolved\n onComponentPropUndefinedChange(\n oldValue,\n newValue,\n this.initialiseSearchBar\n );\n }\n\n /**\n * @internal - Emitted when the menu is opened.\n */\n @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n /**\n * @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n private hasAppIcon: boolean = false;\n private hasNavigation: boolean = false;\n private hasIconButtons: boolean = false;\n private hasSearchSlotContent: boolean = false;\n private searchBar: HTMLIcSearchBarElement = null;\n private mobileSearchButtonEl: HTMLIcButtonElement;\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n const menuBtn = this.el.shadowRoot.querySelector(\n \"#menu-button\"\n ) as HTMLIcButtonElement;\n menuBtn.setFocus();\n }\n\n @Listen(\"icSearchBarBlur\", {})\n searchInputBlurHandler(ev: CustomEvent): void {\n if (ev.detail !== null) {\n if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n this.toggleSearchBar();\n }\n this.searchValue = ev.detail.value;\n }\n }\n\n @Listen(\"icChange\", {})\n searchValueChangeHandler(ev: CustomEvent): void {\n this.searchValue = ev.detail.value;\n }\n\n @Listen(\"icThemeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.foregroundColor = theme.mode;\n }\n\n private initialiseSearchBar = () => {\n if (this.hasSearchSlotContent) {\n const slot = getSlot(this.el, \"search\");\n if (slot && slot.tagName === \"IC-SEARCH-BAR\") {\n this.searchBar = slot as HTMLIcSearchBarElement;\n } else if (slot && slot.tagName === \"FORM\") {\n this.searchBar = slot.querySelector(\n \"ic-search-bar\"\n ) as HTMLIcSearchBarElement;\n }\n\n if (this.searchBar !== null) {\n this.searchBar.hideLabel = true;\n }\n }\n };\n\n private toggleSearchBar(): void {\n this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n if (this.searchBar !== null) {\n if (this.mobileSearchBarVisible) {\n this.mobileSearchButtonEl.updateAriaLabel(\"Hide search\");\n this.hasFullWidthSearchBar = true;\n this.searchBar.fullWidth = true;\n setTimeout(() => {\n this.searchBar.setFocus();\n }, 100);\n } else {\n this.mobileSearchButtonEl.updateAriaLabel(\"Show search\");\n this.hasFullWidthSearchBar = false;\n this.searchBar.fullWidth = false;\n }\n }\n }\n\n private emitTopNavResized = (size: number): void => {\n const event = new CustomEvent(\"topNavResized\", { detail: { size: size } });\n this.el.dispatchEvent(event);\n };\n\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu(show: boolean): void {\n this.navMenuVisible = show;\n if (show) {\n this.icNavigationMenuOpened.emit();\n } else {\n this.icNavigationMenuClosed.emit();\n }\n }\n\n private searchButtonMouseDownHandler = () => {\n this.searchButtonClick = true;\n };\n\n private searchButtonClickHandler = () => {\n this.toggleSearchBar();\n this.searchButtonClick = false;\n };\n\n private resizeObserver: ResizeObserver = null;\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n if (currSize > DEVICE_SIZES.L) {\n this.showNavMenu(false);\n if (this.mobileSearchBarVisible) {\n this.toggleSearchBar();\n }\n }\n this.emitTopNavResized(currSize);\n if (\n document.activeElement !== null &&\n document.activeElement !== undefined &&\n document.activeElement.tagName === \"IC-SEARCH-BAR\"\n ) {\n this.searchBar.setAttribute(\"hidden\", \"true\");\n //remove attribute again as this trigger a redraw & applies css\n this.searchBar.removeAttribute(\"hidden\");\n setTimeout(() => {\n this.searchBar.setFocus();\n }, 100);\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n componentWillLoad(): void {\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n this.deviceSize = getCurrentDeviceSize();\n this.initialiseSearchBar();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Top Navigation\"\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const hasMenuContent =\n this.hasNavigation ||\n this.hasIconButtons ||\n this.status !== \"\" ||\n this.version !== \"\";\n\n const searchButtonSize =\n this.deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n\n let appTitleVariant: IcTypographyVariants = \"h3\";\n\n const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n if (this.deviceSize <= DEVICE_SIZES.L) {\n appTitleVariant = \"h4\";\n if (this.deviceSize <= DEVICE_SIZES.S) {\n appTitleVariant = \"subtitle-small\";\n }\n }\n\n const mobileSearchButtonTitle = this.mobileSearchBarVisible\n ? \"Hide search\"\n : \"Show search\";\n const menuSize = this.deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n return (\n <Host\n class={{\n [\"fullwidth-searchbar\"]: this.hasFullWidthSearchBar,\n [IcThemeForegroundEnum.Dark]:\n this.foregroundColor === IcThemeForegroundEnum.Dark,\n }}\n >\n <div class=\"top-navigation\">\n <ic-section-container aligned=\"full-width\" full-height>\n <header role=\"banner\">\n <div class=\"top-panel-container\">\n <div class=\"app-details-container\">\n {hasTitle && (\n <a class=\"title-link\" href={this.href}>\n {this.hasAppIcon && (\n <div class=\"app-icon-container\" aria-hidden=\"true\">\n <slot name=\"app-icon\" />\n </div>\n )}\n <ic-typography variant={appTitleVariant}>\n <h1>{this.appTitle}</h1>\n </ic-typography>\n </a>\n )}\n {this.status !== \"\" && (\n <div class=\"app-status\">\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"app-version\">\n <ic-typography\n variant=\"label\"\n class=\"app-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n\n {(this.hasSearchSlotContent || hasMenuContent) && (\n <div class=\"search-menu-container\">\n <div class=\"search-actions-container\">\n {this.deviceSize > DEVICE_SIZES.L && (\n <slot name=\"search\"></slot>\n )}\n\n {this.hasSearchSlotContent &&\n this.deviceSize <= DEVICE_SIZES.L && (\n <ic-button\n id=\"search-toggle-button\"\n ref={(el) => (this.mobileSearchButtonEl = el)}\n onMouseDown={this.searchButtonMouseDownHandler}\n variant=\"icon\"\n size={searchButtonSize}\n aria-label={mobileSearchButtonTitle}\n appearance={this.foregroundColor}\n onClick={this.searchButtonClickHandler}\n >\n <slot name=\"toggle-icon\" slot=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#ffffff\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n </svg>\n </slot>\n </ic-button>\n )}\n\n {this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (\n <div class=\"menu-button-container\">\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n aria-hidden={\n !this.hasNavigation || this.navMenuVisible\n ? \"true\"\n : \"false\"\n }\n >\n <ic-button\n id=\"menu-button\"\n appearance={this.foregroundColor}\n variant=\"secondary\"\n aria-expanded={this.menuOpen ? \"true\" : \"false\"}\n aria-haspopup=\"true\"\n aria-label={`Open ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n size={menuSize}\n onClick={this.menuButtonClick}\n >\n Menu\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#ffffff\"\n slot=\"icon\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n </svg>\n </ic-button>\n </nav>\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n\n {this.mobileSearchBarVisible && (\n <div class=\"search-bar-container\">\n <slot name=\"search\"></slot>\n </div>\n )}\n\n {this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (\n <div class=\"navigation-tabs\">\n <span\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n aria-hidden=\"true\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n class=\"nav-panel-container\"\n >\n <ul class=\"navigation-item-list\">\n <slot name=\"navigation\"></slot>\n </ul>\n </nav>\n </div>\n )}\n </header>\n </ic-section-container>\n </div>\n {this.navMenuVisible && (\n <ic-navigation-menu\n version={this.version}\n status={this.status}\n class={{\n [\"inline\"]: this.inline,\n }}\n >\n <div class=\"menu-buttons-slot\" slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n <ul slot=\"navigation\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-navigation-menu>\n )}\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as i,h as t,H as e,g as s,c as o}from"./p-f9370be6.js";import{a as n}from"./p-6f57b13c.js";import{s as a}from"./p-ae6aa67f.js";import{i as r,a as c}from"./p-c15bb762.js";import{C as l}from"./p-1e7b4310.js";import{c as h}from"./p-ec26fc38.js";const d="ic-input-component-container{display:flex;border:1px solid var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:40px;width:var(--input-width, 320px);padding:1px;background-color:var(--ic-architectural-white);box-sizing:border-box;position:relative;fill:var(--ic-architectural-400)}ic-input-component-container.fullwidth{width:100%}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:1px dashed var(--ic-architectural-200)}ic-input-component-container.readonly,ic-input-component-container.readonly:hover{border:none;padding:0}ic-input-component-container.error{border:var(--ic-space-xxxs) solid var(--ic-status-error);padding:0}ic-input-component-container.warning{border:var(--ic-space-xxxs) solid var(--ic-status-warning-mid);padding:0}ic-input-component-container.success{border:var(--ic-space-xxxs) solid var(--ic-status-success);padding:0}ic-input-component-container.small{height:var(--ic-space-xl)}ic-input-component-container.multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:7px;display:flex;align-items:center}ic-input-component-container.multiline .icon-container,ic-input-component-container.multiline.small .icon-container{margin-top:6px;display:block}ic-input-component-container.readonly .icon-container{margin-left:-5px}ic-input-component-container.disabled ::-moz-placeholder{display:none}ic-input-component-container.disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 6px;display:flex;align-items:center}ic-input-component-container.dark:hover{--border-color:var(--ic-architectural-400)}ic-input-component-container .inline-success>svg{fill:var(--ic-status-success)}ic-input-component-container:hover{border-color:var(--ic-action-dark-hover);color:var(--ic-action-dark-hover);--expand-icon-hover:var(--ic-action-dark-hover)}.focus-indicator{display:flex;width:100%;margin:-2px;padding:2px;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.dark:focus-within{box-shadow:var(--ic-border-focus)}";const p=class{constructor(t){i(this,t);this.disabled=false;this.readonly=false;this.validationStatus="";this.small=false;this.multiLine=false;this.validationInline=false;this.dark=false;this.fullWidth=false}render(){const{small:i,validationStatus:s,disabled:o,readonly:c,multiLine:l,fullWidth:h,dark:d,validationInline:p}=this;const u=this.validationStatus!==""&&!this.disabled&&!this.readonly?true:false;return t(e,{class:{["small"]:i,[s]:u,["disabled"]:o,["readonly"]:c,["multiline"]:l,["fullwidth"]:h,["dark"]:d}},t("div",{class:{"focus-indicator":true,dark:d}},r(this.host,"left-icon")&&t("div",{class:{["icon-container"]:true}},t("slot",{name:"left-icon"})),t("slot",null),p&&s===n.Success&&t("span",{class:{["inline-success"]:true},innerHTML:a})))}get host(){return s(this)}};p.style=d;const u="ic-input-container .component-container{display:flex;flex-direction:column;position:relative}";const f=class{constructor(t){i(this,t);this.disabled=false;this.readonly=false}render(){return t(e,null,t("div",{class:{["component-container"]:true,["disabled"]:this.disabled,["readonly"]:this.readonly}},t("slot",null)))}};f.style=u;const b='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){:host([open]) .menu{transition:max-height var(--ic-transition-duration-slow)}}:host{border-radius:var(--ic-border-radius);max-height:0;width:var(--input-width, 320px);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-popup-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay)}:host(:not(.no-focus):focus-within){box-shadow:var(--ic-border-focus)}.menu{text-decoration:none;list-style-type:none;border:1px solid var(--ic-architectural-400);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;max-height:0;overflow-y:hidden}.menu-scroll{overflow-y:auto}.menu:focus-visible{outline:none}:host([open]){max-height:none;display:block}:host([open]) .menu{visibility:visible;max-height:322px}:host(.full-width){width:100%}.option{padding:8px 7px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}:host([small]) .option{padding:4px 7px}.option:last-child{border-radius:0 0 1px 1px}.option:first-child{border-radius:1px 1px 0 0}.option:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-active)}.option:focus-visible{outline:none}.option:not(.disabled-option) .option-description{color:var(--ic-color-secondary-text)}.option-text-container{pointer-events:none}.check-icon{height:24px;margin-left:8px;pointer-events:none}.focused-option .check-icon *{fill:white}.option-group-title{padding:24px 7px 8px;color:var(--ic-color-tertiary-text)}:host([small]) .option-group-title{padding:12px 7px 4px}.last-recommended-option{border-bottom:1px solid var(--ic-architectural-400)}.disabled-option{color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option,.focused-option .option-description{background-color:var(--ic-focus-blue) !important;color:var(--ic-color-white-text) !important}:host(.no-results) li{cursor:no-drop}:host(.no-results) li:hover{background-color:transparent}';const m=class{constructor(e){i(this,e);this.optionSelect=o(this,"optionSelect",7);this.menuChange=o(this,"menuChange",7);this.menuOptionId=o(this,"menuOptionId",7);this.ungroupedOptions=[];this.preventClickOpen=false;this.handleMenuChange=(i,t)=>{if(!i)this.popperInstance.destroy();this.menuChange.emit({open:i,focusInput:t});if(!i&&t!==false){this.inputEl.focus();this.preventClickOpen=false}};this.setNextOptionValue=i=>{if(this.ungroupedOptions[i+1]){this.optionSelect.emit({value:this.ungroupedOptions[i+1].value,optionId:this.getOptionId(this.ungroupedOptions[i+1].value)})}else{this.optionSelect.emit({value:this.ungroupedOptions[0].value,optionId:this.getOptionId(this.ungroupedOptions[0].value)})}};this.setPreviousOptionValue=i=>{if(this.ungroupedOptions[i-1]){this.optionSelect.emit({value:this.ungroupedOptions[i-1].value,optionId:this.getOptionId(this.ungroupedOptions[i-1].value)})}else{this.optionSelect.emit({value:this.ungroupedOptions[this.ungroupedOptions.length-1].value,optionId:this.getOptionId(this.ungroupedOptions[this.ungroupedOptions.length-1].value)})}};this.arrowBehaviour=i=>{i.preventDefault();this.handleMenuChange(true)};this.setHighlightedOption=i=>{this.optionHighlighted=this.options[i].value||undefined};this.autoSetInputValueKeyboardOpen=i=>{var t;const e=this.ungroupedOptions.findIndex((i=>i.value===this.value));const s=((t=this.inputEl)===null||t===void 0?void 0:t.tagName)==="INPUT";switch(i.key){case"ArrowDown":this.keyboardNav=true;this.arrowBehaviour(i);this.setNextOptionValue(e);break;case"ArrowUp":this.keyboardNav=true;this.arrowBehaviour(i);this.setPreviousOptionValue(e);break;case" ":case"Enter":if(i.target.id!=="clear-button"){this.handleMenuChange(true)}break;case"Backspace":if(s){this.inputEl.focus()}break;default:if(s&&i.key!=="Tab"){this.inputEl.focus()}break}};this.manSetInputValueKeyboardOpen=i=>{const t=this.options.findIndex((i=>i.value===this.optionHighlighted));this.menuOptionId.emit({optionId:undefined});const e=i=>Array.from(this.host.shadowRoot.querySelectorAll("li"))[i].id;const s=this.parentEl.tagName==="IC-SEARCH-BAR";switch(i.key){case"ArrowDown":this.arrowBehaviour(i);if(t<this.options.length-1){this.setHighlightedOption(t+1);this.menuOptionId.emit({optionId:e(t+1)})}else{this.setHighlightedOption(0)}this.preventIncorrectTabOrder=false;this.focusFromSearchKeypress=false;break;case"ArrowUp":this.arrowBehaviour(i);if(t<=0||t>this.options.length+1){this.setHighlightedOption(this.options.length-1);this.menuOptionId.emit({optionId:e(this.options.length-1)})}else{this.setHighlightedOption(t-1);this.menuOptionId.emit({optionId:e(t-1)})}this.preventIncorrectTabOrder=false;this.focusFromSearchKeypress=false;break;case" ":case"Enter":i.preventDefault();this.setInputValue(t);break;case"Escape":this.handleMenuChange(false);this.menuOptionId.emit({optionId:undefined});break;case"Shift":case"Tab":this.preventIncorrectTabOrder=true;break;case"Backspace":if(s){this.parentEl.setFocus();this.focusFromSearchKeypress=true;this.setHighlightedOption(0)}break;default:if(s&&i.key!=="Tab"){this.parentEl.setFocus();this.focusFromSearchKeypress=true;this.setHighlightedOption(0)}break}};this.setInputValue=i=>{var t;if(this.options[i]){this.optionSelect.emit({value:(t=this.options[i])===null||t===void 0?void 0:t.value});this.optionHighlighted=undefined;this.menuOptionId.emit({optionId:undefined})}this.handleMenuChange(false)};this.handleOptionClick=i=>{const{value:t,label:e}=i.target.dataset;this.optionSelect.emit({value:t,label:e});this.handleMenuChange(false)};this.handleBlur=i=>{if(i.relatedTarget!==this.inputEl){if(!this.menu.contains(i.relatedTarget)){this.handleMenuChange(false,false)}}else{this.handleMenuChange(false);this.preventClickOpen=true}};this.handleMenuKeyDown=i=>{if(this.activationType==="automatic"){this.autoSetValueOnMenuKeyDown(i)}};this.autoSetValueOnMenuKeyDown=i=>{i.cancelBubble=true;const t=this.ungroupedOptions.findIndex((i=>i.value===this.value));const e=this.inputEl.tagName==="INPUT";switch(i.key){case"ArrowUp":i.preventDefault();this.setPreviousOptionValue(t);this.keyboardNav=true;break;case"ArrowDown":i.preventDefault();this.setNextOptionValue(t);this.keyboardNav=true;break;case"Home":this.optionSelect.emit({value:this.ungroupedOptions[0].value});this.keyboardNav=true;break;case"End":this.optionSelect.emit({value:this.ungroupedOptions[this.ungroupedOptions.length-1].value});this.keyboardNav=true;break;case" ":case"Enter":case"Escape":this.handleMenuChange(false);break;case"Backspace":if(e){this.inputEl.focus()}break;case"Shift":break;default:if(e&&i.key!=="Tab"){this.inputEl.focus()}break}};this.handleMenuKeyUp=i=>{if(i.key==="Tab"&&i.shiftKey){this.preventClickOpen=false}};this.getOptionId=i=>`${this.menuId}-${i}`;this.getOptionAriaLabel=(i,t)=>{let e=i.label;if(i.description){e=`${e}, ${i.description}`}if(t){return`${e}, ${t.label} group`}else{return e}};this.getSortedOptions=i=>i.sort(((i,t)=>i.recommended&&!t.recommended?-1:0));this.isManualMode=this.activationType==="manual";this.scrollToSelected=i=>{const t=i.querySelector(".option[aria-selected]");if(t){const e=t.offsetTop+t.offsetHeight;if(e>i.scrollTop+i.offsetHeight||e<i.scrollTop+i.offsetHeight){i.scrollTop=t.offsetTop}t.focus()}};this.loadUngroupedOptions=()=>{if(this.options.length>0){this.options.map((i=>{if(i.children){i.children.map((i=>!i.disabled&&this.ungroupedOptions.push(i)))}else if(!i.disabled){this.ungroupedOptions.push(i)}}))}this.ungroupedOptions=this.getSortedOptions(this.ungroupedOptions)};this.displayOption=(i,e,s)=>{const{open:o,value:n}=this;return t("li",{id:this.getOptionId(i.value),class:{option:true,"focused-option":this.isManualMode?(this.keyboardNav||this.initialOptionsListRender)&&i.value===this.optionHighlighted:this.keyboardNav&&i.value===n,"last-recommended-option":i.recommended&&this.options[e+1]&&!this.options[e+1].recommended,"disabled-option":i.disabled},role:"option",tabindex:o&&(i.value===n||i.value===this.optionHighlighted)&&this.keyboardNav?"0":"-1","aria-label":this.getOptionAriaLabel(i,s),"aria-selected":i.value===n,"aria-disabled":i.disabled?"true":"false",onClick:this.handleOptionClick,onBlur:this.handleBlur,onMouseDown:i=>i.preventDefault(),"data-value":i.value,"data-label":i.label},t("div",{class:"option-text-container"},t("ic-typography",{variant:"body","aria-hidden":"true"},t("p",null,i.label)),i.description&&t("ic-typography",{id:`${this.getOptionId(i.value)}-description`,class:"option-description",variant:"caption","aria-hidden":"true"},t("p",null,i.description))),i.value===n&&this.parentEl.tagName!=="IC-SEARCH-BAR"&&t("span",{class:"check-icon",innerHTML:l}))};this.open=undefined;this.options=undefined;this.small=false;this.menuId=undefined;this.value=undefined;this.activationType="automatic";this.inputEl=undefined;this.parentEl=undefined;this.inputLabel=undefined;this.anchorEl=undefined;this.fullWidth=false;this.autoFocusOnSelected=true;this.keyboardNav=false;this.optionHighlighted=undefined;this.focusFromSearchKeypress=false;this.initialOptionsListRender=false;this.preventIncorrectTabOrder=false}watchOptionsHandler(){this.ungroupedOptions=[];this.loadUngroupedOptions()}handleClearListener(){this.optionHighlighted=""}handleSubmitSearch(){const i=this.options.findIndex((i=>i.value===this.optionHighlighted));this.setInputValue(i)}async handleClickOpen(){if(!this.preventClickOpen){this.menuChange.emit({open:!this.open});this.keyboardNav=false}this.preventClickOpen=false}async handleKeyboardOpen(i){this.keyboardNav=false;if(this.activationType==="automatic"){this.autoSetInputValueKeyboardOpen(i)}else{this.keyboardNav=true;this.manSetInputValueKeyboardOpen(i)}}async handleSetFirstOption(){this.setHighlightedOption(0)}connectedCallback(){var i;if(((i=this.parentEl)===null||i===void 0?void 0:i.tagName)==="IC-SEARCH-BAR"){this.setHighlightedOption(0);this.initialOptionsListRender=true}}componentWillLoad(){this.loadUngroupedOptions()}componentDidLoad(){let i=0;this.host.shadowRoot.querySelectorAll(".option").forEach((t=>i+=t.clientHeight));if(i>320){this.menu.classList.add("menu-scroll")}c([{prop:this.open,propName:"open"},{prop:this.options,propName:"options"},{prop:this.menuId,propName:"menu-id"},{prop:this.inputLabel,propName:"input-label"}],"Menu")}componentDidRender(){if(this.open){this.popperInstance=h(this.anchorEl,this.host,{placement:"bottom",modifiers:[{name:"offset",options:{offset:[0,7]}},{name:"flip",options:{fallbackPlacements:["top"],rootBoundary:"viewport"}}]})}}componentDidUpdate(){const i=this.options.some((i=>i.value===this.value));const t=this.optionHighlighted!==null&&this.optionHighlighted!==undefined&&this.optionHighlighted!=="";if(this.open&&this.options.length!==0){if(this.value&&this.keyboardNav&&i&&this.autoFocusOnSelected){this.scrollToSelected(this.menu)}else if(this.inputEl.tagName!=="IC-TEXT-FIELD"&&this.inputEl.tagName!=="INPUT"){this.menu.focus()}else if(t&&!this.focusFromSearchKeypress&&!this.preventIncorrectTabOrder){const i=this.host.shadowRoot.querySelector(`li[data-value="${this.optionHighlighted}"]`);if(i){i.focus()}}}}render(){var i,s;const{inputLabel:o,options:n,menuId:a,value:r,fullWidth:c}=this;return t(e,{class:{"full-width":c,"no-focus":((i=this.inputEl)===null||i===void 0?void 0:i.tagName)==="INPUT"}},n.length!==0&&t("ul",{id:a,class:"menu",role:"listbox","aria-label":o,"aria-activedescendant":r!=null&&r!==""?this.getOptionId(r):"",tabindex:open&&!this.keyboardNav&&((s=this.inputEl)===null||s===void 0?void 0:s.tagName)!=="INPUT"?"0":"-1",ref:i=>this.menu=i,onKeyDown:this.handleMenuKeyDown,onKeyUp:this.handleMenuKeyUp,onBlur:this.handleBlur},this.getSortedOptions(n).map(((i,e)=>{if(i.children){if(i.children.length>0){return t("div",null,t("ic-typography",{class:"option-group-title",role:"presentation",variant:"subtitle-small"},t("p",null,i.label)),i.children.map((t=>this.displayOption(t,e,i))))}else{return null}}else{return this.displayOption(i,e)}}))))}get host(){return s(this)}static get watchers(){return{options:["watchOptionsHandler"]}}};m.style=b;export{p as ic_input_component_container,f as ic_input_container,m as ic_menu};
|
2
|
-
//# sourceMappingURL=p-21025b10.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","src/components/ic-input-component-container/ic-input-component-container.tsx","src/components/ic-input-container/ic-input-container.css?tag=ic-input-container","src/components/ic-input-container/ic-input-container.tsx","src/components/ic-menu/ic-menu.css?tag=ic-menu&encapsulation=shadow","src/components/ic-menu/ic-menu.tsx"],"names":["icInputComponentContainerCss","InputComponentContainer","[object Object]","small","validationStatus","disabled","readonly","multiLine","fullWidth","dark","validationInline","this","hasValidationStatus","h","Host","class","focus-indicator","isSlotUsed","host","name","IcInformationStatus","Success","innerHTML","successIcon","icInputContainerCss","InputContainer","icMenuCss","Menu","ungroupedOptions","preventClickOpen","handleMenuChange","open","focusInput","popperInstance","destroy","menuChange","emit","inputEl","focus","setNextOptionValue","selectedOptionIndex","optionSelect","value","optionId","getOptionId","setPreviousOptionValue","length","arrowBehaviour","event","preventDefault","setHighlightedOption","highlightedIndex","optionHighlighted","options","undefined","autoSetInputValueKeyboardOpen","findIndex","option","isSearchableSelect","_a","tagName","key","keyboardNav","target","id","manSetInputValueKeyboardOpen","highlightedOptionIndex","menuOptionId","index","Array","from","shadowRoot","querySelectorAll","isSearchBar","parentEl","preventIncorrectTabOrder","focusFromSearchKeypress","setInputValue","setFocus","handleOptionClick","label","dataset","handleBlur","relatedTarget","menu","contains","handleMenuKeyDown","activationType","autoSetValueOnMenuKeyDown","cancelBubble","handleMenuKeyUp","shiftKey","menuId","getOptionAriaLabel","parentOption","ariaLabel","description","getSortedOptions","sort","optionA","optionB","recommended","isManualMode","scrollToSelected","selectedOption","querySelector","elTop","offsetTop","offsetHeight","scrollTop","loadUngroupedOptions","map","children","push","displayOption","focused-option","initialOptionsListRender","last-recommended-option","disabled-option","role","tabindex","aria-label","aria-selected","aria-disabled","onClick","onBlur","onMouseDown","data-value","data-label","variant","aria-hidden","Check","optionsHeight","forEach","clientHeight","classList","add","onComponentRequiredPropUndefined","prop","propName","inputLabel","createPopper","anchorEl","placement","modifiers","offset","fallbackPlacements","rootBoundary","inputValueInOptions","some","optionHighlightedIsSet","autoFocusOnSelected","highlightedEl","full-width","no-focus","aria-activedescendant","_b","ref","el","onKeyDown","onKeyUp","childOption"],"mappings":"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","sourcesContent":["ic-input-component-container {\n /**\n * @prop --border-color: Border colour of the input component container\n */\n\n display: flex;\n border: 1px solid var(--border-color, var(--ic-architectural-400));\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-slow);\n height: 40px;\n width: var(--input-width, 320px);\n padding: 1px;\n background-color: var(--ic-architectural-white);\n box-sizing: border-box;\n position: relative;\n fill: var(--ic-architectural-400);\n}\n\nic-input-component-container.fullwidth {\n width: 100%;\n}\n\nic-input-component-container.disabled,\nic-input-component-container.disabled:hover {\n border: 1px dashed var(--ic-architectural-200);\n}\n\nic-input-component-container.readonly,\nic-input-component-container.readonly:hover {\n border: none;\n padding: 0;\n}\n\nic-input-component-container.error {\n border: var(--ic-space-xxxs) solid var(--ic-status-error);\n padding: 0;\n}\n\nic-input-component-container.warning {\n border: var(--ic-space-xxxs) solid var(--ic-status-warning-mid);\n padding: 0;\n}\n\nic-input-component-container.success {\n border: var(--ic-space-xxxs) solid var(--ic-status-success);\n padding: 0;\n}\n\nic-input-component-container.small {\n height: var(--ic-space-xl);\n}\n\nic-input-component-container.multiline {\n height: auto;\n}\n\nic-input-component-container .icon-container {\n margin-top: var(--ic-space-xxs);\n margin-left: 7px;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.multiline .icon-container,\nic-input-component-container.multiline.small .icon-container {\n margin-top: 6px;\n display: block;\n}\n\nic-input-component-container.readonly .icon-container {\n margin-left: -5px;\n}\n\nic-input-component-container.disabled ::placeholder {\n display: none;\n}\n\nic-input-component-container .inline-success {\n margin: var(--ic-space-xs) 6px;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.dark:hover {\n --border-color: var(--ic-architectural-400);\n}\n\nic-input-component-container .inline-success > svg {\n fill: var(--ic-status-success);\n}\n\nic-input-component-container:hover {\n border-color: var(--ic-action-dark-hover);\n color: var(--ic-action-dark-hover);\n\n --expand-icon-hover: var(--ic-action-dark-hover);\n}\n\n.focus-indicator {\n display: flex;\n width: 100%;\n margin: -2px;\n padding: 2px;\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.dark:focus-within {\n box-shadow: var(--ic-border-focus);\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot left-icon - Content will be placed to the left of the input.\n */\n@Component({\n tag: \"ic-input-component-container\",\n styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n /**\n * disabled\n */\n @Prop() disabled: boolean = false;\n /**\n * readonly\n */\n @Prop() readonly: boolean = false;\n /**\n * validationStatus\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /**\n * small\n */\n @Prop() small: boolean = false;\n /**\n * multiLine\n */\n @Prop() multiLine: boolean = false;\n /**\n * validationInline\n */\n @Prop() validationInline: boolean = false;\n\n /**\n * Determines whether the dark variant of the input-component-container focus indicator should be displayed.\n */\n @Prop() dark?: boolean = false;\n\n /**\n * If true then fill width of container\n */\n @Prop() fullWidth: boolean = false;\n\n @Element() host: HTMLIcInputComponentContainerElement;\n\n render() {\n const {\n small,\n validationStatus,\n disabled,\n readonly,\n multiLine,\n fullWidth,\n dark,\n validationInline,\n } = this;\n const hasValidationStatus =\n this.validationStatus !== \"\" && !this.disabled && !this.readonly\n ? true\n : false;\n return (\n <Host\n class={{\n [\"small\"]: small,\n [validationStatus]: hasValidationStatus,\n [\"disabled\"]: disabled,\n [\"readonly\"]: readonly,\n [\"multiline\"]: multiLine,\n [\"fullwidth\"]: fullWidth,\n [\"dark\"]: dark,\n }}\n >\n <div\n class={{\n \"focus-indicator\": true,\n dark: dark,\n }}\n >\n {isSlotUsed(this.host, \"left-icon\") && (\n <div\n class={{\n [\"icon-container\"]: true,\n }}\n >\n <slot name=\"left-icon\" />\n </div>\n )}\n <slot></slot>\n\n {validationInline &&\n validationStatus === IcInformationStatus.Success && (\n <span\n class={{\n [\"inline-success\"]: true,\n }}\n innerHTML={successIcon}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n","ic-input-container .component-container {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n tag: \"ic-input-container\",\n styleUrl: \"ic-input-container.css\",\n})\nexport class InputContainer {\n /**\n * disabled\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * readonly\n */\n @Prop() readonly?: boolean = false;\n\n render() {\n return (\n <Host>\n <div\n class={{\n [\"component-container\"]: true,\n [\"disabled\"]: this.disabled,\n [\"readonly\"]: this.readonly,\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n","@import \"../../global/normalise.css\";\n\n@media (prefers-reduced-motion: no-preference) {\n :host([open]) .menu {\n transition: max-height var(--ic-transition-duration-slow);\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n max-height: 0;\n width: var(--input-width, 320px);\n color: var(--ic-color-primary-text);\n background-color: var(--ic-architectural-white);\n position: relative;\n z-index: var(--ic-z-index-popup-menu);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(:not(.no-focus):focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu {\n text-decoration: none;\n list-style-type: none;\n border: 1px solid var(--ic-architectural-400);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n visibility: hidden;\n max-height: 0;\n overflow-y: hidden;\n}\n\n.menu-scroll {\n overflow-y: auto;\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host([open]) {\n max-height: none;\n display: block;\n}\n\n:host([open]) .menu {\n visibility: visible;\n max-height: 322px;\n}\n\n:host(.full-width) {\n width: 100%;\n}\n\n.option {\n padding: 8px 7px;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n:host([small]) .option {\n padding: 4px 7px;\n}\n\n.option:last-child {\n border-radius: 0 0 1px 1px;\n}\n\n.option:first-child {\n border-radius: 1px 1px 0 0;\n}\n\n.option:not(.disabled-option):hover {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n.option:not(.disabled-option):active {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n.option:focus-visible {\n outline: none;\n}\n\n.option:not(.disabled-option) .option-description {\n color: var(--ic-color-secondary-text);\n}\n\n.option-text-container {\n pointer-events: none;\n}\n\n.check-icon {\n height: 24px;\n margin-left: 8px;\n pointer-events: none;\n}\n\n.focused-option .check-icon * {\n fill: white;\n}\n\n.option-group-title {\n padding: 24px 7px 8px;\n color: var(--ic-color-tertiary-text);\n}\n\n:host([small]) .option-group-title {\n padding: 12px 7px 4px;\n}\n\n.last-recommended-option {\n border-bottom: 1px solid var(--ic-architectural-400);\n}\n\n.disabled-option {\n color: var(--ic-architectural-200);\n cursor: default;\n pointer-events: none;\n}\n\n.focused-option,\n.focused-option .option-description {\n background-color: var(--ic-focus-blue) !important;\n color: var(--ic-color-white-text) !important;\n}\n\n:host(.no-results) li {\n cursor: no-drop;\n}\n\n:host(.no-results) li:hover {\n background-color: transparent;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Method,\n Listen,\n State,\n Watch,\n} from \"@stencil/core\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\nimport { IcActivationTypes, IcMenuOption } from \"../../utils/types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcOptionSelectEventDetail,\n IcMenuChangeEventDetail,\n IcMenuOptionIdEventDetail,\n} from \"./ic-menu.types\";\n\n@Component({\n tag: \"ic-menu\",\n styleUrl: \"ic-menu.css\",\n shadow: true,\n})\nexport class Menu {\n @Element() host: HTMLIcMenuElement;\n\n /**\n * Specify whether the menu is open.\n */\n @Prop({ reflect: true }) open!: boolean;\n\n /**\n * Provide the possible selection options.\n */\n @Prop() options!: IcMenuOption[];\n\n /**\n * Specify whether small styling is to be applied to the element.\n */\n @Prop({ reflect: true }) small?: boolean = false;\n\n /**\n * Id of the menu.\n */\n @Prop() menuId!: string;\n\n /**\n * The value of the currently selected option.\n */\n @Prop() value!: string;\n\n /**\n * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.\n */\n @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n /**\n * Reference to the input element.\n */\n @Prop() inputEl!: HTMLElement;\n\n /**\n * @internal - set if ic-menu is nested inside another component\n */\n @Prop() parentEl?: HTMLElement;\n\n /**\n * Label for the input element.\n */\n @Prop() inputLabel!: string;\n\n /**\n * Reference to an anchor element the menu will position itself from when rendered.\n */\n @Prop() anchorEl!: HTMLElement;\n\n /**\n * If true then fill width of container\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * @internal If true, autofocus on selected item when menu is open\n */\n @Prop() autoFocusOnSelected: boolean = true;\n\n @State() keyboardNav: boolean = false;\n @State() optionHighlighted: string;\n @State() focusFromSearchKeypress: boolean = false;\n @State() initialOptionsListRender: boolean = false;\n @State() preventIncorrectTabOrder: boolean = false;\n\n @Watch(\"options\")\n watchOptionsHandler(): void {\n this.ungroupedOptions = [];\n this.loadUngroupedOptions();\n }\n\n /**\n * Emitted when an option is selected.\n */\n @Event() optionSelect!: EventEmitter<IcOptionSelectEventDetail>;\n\n /**\n * Emitted when state of menu changes (i.e. open or close).\n */\n @Event() menuChange!: EventEmitter<IcMenuChangeEventDetail>;\n\n /**\n * Emitted when an option has been highlighted\n */\n @Event() menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;\n\n @Listen(\"icClear\", { target: \"document\" })\n handleClearListener(): void {\n this.optionHighlighted = \"\";\n }\n\n @Listen(\"icSubmitSearch\", { target: \"document\" })\n handleSubmitSearch(): void {\n const highlightedOptionIndex = this.options.findIndex(\n (option) => option.value === this.optionHighlighted\n );\n\n this.setInputValue(highlightedOptionIndex);\n }\n\n private menu: HTMLUListElement;\n private ungroupedOptions: IcMenuOption[] = [];\n private popperInstance: PopperInstance;\n\n // Prevents menu re-opening immediately after it is closed on blur when clicking input\n private preventClickOpen: boolean = false;\n\n private handleMenuChange = (open: boolean, focusInput?: boolean): void => {\n if (!open) this.popperInstance.destroy();\n this.menuChange.emit({ open, focusInput });\n\n if (!open && focusInput !== false) {\n this.inputEl.focus();\n this.preventClickOpen = false;\n }\n };\n\n private setNextOptionValue = (selectedOptionIndex: number): void => {\n if (this.ungroupedOptions[selectedOptionIndex + 1]) {\n this.optionSelect.emit({\n value: this.ungroupedOptions[selectedOptionIndex + 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[selectedOptionIndex + 1].value\n ),\n });\n } else {\n this.optionSelect.emit({\n value: this.ungroupedOptions[0].value,\n optionId: this.getOptionId(this.ungroupedOptions[0].value),\n });\n }\n };\n\n private setPreviousOptionValue = (selectedOptionIndex: number): void => {\n if (this.ungroupedOptions[selectedOptionIndex - 1]) {\n this.optionSelect.emit({\n value: this.ungroupedOptions[selectedOptionIndex - 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[selectedOptionIndex - 1].value\n ),\n });\n } else {\n this.optionSelect.emit({\n value: this.ungroupedOptions[this.ungroupedOptions.length - 1].value,\n optionId: this.getOptionId(\n this.ungroupedOptions[this.ungroupedOptions.length - 1].value\n ),\n });\n }\n };\n\n /**\n * If menu is opened with the mouse, emit menuChange custom event.\n */\n @Method()\n async handleClickOpen(): Promise<void> {\n if (!this.preventClickOpen) {\n this.menuChange.emit({ open: !this.open });\n this.keyboardNav = false;\n }\n this.preventClickOpen = false;\n }\n\n /**\n * Used alongside activationType\n * If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.\n * @param {KeyboardEvent} event - keyboard event\n */\n @Method()\n async handleKeyboardOpen(event: KeyboardEvent): Promise<void> {\n this.keyboardNav = false;\n\n if (this.activationType === \"automatic\") {\n this.autoSetInputValueKeyboardOpen(event);\n } else {\n this.keyboardNav = true;\n this.manSetInputValueKeyboardOpen(event);\n }\n }\n\n /**\n * @internal Used to highlight the first option in the menu.\n */\n @Method()\n async handleSetFirstOption(): Promise<void> {\n this.setHighlightedOption(0);\n }\n\n private arrowBehaviour = (event: KeyboardEvent): void => {\n event.preventDefault();\n this.handleMenuChange(true);\n };\n\n private setHighlightedOption = (highlightedIndex: number): void => {\n this.optionHighlighted = this.options[highlightedIndex].value || undefined;\n };\n\n private autoSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n const selectedOptionIndex = this.ungroupedOptions.findIndex(\n (option) => option.value === this.value\n );\n\n const isSearchableSelect = this.inputEl?.tagName === \"INPUT\";\n\n switch (event.key) {\n case \"ArrowDown\":\n this.keyboardNav = true;\n this.arrowBehaviour(event);\n this.setNextOptionValue(selectedOptionIndex);\n break;\n case \"ArrowUp\":\n this.keyboardNav = true;\n this.arrowBehaviour(event);\n this.setPreviousOptionValue(selectedOptionIndex);\n break;\n case \" \":\n case \"Enter\":\n if ((event.target as HTMLElement).id !== \"clear-button\") {\n this.handleMenuChange(true);\n }\n break;\n case \"Backspace\":\n if (isSearchableSelect) {\n this.inputEl.focus();\n }\n break;\n default:\n if (isSearchableSelect && event.key !== \"Tab\") {\n this.inputEl.focus();\n }\n break;\n }\n };\n\n private manSetInputValueKeyboardOpen = (event: KeyboardEvent) => {\n const highlightedOptionIndex = this.options.findIndex(\n (option) => option.value === this.optionHighlighted\n );\n\n this.menuOptionId.emit({ optionId: undefined });\n\n const getOptionId = (index: number): string =>\n Array.from(this.host.shadowRoot.querySelectorAll(\"li\"))[index].id;\n\n const isSearchBar = this.parentEl.tagName === \"IC-SEARCH-BAR\";\n\n switch (event.key) {\n case \"ArrowDown\":\n this.arrowBehaviour(event);\n if (highlightedOptionIndex < this.options.length - 1) {\n this.setHighlightedOption(highlightedOptionIndex + 1);\n this.menuOptionId.emit({\n optionId: getOptionId(highlightedOptionIndex + 1),\n });\n } else {\n this.setHighlightedOption(0);\n }\n this.preventIncorrectTabOrder = false;\n this.focusFromSearchKeypress = false;\n break;\n case \"ArrowUp\":\n this.arrowBehaviour(event);\n if (\n highlightedOptionIndex <= 0 ||\n highlightedOptionIndex > this.options.length + 1\n ) {\n this.setHighlightedOption(this.options.length - 1);\n this.menuOptionId.emit({\n optionId: getOptionId(this.options.length - 1),\n });\n } else {\n this.setHighlightedOption(highlightedOptionIndex - 1);\n this.menuOptionId.emit({\n optionId: getOptionId(highlightedOptionIndex - 1),\n });\n }\n this.preventIncorrectTabOrder = false;\n this.focusFromSearchKeypress = false;\n break;\n case \" \":\n case \"Enter\":\n event.preventDefault();\n this.setInputValue(highlightedOptionIndex);\n break;\n case \"Escape\":\n this.handleMenuChange(false);\n this.menuOptionId.emit({ optionId: undefined });\n break;\n case \"Shift\":\n case \"Tab\":\n this.preventIncorrectTabOrder = true;\n break;\n case \"Backspace\":\n if (isSearchBar) {\n (this.parentEl as HTMLIcSearchBarElement).setFocus();\n this.focusFromSearchKeypress = true;\n this.setHighlightedOption(0);\n }\n break;\n default:\n if (isSearchBar && event.key !== \"Tab\") {\n (this.parentEl as HTMLIcSearchBarElement).setFocus();\n this.focusFromSearchKeypress = true;\n this.setHighlightedOption(0);\n }\n break;\n }\n };\n\n private setInputValue = (highlightedOptionIndex: number) => {\n if (this.options[highlightedOptionIndex]) {\n this.optionSelect.emit({\n value: this.options[highlightedOptionIndex]?.value,\n });\n this.optionHighlighted = undefined;\n this.menuOptionId.emit({ optionId: undefined });\n }\n this.handleMenuChange(false);\n };\n\n private handleOptionClick = (event: Event): void => {\n const { value, label } = (event.target as HTMLLIElement).dataset;\n this.optionSelect.emit({ value, label });\n this.handleMenuChange(false);\n };\n\n private handleBlur = (event: FocusEvent): void => {\n if (event.relatedTarget !== this.inputEl) {\n if (!this.menu.contains(event.relatedTarget as HTMLElement)) {\n this.handleMenuChange(false, false);\n }\n } else {\n this.handleMenuChange(false);\n this.preventClickOpen = true;\n }\n };\n\n private handleMenuKeyDown = (event: KeyboardEvent) => {\n if (this.activationType === \"automatic\") {\n this.autoSetValueOnMenuKeyDown(event);\n }\n };\n\n private autoSetValueOnMenuKeyDown = (event: KeyboardEvent): void => {\n event.cancelBubble = true;\n const selectedOptionIndex = this.ungroupedOptions.findIndex(\n (option) => option.value === this.value\n );\n\n const isSearchableSelect = this.inputEl.tagName === \"INPUT\";\n\n switch (event.key) {\n case \"ArrowUp\":\n event.preventDefault();\n this.setPreviousOptionValue(selectedOptionIndex);\n this.keyboardNav = true;\n break;\n case \"ArrowDown\":\n event.preventDefault();\n this.setNextOptionValue(selectedOptionIndex);\n this.keyboardNav = true;\n break;\n case \"Home\":\n this.optionSelect.emit({\n value: this.ungroupedOptions[0].value,\n });\n this.keyboardNav = true;\n break;\n case \"End\":\n this.optionSelect.emit({\n value: this.ungroupedOptions[this.ungroupedOptions.length - 1].value,\n });\n this.keyboardNav = true;\n break;\n case \" \":\n case \"Enter\":\n case \"Escape\":\n this.handleMenuChange(false);\n break;\n case \"Backspace\":\n if (isSearchableSelect) {\n this.inputEl.focus();\n }\n break;\n case \"Shift\":\n break;\n default:\n if (isSearchableSelect && event.key !== \"Tab\") {\n this.inputEl.focus();\n }\n break;\n }\n };\n\n private handleMenuKeyUp = (event: KeyboardEvent): void => {\n if (event.key === \"Tab\" && event.shiftKey) {\n this.preventClickOpen = false;\n }\n };\n\n private getOptionId = (value: string): string => {\n return `${this.menuId}-${value}`;\n };\n\n private getOptionAriaLabel = (\n option: IcMenuOption,\n parentOption: IcMenuOption\n ): string => {\n let ariaLabel = option.label;\n\n if (option.description) {\n ariaLabel = `${ariaLabel}, ${option.description}`;\n }\n\n if (parentOption) {\n return `${ariaLabel}, ${parentOption.label} group`;\n } else {\n return ariaLabel;\n }\n };\n\n private getSortedOptions = (options: IcMenuOption[]): IcMenuOption[] => {\n return options.sort((optionA, optionB) =>\n optionA.recommended && !optionB.recommended ? -1 : 0\n );\n };\n\n private isManualMode = this.activationType === \"manual\";\n\n private scrollToSelected = (menu: HTMLUListElement) => {\n const selectedOption = menu.querySelector(\n \".option[aria-selected]\"\n ) as HTMLElement;\n\n if (selectedOption) {\n const elTop = selectedOption.offsetTop + selectedOption.offsetHeight;\n if (\n elTop > menu.scrollTop + menu.offsetHeight ||\n elTop < menu.scrollTop + menu.offsetHeight\n ) {\n menu.scrollTop = selectedOption.offsetTop;\n }\n selectedOption.focus();\n }\n };\n\n private loadUngroupedOptions = () => {\n if (this.options.length > 0) {\n this.options.map((option) => {\n if (option.children) {\n option.children.map(\n (option) => !option.disabled && this.ungroupedOptions.push(option)\n );\n } else if (!option.disabled) {\n this.ungroupedOptions.push(option);\n }\n });\n }\n this.ungroupedOptions = this.getSortedOptions(this.ungroupedOptions);\n };\n\n connectedCallback(): void {\n if (this.parentEl?.tagName === \"IC-SEARCH-BAR\") {\n this.setHighlightedOption(0);\n this.initialOptionsListRender = true;\n }\n }\n\n componentWillLoad(): void {\n this.loadUngroupedOptions();\n }\n\n componentDidLoad(): void {\n let optionsHeight = 0;\n this.host.shadowRoot\n .querySelectorAll(\".option\")\n .forEach((option) => (optionsHeight += option.clientHeight));\n if (optionsHeight > 320) {\n this.menu.classList.add(\"menu-scroll\");\n }\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.open, propName: \"open\" },\n { prop: this.options, propName: \"options\" },\n { prop: this.menuId, propName: \"menu-id\" },\n { prop: this.inputLabel, propName: \"input-label\" },\n //NOTE: no check for value, input-el or anchor-el as otherwise get console errors on first load of select component\n ],\n \"Menu\"\n );\n }\n\n componentDidRender(): void {\n if (this.open) {\n this.popperInstance = createPopper(this.anchorEl, this.host, {\n placement: \"bottom\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 7],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n }\n }\n\n componentDidUpdate(): void {\n const inputValueInOptions: boolean = this.options.some(\n (option) => option.value === this.value\n );\n\n const optionHighlightedIsSet =\n this.optionHighlighted !== null &&\n this.optionHighlighted !== undefined &&\n this.optionHighlighted !== \"\";\n\n if (this.open && this.options.length !== 0) {\n if (\n this.value &&\n this.keyboardNav &&\n inputValueInOptions &&\n this.autoFocusOnSelected\n ) {\n this.scrollToSelected(this.menu);\n } else if (\n this.inputEl.tagName !== \"IC-TEXT-FIELD\" &&\n this.inputEl.tagName !== \"INPUT\"\n ) {\n this.menu.focus();\n } else if (\n optionHighlightedIsSet &&\n !this.focusFromSearchKeypress &&\n !this.preventIncorrectTabOrder\n ) {\n const highlightedEl = this.host.shadowRoot.querySelector(\n `li[data-value=\"${this.optionHighlighted}\"]`\n ) as HTMLElement;\n\n if (highlightedEl) {\n highlightedEl.focus();\n }\n }\n }\n }\n\n private displayOption = (\n option: IcMenuOption,\n index?: number,\n parentOption?: IcMenuOption\n ): HTMLLIElement => {\n const { open, value } = this;\n\n return (\n <li\n id={this.getOptionId(option.value)}\n class={{\n option: true,\n \"focused-option\": this.isManualMode\n ? (this.keyboardNav || this.initialOptionsListRender) &&\n option.value === this.optionHighlighted\n : this.keyboardNav && option.value === value,\n \"last-recommended-option\":\n option.recommended &&\n this.options[index + 1] &&\n !this.options[index + 1].recommended,\n \"disabled-option\": option.disabled,\n }}\n role=\"option\"\n tabindex={\n open &&\n (option.value === value || option.value === this.optionHighlighted) &&\n this.keyboardNav\n ? \"0\"\n : \"-1\"\n }\n aria-label={this.getOptionAriaLabel(option, parentOption)}\n aria-selected={option.value === value}\n aria-disabled={option.disabled ? \"true\" : \"false\"}\n onClick={this.handleOptionClick}\n onBlur={this.handleBlur}\n onMouseDown={(event) => event.preventDefault()}\n data-value={option.value}\n data-label={option.label}\n >\n <div class=\"option-text-container\">\n <ic-typography variant=\"body\" aria-hidden=\"true\">\n <p>{option.label}</p>\n </ic-typography>\n {option.description && (\n <ic-typography\n id={`${this.getOptionId(option.value)}-description`}\n class=\"option-description\"\n variant=\"caption\"\n aria-hidden=\"true\"\n >\n <p>{option.description}</p>\n </ic-typography>\n )}\n </div>\n {option.value === value &&\n this.parentEl.tagName !== \"IC-SEARCH-BAR\" && (\n <span class=\"check-icon\" innerHTML={Check} />\n )}\n </li>\n );\n };\n\n render() {\n const { inputLabel, options, menuId, value, fullWidth } = this;\n\n return (\n <Host\n class={{\n \"full-width\": fullWidth,\n \"no-focus\": this.inputEl?.tagName === \"INPUT\",\n }}\n >\n {options.length !== 0 && (\n <ul\n id={menuId}\n class=\"menu\"\n role=\"listbox\"\n aria-label={inputLabel}\n aria-activedescendant={\n value != null && value !== \"\" ? this.getOptionId(value) : \"\"\n }\n tabindex={\n open && !this.keyboardNav && this.inputEl?.tagName !== \"INPUT\"\n ? \"0\"\n : \"-1\"\n }\n ref={(el) => (this.menu = el)}\n onKeyDown={this.handleMenuKeyDown}\n onKeyUp={this.handleMenuKeyUp}\n onBlur={this.handleBlur}\n >\n {this.getSortedOptions(options).map((option, index) => {\n if (option.children) {\n if (option.children.length > 0) {\n return (\n <div>\n <ic-typography\n class=\"option-group-title\"\n role=\"presentation\"\n variant=\"subtitle-small\"\n >\n <p>{option.label}</p>\n </ic-typography>\n {option.children.map((childOption) =>\n this.displayOption(childOption, index, option)\n )}\n </div>\n );\n } else {\n return null;\n }\n } else {\n return this.displayOption(option, index);\n }\n })}\n </ul>\n )}\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as e,h as i,H as s,g as o}from"./p-f9370be6.js";import{a as n,r,h as a}from"./p-c15bb762.js";import"./p-6f57b13c.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}ic-input-label.error{color:var(--ic-status-error)}ic-input-label ic-typography{margin-bottom:var(--ic-space-sm)}';const h=class{constructor(i){t(this,i);this.icChange=e(this,"icChange",7);this.handleKeyDown=t=>{switch(t.key){case"ArrowDown":case"ArrowRight":this.radioOptions[this.getNextItemToSelect(this.selectedChild,true)].selected=true;t.preventDefault();break;case"ArrowUp":case"ArrowLeft":this.radioOptions[this.getNextItemToSelect(this.selectedChild,false)].selected=true;t.preventDefault()}};this.getNextItemToSelect=(t,e)=>{const i=this.radioOptions.length-1;if(t<1){t=0}let s=e?t+1:t-1;if(s<0){s=i}else if(s>i){s=0}if(this.radioOptions[s].disabled){s=this.getNextItemToSelect(s,e)}return s};this.label=undefined;this.name=undefined;this.required=false;this.hideLabel=false;this.disabled=false;this.helperText=undefined;this.small=false;this.validationStatus="";this.validationText="";this.checkedValue="";this.selectedChild=-1}selectHandler(t){this.checkedValue=t.detail.value;this.icChange.emit({value:this.checkedValue});if(this.radioOptions!==undefined){this.radioOptions.forEach(((t,e)=>{t.selected=this.checkedValue===t.value;if(t.selected){this.selectedChild=e}}));this.radioOptions[0].shadowRoot.querySelector("input").tabIndex=this.selectedChild>0?-1:0}}componentDidLoad(){this.radioOptions=Array.from(this.host.querySelectorAll("ic-radio-option"));this.radioOptions.forEach(((t,e)=>{if(!t.selected){t.selected=this.checkedValue===t.value}t.name=this.name;t.groupLabel=this.label;if(t.selected){this.selectedChild=e;this.checkedValue=t.value}}));this.radioOptions[0].shadowRoot.querySelector("input").tabIndex=this.selectedChild>0?-1:0;n([{prop:this.label,propName:"label"},{prop:this.name,propName:"name"}],"Radio Group")}render(){const t=a(this.validationStatus,this.disabled);r(true,this.host,this.name,this.checkedValue,this.disabled);return i(s,{onKeyDown:this.handleKeyDown},i("div",{role:"radiogroup","aria-label":`${this.label}${this.required?", required":""}`},!this.hideLabel&&i("ic-input-label",{class:{[`${this.validationStatus}`]:true},label:this.label,helperText:this.helperText,required:this.required,disabled:this.disabled}),i("slot",null)),i("ic-input-validation",{ariaLiveMode:"polite",status:t?this.validationStatus:"",message:t?this.validationText:""}))}get host(){return o(this)}};h.style=l;export{h as ic_radio_group};
|
2
|
-
//# sourceMappingURL=p-27528d04.entry.js.map
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as i,h as a,H as s,g as e}from"./p-f9370be6.js";import{n,A as o,i as r}from"./p-c15bb762.js";import"./p-6f57b13c.js";const l=":host{display:block}.popout-modal{position:absolute;top:0;right:0;bottom:0;left:0}.popout-menu{position:fixed;top:0;right:0;width:256px;bottom:0;background-color:var(--ic-architectural-20);color:var(--ic-color-primary-text);box-shadow:var(--ic-elevation-overlay);overflow-y:auto;overflow-x:hidden;z-index:calc(var(--ic-z-index-overlay) / 2)}:host(.inline) .popout-menu{position:absolute}.menu-close-button-container{position:relative;left:190px;padding:var(--ic-space-md) 0}.nav-group-first{padding-bottom:0}.menu-buttons-container{padding:var(--ic-space-sm) 0;border-bottom:1px solid var(--ic-architectural-200)}.menu-buttons-container-nav-item-above{margin-top:var(--ic-space-md);border-top:1px solid var(--ic-architectural-200)}.menu-status-version-container{display:inline-flex;margin:var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl)}.menu-status{background-color:var(--ic-architectural-500);color:var(--ic-color-white-text);border-radius:80px;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) var(--ic-space-sm);margin-right:var(--ic-space-xs)}.menu-version{border-radius:16px;background-color:var(--ic-architectural-100);padding:var(--ic-space-xxs) var(--ic-space-sm)}.menu-status-text,.menu-version-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px}.navigation-landmark-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}";const c=class{constructor(a){t(this,a);this.icNavigationMenuClose=i(this,"icNavigationMenuClose",7);this.hasButtons=false;this.hasNavigation=false;this.navItemAboveButtons=false;this.navGroupFirst=false;this.lastTabStop=null;this.closeButton=null;this.closeMenu=()=>{this.icNavigationMenuClose.emit()};this.focusCloseButton=()=>{if(this.closeButton.setFocus){this.closeButton.setFocus()}};this.focusLastTabStop=()=>{let t;if(this.lastTabStop!==null){switch(this.lastTabStop.tagName){case"IC-NAVIGATION-BUTTON":t=this.lastTabStop;t.setFocus();break;case"IC-NAVIGATION-ITEM":t=this.lastTabStop;t.setFocus();break;case"IC-NAVIGATION-GROUP":t=this.lastTabStop;t.setFocus();break;case"A":this.lastTabStop.focus();break}}};this.version="";this.status=""}navItemClickHandler(){this.closeMenu()}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(document.activeElement===this.navBarEl){t.preventDefault();this.focusLastTabStop()}}else if(document.activeElement===this.lastTabStop||this.lastTabStop===null){t.preventDefault();this.focusCloseButton()}}else if(t.key==="Escape"){this.closeMenu()}}componentWillLoad(){this.navBarEl=document.querySelector("ic-top-navigation");const t=n(this.el,"navigation");if(t){this.hasNavigation=true;const i=t[t.length-1];if(i.tagName==="IC-NAVIGATION-ITEM"){this.navItemAboveButtons=true}const a=t[0];if(a.tagName==="IC-NAVIGATION-GROUP"){this.navGroupFirst=true}}const i=n(this.el,"buttons");if(i!==null){this.hasButtons=true;this.lastTabStop=i[i.length-1]}else{if(this.hasNavigation){const i=t[t.length-1];const a=o(i,"navigation-item");if(a!==null){this.lastTabStop=a}else{this.lastTabStop=i}}}}componentDidLoad(){this.focusCloseButton()}componentWillRender(){this.hasNavigation=r(this.el,"navigation");this.hasButtons=r(this.el,"buttons")}render(){return a(s,null,a("div",{class:"popout-modal",onClick:this.closeMenu}),a("div",{class:"popout-menu",role:"dialog","aria-modal":"true","aria-label":`${this.hasNavigation?"Navigation":"App"} menu`},a("span",{"aria-hidden":"true",id:"navigation-landmark-text",class:"navigation-landmark-text"},"Main navigation"),a("nav",{"aria-labelledby":"navigation-landmark-text","aria-hidden":this.hasNavigation?"false":"true"},a("div",{class:{["menu-close-button-container"]:true,["nav-group-first"]:this.navGroupFirst}},a("ic-button",{ref:t=>this.closeButton=t,id:"menu-close-button",class:"menu-close-button",variant:"icon",size:"large","aria-label":`Close ${this.hasNavigation?"navigation":"app"} menu`,onClick:this.closeMenu},a("svg",{slot:"icon",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{d:"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z",fill:"#1759BC"})))),this.hasNavigation&&a("slot",{name:"navigation"})),this.hasButtons&&a("div",{class:{["menu-buttons-container"]:true,["menu-buttons-container-nav-item-above"]:this.navItemAboveButtons}},a("slot",{name:"buttons"})),(this.status!==""||this.version!=="")&&a("div",{class:"menu-status-version-container"},this.status!==""&&a("div",{class:"menu-status"},a("ic-typography",{variant:"label-uppercase","aria-label":"app tag",class:"menu-status-text"},this.status)),this.version!==""&&a("div",{class:"menu-version"},a("ic-typography",{variant:"label",class:"menu-version-text","aria-label":"app version"},this.version)))))}get el(){return e(this)}};c.style=l;export{c as ic_navigation_menu};
|
2
|
-
//# sourceMappingURL=p-3013158d.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-tab/ic-tab.css?tag=ic-tab&encapsulation=shadow","src/components/ic-tab/ic-tab.tsx"],"names":["icTabCss","Tab","this","isInitialRender","focusFromClick","handleClick","tabClick","emit","tabId","contextId","position","tabPosition","tabFocus","handleFocus","handleMouseDown","[object Object]","onComponentRequiredPropUndefined","prop","propName","disabled","selected","appearance","h","Host","class","IcThemeForegroundEnum","Dark","role","aria-selected","onClick","onFocus","onMouseDown","aria-disabled","tabindex","host","querySelector","name","variant"],"mappings":"wIAAA,MAAMA,EAAW,mzHCyBJC,EAAG,qGAiCNC,KAAAC,gBAA2B,KAC3BD,KAAAE,eAA0B,MAE1BF,KAAAG,YAAc,KACpBH,KAAKI,SAASC,KAAK,CACjBC,MAAON,KAAKM,MACZC,UAAWP,KAAKO,UAChBC,SAAUR,KAAKS,cAEjB,GAAIT,KAAKE,eAAgB,CACvBF,KAAKU,SAASL,KAAK,CACjBC,MAAON,KAAKM,MACZC,UAAWP,KAAKO,UAChBC,SAAUR,KAAKS,cAEjBT,KAAKE,eAAiB,QAIlBF,KAAAW,YAAc,KACpB,IAAKX,KAAKE,eAAgB,CACxBF,KAAKU,SAASL,KAAK,CACjBC,MAAON,KAAKM,MACZC,UAAWP,KAAKO,UAChBC,SAAUR,KAAKS,gBAKbT,KAAAY,gBAAkB,KAIxBZ,KAAKE,eAAiB,qBA9DsB,wBAKjB,oBAGiB,sEASI,QAgDlDW,qBACEb,KAAKC,gBAAkB,MAGzBY,mBACEC,EACE,CAAC,CAAEC,KAAMf,KAAKS,YAAaO,SAAU,iBACrC,OAIJH,SACE,MAAMI,SAAEA,EAAQC,SAAEA,EAAQC,WAAEA,GAAenB,KAC3C,OACEoB,EAACC,EAAI,CACHC,MAAO,CACLT,CAAC,oBAAqBb,KAAKC,gBAC3BY,CAAC,eAAgBM,IAAeI,EAAsBC,MAExDC,KAAK,MAAKC,gBACKR,EAAW,OAAS,QACnCS,QAAS3B,KAAKG,YACdyB,QAAS5B,KAAKW,YACdkB,YAAa7B,KAAKY,gBAAekB,gBAClBb,EAAW,OAAS,QACnCc,SAAU/B,KAAKkB,SAAW,GAAK,GAE9BlB,KAAKgC,KAAKC,cAAc,kBAAoBb,EAAA,OAAA,CAAMc,KAAK,SACxDd,EAAA,gBAAA,CAAeE,MAAM,eAAea,QAAQ,SAC1Cf,EAAA,OAAA,KACEA,EAAA,OAAA","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n --indicator-initial-color: rgba(23 89 188 / 0%);\n --indicator-color: var(--ic-action-default);\n --focus-indicator: var(--ic-border-focus);\n --label-color: var(--ic-color-primary-text);\n --background-color-hover: var(--ic-action-default-bg-hover);\n --background-color-active: var(--ic-action-default-bg-active);\n\n display: flex;\n align-items: center;\n border-radius: 0;\n color: var(--label-color);\n height: 40px;\n padding: 0 var(--ic-space-md);\n cursor: pointer;\n position: relative;\n border-bottom: var(--ic-space-xxs) solid var(--indicator-initial-color);\n gap: var(--ic-space-xs);\n transition: all var(--ic-easing-transition-fast);\n}\n\n:host(:focus) {\n box-shadow: var(--focus-indicator);\n border-radius: var(--ic-border-radius);\n}\n\n:host(:focus-visible) {\n outline: none;\n}\n\n:host(:hover) {\n background-color: var(--background-color-hover);\n}\n\n:host(:active) {\n background-color: var(--background-color-active);\n}\n\n:host(.ic-tab-dark) {\n --indicator-initial-color: rgb(255 255 255 / 0%);\n --indicator-color: rgb(255 255 255 / 100%);\n --focus-indicator: var(--ic-border-focus);\n --label-color: white;\n --background-color-hover: var(--ic-action-dark-bg-hover);\n --background-color-active: var(--ic-action-dark-bg-active);\n}\n\n:host([selected]) {\n border-bottom: var(--ic-space-xxs) solid var(--indicator-color);\n}\n\n:host([disabled]) {\n pointer-events: none;\n color: var(--ic-architectural-300);\n}\n\n:host([selected].with-transition) {\n transition: all var(--ic-easing-transition-slow),\n border-color var(--ic-transition-duration-slow);\n}\n\n.ic-tab-label {\n pointer-events: none;\n}\n\n::slotted(svg) {\n fill: var(--label-color);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n} from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be rendered next to the tab label.\n */\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n @Element() host: HTMLIcTabElement;\n\n /** @internal Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /**\n * Disables the tab.\n */\n @Prop() disabled?: boolean = false;\n\n /** @internal Will display a selected indicator and set tabIndex. */\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /** @internal The shared ID between panel and tab. */\n @Prop({ reflect: true }) tabId?: string;\n\n /** @internal The position of the tab inside the tabs array in context. */\n @Prop() tabPosition!: number;\n\n /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"light\";\n\n /**\n * Called when a tab is selected.\n */\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /**\n * @internal Called when a tab is focussed.\n */\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n private isInitialRender: boolean = true;\n private focusFromClick: boolean = false;\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a seperate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.tabPosition, propName: \"tab-position\" }],\n \"Tab\"\n );\n }\n\n render() {\n const { disabled, selected, appearance } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-dark\"]: appearance === IcThemeForegroundEnum.Dark,\n }}\n role=\"tab\"\n aria-selected={selected ? \"true\" : \"false\"}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n aria-disabled={disabled ? \"true\" : \"false\"}\n tabindex={this.selected ? 0 : -1}\n >\n {this.host.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,h as e,H as s,g as n}from"./p-f9370be6.js";import{a as i}from"./p-c15bb762.js";import"./p-6f57b13c.js";const o=":host{display:block}";const a=class{constructor(e){t(this,e);this.contextId="default";this.tabPosition=undefined;this.panelId=undefined;this.selectedTab=undefined}componentDidLoad(){i([{prop:this.tabPosition,propName:"tab-position"}],"Tab Panel")}render(){const{panelId:t,selectedTab:n}=this;return e(s,{role:"tabpanel",hidden:t!==undefined&&n!==undefined?!(t===n):true},e("div",null,e("slot",null)))}get host(){return n(this)}};a.style=o;export{a as ic_tab_panel};
|
2
|
-
//# sourceMappingURL=p-3d6902a3.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-tab-panel/ic-tab-panel.css?tag=ic-tab-panel&encapsulation=shadow","src/components/ic-tab-panel/ic-tab-panel.tsx"],"names":["icTabPanelCss","TabPanel","[object Object]","onComponentRequiredPropUndefined","prop","this","tabPosition","propName","panelId","selectedTab","h","Host","role","hidden","undefined"],"mappings":"qHAAA,MAAMA,EAAgB,6BCQTC,EAAQ,8CAM2B,uFAW9CC,mBACEC,EACE,CAAC,CAAEC,KAAMC,KAAKC,YAAaC,SAAU,iBACrC,aAIJL,SACE,MAAMM,QAAEA,EAAOC,YAAEA,GAAgBJ,KACjC,OACEK,EAACC,EAAI,CACHC,KAAK,WACLC,OACEL,IAAYM,WAAaL,IAAgBK,YACnCN,IAAYC,GACd,MAGNC,EAAA,MAAA,KACEA,EAAA,OAAA","sourcesContent":[":host {\n display: block;\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-tab-panel\",\n styleUrl: \"ic-tab-panel.css\",\n shadow: true,\n})\nexport class TabPanel {\n @Element() host: HTMLIcTabPanelElement;\n\n /**\n * Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.\n */\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /** @internal The position of the tab panel inside the tabs array in context. */\n @Prop({ reflect: true }) tabPosition!: number;\n\n /** @internal The shared ID that links the panel and tab. */\n @Prop({ reflect: true }) panelId?: string;\n\n /** @internal The shared ID of the currently selected tab. */\n @Prop() selectedTab?: string;\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.tabPosition, propName: \"tab-position\" }],\n \"Tab Panel\"\n );\n }\n\n render() {\n const { panelId, selectedTab } = this;\n return (\n <Host\n role=\"tabpanel\"\n hidden={\n panelId !== undefined && selectedTab !== undefined\n ? !(panelId === selectedTab)\n : true\n }\n >\n <div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-page-header/ic-page-header.css?tag=ic-page-header&encapsulation=shadow","src/components/ic-page-header/ic-page-header.tsx"],"names":["icPageHeaderCss","PageHeader","this","resizeObserver","resizeObserverCallback","reverseOrder","applyReverseOrder","runResizeObserver","ResizeObserver","observe","el","currSize","getCurrentDeviceSize","deviceSize","actionArea","shadowRoot","querySelector","actionHeights","i","actionContent","length","action","actionHeight","offsetHeight","undefined","push","max","Math","actionAreaHeight","DEVICE_SIZES","S","areButtonsReversed","reverse","forEach","btn","append","XL","[object Object]","Array","from","querySelectorAll","checkResizeObserver","disconnect","small","border","heading","subheading","aligned","sticky","stickyDesktopOnly","h","Host","class","isSlotUsed","fullHeight","name","variant","aria-label"],"mappings":"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","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n display: block;\n}\n\n:host(.sticky) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n}\n\nheader {\n background-color: var(--ic-architectural-40);\n}\n\nheader.border-bottom {\n border-bottom: 1px solid var(--ic-architectural-300);\n}\n\nheader.tabs {\n padding-top: var(--ic-space-md);\n}\n\n.breadcrumb-area {\n margin-bottom: var(--ic-space-md);\n}\n\n.main-content {\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-areas:\n \"title-area action-area\"\n \"input-area action-area\";\n column-gap: var(--ic-space-md);\n justify-content: space-between;\n width: 100%;\n}\n\n.title-area {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 304px;\n grid-area: title-area;\n}\n\n.header-content {\n display: flex;\n align-items: center;\n width: 100%;\n flex-wrap: wrap;\n row-gap: var(--ic-space-xs);\n column-gap: var(--ic-space-md);\n}\n\n.heading {\n display: inline-block;\n overflow-wrap: break-word;\n hyphens: auto;\n}\n\n.subheading.small {\n margin-top: var(--ic-space-xs);\n}\n\n.action-area {\n display: flex;\n gap: var(--ic-space-md);\n flex-flow: row wrap;\n justify-self: end;\n justify-content: flex-end;\n height: fit-content;\n grid-area: action-area;\n}\n\n.input-area,\n.navigation-area {\n margin-top: var(--ic-space-md);\n width: 100%;\n}\n\n.tabs-slot {\n display: flex;\n overflow-x: auto;\n padding: 8px;\n margin: -8px;\n}\n\n.input-area {\n grid-area: input-area;\n}\n\n@media screen and (max-width: 576px) {\n .main-content {\n grid-template-areas:\n \"title-area\"\n \"action-area\"\n \"input-area\";\n justify-content: flex-start;\n }\n\n .action-area {\n min-width: 100%;\n margin-top: var(--ic-space-md);\n justify-content: start;\n }\n}\n\n@media screen and (min-width: 992px) {\n :host(.sticky-desktop) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment } from \"../../utils/types\";\n\nimport {\n isSlotUsed,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/**\n * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n */\n\n@Component({\n tag: \"ic-page-header\",\n styleUrl: \"ic-page-header.css\",\n shadow: true,\n})\nexport class PageHeader {\n @Element() el: HTMLIcPageHeaderElement;\n /**\n * The title to render on the component.\n */\n @Prop() heading?: string;\n /**\n * The subtitle to render on the component.\n */\n @Prop() subheading?: string;\n /**\n * How the component should be aligned.\n */\n @Prop() aligned?: IcAlignment = \"left\";\n /**\n * Whether the component uses small styling.\n */\n @Prop() small?: boolean = false;\n /**\n * Set whether the bottom border is used\n */\n @Prop() border?: boolean = true;\n /**\n * Set whether the header is sticky at all breakpoints\n */\n @Prop() sticky?: boolean = false;\n /** Set whether the header is only sticky for viewport widths of 992px and above\n */\n @Prop() stickyDesktopOnly?: boolean = false;\n /** Set whether the reading pattern and tab order change in the action area for viewport widths of above 576px and when actions have not wrapped\n */\n @Prop() reverseOrder?: boolean = false;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n @State() areButtonsReversed: boolean = false;\n\n @State() actionContent: Node[];\n\n private resizeObserver: ResizeObserver = null;\n\n private resizeObserverCallback = () => {\n if (this.reverseOrder) {\n this.applyReverseOrder();\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private applyReverseOrder = (): void => {\n const currSize = getCurrentDeviceSize();\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n\n const actionArea = this.el.shadowRoot.querySelector(\n \"div.action-area\"\n ) as HTMLElement;\n const actionHeights: number[] = [];\n\n /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n for (let i = 0; i < this.actionContent.length; i++) {\n const action = this.actionContent[i] as HTMLElement;\n let actionHeight = action.offsetHeight;\n if (actionHeight === undefined) {\n actionHeight = 0;\n }\n actionHeights.push(actionHeight);\n }\n\n const max = Math.max(...actionHeights);\n\n /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoiint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n let actionAreaHeight = actionArea.offsetHeight;\n\n if (actionAreaHeight === undefined) {\n actionAreaHeight = 0;\n }\n\n if (\n this.deviceSize > DEVICE_SIZES.S &&\n actionAreaHeight <= max &&\n !this.areButtonsReversed\n ) {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string | Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n } else if (\n ((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n this.deviceSize <= DEVICE_SIZES.S) &&\n this.areButtonsReversed\n ) {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string | Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n }\n };\n\n componentWillLoad(): void {\n this.actionContent = Array.from(\n this.el.querySelectorAll(`[slot=\"actions\"]`)\n );\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const {\n small,\n border,\n heading,\n subheading,\n aligned,\n sticky,\n stickyDesktopOnly,\n } = this;\n\n return (\n <Host\n class={{\n [\"sticky\"]: sticky,\n [\"sticky-desktop\"]: !sticky && stickyDesktopOnly,\n }}\n >\n <header\n class={{\n [\"border-bottom\"]: border,\n [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n }}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight={isSlotUsed(this.el, \"tabs\")}\n >\n {isSlotUsed(this.el, \"breadcrumbs\") && (\n <div class=\"breadcrumb-area\">\n <slot name=\"breadcrumbs\" />\n </div>\n )}\n <div class=\"main-content\">\n <div class=\"title-area\">\n <div class=\"header-content\">\n <slot name=\"heading\">\n <ic-typography\n variant={small ? \"h4\" : \"h2\"}\n class=\"heading\"\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n <slot name=\"heading-adornment\" />\n </div>\n <div>\n <slot name=\"subheading\">\n {subheading && (\n <ic-typography\n variant=\"body\"\n class={{ [\"subheading\"]: true, [\"small\"]: small }}\n >\n {subheading}\n </ic-typography>\n )}\n </slot>\n </div>\n </div>\n {isSlotUsed(this.el, \"actions\") && (\n <div class=\"action-area\">\n <slot name=\"actions\" />\n </div>\n )}\n {isSlotUsed(this.el, \"input\") && (\n <div class=\"input-area\">\n <slot name=\"input\" />\n </div>\n )}\n </div>\n\n {(isSlotUsed(this.el, \"stepper\") ||\n isSlotUsed(this.el, \"tabs\")) && (\n <div class=\"navigation-area\">\n {isSlotUsed(this.el, \"stepper\") &&\n !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n {isSlotUsed(this.el, \"tabs\") && (\n <nav\n class=\"tabs-slot\"\n aria-label=\"navigation-landmark-page-header\"\n >\n <slot name=\"tabs\" />\n </nav>\n )}\n </div>\n )}\n </ic-section-container>\n </header>\n </Host>\n );\n }\n}\n"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-data-row/ic-data-row.css?tag=ic-data-row&encapsulation=shadow","src/components/ic-data-row/ic-data-row.tsx"],"names":["icDataRowCss","DataRow","this","resizeObserver","hasEndComponent","runResizeObserver","ResizeObserver","checkLabelAbove","observe","el","DEVICE_SIZES","XL","[object Object]","rowSize","_a","shadowRoot","querySelector","clientWidth","S","entitySize","M","component","querySelectorAll","forEach","child","setAttribute","label","deviceSize","getCurrentDeviceSize","slotHasContent","checkResizeObserver","labelEndComponent","disconnect","value","small","h","Host","class","role","name","variant"],"mappings":"0IAAA,MAAMA,EAAe,6/FCkBRC,EAAO,+BAsBVC,KAAAC,eAAiC,KAEjCD,KAAAE,gBAA2B,MAE3BF,KAAAG,kBAAoB,KAC1BH,KAAKC,eAAiB,IAAIG,gBAAe,KACvCJ,KAAKK,qBAGPL,KAAKC,eAAeK,QAAQN,KAAKO,0DAfV,sBAEKC,EAAaC,6BAgBnCC,wBACN,MAAMC,GAAUC,EAAAZ,KAAKO,GAAGM,WAAWC,cAAc,YAAQ,MAAAF,SAAA,OAAA,EAAAA,EAAEG,YAC3D,GAAIJ,EAAU,GAAKH,EAAaQ,EAAG,CACjChB,KAAKiB,WAAa,UACb,GAAIN,EAAU,GAAKH,EAAaU,EAAG,CACxClB,KAAKiB,WAAa,QACb,CACLjB,KAAKiB,WAAa,MAIdP,oBACN,MAAMS,EAAYnB,KAAKO,GAAGM,WAAWO,iBACnC,4BAGFD,EAAUE,SAASC,GACjBA,EAAMC,aAAa,aAAc,OAASvB,KAAKwB,MAAQ,UAI3Dd,oBACEV,KAAKyB,WAAaC,IAClB1B,KAAKE,gBAAkByB,EAAe3B,KAAKO,GAAI,iBAGjDG,mBACEkB,EAAoB5B,KAAKG,mBACzBH,KAAKK,kBACL,GAAIL,KAAKE,gBAAiB,CACxBF,KAAK6B,qBAITnB,uBACE,GAAIV,KAAKC,iBAAmB,KAAM,CAChCD,KAAKC,eAAe6B,cAIxBpB,SACE,MAAMc,MAAEA,EAAKO,MAAEA,EAAKC,MAAEA,GAAUhC,KAEhC,OACEiC,EAACC,EAAI,CACHC,MAAO,CACLzB,CAAC,SAAUsB,EACXtB,CAAC,qBAAsBV,KAAKiB,aAAe,IAC3CP,CAAC,iBAAkBV,KAAKiB,aAAe,MAEzCmB,KAAK,YAELH,EAAA,MAAA,CAAKE,MAAM,QACTF,EAAA,MAAA,CAAKE,MAAM,cACTF,EAAA,MAAA,CAAKE,MAAM,SACTF,EAAA,OAAA,CAAMI,KAAK,SACTJ,EAAA,gBAAA,CACEK,QACEtC,KAAKiB,aAAe,KAAO,QAAU,kBAGtCO,KAIPS,EAAA,MAAA,CAAKE,MAAM,SACTF,EAAA,OAAA,CAAMI,KAAK,SACTJ,EAAA,gBAAA,CAAeK,QAAQ,QAAQP,MAIpC/B,KAAKE,iBACJ+B,EAAA,MAAA,CAAKE,MAAM,iBACTF,EAAA,MAAA,CAAKG,KAAK,QACRH,EAAA,OAAA,CAAMI,KAAK,qBAKnBJ,EAAA,MAAA,CAAKE,MAAM","sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n position: relative;\n display: block;\n}\n\n.data {\n display: flex;\n align-items: center;\n}\n\n.text-cells {\n display: flex;\n flex-grow: 1;\n min-width: 0;\n}\n\n.label {\n width: 200px;\n min-width: 200px;\n margin-right: var(--ic-space-md);\n color: var(--ic-color-tertiary-text);\n}\n\n.value {\n flex-grow: 1;\n}\n\n.end-component {\n width: fit-content;\n margin-left: 56px;\n}\n\n.divider {\n margin-top: var(--ic-space-md);\n height: 1px;\n background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n margin-top: var(--ic-space-xs);\n}\n\n:host(.breakpoint-medium) .label {\n width: 160px;\n min-width: 160px;\n}\n\n:host(.breakpoint-xs) .text-cells {\n flex-direction: column;\n}\n\n:host(.breakpoint-xs) .label {\n width: 128px;\n margin-bottom: var(--ic-space-xs);\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n slotHasContent,\n} from \"../../utils/helpers\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n tag: \"ic-data-row\",\n styleUrl: \"ic-data-row.css\",\n shadow: true,\n})\nexport class DataRow {\n @Element() el: HTMLIcDataRowElement;\n\n /**\n * Set the label in the leftmost cell of the row\n */\n @Prop() label: string;\n\n /**\n * Set the value of the middle (right if no addition supplied) cell of the row\n */\n @Prop() value: string;\n\n /**\n * Set the row to small styling, this is automatically applied if small is set on the parent data heading\n */\n @Prop() small: boolean = false;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n @State() entitySize: \"xl\" | \"m\" | \"xs\";\n\n private resizeObserver: ResizeObserver = null;\n\n private hasEndComponent: boolean = false;\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkLabelAbove();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkLabelAbove() {\n const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n if (rowSize + 46 < DEVICE_SIZES.S) {\n this.entitySize = \"xs\";\n } else if (rowSize + 46 < DEVICE_SIZES.M) {\n this.entitySize = \"m\";\n } else {\n this.entitySize = \"xl\";\n }\n }\n\n private labelEndComponent(): void {\n const component = this.el.shadowRoot.querySelectorAll(\n \"slot[name=end-component]\"\n );\n\n component.forEach((child: HTMLElement) =>\n child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n );\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n this.checkLabelAbove();\n if (this.hasEndComponent) {\n this.labelEndComponent();\n }\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const { label, value, small } = this;\n\n return (\n <Host\n class={{\n [\"small\"]: small,\n [\"breakpoint-medium\"]: this.entitySize === \"m\",\n [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n }}\n role=\"listitem\"\n >\n <div class=\"data\">\n <div class=\"text-cells\">\n <div class=\"label\">\n <slot name=\"label\">\n <ic-typography\n variant={\n this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"\n }\n >\n {label}\n </ic-typography>\n </slot>\n </div>\n <div class=\"value\">\n <slot name=\"value\">\n <ic-typography variant=\"body\">{value}</ic-typography>\n </slot>\n </div>\n </div>\n {this.hasEndComponent && (\n <div class=\"end-component\">\n <div role=\"cell\">\n <slot name=\"end-component\"></slot>\n </div>\n </div>\n )}\n </div>\n <div class=\"divider\" />\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as i,h as t,H as e,g as o}from"./p-f9370be6.js";import{D as n,e as s,g as a,l as r}from"./p-c15bb762.js";import{c as d}from"./p-e28af65b.js";import"./p-6f57b13c.js";const h='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host(.in-side-menu){border-bottom:1px solid var(--ic-architectural-200);padding:var(--ic-space-md) 0}:host .navigation-group{height:100%;width:-moz-fit-content;width:fit-content;color:var(--ic-theme-text);display:flex;align-items:center;justify-content:center;padding:0 var(--ic-space-md);transition:var(--ic-easing-transition-slow);position:relative;background:none;border:none}:host(.in-side-menu) .navigation-group{height:40px;width:100%;text-align:left}:host(.in-side-menu) .navigation-group .ic-typography-label{width:190px}:host(.in-side-menu) .navigation-group-side-menu{color:var(--ic-action-default);justify-content:flex-start;padding:0 var(--ic-space-md) 0 var(--ic-space-md)}:host(.in-side-menu) .navigation-group-side-menu-collapsed,:host(.in-side-menu) .navigation-group-side-menu-expanded{color:var(--ic-action-default);justify-content:flex-start;padding-left:var(--ic-space-md)}:host(.in-side-menu) .navigation-group-side-menu-expanded{margin-bottom:var(--ic-space-xs)}:host(.in-side-menu) .navigation-group-side-menu-collapsed::after,:host(.in-side-menu) .navigation-group-side-menu-expanded::after{border-style:solid;border-width:0.125em 0.125em 0 0;content:"";display:inline-block;height:0.45em;left:0.75em;position:relative;top:-0.1em;transform:rotate(135deg);vertical-align:top;width:0.45em}:host(.in-side-menu) .navigation-group-side-menu-expanded::after{top:0.15em;transform:rotate(-45deg)}:host .navigation-group:hover,:host .navigation-group:active,:host .selected{background-color:var(--ic-architectural-20);color:var(--ic-color-primary-text);outline:none;cursor:pointer}:host(:not(.in-side-menu)) .navigation-group:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:none;z-index:1;transition:box-shadow var(--ic-easing-transition-fast)}:host(.in-side-menu) .navigation-group-side-menu:hover,:host(.in-side-menu) .navigation-group-side-menu:active,:host(.in-side-menu) .navigation-group-side-menu:focus{background-color:var(--ic-architectural-20);color:var(--ic-action-default);cursor:auto;box-shadow:none;outline:none}:host(.in-side-menu) .navigation-group-side-menu-expanded:hover:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover);color:var(--ic-action-default);cursor:pointer}:host(.in-side-menu) .navigation-group-side-menu-expanded:active:not(:focus),:host(.in-side-menu) .navigation-group-side-menu-collapsed:active:not(:focus){background-color:var(--ic-action-dark-bg-active);color:var(--ic-action-default)}:host(.in-side-menu) .navigation-group-side-menu-expanded:focus,:host(.in-side-menu) .navigation-group-side-menu-collapsed:focus{color:var(--ic-action-default);box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);outline:none}:host .navigation-group-dropdown{background-color:var(--ic-architectural-20);border-bottom:1px solid var(--ic-architectural-300);position:absolute;left:0;right:0;padding:var(--ic-space-xs) var(--ic-space-md);box-shadow:0 6px 8px -6px rgba(0 0 0 / 20%)}:host .navigation-group-dropdown-items-list{list-style:none;display:flex;flex-flow:column wrap;align-content:flex-start;padding-left:var(--ic-space-md);max-height:264px}:host .chevron-toggle-icon-wrapper{display:flex;align-items:center}:host .chevron-toggle-icon-wrapper svg{transform:rotate(90deg)}:host .chevron-toggle-icon-closed svg{transform:rotate(-90deg)}:host(.expanded) .grouped-links-wrapper{height:var(--navigation-child-items-height, auto);transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.collapsed) .grouped-links-wrapper{height:var(--navigation-child-items-height, 0);transition:var(--ic-easing-transition-slow);overflow:hidden}:host(.navigation-group-side-nav) .navigation-group{height:var(--navigation-group-height);width:var(--navigation-group-width);justify-content:var(--navigation-group-justify-content);padding-right:var(--navigation-group-expand-toggle-padding)}:host(.navigation-group-side-nav) .navigation-group:hover,:host(.navigation-group-side-nav) .navigation-group:active,:host(.navigation-group-side-nav) .selected{background-color:var(--navigation-group-hover);color:var(--navigation-group-text-hover)}:host(.navigation-group-side-nav) .navigation-group:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background:none}:host(.navigation-group-side-nav) .ic-typography-caption{position:var(--navigation-group-title-position);left:var(--navigation-group-title-position-left);white-space:nowrap}.menu-visibility-visible{visibility:visible}.menu-visibility-hidden{visibility:hidden}';const l=class{constructor(e){i(this,e);this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS=50;this.sideNavExpandHandler=()=>{setTimeout((()=>this.setInitialGroupedLinksWrapperHeight()),this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS)};this.topNavResizedHandler=i=>{const t=i.detail.size;if(t!==this.deviceSize){this.deviceSize=t;this.inTopNavSideMenu=t<=n.L}};this.setGroupedNavItemTabIndex=i=>{this.el.querySelectorAll("ic-navigation-item").forEach((t=>{const e=t.shadowRoot.querySelector("a")||t.querySelector("a");if(e){e.setAttribute("tabindex",i)}}))};this.toggleGroupedLinkWrapperHeight=(i,t)=>{if(i){if(t){i.setAttribute("style",`--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`);this.setGroupedNavItemTabIndex("0")}else{i.setAttribute("style",`--navigation-child-items-height: 0`);this.setGroupedNavItemTabIndex("-1")}}};this.toggleExpanded=()=>{this.expanded=!this.expanded;const i=this.el.shadowRoot.querySelector(".grouped-links-wrapper");this.toggleGroupedLinkWrapperHeight(i,this.expanded)};this.handleClick=i=>{if(this.navigationType==="top"&&i.detail){this.toggleDropdown()}else{this.toggleExpanded()}};this.handleBlur=i=>{const t=i.relatedTarget;if(!this.el.contains(t)){this.hideDropdown()}};this.handleTopNavKeydown=i=>{if(!this.inTopNavSideMenu&&i.key==="Escape"){this.hideDropdown();this.el.blur()}else if(i.key===" "||i.key==="Enter"){this.toggleDropdown()}};this.handleKeydown=i=>{if(i.key==="Enter"||i.key==="Space"){switch(this.navigationType){case"top":this.handleTopNavKeydown(i);break;case"side":this.toggleExpanded();i.preventDefault();break;default:this.toggleExpanded();break}}};this.handleMouseLeave=i=>{const t=i.relatedTarget;if(!this.el.contains(t)&&t!==this.dropdown&&document.activeElement!==this.el&&!this.el.contains(document.activeElement)){this.hideDropdown()}};this.triggerShowDropdown=()=>{this.showDropdown()};this.renderDropdownGroupedLinks=()=>t("div",{class:{["navigation-group-dropdown"]:!this.inTopNavSideMenu,["navigation-group-dropdown-side-menu"]:this.inTopNavSideMenu,["selected"]:this.dropdownOpen&&!this.inTopNavSideMenu},onMouseLeave:!this.inTopNavSideMenu?this.handleMouseLeave:null,ref:i=>this.dropdown=i},t("nav",{class:{["navigation-group-dropdown-items"]:!this.inTopNavSideMenu}},t("ul",null,t("slot",null))));this.renderGroupedLinks=()=>t("ul",{class:"grouped-links-wrapper"},t("slot",null));this.getNavigationChildItemsHeight=()=>{const i=this.el.querySelectorAll("ic-navigation-item").length||0;const t=this.el.querySelector("ic-navigation-item")||null;if(this.navigationType==="side"&&!!i&&t){return`${parseInt(getComputedStyle(t).height)*i}px`}return"auto"};this.setInitialGroupedLinksWrapperHeight=()=>{const i=this.el.shadowRoot.querySelector(".grouped-links-wrapper");if(i&&this.expanded){i.setAttribute("style",`--navigation-child-items-height: ${this.getNavigationChildItemsHeight()}`)}};this.renderNavigationItems=()=>{if(this.dropdownOpen||this.inTopNavSideMenu&&!this.expandable){return this.renderDropdownGroupedLinks()}if(this.navigationType!=="top"){return this.renderGroupedLinks()}return null};this.label=undefined;this.expandable=false;this.dropdownOpen=false;this.inTopNavSideMenu=false;this.deviceSize=n.XL;this.focusStyle=s();this.navigationType=undefined;this.parentEl=undefined;this.expanded=true}childBlurHandler(){this.hideDropdown()}navItemClickHandler(){this.hideDropdown()}themeChangeHandler(i){const t=i.detail;this.focusStyle=t.mode}async setFocus(){if(this.groupEl){this.groupEl.focus()}}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen}showDropdown(){if(!this.dropdownOpen){this.toggleDropdown()}}hideDropdown(){if(this.dropdownOpen){this.toggleDropdown()}}componentWillLoad(){this.deviceSize=a();const i=r(this.el);this.navigationType=i.navType;this.parentEl=i.parent;if(this.deviceSize<=n.L&&this.navigationType==="top"){this.inTopNavSideMenu=true}if(this.navigationType==="side"){this.parentEl.addEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.addEventListener("topNavResized",this.topNavResizedHandler)}}componentDidLoad(){setTimeout((()=>this.setInitialGroupedLinksWrapperHeight()),this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS)}disconnectedCallback(){if(this.navigationType==="side"){this.parentEl.removeEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.removeEventListener("topNavResized",this.topNavResizedHandler)}}render(){const{label:i,dropdownOpen:o,inTopNavSideMenu:n,expandable:s}=this;const a=!n||s?"button":"div";return t(e,{class:{["in-side-menu"]:n,expanded:this.expanded,collapsed:!this.expanded,["navigation-group-side-nav"]:this.navigationType==="side"},role:"listitem"},t(a,{tabindex:n&&!s?"-1":"0",onMouseOver:!n&&this.navigationType==="top"?this.triggerShowDropdown:null,onMouseLeave:this.navigationType==="top"&&this.handleMouseLeave,onBlur:this.handleBlur,onClick:s?this.handleClick:null,onKeyDown:this.handleKeydown,class:{["navigation-group"]:true,[this.focusStyle]:!n,["navigation-group-side-menu"]:n&&!s,["navigation-group-side-menu-collapsed"]:n&&s&&!o,["navigation-group-side-menu-expanded"]:n&&s&&o,["selected"]:o&&!n},ref:i=>this.groupEl=i,"aria-expanded":o||this.expanded?"true":"false","aria-haspopup":!n&&this.navigationType==="top"?"true":"false"},t("ic-typography",{variant:this.navigationType==="side"?"caption":"label"},i),this.navigationType==="side"&&s&&t("div",{class:{"chevron-toggle-icon-wrapper":true,"chevron-toggle-icon-closed":this.expanded},innerHTML:d})),this.renderNavigationItems())}get el(){return o(this)}};l.style=h;export{l as ic_navigation_group};
|
2
|
-
//# sourceMappingURL=p-4aa8c1e1.entry.js.map
|