@ukic/web-components 2.1.0-beta.14 → 2.1.0-beta.15
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/{helpers-2021e212.js → helpers-d6b5880e.js} +19 -25
- package/dist/cjs/helpers-d6b5880e.js.map +1 -0
- package/dist/cjs/ic-alert.cjs.entry.js +1 -1
- package/dist/cjs/ic-back-to-top.cjs.entry.js +1 -1
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +14 -14
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +5 -4
- package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +3 -6
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card.cjs.entry.js +1 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +5 -4
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-chip.cjs.entry.js +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +1 -1
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js +1 -1
- package/dist/cjs/ic-footer.cjs.entry.js +2 -2
- package/dist/cjs/ic-footer.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-hero.cjs.entry.js +1 -1
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +1 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +5 -2
- 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 +1 -1
- package/dist/cjs/ic-menu-item.cjs.entry.js +3 -2
- package/dist/cjs/ic-menu-item.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 +7 -4
- 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 -7
- package/dist/cjs/ic-navigation-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +10 -13
- package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-pagination.cjs.entry.js +12 -1
- package/dist/cjs/ic-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +5 -4
- package/dist/cjs/ic-popover-menu.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 +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +1 -1
- package/dist/cjs/ic-select.cjs.entry.js +2 -3
- package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +20 -16
- 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 +2 -2
- package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +1 -1
- package/dist/cjs/ic-tab-context.cjs.entry.js +7 -5
- package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js +3 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab.cjs.entry.js +3 -1
- package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-text-field.cjs.entry.js +6 -14
- 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-toast.cjs.entry.js +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +1 -1
- package/dist/cjs/ic-typography.cjs.entry.js +95 -3
- package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js +4 -3
- package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js.map +1 -1
- package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js +13 -13
- package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js.map +1 -1
- package/dist/collection/components/ic-button/ic-button.js +1 -4
- package/dist/collection/components/ic-button/ic-button.js.map +1 -1
- package/dist/collection/components/ic-checkbox/ic-checkbox.js +4 -3
- package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
- package/dist/collection/components/ic-footer/ic-footer.css +2 -2
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css +1 -1
- package/dist/collection/components/ic-menu/ic-menu.js +4 -1
- package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
- package/dist/collection/components/ic-menu-item/ic-menu-item.js +2 -1
- package/dist/collection/components/ic-menu-item/ic-menu-item.js.map +1 -1
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js +6 -3
- package/dist/collection/components/ic-navigation-group/ic-navigation-group.js.map +1 -1
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.css +13 -7
- package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js +0 -6
- package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js.map +1 -1
- package/dist/collection/components/ic-page-header/ic-page-header.js +9 -12
- package/dist/collection/components/ic-page-header/ic-page-header.js.map +1 -1
- package/dist/collection/components/ic-pagination/ic-pagination.js +52 -1
- package/dist/collection/components/ic-pagination/ic-pagination.js.map +1 -1
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +4 -3
- package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select.js +11 -12
- package/dist/collection/components/ic-select/ic-select.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +19 -15
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
- package/dist/collection/components/ic-step/ic-step.css +5 -5
- package/dist/collection/components/ic-step/ic-step.js +1 -1
- package/dist/collection/components/ic-step/ic-step.js.map +1 -1
- package/dist/collection/components/ic-tab/ic-tab.js +3 -1
- package/dist/collection/components/ic-tab/ic-tab.js.map +1 -1
- package/dist/collection/components/ic-tab-context/ic-tab-context.js +7 -5
- package/dist/collection/components/ic-tab-context/ic-tab-context.js.map +1 -1
- package/dist/collection/components/ic-tab-panel/ic-tab-panel.js +3 -1
- 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 +5 -13
- package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
- package/dist/collection/components/ic-typography/ic-typography.css +39 -0
- package/dist/collection/components/ic-typography/ic-typography.js +120 -2
- package/dist/collection/components/ic-typography/ic-typography.js.map +1 -1
- package/dist/collection/utils/helpers.js +18 -24
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/components/helpers.js +18 -24
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/ic-breadcrumb-group.js +13 -13
- package/dist/components/ic-breadcrumb-group.js.map +1 -1
- package/dist/components/ic-breadcrumb2.js +4 -3
- package/dist/components/ic-breadcrumb2.js.map +1 -1
- package/dist/components/ic-button2.js +1 -4
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-checkbox.js +4 -3
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/components/ic-footer.js +1 -1
- package/dist/components/ic-footer.js.map +1 -1
- package/dist/components/ic-loading-indicator2.js +1 -1
- package/dist/components/ic-loading-indicator2.js.map +1 -1
- package/dist/components/ic-menu-item2.js +2 -1
- package/dist/components/ic-menu-item2.js.map +1 -1
- package/dist/components/ic-menu2.js +4 -1
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-group.js +6 -3
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/components/ic-navigation-item.js +1 -1
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-navigation-menu2.js +0 -6
- package/dist/components/ic-navigation-menu2.js.map +1 -1
- package/dist/components/ic-page-header.js +9 -12
- package/dist/components/ic-page-header.js.map +1 -1
- package/dist/components/ic-pagination.js +14 -2
- package/dist/components/ic-pagination.js.map +1 -1
- package/dist/components/ic-popover-menu.js +4 -3
- package/dist/components/ic-popover-menu.js.map +1 -1
- package/dist/components/ic-select.js +1 -2
- package/dist/components/ic-select.js.map +1 -1
- package/dist/components/ic-side-navigation.js +19 -15
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-step.js +2 -2
- package/dist/components/ic-step.js.map +1 -1
- package/dist/components/ic-tab-context.js +7 -5
- package/dist/components/ic-tab-context.js.map +1 -1
- package/dist/components/ic-tab-panel.js +3 -1
- package/dist/components/ic-tab-panel.js.map +1 -1
- package/dist/components/ic-tab.js +3 -1
- package/dist/components/ic-tab.js.map +1 -1
- package/dist/components/ic-text-field2.js +5 -13
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-typography2.js +99 -4
- package/dist/components/ic-typography2.js.map +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/{p-0575a77f.entry.js → p-050dbce8.entry.js} +2 -2
- package/dist/core/p-06962e10.entry.js +2 -0
- package/dist/core/p-06962e10.entry.js.map +1 -0
- package/dist/core/{p-0a41c3cb.entry.js → p-0969a95a.entry.js} +2 -2
- package/dist/core/{p-56fe91ad.entry.js → p-0a11ec35.entry.js} +2 -2
- package/dist/core/p-0a11ec35.entry.js.map +1 -0
- package/dist/core/{p-b61e76e2.entry.js → p-0f153569.entry.js} +2 -2
- package/dist/core/{p-3fb307e6.entry.js → p-1585e5c1.entry.js} +2 -2
- package/dist/core/p-29ea6f88.entry.js +2 -0
- package/dist/core/p-29ea6f88.entry.js.map +1 -0
- package/dist/core/p-2e63f202.entry.js +2 -0
- package/dist/core/p-2e63f202.entry.js.map +1 -0
- package/dist/core/p-2e6ea6d3.entry.js +2 -0
- package/dist/core/p-2e6ea6d3.entry.js.map +1 -0
- package/dist/core/{p-e0f24ccd.entry.js → p-2fb97a1b.entry.js} +2 -2
- package/dist/core/p-2fb97a1b.entry.js.map +1 -0
- package/dist/core/{p-100dbcec.entry.js → p-31b4b684.entry.js} +2 -2
- package/dist/core/{p-e839e5dc.entry.js → p-32cc8827.entry.js} +2 -2
- package/dist/core/{p-3845b769.entry.js → p-3498db0b.entry.js} +2 -2
- package/dist/core/p-3498db0b.entry.js.map +1 -0
- package/dist/core/{p-d5d9923a.entry.js → p-36e0671f.entry.js} +2 -2
- package/dist/core/p-443052a7.entry.js +2 -0
- package/dist/core/p-443052a7.entry.js.map +1 -0
- package/dist/core/{p-6a77992e.entry.js → p-46371c05.entry.js} +2 -2
- package/dist/core/p-471820e6.js +2 -0
- package/dist/core/p-471820e6.js.map +1 -0
- package/dist/core/{p-9413d639.entry.js → p-4dd0eb6a.entry.js} +2 -2
- package/dist/core/p-50421f27.entry.js +2 -0
- package/dist/core/p-50421f27.entry.js.map +1 -0
- package/dist/core/p-559b3d17.entry.js +2 -0
- package/dist/core/p-559b3d17.entry.js.map +1 -0
- package/dist/core/{p-895bda21.entry.js → p-5a3f3f37.entry.js} +2 -2
- package/dist/core/p-5a3f3f37.entry.js.map +1 -0
- package/dist/core/{p-dc0b9e80.entry.js → p-5e896163.entry.js} +2 -2
- package/dist/core/{p-e41e701a.entry.js → p-68547339.entry.js} +2 -2
- package/dist/core/p-6f2be5bd.entry.js +2 -0
- package/dist/core/p-6f2be5bd.entry.js.map +1 -0
- package/dist/core/{p-1eb0992b.entry.js → p-70124e59.entry.js} +2 -2
- package/dist/core/{p-2e949135.entry.js → p-80164baa.entry.js} +2 -2
- package/dist/core/p-80164baa.entry.js.map +1 -0
- package/dist/core/{p-6b39f8b4.entry.js → p-8edd3a9b.entry.js} +2 -2
- package/dist/core/{p-c0813424.entry.js → p-9715ec62.entry.js} +2 -2
- package/dist/core/{p-cb437317.entry.js → p-983cb33c.entry.js} +2 -2
- package/dist/core/{p-002a63e9.entry.js → p-a18c0672.entry.js} +2 -2
- package/dist/core/{p-47b0ed42.entry.js → p-a8dc8196.entry.js} +2 -2
- package/dist/core/{p-52fd3533.entry.js → p-a9184841.entry.js} +2 -2
- package/dist/core/p-a9184841.entry.js.map +1 -0
- package/dist/core/{p-e384aaee.entry.js → p-af815dfb.entry.js} +2 -2
- package/dist/core/{p-8780890e.entry.js → p-b69226d2.entry.js} +2 -2
- package/dist/core/p-b7cf6411.entry.js +2 -0
- package/dist/core/p-b7cf6411.entry.js.map +1 -0
- package/dist/core/{p-3a67718c.entry.js → p-bffa2e1a.entry.js} +2 -2
- package/dist/core/p-c85476c0.entry.js +2 -0
- package/dist/core/p-c85476c0.entry.js.map +1 -0
- package/dist/core/{p-a0f4e641.entry.js → p-ca20c9c3.entry.js} +2 -2
- package/dist/core/{p-a33a04b2.entry.js → p-cee45622.entry.js} +2 -2
- package/dist/core/p-cee45622.entry.js.map +1 -0
- package/dist/core/{p-f3e10149.entry.js → p-d2d5132d.entry.js} +2 -2
- package/dist/core/{p-f3e10149.entry.js.map → p-d2d5132d.entry.js.map} +1 -1
- package/dist/core/{p-546b620e.entry.js → p-df1b0f17.entry.js} +2 -2
- package/dist/core/{p-92c4fa7f.entry.js → p-e16e817e.entry.js} +2 -2
- package/dist/core/p-e16e817e.entry.js.map +1 -0
- package/dist/core/p-e6217f40.entry.js +2 -0
- package/dist/core/p-e6217f40.entry.js.map +1 -0
- package/dist/core/{p-3dc2ff7b.entry.js → p-faeedfd1.entry.js} +2 -2
- package/dist/core/p-faeedfd1.entry.js.map +1 -0
- package/dist/core/{p-5d077cf7.entry.js → p-fb5861c6.entry.js} +2 -2
- package/dist/core/{p-3e5eb873.entry.js → p-fd18d7a3.entry.js} +2 -2
- package/dist/esm/core.js +1 -1
- package/dist/esm/{helpers-b2b47a7d.js → helpers-73666f14.js} +19 -25
- package/dist/esm/helpers-73666f14.js.map +1 -0
- package/dist/esm/ic-alert.entry.js +1 -1
- package/dist/esm/ic-back-to-top.entry.js +1 -1
- package/dist/esm/ic-breadcrumb-group.entry.js +14 -14
- package/dist/esm/ic-breadcrumb-group.entry.js.map +1 -1
- package/dist/esm/ic-breadcrumb.entry.js +5 -4
- package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ic-button_3.entry.js +3 -6
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card.entry.js +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +1 -1
- package/dist/esm/ic-checkbox.entry.js +5 -4
- package/dist/esm/ic-checkbox.entry.js.map +1 -1
- package/dist/esm/ic-chip.entry.js +1 -1
- package/dist/esm/ic-data-row.entry.js +1 -1
- package/dist/esm/ic-divider.entry.js +1 -1
- package/dist/esm/ic-footer-link-group.entry.js +1 -1
- package/dist/esm/ic-footer-link.entry.js +1 -1
- package/dist/esm/ic-footer.entry.js +2 -2
- package/dist/esm/ic-footer.entry.js.map +1 -1
- package/dist/esm/ic-hero.entry.js +1 -1
- package/dist/esm/ic-horizontal-scroll.entry.js +1 -1
- package/dist/esm/ic-input-component-container_3.entry.js +5 -2
- 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 +1 -1
- package/dist/esm/ic-menu-item.entry.js +3 -2
- package/dist/esm/ic-menu-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-button.entry.js +1 -1
- package/dist/esm/ic-navigation-group.entry.js +7 -4
- 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 -7
- package/dist/esm/ic-navigation-menu.entry.js.map +1 -1
- package/dist/esm/ic-page-header.entry.js +10 -13
- package/dist/esm/ic-page-header.entry.js.map +1 -1
- package/dist/esm/ic-pagination.entry.js +12 -1
- package/dist/esm/ic-pagination.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +5 -4
- package/dist/esm/ic-popover-menu.entry.js.map +1 -1
- package/dist/esm/ic-radio-group.entry.js +1 -1
- package/dist/esm/ic-radio-option.entry.js +1 -1
- package/dist/esm/ic-search-bar.entry.js +1 -1
- package/dist/esm/ic-select.entry.js +2 -3
- package/dist/esm/ic-select.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +20 -16
- 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 +2 -2
- package/dist/esm/ic-step.entry.js.map +1 -1
- package/dist/esm/ic-stepper.entry.js +1 -1
- package/dist/esm/ic-switch.entry.js +1 -1
- package/dist/esm/ic-tab-context.entry.js +7 -5
- package/dist/esm/ic-tab-context.entry.js.map +1 -1
- package/dist/esm/ic-tab-group.entry.js +1 -1
- package/dist/esm/ic-tab-panel.entry.js +3 -1
- package/dist/esm/ic-tab-panel.entry.js.map +1 -1
- package/dist/esm/ic-tab.entry.js +3 -1
- package/dist/esm/ic-tab.entry.js.map +1 -1
- package/dist/esm/ic-text-field.entry.js +6 -14
- package/dist/esm/ic-text-field.entry.js.map +1 -1
- package/dist/esm/ic-theme.entry.js +1 -1
- package/dist/esm/ic-toast.entry.js +1 -1
- package/dist/esm/ic-top-navigation.entry.js +1 -1
- package/dist/esm/ic-typography.entry.js +95 -3
- package/dist/esm/ic-typography.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-breadcrumb-group/ic-breadcrumb-group.d.ts +3 -0
- package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +1 -0
- package/dist/types/components/ic-menu/ic-menu.d.ts +1 -0
- package/dist/types/components/ic-navigation-group/ic-navigation-group.d.ts +1 -0
- package/dist/types/components/ic-pagination/ic-pagination.d.ts +7 -0
- package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts +1 -0
- package/dist/types/components/ic-select/ic-select.d.ts +11 -11
- package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts +1 -0
- package/dist/types/components/ic-typography/ic-typography.d.ts +27 -0
- package/dist/types/components.d.ts +35 -15
- package/hydrate/index.js +221 -122
- package/package.json +3 -3
- package/dist/cjs/helpers-2021e212.js.map +0 -1
- package/dist/core/p-14835d6f.entry.js +0 -2
- package/dist/core/p-14835d6f.entry.js.map +0 -1
- package/dist/core/p-276f7ecb.entry.js +0 -2
- package/dist/core/p-276f7ecb.entry.js.map +0 -1
- package/dist/core/p-2e949135.entry.js.map +0 -1
- package/dist/core/p-3845b769.entry.js.map +0 -1
- package/dist/core/p-3c23f963.entry.js +0 -2
- package/dist/core/p-3c23f963.entry.js.map +0 -1
- package/dist/core/p-3dc2ff7b.entry.js.map +0 -1
- package/dist/core/p-3dea2867.js +0 -2
- package/dist/core/p-3dea2867.js.map +0 -1
- package/dist/core/p-4595f48f.entry.js +0 -2
- package/dist/core/p-4595f48f.entry.js.map +0 -1
- package/dist/core/p-4b87445b.entry.js +0 -2
- package/dist/core/p-4b87445b.entry.js.map +0 -1
- package/dist/core/p-4c8fcfe6.entry.js +0 -2
- package/dist/core/p-4c8fcfe6.entry.js.map +0 -1
- package/dist/core/p-52fd3533.entry.js.map +0 -1
- package/dist/core/p-56fe91ad.entry.js.map +0 -1
- package/dist/core/p-895bda21.entry.js.map +0 -1
- package/dist/core/p-92c4fa7f.entry.js.map +0 -1
- package/dist/core/p-a33a04b2.entry.js.map +0 -1
- package/dist/core/p-a5bee11f.entry.js +0 -2
- package/dist/core/p-a5bee11f.entry.js.map +0 -1
- package/dist/core/p-a7fdb9a8.entry.js +0 -2
- package/dist/core/p-a7fdb9a8.entry.js.map +0 -1
- package/dist/core/p-de891d3d.entry.js +0 -2
- package/dist/core/p-de891d3d.entry.js.map +0 -1
- package/dist/core/p-e0f24ccd.entry.js.map +0 -1
- package/dist/core/p-ea526b54.entry.js +0 -2
- package/dist/core/p-ea526b54.entry.js.map +0 -1
- package/dist/core/p-ec8b228c.entry.js +0 -2
- package/dist/core/p-ec8b228c.entry.js.map +0 -1
- package/dist/esm/helpers-b2b47a7d.js.map +0 -1
- /package/dist/core/{p-0575a77f.entry.js.map → p-050dbce8.entry.js.map} +0 -0
- /package/dist/core/{p-0a41c3cb.entry.js.map → p-0969a95a.entry.js.map} +0 -0
- /package/dist/core/{p-b61e76e2.entry.js.map → p-0f153569.entry.js.map} +0 -0
- /package/dist/core/{p-3fb307e6.entry.js.map → p-1585e5c1.entry.js.map} +0 -0
- /package/dist/core/{p-100dbcec.entry.js.map → p-31b4b684.entry.js.map} +0 -0
- /package/dist/core/{p-e839e5dc.entry.js.map → p-32cc8827.entry.js.map} +0 -0
- /package/dist/core/{p-d5d9923a.entry.js.map → p-36e0671f.entry.js.map} +0 -0
- /package/dist/core/{p-6a77992e.entry.js.map → p-46371c05.entry.js.map} +0 -0
- /package/dist/core/{p-9413d639.entry.js.map → p-4dd0eb6a.entry.js.map} +0 -0
- /package/dist/core/{p-dc0b9e80.entry.js.map → p-5e896163.entry.js.map} +0 -0
- /package/dist/core/{p-e41e701a.entry.js.map → p-68547339.entry.js.map} +0 -0
- /package/dist/core/{p-1eb0992b.entry.js.map → p-70124e59.entry.js.map} +0 -0
- /package/dist/core/{p-6b39f8b4.entry.js.map → p-8edd3a9b.entry.js.map} +0 -0
- /package/dist/core/{p-c0813424.entry.js.map → p-9715ec62.entry.js.map} +0 -0
- /package/dist/core/{p-cb437317.entry.js.map → p-983cb33c.entry.js.map} +0 -0
- /package/dist/core/{p-002a63e9.entry.js.map → p-a18c0672.entry.js.map} +0 -0
- /package/dist/core/{p-47b0ed42.entry.js.map → p-a8dc8196.entry.js.map} +0 -0
- /package/dist/core/{p-e384aaee.entry.js.map → p-af815dfb.entry.js.map} +0 -0
- /package/dist/core/{p-8780890e.entry.js.map → p-b69226d2.entry.js.map} +0 -0
- /package/dist/core/{p-3a67718c.entry.js.map → p-bffa2e1a.entry.js.map} +0 -0
- /package/dist/core/{p-a0f4e641.entry.js.map → p-ca20c9c3.entry.js.map} +0 -0
- /package/dist/core/{p-546b620e.entry.js.map → p-df1b0f17.entry.js.map} +0 -0
- /package/dist/core/{p-5d077cf7.entry.js.map → p-fb5861c6.entry.js.map} +0 -0
- /package/dist/core/{p-3e5eb873.entry.js.map → p-fd18d7a3.entry.js.map} +0 -0
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as e,h as r,H as t,g as s}from"./p-589f6dd3.js";import{C as i}from"./p-06321d19.js";import{i as a}from"./p-
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as e,h as r,H as t,g as s}from"./p-589f6dd3.js";import{C as i}from"./p-06321d19.js";import{i as a}from"./p-471820e6.js";import"./p-6f57b13c.js";const c=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>\n</svg>\n`;const o=':host{display:block;margin:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}:host .breadcrumb{display:flex;align-items:center;white-space:nowrap;gap:var(--ic-space-xs);min-height:var(--ic-space-lg)}:host .chevron{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host .chevron svg{color:var(--ic-architectural-400)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-hyperlink)}:host(.back){display:flex;align-items:center}:host(.back) .chevron{display:none}ic-link{--breadcrumb-link-display:inline-flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current="page"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper){margin-right:var(--ic-space-xs) !important;display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb){border:none;background-color:transparent;color:var(--ic-hyperlink);text-decoration:underline;font-weight:var(--ic-font-weight-bold);cursor:pointer}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){outline:var(--ic-hc-focus-outline);border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}@media (forced-colors: active){.back-icon svg{color:currentcolor}}@supports (text-decoration-thickness: 25%){ic-link{--breadcrumb-link-display:flex}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}';const n=class{constructor(t){e(this,t);this.renderDefaultBreadcrumb=(e,t,s,i)=>{const o=t!==null&&t!==undefined&&t!=="";if(e&&o){return r("span",{class:{"current-page-container":e}},a(this.el,"icon")&&r("slot",{name:"icon"}),t)}return r("ic-link",{href:i,class:"breadcrumb-link","aria-describedby":this.showBackIcon&&s&&s},this.showBackIcon&&r("div",{class:"back-icon",innerHTML:c}),a(this.el,"icon")&&r("slot",{name:"icon"}),t)};this.setSlottedCurrentPageClass=()=>{const e=this.el.querySelector("ic-link");const r="current-page";if(e){e.classList.remove(r);if(this.current){const t=e.classList.contains(r);if(!t){e.classList.add("breadcrumb-link",r)}}}};this.pageTitle=undefined;this.href=undefined;this.current=false;this.showBackIcon=false}async setFocus(){if(this.el.shadowRoot.querySelector("ic-link")){this.el.shadowRoot.querySelector("ic-link").focus()}}componentWillRender(){this.setSlottedCurrentPageClass()}render(){const{current:e,href:s,pageTitle:a}=this;const c=`${a&&a.toLowerCase().replace(" ","-")}-describedby`;const o=a!==null&&a!==undefined&&a!=="";const n=s!==null&&s!==undefined&&s!=="";return r(t,{class:{back:this.showBackIcon},"aria-current":e&&"page",role:"listitem"},r("div",{class:"breadcrumb"},r("span",{innerHTML:i,class:"chevron","aria-hidden":"true"}),this.showBackIcon&&c&&r("span",{id:c,class:"hide"},`Back to ${a}`),o&&n?this.renderDefaultBreadcrumb(e,a,c,s):r("slot",null)))}static get delegatesFocus(){return true}get el(){return s(this)}};n.style=o;export{n as ic_breadcrumb};
|
2
|
+
//# sourceMappingURL=p-cee45622.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"names":["icBreadcrumbCss","Breadcrumb","this","renderDefaultBreadcrumb","current","pageTitle","describedById","href","hasPageTitle","undefined","h","class","current-page-container","isSlotUsed","el","name","aria-describedby","showBackIcon","innerHTML","backIcon","setSlottedCurrentPageClass","icLink","querySelector","currentPage","classList","remove","hasCurrentPageClass","contains","add","[object Object]","shadowRoot","focus","toLowerCase","replace","hasHref","Host","back","aria-current","role","chevronIcon","aria-hidden","id"],"mappings":"yVAAA,MAAMA,EAAkB,u1DCcXC,EAAU,+BAkCbC,KAAAC,wBAA0B,CAChCC,EACAC,EACAC,EACAC,KAEA,MAAMC,EACJH,IAAc,MAAQA,IAAcI,WAAaJ,IAAc,GAEjE,GAAID,GAAWI,EAAc,CAC3B,OACEE,EAAA,OAAA,CACEC,MAAO,CACLC,yBAA0BR,IAG3BS,EAAWX,KAAKY,GAAI,SAAWJ,EAAA,OAAA,CAAMK,KAAK,SAC1CV,GAKP,OACEK,EAAA,UAAA,CACEH,KAAMA,EACNI,MAAM,kBAAiBK,mBACLd,KAAKe,cAAgBX,GAAiBA,GAEvDJ,KAAKe,cACJP,EAAA,MAAA,CAAKC,MAAM,YAAYO,UAAWC,IAEnCN,EAAWX,KAAKY,GAAI,SAAWJ,EAAA,OAAA,CAAMK,KAAK,SAC1CV,IAKCH,KAAAkB,2BAA6B,KACnC,MAAMC,EAASnB,KAAKY,GAAGQ,cAAc,WACrC,MAAMC,EAAc,eACpB,GAAIF,EAAQ,CACVA,EAAOG,UAAUC,OAAOF,GACxB,GAAIrB,KAAKE,QAAS,CAChB,MAAMsB,EAAsBL,EAAOG,UAAUG,SAASJ,GACtD,IAAKG,EAAqB,CACxBL,EAAOG,UAAUI,IAAI,kBAAmBL,iEA9DpB,wBAKqB,MAMjDM,iBACE,GAAI3B,KAAKY,GAAGgB,WAAWR,cAAc,WAAY,CAC/CpB,KAAKY,GAAGgB,WAAWR,cAAc,WAAWS,SAuDhDF,sBACE3B,KAAKkB,6BAGPS,SACE,MAAMzB,QAAEA,EAAOG,KAAEA,EAAIF,UAAEA,GAAcH,KACrC,MAAMI,EAAgB,GACpBD,GAAaA,EAAU2B,cAAcC,QAAQ,IAAK,mBAGpD,MAAMzB,EACJH,IAAc,MAAQA,IAAcI,WAAaJ,IAAc,GACjE,MAAM6B,EAAU3B,IAAS,MAAQA,IAASE,WAAaF,IAAS,GAEhE,OACEG,EAACyB,EAAI,CACHxB,MAAO,CACLyB,KAAMlC,KAAKe,cACZoB,eACajC,GAAW,OACzBkC,KAAK,YAEL5B,EAAA,MAAA,CAAKC,MAAM,cACTD,EAAA,OAAA,CAAMQ,UAAWqB,EAAa5B,MAAM,UAAS6B,cAAa,SACzDtC,KAAKe,cAAgBX,GACpBI,EAAA,OAAA,CACE+B,GAAInC,EACJK,MAAM,QACN,WAAWN,KAEdG,GAAgB0B,EACfhC,KAAKC,wBACHC,EACAC,EACAC,EACAC,GAGFG,EAAA,OAAA","sourcesContent":[":host {\n display: block;\n margin: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n:host .breadcrumb {\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: var(--ic-space-xs);\n min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host .chevron svg {\n color: var(--ic-architectural-400);\n}\n\n:host(:first-child) .chevron {\n display: none;\n}\n\n.back-icon svg {\n color: var(--ic-hyperlink);\n}\n\n:host(.back) {\n display: flex;\n align-items: center;\n}\n\n:host(.back) .chevron {\n display: none;\n}\n\nic-link {\n --breadcrumb-link-display: inline-flex;\n --breadcrumb-link-align-items: center;\n --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container {\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) {\n margin-right: var(--ic-space-xs) !important;\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb) {\n border: none;\n background-color: transparent;\n color: var(--ic-hyperlink);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n cursor: pointer;\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n outline: var(--ic-hc-focus-outline);\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n display: none;\n}\n\n@media (forced-colors: active) {\n .back-icon svg {\n color: currentcolor;\n }\n}\n\n@supports (text-decoration-thickness: 25%) {\n ic-link {\n --breadcrumb-link-display: flex;\n }\n\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n","import { Component, Host, Prop, h, Element, Method } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-breadcrumb\",\n styleUrl: \"ic-breadcrumb.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Breadcrumb {\n /**\n * @slot icon - Content will be rendered to the left of the breadcrumb page title.\n */\n\n @Element() el: HTMLIcBreadcrumbElement;\n /**\n * The title of the breadcrumb.\n */\n @Prop() pageTitle!: string;\n /**\n * The URL that the breadcrumb link points to.\n */\n @Prop() href?: string;\n /**\n * If `true`, aria-current will be set on the breadcrumb.\n */\n @Prop() current?: boolean = false;\n\n /**\n * @internal If `true`, back icon will be displayed.\n */\n @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n /**\n * Sets focus on the breadcrumb.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"ic-link\")) {\n this.el.shadowRoot.querySelector(\"ic-link\").focus();\n }\n }\n\n private renderDefaultBreadcrumb = (\n current: boolean,\n pageTitle: string,\n describedById: string,\n href: string\n ): IcBreadcrumbDefault => {\n const hasPageTitle =\n pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n\n if (current && hasPageTitle) {\n return (\n <span\n class={{\n \"current-page-container\": current,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </span>\n );\n }\n\n return (\n <ic-link\n href={href}\n class=\"breadcrumb-link\"\n aria-describedby={this.showBackIcon && describedById && describedById}\n >\n {this.showBackIcon && (\n <div class=\"back-icon\" innerHTML={backIcon}></div>\n )}\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </ic-link>\n );\n };\n\n private setSlottedCurrentPageClass = () => {\n const icLink = this.el.querySelector(\"ic-link\");\n const currentPage = \"current-page\";\n if (icLink) {\n icLink.classList.remove(currentPage);\n if (this.current) {\n const hasCurrentPageClass = icLink.classList.contains(currentPage);\n if (!hasCurrentPageClass) {\n icLink.classList.add(\"breadcrumb-link\", currentPage);\n }\n }\n }\n };\n\n componentWillRender(): void {\n this.setSlottedCurrentPageClass();\n }\n\n render() {\n const { current, href, pageTitle } = this;\n const describedById = `${\n pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n }-describedby`;\n\n const hasPageTitle =\n pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n const hasHref = href !== null && href !== undefined && href !== \"\";\n\n return (\n <Host\n class={{\n back: this.showBackIcon,\n }}\n aria-current={current && \"page\"}\n role=\"listitem\"\n >\n <div class=\"breadcrumb\">\n <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n {this.showBackIcon && describedById && (\n <span\n id={describedById}\n class=\"hide\"\n >{`Back to ${pageTitle}`}</span>\n )}\n {hasPageTitle && hasHref ? (\n this.renderDefaultBreadcrumb(\n current,\n pageTitle,\n describedById,\n href\n )\n ) : (\n <slot />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as i,c as t,h as e,H as a,g as o}from"./p-589f6dd3.js";import{D as n,k as s,q as r,g as d,p as c}from"./p-3dea2867.js";import{C as l}from"./p-06321d19.js";import{O as v}from"./p-8d4f7027.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(:focus-within){z-index:var(--ic-z-index-navigation-item)}svg{width:var(--ic-space-xl);fill:var(--ic-theme-text)}.svg{margin-left:auto}:host(.expandable.navigation-item) .link,:host(.expandable.navigation-item) ::slotted(a){padding-right:0}:host(.navigation-item) .link,:host(.navigation-item) ::slotted(a){height:calc(100% - var(--ic-space-xxs));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) var(--ic-space-xxs);text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative;white-space:nowrap}:host(.navigation-item) ::slotted(a){height:100%;font:var(--ic-font-label) !important;letter-spacing:var(--ic-font-letter-spacing-0pt025) !important;padding:0 var(--ic-space-md) !important}:host(.navigation-item-selected) .link::after,:host(.navigation-item-selected) ::slotted(a.active)::after,:host(.navigation-item-top-nav) ::slotted(a.active)::after{content:"";height:0.25rem;width:100%;position:absolute;bottom:0;background-color:var(--ic-theme-text)}:host(.navigation-item-selected.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-selected.navigation-item-page-header) .link::after,:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-top-nav-child) ::slotted(a.active)::after{content:none}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){box-shadow:none}:host(.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover);cursor:pointer}:host(.navigation-item:not(.navigation-item-page-header,.navigation-item-side-menu)) ::slotted(a:hover:not(:focus)){background-color:var(--ic-theme-hover) !important}:host(.navigation-item:not(.navigation-item-top-nav-child,.navigation-item-side-menu,.navigation-item-top-nav-child-selected .navigation-item-side-menu-selected)) .focus-indicator:focus-within{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius)}:host(.navigation-item) .link:focus,:host(.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected) .link:focus,:host(.navigation-item) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected.dark) .link:focus,:host(.navigation-item.dark) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item) .link:active:not(:focus),:host(.navigation-item) ::slotted(a:active:not(:focus)){background-color:var(--ic-theme-active)}:host(.navigation-item-side-menu) .link,:host(.navigation-item-side-menu) ::slotted(a){height:2.5rem;width:100%;box-sizing:border-box;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;text-decoration:none;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast)}:host(.navigation-item-side-menu) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important;transition:box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast)}:host(.navigation-item-side-menu) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover)}:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-side-menu) .focus-indicator:focus-within{box-shadow:none}:host(.navigation-item-side-menu) .link:focus,:host(.navigation-item-side-menu) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset) !important;padding-right:var(--ic-space-lg);width:auto;border-radius:var(--ic-border-radius-inset) !important}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu-selected) ::slotted(a){transition:box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow)}:host(.navigation-item-side-menu-selected) .link:focus,:host(.navigation-item-side-menu) ::slotted(a.active:focus),:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){margin-left:var(--ic-space-xs) !important;padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child) .link,:host(.navigation-item-top-nav-child) ::slotted(a){height:2.5rem;width:-moz-fit-content;width:fit-content;min-width:9.063rem;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;padding:0 var(--ic-space-md) !important;text-decoration:none;position:relative;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow)}:host(.navigation-item-top-nav-child) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important}:host(.navigation-item-top-nav-child) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-top-nav-child) ::slotted(a:focus){z-index:1;outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius-inset);box-shadow:var(--ic-border-focus-inset);transition:border-radius 0s, box-shadow var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}:host(.navigation-item-side-menu) .link:active:not(:focus){background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) .link:active:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus){outline:var(--ic-hc-focus-outline);background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus){background-color:var(--ic-action-dark-bg-active) !important}:host(.navigation-item-side-menu-selected) *,:host(.navigation-item-top-nav-child-selected) *,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){font-weight:700 !important}:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{content:"";position:absolute;left:0;width:var(--ic-space-xs);height:2.5rem;margin-top:0.25rem;margin-right:0.313rem;background-color:var(--ic-action-default);transition:left 0s}:host(.navigation-item-top-nav-child-selected) .link:focus{margin-left:var(--ic-space-xs);margin-right:calc(-1 * var(--ic-space-xs));padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child-selected) .link:focus::before{left:calc(-1 * var(--ic-space-xs));z-index:1}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{z-index:1}:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before{left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-side-menu-selected) .link::after{display:none}:host(.navigation-item-side-nav-collapsed) .link{height:100%}:host(.navigation-item-side-nav-collapsed) ::slotted(svg),:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg){margin:auto;pointer-events:none}:host(.navigation-item-side-nav-collapsed) .icon,:host(.navigation-item-side-nav-collapsed-with-label) .icon,:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{align-items:center;padding:0;margin:auto 0;width:-moz-fit-content;width:fit-content;pointer-events:none}:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}:host(.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;padding:var(--ic-space-xs) !important;gap:var(--ic-space-xxs)}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){height:auto !important;gap:0}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block;text-align:center}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link ic-typography{opacity:1}:host(.navigation-item-side-nav-collapsed) svg,:host(.navigation-item-side-nav-collapsed-with-label) svg{display:none}::slotted(svg){fill:var(--ic-theme-text);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}.icon{width:var(--ic-space-xxl);margin-left:calc(-1 * var(--ic-space-md));flex:0 1 0%}.icon>::slotted(*){margin-left:var(--ic-space-md) !important}:host(.navigation-item-side-nav-collapsed) .icon>::slotted(*){margin:auto !important}:host(.navigation-item-side-nav) .link,:host(.navigation-item-side-nav) ::slotted(a){height:var(--navigation-item-height);width:var(--navigation-item-width);justify-content:var(--navigation-item-justify-content);display:flex;gap:var(--ic-space-xs);box-sizing:border-box;color:var(--navigation-item-child-color) !important;text-decoration:none !important;white-space:nowrap;padding:0 var(--ic-space-md)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a){height:var(--navigation-item-child-height);width:var(--navigation-group-width);color:var(--navigation-item-child-color) !important;display:flex;gap:0.625rem;box-sizing:border-box;min-width:0;transition:box-shadow var(--ic-easing-transition-fast);text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:focus){box-shadow:var(--ic-border-focus-dark)}:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active{background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:active){background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav) a.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) a.link ic-typography,.navigation-item-side-nav-slotted-text{opacity:var(--navigation-item-label-opacity);transition:opacity var(--ic-easing-transition-slow);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(.navigation-item-side-nav.navigation-item-selected) .link,:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active){box-shadow:inset 0.313rem 0 0 var(--ic-theme-text)}:host(.navigation-item-side-nav.navigation-item-selected) .link::before,:host(.navigation-item-side-nav) ::slotted(a.active)::before{content:"";display:block;position:absolute;top:0;right:0;left:0.313rem;border-radius:0.688rem !important;bottom:0;transition:var(--ic-easing-transition-slow)}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before{box-shadow:var(--ic-border-focus-inset)}:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link{opacity:var(--navigation-item-label-opacity);height:auto}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){min-width:var(--navigation-group-item-min-width);padding:var(--ic-space-xs) !important;height:auto;gap:0}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block}:host(.navigation-item-side-nav.navigation-item-selected) .link::after,:host(.navigation-item-side-nav) ::slotted(a.active)::after{display:none}:host(.navigation-item-side-nav.navigation-item) .link:focus,:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,:host(.navigation-item-side-nav) ::slotted(a.active:focus){margin:0 auto;box-shadow:inset 0.313rem 0 0 var(--ic-theme-text);border-radius:0}:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover) !important}:host(.navigation-item-page-header).link,:host(.navigation-item-page-header) a,:host(.navigation-item-page-header) ::slotted(a){height:2.5rem !important;color:var(--ic-color-primary-text) !important;transition:all var(--ic-easing-transition-fast) !important;box-shadow:rgba(23 89 188 / 0%) !important}:host(.navigation-item-page-header.navigation-item-selected) .link,:host(.navigation-item-page-header) ::slotted(a.active){box-shadow:inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default)}:host(.navigation-item-page-header) .link:hover,:host(.navigation-item-page-header) ::slotted(.link:hover),:host(.navigation-item-page-header) ::slotted(a:hover),:host(.navigation-item-page-header) .link:hover:not(:focus){background-color:var(--ic-action-default-bg-hover) !important;cursor:pointer}:host(.navigation-item-page-header) .link:focus,:host(.navigation-item-page-header) ::slotted(a:focus){box-shadow:var(--ic-border-focus)}:host(.navigation-item-page-header) .link:active,:host(.navigation-item-page-header) ::slotted(a:active){background-color:var(--ic-action-default-bg-active) !important}:host(.navigation-item-page-header.navigation-item-selected) .link:focus,:host(.navigation-item-page-header) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus),\n inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default)}:host(.navigation-item-page-header.navigation-item-selected.with-transition) .link,:host(.navigation-item-page-header.navigation-item-selected.with-transition) ::slotted(a.active){transition:all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast)}:host(.navigation-item-page-header) ::slotted(a.active)::before,:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,:host(.navigation-item-page-header.navigation-item-selected) .link:focus::before{display:none}.open-in-new-icon{flex:1}.open-in-new-icon svg{margin-top:var(--ic-space-xxs);padding-left:var(--ic-space-xxs)}:host(.navigation-item-side-nav) .open-in-new-icon{margin-left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-top-nav) .open-in-new-icon svg,:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-side-nav) .open-in-new-icon svg{height:0.875rem;width:0.875rem}:host(.navigation-item-side-menu) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg{height:var(--ic-space-md);width:var(--ic-space-md)}:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg,:host(.navigation-item-side-menu) .open-in-new-icon svg{fill:var(--ic-color-primary-text)}';const g=class{constructor(a){i(this,a);this.childBlur=t(this,"childBlur",7);this.navItemClicked=t(this,"navItemClicked",7);this.topNavResizedHandler=i=>{const t=i.detail.size;if(t!==this.deviceSize){this.deviceSize=t;this.inTopNavSideMenu=t<=n.L}};this.sideNavExpandHandler=i=>{const{sideNavExpanded:t,sideNavMobile:e}=i.detail;this.sideNavExpanded=t;this.isSideNavMobile=e};this.handleBlur=i=>{if(i.relatedTarget!==null){const t=i.relatedTarget;if(t.tagName==="IC-NAVIGATION-ITEM"){return}}this.childBlur.emit()};this.handleClick=()=>{this.navItemClicked.emit()};this.isInitialRender=true;this.displayDefaultNavigationItem=(i,t,a,o,n,s,r)=>{const d=this.isTopNavChild||this.inTopNavSideMenu?"body":"label";const c="ic-tooltip-navigation-item";const h=this.expandable&&e("div",{class:{svg:true},innerHTML:l});const g=this.el.querySelector('[slot="icon"]')&&e("div",{class:"icon"}," ",e("slot",{name:"icon"})," ");if(i!==""){return e("a",{href:i,target:a,rel:o,hreflang:t,referrerPolicy:n,download:s!==false?s:null,class:"link",ref:i=>this.itemEl=i,part:"link","aria-labelledby":c},g,e("ic-typography",{variant:d},r),h,a==="_blank"&&e("span",{class:"open-in-new-icon",innerHTML:v}))}return e("div",{tabindex:"0",class:"link",ref:i=>this.itemEl=i,"aria-labelledby":c},g,e("ic-typography",{variant:d},r),h)};this.label=undefined;this.href="";this.target=undefined;this.rel=undefined;this.hreflang=undefined;this.referrerpolicy=undefined;this.download=false;this.selected=false;this.expandable=false;this.displayNavigationTooltip=false;this.collapsedIconLabel=false;this.isTopNavChild=false;this.inTopNavSideMenu=false;this.deviceSize=n.XL;this.focusStyle=s();this.navigationType=undefined;this.parentEl=undefined;this.sideNavExpanded=false;this.isSideNavMobile=false}themeChangeHandler(i){const t=i.detail;this.focusStyle=t.mode}async setFocus(){if(this.itemEl){this.itemEl.focus()}}componentWillLoad(){const i=c(this.el);this.navigationType=i.navType;this.parentEl=i.parent;if(this.navigationType==="side"){this.parentEl.addEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.addEventListener("topNavResized",this.topNavResizedHandler)}if(r(this.el)==="IC-NAVIGATION-GROUP"&&this.navigationType==="top"){this.isTopNavChild=true}this.deviceSize=d();if(this.deviceSize<=n.L&&this.navigationType==="top"){this.inTopNavSideMenu=true}this.navigationSlot=this.el.querySelector('[slot="navigation-item"]');if(this.navigationSlot){this.navigationSlot.ariaLabel=this.navigationSlot.textContent.trim()}}componentDidUpdate(){this.isInitialRender=false}disconnectedCallback(){if(this.navigationType==="side"){this.parentEl.removeEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.removeEventListener("topNavResized",this.topNavResizedHandler)}}render(){const{href:i,hreflang:t,target:o,rel:n,referrerpolicy:s,download:r,label:d,inTopNavSideMenu:c,isTopNavChild:l,selected:v,navigationSlot:h}=this;return e(a,{class:{["navigation-item"]:true,["navigation-item-top-nav"]:!c&&this.navigationType==="top",["navigation-item-top-nav-child-selected"]:l&&!c&&v,[this.focusStyle]:!c&&!l||this.navigationType==="side"&&l,["navigation-item-selected"]:!l&&v,["navigation-item-side-menu"]:c,["navigation-item-side-menu-selected"]:c&&v,["navigation-item-top-nav-child"]:l&&!c,["navigation-item-page-header"]:this.navigationType==="page-header",["with-transition"]:!this.isInitialRender,["navigation-item-side-nav"]:this.navigationType==="side",["navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["navigation-item-side-nav-collapsed-with-label"]:!this.sideNavExpanded&&this.navigationType==="side"&&this.collapsedIconLabel&&!this.isSideNavMobile,["expandable"]:this.expandable},onBlur:l&&!c?this.handleBlur:null,onClick:this.handleClick,"aria-current":v?"page":null,role:"listitem"},e("ic-tooltip",{label:d||h.textContent,target:"navigation-item",placement:"right",class:{["tooltip-navigation-item"]:true,["tooltip-navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["tooltip-long-label-navigation-item-side-nav-expanded"]:this.el.hasAttribute("[display-navigation-tooltip = 'true']")}},h?e("slot",{name:"navigation-item"}):this.displayDefaultNavigationItem(i,t,o,n,s,r,d)))}static get delegatesFocus(){return true}get el(){return o(this)}};g.style=h;export{g as ic_navigation_item};
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as i,c as t,h as e,H as a,g as o}from"./p-589f6dd3.js";import{D as n,k as s,q as r,g as d,p as c}from"./p-471820e6.js";import{C as l}from"./p-06321d19.js";import{O as v}from"./p-8d4f7027.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(:focus-within){z-index:var(--ic-z-index-navigation-item)}svg{width:var(--ic-space-xl);fill:var(--ic-theme-text)}.svg{margin-left:auto}:host(.expandable.navigation-item) .link,:host(.expandable.navigation-item) ::slotted(a){padding-right:0}:host(.navigation-item) .link,:host(.navigation-item) ::slotted(a){height:calc(100% - var(--ic-space-xxs));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) var(--ic-space-xxs);text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative;white-space:nowrap}:host(.navigation-item) ::slotted(a){height:100%;font:var(--ic-font-label) !important;letter-spacing:var(--ic-font-letter-spacing-0pt025) !important;padding:0 var(--ic-space-md) !important}:host(.navigation-item-selected) .link::after,:host(.navigation-item-selected) ::slotted(a.active)::after,:host(.navigation-item-top-nav) ::slotted(a.active)::after{content:"";height:0.25rem;width:100%;position:absolute;bottom:0;background-color:var(--ic-theme-text)}:host(.navigation-item-selected.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-selected.navigation-item-page-header) .link::after,:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,:host(.navigation-item-top-nav-child) ::slotted(a.active)::after{content:none}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){box-shadow:none}:host(.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover);cursor:pointer}:host(.navigation-item:not(.navigation-item-page-header,.navigation-item-side-menu)) ::slotted(a:hover:not(:focus)){background-color:var(--ic-theme-hover) !important}:host(.navigation-item:not(.navigation-item-top-nav-child,.navigation-item-side-menu,.navigation-item-top-nav-child-selected .navigation-item-side-menu-selected)) .focus-indicator:focus-within{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius)}:host(.navigation-item) .link:focus,:host(.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected) .link:focus,:host(.navigation-item) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item-selected.dark) .link:focus,:host(.navigation-item.dark) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);outline:var(--ic-hc-focus-outline)}:host(.navigation-item) .link:active:not(:focus),:host(.navigation-item) ::slotted(a:active:not(:focus)){background-color:var(--ic-theme-active)}:host(.navigation-item-side-menu) .link,:host(.navigation-item-side-menu) ::slotted(a){height:2.5rem;width:100%;box-sizing:border-box;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;text-decoration:none;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast)}:host(.navigation-item-side-menu) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important;transition:box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast)}:host(.navigation-item-side-menu) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover)}:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-side-menu) .focus-indicator:focus-within{box-shadow:none}:host(.navigation-item-side-menu) .link:focus,:host(.navigation-item-side-menu) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset) !important;padding-right:var(--ic-space-lg);width:auto;border-radius:var(--ic-border-radius-inset) !important}:host(.navigation-item-side-menu-selected) .link,:host(.navigation-item-side-menu-selected) ::slotted(a){transition:box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow)}:host(.navigation-item-side-menu-selected) .link:focus,:host(.navigation-item-side-menu) ::slotted(a.active:focus),:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){margin-left:var(--ic-space-xs) !important;padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child) .link,:host(.navigation-item-top-nav-child) ::slotted(a){height:2.5rem;width:-moz-fit-content;width:fit-content;min-width:9.063rem;color:var(--ic-color-primary-text);display:flex;align-items:center;justify-content:flex-start;padding:0 var(--ic-space-md) !important;text-decoration:none;position:relative;transition:box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow)}:host(.navigation-item-top-nav-child) ::slotted(a){font:var(--ic-font-body) !important;letter-spacing:var(--ic-font-letter-spacing-0pt005) !important}:host(.navigation-item-top-nav-child) .link:hover:not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus){background-color:var(--ic-action-dark-bg-hover) !important}:host(.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-top-nav-child) ::slotted(a:focus){z-index:1;outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius-inset);box-shadow:var(--ic-border-focus-inset);transition:border-radius 0s, box-shadow var(--ic-transition-duration-fast)}:host(.navigation-item-top-nav-child) ::slotted(a.active:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}:host(.navigation-item-side-menu) .link:active:not(:focus){background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) .link:active:not(:focus),:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus){outline:var(--ic-hc-focus-outline);background-color:var(--ic-action-dark-bg-active)}:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus){background-color:var(--ic-action-dark-bg-active) !important}:host(.navigation-item-side-menu-selected) *,:host(.navigation-item-top-nav-child-selected) *,:host(.navigation-item-side-menu) ::slotted(a.active),:host(.navigation-item-top-nav-child) ::slotted(a.active){font-weight:700 !important}:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,:host(.navigation-item-top-nav-child-selected) .link::before,:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{content:"";position:absolute;left:0;width:var(--ic-space-xs);height:2.5rem;margin-top:0.25rem;margin-right:0.313rem;background-color:var(--ic-action-default);transition:left 0s}:host(.navigation-item-top-nav-child-selected) .link:focus{margin-left:var(--ic-space-xs);margin-right:calc(-1 * var(--ic-space-xs));padding-left:var(--ic-space-xs) !important}:host(.navigation-item-top-nav-child-selected) .link:focus::before{left:calc(-1 * var(--ic-space-xs));z-index:1}:host(.navigation-item-side-menu-selected) .link::before,:host(.navigation-item-side-menu) ::slotted(a.active)::before,:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before{z-index:1}:host(.navigation-item-side-menu-selected) .link:focus::before,:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before{left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-side-menu-selected) .link::after{display:none}:host(.navigation-item-side-nav-collapsed) .link{height:100%}:host(.navigation-item-side-nav-collapsed) ::slotted(svg),:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg){margin:auto;pointer-events:none}:host(.navigation-item-side-nav-collapsed) .icon,:host(.navigation-item-side-nav-collapsed-with-label) .icon,:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{align-items:center;padding:0;margin:auto 0;width:-moz-fit-content;width:fit-content;pointer-events:none}:host(.navigation-item-side-nav-collapsed-with-label) ic-typography{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}:host(.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;padding:var(--ic-space-xs) !important;gap:var(--ic-space-xxs)}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){height:auto !important;gap:0}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block;text-align:center}:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link ic-typography{opacity:1}:host(.navigation-item-side-nav-collapsed) svg,:host(.navigation-item-side-nav-collapsed-with-label) svg{display:none}::slotted(svg){fill:var(--ic-theme-text);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}.icon{width:var(--ic-space-xxl);margin-left:calc(-1 * var(--ic-space-md));flex:0 1 0%}.icon>::slotted(*){margin-left:var(--ic-space-md) !important}:host(.navigation-item-side-nav-collapsed) .icon>::slotted(*){margin:auto !important}:host(.navigation-item-side-nav) .link,:host(.navigation-item-side-nav) ::slotted(a){height:var(--navigation-item-height);width:var(--navigation-item-width);justify-content:var(--navigation-item-justify-content);display:flex;gap:var(--ic-space-xs);box-sizing:border-box;color:var(--navigation-item-child-color) !important;text-decoration:none !important;white-space:nowrap;padding:0 var(--ic-space-md)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a){height:var(--navigation-item-child-height);width:var(--navigation-group-width);color:var(--navigation-item-child-color) !important;display:flex;gap:0.625rem;box-sizing:border-box;min-width:0;transition:box-shadow var(--ic-easing-transition-fast);text-decoration:none !important;white-space:nowrap}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:focus){box-shadow:var(--ic-border-focus-dark)}:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active{background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a:active){background-color:var(--navigation-item-child-active)}:host(.navigation-item-side-nav) a.link ic-typography,:host(.navigation-item-side-nav.navigation-item-top-nav-child) a.link ic-typography,.navigation-item-side-nav-slotted-text{opacity:var(--navigation-item-label-opacity);transition:opacity var(--ic-easing-transition-slow);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(.navigation-item-side-nav.navigation-item-selected) .link,:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active){box-shadow:inset 0.313rem 0 0 var(--ic-theme-text)}:host(.navigation-item-side-nav.navigation-item-selected) .link::before,:host(.navigation-item-side-nav) ::slotted(a.active)::before{content:"";display:block;position:absolute;top:0;right:0;left:0.313rem;border-radius:0.688rem !important;bottom:0;transition:var(--ic-easing-transition-slow)}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before{box-shadow:var(--ic-border-focus-inset)}:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label) .link{opacity:var(--navigation-item-label-opacity);height:auto}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) .link,:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){min-width:var(--navigation-group-item-min-width);padding:var(--ic-space-xs) !important;height:auto;gap:0}:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label) ::slotted(a){display:block}:host(.navigation-item-side-nav.navigation-item-selected) .link::after,:host(.navigation-item-side-nav) ::slotted(a.active)::after{display:none}:host(.navigation-item-side-nav.navigation-item) .link:focus,:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus){box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,:host(.navigation-item-side-nav) ::slotted(a.active:focus){margin:0 auto;box-shadow:inset 0.313rem 0 0 var(--ic-theme-text);border-radius:0}:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus){background-color:var(--ic-theme-hover) !important}:host(.navigation-item-page-header).link,:host(.navigation-item-page-header) a,:host(.navigation-item-page-header) ::slotted(a){height:2.5rem !important;color:var(--ic-color-primary-text) !important;transition:all var(--ic-easing-transition-fast) !important;box-shadow:rgba(23 89 188 / 0%) !important}:host(.navigation-item-page-header.navigation-item-selected) .link::after,:host(.navigation-item-page-header) ::slotted(a.active)::after{content:" " !important;position:absolute;bottom:0;left:0;right:0;height:var(--ic-space-xxs);background-color:var(--ic-action-default) !important}:host(.navigation-item-page-header) .link:hover,:host(.navigation-item-page-header) ::slotted(.link:hover),:host(.navigation-item-page-header) ::slotted(a:hover),:host(.navigation-item-page-header) .link:hover:not(:focus){background-color:var(--ic-action-default-bg-hover) !important;cursor:pointer}:host(.navigation-item-page-header) .link:focus,:host(.navigation-item-page-header) ::slotted(a:focus){box-shadow:var(--ic-border-focus)}:host(.navigation-item-page-header) .link:active,:host(.navigation-item-page-header) ::slotted(a:active){background-color:var(--ic-action-default-bg-active) !important}:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,:host(.navigation-item-page-header) ::slotted(a.active:focus)::after{border-bottom-left-radius:var(--ic-border-radius);border-bottom-right-radius:var(--ic-border-radius)}:host(.navigation-item-page-header.navigation-item-selected.with-transition) .link,:host(.navigation-item-page-header.navigation-item-selected.with-transition) ::slotted(a.active){transition:all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast)}:host(.navigation-item-page-header) ::slotted(a.active)::before,:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,:host(.navigation-item-page-header.navigation-item-selected) .link:focus::before{display:none}.open-in-new-icon{flex:1}.open-in-new-icon svg{margin-top:var(--ic-space-xxs);padding-left:var(--ic-space-xxs)}:host(.navigation-item-side-nav) .open-in-new-icon{margin-left:calc(-1 * var(--ic-space-xs))}:host(.navigation-item-top-nav) .open-in-new-icon svg,:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-side-nav) .open-in-new-icon svg{height:0.875rem;width:0.875rem}:host(.navigation-item-side-menu) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg{height:var(--ic-space-md);width:var(--ic-space-md)}:host(.navigation-item-page-header) .open-in-new-icon svg,:host(.navigation-item-top-nav-child) .open-in-new-icon svg,:host(.navigation-item-side-menu) .open-in-new-icon svg{fill:var(--ic-color-primary-text)}';const g=class{constructor(a){i(this,a);this.childBlur=t(this,"childBlur",7);this.navItemClicked=t(this,"navItemClicked",7);this.topNavResizedHandler=i=>{const t=i.detail.size;if(t!==this.deviceSize){this.deviceSize=t;this.inTopNavSideMenu=t<=n.L}};this.sideNavExpandHandler=i=>{const{sideNavExpanded:t,sideNavMobile:e}=i.detail;this.sideNavExpanded=t;this.isSideNavMobile=e};this.handleBlur=i=>{if(i.relatedTarget!==null){const t=i.relatedTarget;if(t.tagName==="IC-NAVIGATION-ITEM"){return}}this.childBlur.emit()};this.handleClick=()=>{this.navItemClicked.emit()};this.isInitialRender=true;this.displayDefaultNavigationItem=(i,t,a,o,n,s,r)=>{const d=this.isTopNavChild||this.inTopNavSideMenu?"body":"label";const c="ic-tooltip-navigation-item";const h=this.expandable&&e("div",{class:{svg:true},innerHTML:l});const g=this.el.querySelector('[slot="icon"]')&&e("div",{class:"icon"}," ",e("slot",{name:"icon"})," ");if(i!==""){return e("a",{href:i,target:a,rel:o,hreflang:t,referrerPolicy:n,download:s!==false?s:null,class:"link",ref:i=>this.itemEl=i,part:"link","aria-labelledby":c},g,e("ic-typography",{variant:d},r),h,a==="_blank"&&e("span",{class:"open-in-new-icon",innerHTML:v}))}return e("div",{tabindex:"0",class:"link",ref:i=>this.itemEl=i,"aria-labelledby":c},g,e("ic-typography",{variant:d},r),h)};this.label=undefined;this.href="";this.target=undefined;this.rel=undefined;this.hreflang=undefined;this.referrerpolicy=undefined;this.download=false;this.selected=false;this.expandable=false;this.displayNavigationTooltip=false;this.collapsedIconLabel=false;this.isTopNavChild=false;this.inTopNavSideMenu=false;this.deviceSize=n.XL;this.focusStyle=s();this.navigationType=undefined;this.parentEl=undefined;this.sideNavExpanded=false;this.isSideNavMobile=false}themeChangeHandler(i){const t=i.detail;this.focusStyle=t.mode}async setFocus(){if(this.itemEl){this.itemEl.focus()}}componentWillLoad(){const i=c(this.el);this.navigationType=i.navType;this.parentEl=i.parent;if(this.navigationType==="side"){this.parentEl.addEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.addEventListener("topNavResized",this.topNavResizedHandler)}if(r(this.el)==="IC-NAVIGATION-GROUP"&&this.navigationType==="top"){this.isTopNavChild=true}this.deviceSize=d();if(this.deviceSize<=n.L&&this.navigationType==="top"){this.inTopNavSideMenu=true}this.navigationSlot=this.el.querySelector('[slot="navigation-item"]');if(this.navigationSlot){this.navigationSlot.ariaLabel=this.navigationSlot.textContent.trim()}}componentDidUpdate(){this.isInitialRender=false}disconnectedCallback(){if(this.navigationType==="side"){this.parentEl.removeEventListener("sideNavExpanded",this.sideNavExpandHandler)}else if(this.navigationType==="top"){this.parentEl.removeEventListener("topNavResized",this.topNavResizedHandler)}}render(){const{href:i,hreflang:t,target:o,rel:n,referrerpolicy:s,download:r,label:d,inTopNavSideMenu:c,isTopNavChild:l,selected:v,navigationSlot:h}=this;return e(a,{class:{["navigation-item"]:true,["navigation-item-top-nav"]:!c&&this.navigationType==="top",["navigation-item-top-nav-child-selected"]:l&&!c&&v,[this.focusStyle]:!c&&!l||this.navigationType==="side"&&l,["navigation-item-selected"]:!l&&v,["navigation-item-side-menu"]:c,["navigation-item-side-menu-selected"]:c&&v,["navigation-item-top-nav-child"]:l&&!c,["navigation-item-page-header"]:this.navigationType==="page-header",["with-transition"]:!this.isInitialRender,["navigation-item-side-nav"]:this.navigationType==="side",["navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["navigation-item-side-nav-collapsed-with-label"]:!this.sideNavExpanded&&this.navigationType==="side"&&this.collapsedIconLabel&&!this.isSideNavMobile,["expandable"]:this.expandable},onBlur:l&&!c?this.handleBlur:null,onClick:this.handleClick,"aria-current":v?"page":null,role:"listitem"},e("ic-tooltip",{label:d||h.textContent,target:"navigation-item",placement:"right",class:{["tooltip-navigation-item"]:true,["tooltip-navigation-item-side-nav-collapsed"]:(!this.sideNavExpanded||this.displayNavigationTooltip)&&this.navigationType==="side",["tooltip-long-label-navigation-item-side-nav-expanded"]:this.el.hasAttribute("[display-navigation-tooltip = 'true']")}},h?e("slot",{name:"navigation-item"}):this.displayDefaultNavigationItem(i,t,o,n,s,r,d)))}static get delegatesFocus(){return true}get el(){return o(this)}};g.style=h;export{g as ic_navigation_item};
|
2
|
+
//# sourceMappingURL=p-d2d5132d.entry.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["src/components/ic-navigation-item/ic-navigation-item.css?tag=ic-navigation-item&encapsulation=shadow","src/components/ic-navigation-item/ic-navigation-item.tsx"],"names":["icNavigationItemCss","NavigationItem","this","topNavResizedHandler","ev","newSize","detail","size","deviceSize","inTopNavSideMenu","DEVICE_SIZES","L","sideNavExpandHandler","sideNavExpanded","sideNavMobile","isSideNavMobile","handleBlur","relatedTarget","target","tagName","childBlur","emit","handleClick","navItemClicked","isInitialRender","displayDefaultNavigationItem","href","hreflang","rel","referrerpolicy","download","label","variant","isTopNavChild","tooltipId","ChevronIconComponent","expandable","h","class","svg","innerHTML","chevronIcon","IconComponent","el","querySelector","name","referrerPolicy","ref","itemEl","part","aria-labelledby","OpenInNew","tabindex","XL","getThemeForegroundColor","[object Object]","theme","focusStyle","mode","focus","navParentDetails","getNavItemParentDetails","navigationType","navType","parentEl","parent","addEventListener","getParentElementType","getCurrentDeviceSize","navigationSlot","ariaLabel","textContent","trim","removeEventListener","selected","Host","displayNavigationTooltip","collapsedIconLabel","onBlur","onClick","aria-current","role","placement","hasAttribute"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-navigation-item: z-index of navigation item\n */\n\n:host {\n display: block;\n}\n\n:host(:focus-within) {\n z-index: var(--ic-z-index-navigation-item);\n}\n\n/* chevron */\nsvg {\n width: var(--ic-space-xl);\n fill: var(--ic-theme-text);\n}\n\n.svg {\n margin-left: auto;\n}\n\n:host(.expandable.navigation-item) .link,\n:host(.expandable.navigation-item) ::slotted(a) {\n padding-right: 0;\n}\n\n:host(.navigation-item) .link,\n:host(.navigation-item) ::slotted(a) {\n height: calc(100% - var(--ic-space-xxs));\n width: fit-content;\n color: var(--ic-theme-text);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n white-space: nowrap;\n}\n\n:host(.navigation-item) ::slotted(a) {\n height: 100%;\n font: var(--ic-font-label) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n content: \"\";\n height: 0.25rem;\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-theme-text);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover);\n cursor: pointer;\n}\n\n:host(.navigation-item:not(.navigation-item-page-header, .navigation-item-side-menu))\n ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item:not(.navigation-item-top-nav-child, .navigation-item-side-menu, .navigation-item-top-nav-child-selected\n .navigation-item-side-menu-selected))\n .focus-indicator:focus-within {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected.dark) .link:focus,\n:host(.navigation-item.dark) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-theme-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n height: 2.5rem;\n width: 100%;\n box-sizing: border-box;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-decoration: none;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset) !important;\n padding-right: var(--ic-space-lg);\n width: auto;\n border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n transition: box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n margin-left: var(--ic-space-xs) !important;\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n height: 2.5rem;\n width: fit-content;\n min-width: 9.063rem;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) !important;\n text-decoration: none;\n position: relative;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n z-index: 1;\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius-inset);\n box-shadow: var(--ic-border-focus-inset);\n transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus) {\n outline: var(--ic-hc-focus-outline);\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),\n:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus) {\n background-color: var(--ic-action-dark-bg-active) !important;\n}\n\n:host(.navigation-item-side-menu-selected) *,\n:host(.navigation-item-top-nav-child-selected) *,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: var(--ic-space-xs);\n height: 2.5rem;\n margin-top: 0.25rem;\n margin-right: 0.313rem;\n background-color: var(--ic-action-default);\n transition: left 0s;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus {\n margin-left: var(--ic-space-xs);\n margin-right: calc(-1 * var(--ic-space-xs));\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus::before {\n left: calc(-1 * var(--ic-space-xs));\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before {\n left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-side-menu-selected) .link::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .link {\n height: 100%;\n}\n\n:host(.navigation-item-side-nav-collapsed) ::slotted(svg),\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg) {\n margin: auto;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n align-items: center;\n padding: 0;\n margin: auto 0;\n width: fit-content;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) .link,\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a) {\n display: flex;\n flex-direction: column;\n height: fit-content;\n padding: var(--ic-space-xs) !important;\n gap: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n height: auto !important;\n gap: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link\n ic-typography {\n opacity: 1;\n}\n\n:host(.navigation-item-side-nav-collapsed) svg,\n:host(.navigation-item-side-nav-collapsed-with-label) svg {\n display: none;\n}\n\n::slotted(svg) {\n fill: var(--ic-theme-text);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n.icon {\n width: var(--ic-space-xxl);\n margin-left: calc(-1 * var(--ic-space-md));\n flex: 0 1 0%;\n}\n\n.icon > ::slotted(*) {\n margin-left: var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon > ::slotted(*) {\n margin: auto !important;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n height: var(--navigation-item-height);\n width: var(--navigation-item-width);\n justify-content: var(--navigation-item-justify-content);\n display: flex;\n gap: var(--ic-space-xs);\n box-sizing: border-box;\n color: var(--navigation-item-child-color) !important;\n text-decoration: none !important;\n white-space: nowrap;\n padding: 0 var(--ic-space-md);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a) {\n height: var(--navigation-item-child-height);\n width: var(--navigation-group-width);\n color: var(--navigation-item-child-color) !important;\n display: flex;\n gap: 0.625rem;\n box-sizing: border-box;\n min-width: 0;\n transition: box-shadow var(--ic-easing-transition-fast);\n text-decoration: none !important;\n white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:active) {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav) a.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n a.link\n ic-typography,\n.navigation-item-side-nav-slotted-text {\n opacity: var(--navigation-item-label-opacity);\n transition: opacity var(--ic-easing-transition-slow);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {\n box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n left: 0.313rem;\n border-radius: 0.688rem !important;\n bottom: 0;\n transition: var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before {\n box-shadow: var(--ic-border-focus-inset);\n}\n\n:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link {\n opacity: var(--navigation-item-label-opacity);\n height: auto;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n min-width: var(--navigation-group-item-min-width);\n padding: var(--ic-space-xs) !important;\n height: auto;\n gap: 0;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n margin: 0 auto;\n box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n border-radius: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n height: 2.5rem !important;\n color: var(--ic-color-primary-text) !important;\n transition: all var(--ic-easing-transition-fast) !important;\n box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link,\n:host(.navigation-item-page-header) ::slotted(a.active) {\n box-shadow: inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default);\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n background-color: var(--ic-action-default-bg-hover) !important;\n cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n background-color: var(--ic-action-default-bg-active) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus),\n inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n ::slotted(a.active) {\n transition: all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n .link:focus::before {\n display: none;\n}\n\n.open-in-new-icon {\n flex: 1;\n}\n\n.open-in-new-icon svg {\n margin-top: var(--ic-space-xxs);\n padding-left: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav) .open-in-new-icon {\n margin-left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-top-nav) .open-in-new-icon svg,\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-side-nav) .open-in-new-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n:host(.navigation-item-side-menu) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg,\n:host(.navigation-item-side-menu) .open-in-new-icon svg {\n fill: var(--ic-color-primary-text);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n h,\n Host,\n Prop,\n State,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getParentElementType,\n getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n */\n\n@Component({\n tag: \"ic-navigation-item\",\n styleUrl: \"ic-navigation-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationItem {\n @Element() el: HTMLIcNavigationItemElement;\n\n /**\n * The label of the navigation item.\n */\n @Prop() label: string;\n\n /**\n * The destination of the navigation item.\n */\n @Prop() href: string = \"\";\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * If `true`, the user can save the linked URL instead of navigating to it.\n */\n @Prop() download?: string | boolean = false;\n\n /**\n * If `true`, the navigation item will be set in a selected state.\n */\n @Prop() selected: boolean = false;\n\n /**\n * @internal If `true`, the navigation item will be expandable.\n */\n @Prop() expandable: boolean = false;\n /**\n * @internal If `true`, the navigation item will be displayed within a tooltip.\n */\n @Prop() displayNavigationTooltip: boolean = false;\n /**\n * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n */\n @Prop() collapsedIconLabel: boolean = false;\n\n @State() isTopNavChild: boolean = false;\n @State() inTopNavSideMenu: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() focusStyle = getThemeForegroundColor();\n @State() navigationType: IcNavType | \"\";\n @State() parentEl: HTMLElement;\n @State() sideNavExpanded: boolean = false;\n @State() isSideNavMobile: boolean = false;\n\n private itemEl: HTMLElement;\n private navigationSlot: HTMLElement;\n\n /**\n * @internal - Emitted when item loses focus.\n */\n @Event() childBlur: EventEmitter<void>;\n\n /**\n * @internal - Emitted when navigation item clicked.\n */\n @Event() navItemClicked: EventEmitter<void>;\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.focusStyle = theme.mode;\n }\n\n private topNavResizedHandler = (ev: CustomEvent): void => {\n const newSize = ev.detail.size;\n if (newSize !== this.deviceSize) {\n this.deviceSize = newSize;\n this.inTopNavSideMenu = newSize <= DEVICE_SIZES.L;\n }\n };\n\n private sideNavExpandHandler = (ev: CustomEvent): void => {\n const { sideNavExpanded, sideNavMobile } = ev.detail;\n this.sideNavExpanded = sideNavExpanded;\n this.isSideNavMobile = sideNavMobile;\n };\n\n /**\n * Sets focus on the nav item.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.itemEl) {\n this.itemEl.focus();\n }\n }\n\n private handleBlur = (ev: FocusEvent) => {\n if (ev.relatedTarget !== null) {\n const target = ev.relatedTarget as HTMLElement;\n if (target.tagName === \"IC-NAVIGATION-ITEM\") {\n return;\n }\n }\n this.childBlur.emit();\n };\n\n private handleClick = () => {\n this.navItemClicked.emit();\n };\n\n componentWillLoad(): void {\n const navParentDetails = getNavItemParentDetails(this.el);\n this.navigationType = navParentDetails.navType;\n this.parentEl = navParentDetails.parent;\n\n if (this.navigationType === \"side\") {\n this.parentEl.addEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.addEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n }\n\n if (\n getParentElementType(this.el) === \"IC-NAVIGATION-GROUP\" &&\n this.navigationType === \"top\"\n ) {\n this.isTopNavChild = true;\n }\n\n this.deviceSize = getCurrentDeviceSize();\n if (this.deviceSize <= DEVICE_SIZES.L && this.navigationType === \"top\") {\n this.inTopNavSideMenu = true;\n }\n\n this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n if (this.navigationSlot) {\n this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n }\n }\n\n private isInitialRender: boolean = true;\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n disconnectedCallback(): void {\n if (this.navigationType === \"side\") {\n this.parentEl.removeEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.removeEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n }\n }\n\n private displayDefaultNavigationItem = (\n href: string,\n hreflang: string,\n target: string,\n rel: string,\n referrerpolicy: ReferrerPolicy,\n download: string | boolean,\n label: string\n ): HTMLElement => {\n const variant =\n this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n const tooltipId = \"ic-tooltip-navigation-item\";\n const ChevronIconComponent = this.expandable && (\n <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n );\n const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n <div class=\"icon\">\n {\" \"}\n <slot name=\"icon\"></slot>{\" \"}\n </div>\n );\n\n if (href !== \"\") {\n return (\n <a\n href={href}\n target={target}\n rel={rel}\n hreflang={hreflang}\n referrerPolicy={referrerpolicy}\n download={download !== false ? download : null}\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n part=\"link\"\n aria-labelledby={tooltipId}\n >\n {IconComponent}\n\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n {target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n );\n }\n\n return (\n <div\n tabindex=\"0\"\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n aria-labelledby={tooltipId}\n >\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n </div>\n );\n };\n\n render() {\n const {\n href,\n hreflang,\n target,\n rel,\n referrerpolicy,\n download,\n label,\n inTopNavSideMenu,\n isTopNavChild,\n selected,\n navigationSlot,\n } = this;\n\n return (\n <Host\n class={{\n [\"navigation-item\"]: true,\n [\"navigation-item-top-nav\"]:\n !inTopNavSideMenu && this.navigationType === \"top\",\n [\"navigation-item-top-nav-child-selected\"]:\n isTopNavChild && !inTopNavSideMenu && selected,\n [this.focusStyle]:\n (!inTopNavSideMenu && !isTopNavChild) ||\n (this.navigationType === \"side\" && isTopNavChild),\n [\"navigation-item-selected\"]: !isTopNavChild && selected,\n [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n [\"navigation-item-page-header\"]:\n this.navigationType === \"page-header\",\n [\"with-transition\"]: !this.isInitialRender,\n [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed-with-label\"]:\n !this.sideNavExpanded &&\n this.navigationType === \"side\" &&\n this.collapsedIconLabel &&\n !this.isSideNavMobile,\n [\"expandable\"]: this.expandable,\n }}\n onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n onClick={this.handleClick}\n aria-current={selected ? \"page\" : null}\n role=\"listitem\"\n >\n {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n <ic-tooltip\n label={label || navigationSlot.textContent}\n target=\"navigation-item\"\n placement=\"right\"\n class={{\n [\"tooltip-navigation-item\"]: true,\n [\"tooltip-navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n }}\n >\n {navigationSlot ? (\n <slot name=\"navigation-item\"></slot>\n ) : (\n this.displayDefaultNavigationItem(\n href,\n hreflang,\n target,\n rel,\n referrerpolicy,\n download,\n label\n )\n )}\n </ic-tooltip>\n </Host>\n );\n }\n}\n"]}
|
1
|
+
{"version":3,"sources":["src/components/ic-navigation-item/ic-navigation-item.css?tag=ic-navigation-item&encapsulation=shadow","src/components/ic-navigation-item/ic-navigation-item.tsx"],"names":["icNavigationItemCss","NavigationItem","this","topNavResizedHandler","ev","newSize","detail","size","deviceSize","inTopNavSideMenu","DEVICE_SIZES","L","sideNavExpandHandler","sideNavExpanded","sideNavMobile","isSideNavMobile","handleBlur","relatedTarget","target","tagName","childBlur","emit","handleClick","navItemClicked","isInitialRender","displayDefaultNavigationItem","href","hreflang","rel","referrerpolicy","download","label","variant","isTopNavChild","tooltipId","ChevronIconComponent","expandable","h","class","svg","innerHTML","chevronIcon","IconComponent","el","querySelector","name","referrerPolicy","ref","itemEl","part","aria-labelledby","OpenInNew","tabindex","XL","getThemeForegroundColor","[object Object]","theme","focusStyle","mode","focus","navParentDetails","getNavItemParentDetails","navigationType","navType","parentEl","parent","addEventListener","getParentElementType","getCurrentDeviceSize","navigationSlot","ariaLabel","textContent","trim","removeEventListener","selected","Host","displayNavigationTooltip","collapsedIconLabel","onBlur","onClick","aria-current","role","placement","hasAttribute"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-navigation-item: z-index of navigation item\n */\n\n:host {\n display: block;\n}\n\n:host(:focus-within) {\n z-index: var(--ic-z-index-navigation-item);\n}\n\n/* chevron */\nsvg {\n width: var(--ic-space-xl);\n fill: var(--ic-theme-text);\n}\n\n.svg {\n margin-left: auto;\n}\n\n:host(.expandable.navigation-item) .link,\n:host(.expandable.navigation-item) ::slotted(a) {\n padding-right: 0;\n}\n\n:host(.navigation-item) .link,\n:host(.navigation-item) ::slotted(a) {\n height: calc(100% - var(--ic-space-xxs));\n width: fit-content;\n color: var(--ic-theme-text);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n white-space: nowrap;\n}\n\n:host(.navigation-item) ::slotted(a) {\n height: 100%;\n font: var(--ic-font-label) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n content: \"\";\n height: 0.25rem;\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-theme-text);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover);\n cursor: pointer;\n}\n\n:host(.navigation-item:not(.navigation-item-page-header, .navigation-item-side-menu))\n ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item:not(.navigation-item-top-nav-child, .navigation-item-side-menu, .navigation-item-top-nav-child-selected\n .navigation-item-side-menu-selected))\n .focus-indicator:focus-within {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected.dark) .link:focus,\n:host(.navigation-item.dark) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-theme-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n height: 2.5rem;\n width: 100%;\n box-sizing: border-box;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-decoration: none;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset) !important;\n padding-right: var(--ic-space-lg);\n width: auto;\n border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n transition: box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n margin-left: var(--ic-space-xs) !important;\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n height: 2.5rem;\n width: fit-content;\n min-width: 9.063rem;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) !important;\n text-decoration: none;\n position: relative;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n z-index: 1;\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius-inset);\n box-shadow: var(--ic-border-focus-inset);\n transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus) {\n outline: var(--ic-hc-focus-outline);\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),\n:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus) {\n background-color: var(--ic-action-dark-bg-active) !important;\n}\n\n:host(.navigation-item-side-menu-selected) *,\n:host(.navigation-item-top-nav-child-selected) *,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: var(--ic-space-xs);\n height: 2.5rem;\n margin-top: 0.25rem;\n margin-right: 0.313rem;\n background-color: var(--ic-action-default);\n transition: left 0s;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus {\n margin-left: var(--ic-space-xs);\n margin-right: calc(-1 * var(--ic-space-xs));\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus::before {\n left: calc(-1 * var(--ic-space-xs));\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before {\n left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-side-menu-selected) .link::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .link {\n height: 100%;\n}\n\n:host(.navigation-item-side-nav-collapsed) ::slotted(svg),\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg) {\n margin: auto;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n align-items: center;\n padding: 0;\n margin: auto 0;\n width: fit-content;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) .link,\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a) {\n display: flex;\n flex-direction: column;\n height: fit-content;\n padding: var(--ic-space-xs) !important;\n gap: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n height: auto !important;\n gap: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link\n ic-typography {\n opacity: 1;\n}\n\n:host(.navigation-item-side-nav-collapsed) svg,\n:host(.navigation-item-side-nav-collapsed-with-label) svg {\n display: none;\n}\n\n::slotted(svg) {\n fill: var(--ic-theme-text);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n.icon {\n width: var(--ic-space-xxl);\n margin-left: calc(-1 * var(--ic-space-md));\n flex: 0 1 0%;\n}\n\n.icon > ::slotted(*) {\n margin-left: var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon > ::slotted(*) {\n margin: auto !important;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n height: var(--navigation-item-height);\n width: var(--navigation-item-width);\n justify-content: var(--navigation-item-justify-content);\n display: flex;\n gap: var(--ic-space-xs);\n box-sizing: border-box;\n color: var(--navigation-item-child-color) !important;\n text-decoration: none !important;\n white-space: nowrap;\n padding: 0 var(--ic-space-md);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a) {\n height: var(--navigation-item-child-height);\n width: var(--navigation-group-width);\n color: var(--navigation-item-child-color) !important;\n display: flex;\n gap: 0.625rem;\n box-sizing: border-box;\n min-width: 0;\n transition: box-shadow var(--ic-easing-transition-fast);\n text-decoration: none !important;\n white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:active) {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav) a.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n a.link\n ic-typography,\n.navigation-item-side-nav-slotted-text {\n opacity: var(--navigation-item-label-opacity);\n transition: opacity var(--ic-easing-transition-slow);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {\n box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n left: 0.313rem;\n border-radius: 0.688rem !important;\n bottom: 0;\n transition: var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before {\n box-shadow: var(--ic-border-focus-inset);\n}\n\n:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link {\n opacity: var(--navigation-item-label-opacity);\n height: auto;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n min-width: var(--navigation-group-item-min-width);\n padding: var(--ic-space-xs) !important;\n height: auto;\n gap: 0;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n margin: 0 auto;\n box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n border-radius: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n height: 2.5rem !important;\n color: var(--ic-color-primary-text) !important;\n transition: all var(--ic-easing-transition-fast) !important;\n box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link::after,\n:host(.navigation-item-page-header) ::slotted(a.active)::after {\n content: \" \" !important;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ic-space-xxs);\n background-color: var(--ic-action-default) !important;\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n background-color: var(--ic-action-default-bg-hover) !important;\n cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n background-color: var(--ic-action-default-bg-active) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::after {\n border-bottom-left-radius: var(--ic-border-radius);\n border-bottom-right-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n ::slotted(a.active) {\n transition: all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n .link:focus::before {\n display: none;\n}\n\n.open-in-new-icon {\n flex: 1;\n}\n\n.open-in-new-icon svg {\n margin-top: var(--ic-space-xxs);\n padding-left: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav) .open-in-new-icon {\n margin-left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-top-nav) .open-in-new-icon svg,\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-side-nav) .open-in-new-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n:host(.navigation-item-side-menu) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg,\n:host(.navigation-item-side-menu) .open-in-new-icon svg {\n fill: var(--ic-color-primary-text);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n h,\n Host,\n Prop,\n State,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getParentElementType,\n getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\n\n/**\n * @part link - The `<a>` within ic-navigation-item\n */\n\n@Component({\n tag: \"ic-navigation-item\",\n styleUrl: \"ic-navigation-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationItem {\n @Element() el: HTMLIcNavigationItemElement;\n\n /**\n * The label of the navigation item.\n */\n @Prop() label: string;\n\n /**\n * The destination of the navigation item.\n */\n @Prop() href: string = \"\";\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * If `true`, the user can save the linked URL instead of navigating to it.\n */\n @Prop() download?: string | boolean = false;\n\n /**\n * If `true`, the navigation item will be set in a selected state.\n */\n @Prop() selected: boolean = false;\n\n /**\n * @internal If `true`, the navigation item will be expandable.\n */\n @Prop() expandable: boolean = false;\n /**\n * @internal If `true`, the navigation item will be displayed within a tooltip.\n */\n @Prop() displayNavigationTooltip: boolean = false;\n /**\n * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n */\n @Prop() collapsedIconLabel: boolean = false;\n\n @State() isTopNavChild: boolean = false;\n @State() inTopNavSideMenu: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() focusStyle = getThemeForegroundColor();\n @State() navigationType: IcNavType | \"\";\n @State() parentEl: HTMLElement;\n @State() sideNavExpanded: boolean = false;\n @State() isSideNavMobile: boolean = false;\n\n private itemEl: HTMLElement;\n private navigationSlot: HTMLElement;\n\n /**\n * @internal - Emitted when item loses focus.\n */\n @Event() childBlur: EventEmitter<void>;\n\n /**\n * @internal - Emitted when navigation item clicked.\n */\n @Event() navItemClicked: EventEmitter<void>;\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.focusStyle = theme.mode;\n }\n\n private topNavResizedHandler = (ev: CustomEvent): void => {\n const newSize = ev.detail.size;\n if (newSize !== this.deviceSize) {\n this.deviceSize = newSize;\n this.inTopNavSideMenu = newSize <= DEVICE_SIZES.L;\n }\n };\n\n private sideNavExpandHandler = (ev: CustomEvent): void => {\n const { sideNavExpanded, sideNavMobile } = ev.detail;\n this.sideNavExpanded = sideNavExpanded;\n this.isSideNavMobile = sideNavMobile;\n };\n\n /**\n * Sets focus on the nav item.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.itemEl) {\n this.itemEl.focus();\n }\n }\n\n private handleBlur = (ev: FocusEvent) => {\n if (ev.relatedTarget !== null) {\n const target = ev.relatedTarget as HTMLElement;\n if (target.tagName === \"IC-NAVIGATION-ITEM\") {\n return;\n }\n }\n this.childBlur.emit();\n };\n\n private handleClick = () => {\n this.navItemClicked.emit();\n };\n\n componentWillLoad(): void {\n const navParentDetails = getNavItemParentDetails(this.el);\n this.navigationType = navParentDetails.navType;\n this.parentEl = navParentDetails.parent;\n\n if (this.navigationType === \"side\") {\n this.parentEl.addEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.addEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n }\n\n if (\n getParentElementType(this.el) === \"IC-NAVIGATION-GROUP\" &&\n this.navigationType === \"top\"\n ) {\n this.isTopNavChild = true;\n }\n\n this.deviceSize = getCurrentDeviceSize();\n if (this.deviceSize <= DEVICE_SIZES.L && this.navigationType === \"top\") {\n this.inTopNavSideMenu = true;\n }\n\n this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n if (this.navigationSlot) {\n this.navigationSlot.ariaLabel = this.navigationSlot.textContent.trim();\n }\n }\n\n private isInitialRender: boolean = true;\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n disconnectedCallback(): void {\n if (this.navigationType === \"side\") {\n this.parentEl.removeEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.removeEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n }\n }\n\n private displayDefaultNavigationItem = (\n href: string,\n hreflang: string,\n target: string,\n rel: string,\n referrerpolicy: ReferrerPolicy,\n download: string | boolean,\n label: string\n ): HTMLElement => {\n const variant =\n this.isTopNavChild || this.inTopNavSideMenu ? \"body\" : \"label\";\n const tooltipId = \"ic-tooltip-navigation-item\";\n const ChevronIconComponent = this.expandable && (\n <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n );\n const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n <div class=\"icon\">\n {\" \"}\n <slot name=\"icon\"></slot>{\" \"}\n </div>\n );\n\n if (href !== \"\") {\n return (\n <a\n href={href}\n target={target}\n rel={rel}\n hreflang={hreflang}\n referrerPolicy={referrerpolicy}\n download={download !== false ? download : null}\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n part=\"link\"\n aria-labelledby={tooltipId}\n >\n {IconComponent}\n\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n {target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n );\n }\n\n return (\n <div\n tabindex=\"0\"\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n aria-labelledby={tooltipId}\n >\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n </div>\n );\n };\n\n render() {\n const {\n href,\n hreflang,\n target,\n rel,\n referrerpolicy,\n download,\n label,\n inTopNavSideMenu,\n isTopNavChild,\n selected,\n navigationSlot,\n } = this;\n\n return (\n <Host\n class={{\n [\"navigation-item\"]: true,\n [\"navigation-item-top-nav\"]:\n !inTopNavSideMenu && this.navigationType === \"top\",\n [\"navigation-item-top-nav-child-selected\"]:\n isTopNavChild && !inTopNavSideMenu && selected,\n [this.focusStyle]:\n (!inTopNavSideMenu && !isTopNavChild) ||\n (this.navigationType === \"side\" && isTopNavChild),\n [\"navigation-item-selected\"]: !isTopNavChild && selected,\n [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n [\"navigation-item-page-header\"]:\n this.navigationType === \"page-header\",\n [\"with-transition\"]: !this.isInitialRender,\n [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed-with-label\"]:\n !this.sideNavExpanded &&\n this.navigationType === \"side\" &&\n this.collapsedIconLabel &&\n !this.isSideNavMobile,\n [\"expandable\"]: this.expandable,\n }}\n onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n onClick={this.handleClick}\n aria-current={selected ? \"page\" : null}\n role=\"listitem\"\n >\n {/* Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n <ic-tooltip\n label={label || navigationSlot.textContent}\n target=\"navigation-item\"\n placement=\"right\"\n class={{\n [\"tooltip-navigation-item\"]: true,\n [\"tooltip-navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded || this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n }}\n >\n {navigationSlot ? (\n <slot name=\"navigation-item\"></slot>\n ) : (\n this.displayDefaultNavigationItem(\n href,\n hreflang,\n target,\n rel,\n referrerpolicy,\n download,\n label\n )\n )}\n </ic-tooltip>\n </Host>\n );\n }\n}\n"]}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as t,h as i,H as s,g as h}from"./p-589f6dd3.js";import{A as e,c as l}from"./p-
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as t,h as i,H as s,g as h}from"./p-589f6dd3.js";import{A as e,c as l}from"./p-471820e6.js";import"./p-6f57b13c.js";const p=":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.default:not(.aligned-left)) .step-item-list{flex:auto}:host(.compact) ul ::slotted(ic-step){display:none}:host(.compact) ul ::slotted(ic-step.show){display:flex}:host(.compact) ul ::slotted(ic-step.hide){display:none;opacity:0;visibility:hidden}";const o=class{constructor(i){t(this,i);this.resizeObserver=null;this.getChildren=()=>{this.steps=Array.from(this.el.querySelectorAll("ic-step"));this.stepsWithStepTitles=Array.from(this.el.querySelectorAll("ic-step[step-title]"))};this.checkStepTitles=()=>{if(this.stepsWithStepTitles.length<this.steps.length&&this.variantOverride&&this.variant==="compact"){this.noOfResizes=this.noOfResizes+1;if(this.noOfResizes===1){console.error(`The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`)}}};this.setStepTypes=()=>{this.getChildren();this.stepTypes=[];for(let t=0;t<this.steps.length;t++){this.stepTypes.push("active")}};this.setStepperWidth=()=>{this.alignedFullWidth=this.variant==="default"&&this.aligned==="full-width";const t=this.steps[this.steps.length-1];t.style.maxWidth="none";if(this.alignedFullWidth){this.stepperWidth=this.el.offsetWidth;t.style.maxWidth=e(`${this.stepperWidth/this.steps.length}px`);this.lastStepWidth=t.offsetWidth}};this.initialiseStepStates=()=>{this.steps.forEach(((t,i)=>{t.variant=this.variant;t.stepNum=i+1;t.lastStep=i===this.steps.length-1;t.lastStepNum=this.steps.length;if(t.stepType!=="current"){t.current=false;this.stepTypes[i]=t.stepType}else{t.current=true}const s=t.shadowRoot&&t.shadowRoot.querySelector(".step > .step-title-area");if(this.stepsWithStepTitles.length==0&&this.variantOverride){if(this.variant==="compact"){this.autoSetStepTitles=true;if(this.autoSetStepTitles){t.stepTitle="Step "+t.stepNum;s&&s.querySelector(".step-title").setAttribute("aria-hidden","true")}}if(this.variant==="default"){this.autoSetStepTitles=false;if(!this.autoSetStepTitles){t.stepTitle=undefined;s&&s.querySelector(".step-title").removeAttribute("aria-hidden")}}}if(this.variant==="compact"){if(t.current===true||t.stepType==="current"){t.classList.remove("hide");t.classList.add("show")}else if(t.classList.contains("show")){t.classList.remove("show");t.classList.add("hide")}if(!t.lastStep){t.nextStepTitle=this.steps[i+1].stepTitle;t.progress=t.stepNum/this.steps.length*100}else if(t.lastStep&&this.stepTypes[i]!=="completed"){t.progress=95}else{t.progress=100}if(this.hideStepInfo&&s!==null){s.classList.remove("visually-hidden")}t.compactStepStyling=this.stepTypes[i]}if(this.variant==="default"){if(!t.lastStep){if(this.alignedFullWidth){t.style.width=e(`${(this.stepperWidth-this.lastStepWidth)/(this.steps.length-1)}px`);t.style.minWidth=e("148px")}}else if(t.lastStep){t.classList.add("last-step");if(this.alignedFullWidth){t.style.maxWidth=`${this.lastStepWidth}px`}else{t.style.maxWidth=this.connectorWidth>100?e(`${this.connectorWidth+48}px`):e("148px")}}if(this.aligned==="left"){t.style.width=this.connectorWidth>100?e(`${this.connectorWidth+48}px`):e("148px");const i=t.shadowRoot.querySelector(".step > .step-top > .step-connect");if(i){i.style.width=this.connectorWidth>100?e(`${this.connectorWidth}px`):e("100px")}}if(this.hideStepInfo&&s!==null){s.classList.add("visually-hidden")}}}))};this.overrideVariant=()=>{let t=148*this.steps.length;if(this.aligned==="left"&&this.connectorWidth>100){t=(this.connectorWidth+48)*this.steps.length}if(this.variantOverride){if(this.el.clientWidth<t){this.variant="compact";this.getChildren()}else{this.variant="default";this.getChildren()}}};this.resizeObserverCallback=()=>{this.getChildren();this.checkStepTitles();this.overrideVariant();this.setStepperWidth();this.initialiseStepStates()};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.el)};this.aligned="full-width";this.variant="default";this.connectorWidth=100;this.hideStepInfo=false;this.stepperWidth=document.querySelector("ic-stepper").getBoundingClientRect().width;this.lastStepWidth=0;this.stepTypes=[];this.alignedFullWidth=true;this.autoSetStepTitles=true;this.variantOverride=this.variant!=="compact";this.noOfResizes=0}componentWillLoad(){this.setStepTypes();if(this.variant==="compact"){this.variantOverride=false}}componentDidLoad(){l(this.runResizeObserver)}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){return i(s,{class:{[`${this.variant}`]:true,["aligned-left"]:this.variant==="default"&&this.aligned==="left"}},i("ul",{class:"step-item-list"},i("slot",null)))}get el(){return h(this)}};o.style=p;export{o as ic_stepper};
|
2
|
+
//# sourceMappingURL=p-df1b0f17.entry.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as t,h as e,H as i,g as a}from"./p-589f6dd3.js";import{i as s,g as n,D as o,c as r}from"./p-
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as t,h as e,H as i,g as a}from"./p-589f6dd3.js";import{i as s,g as n,D as o,c as r}from"./p-471820e6.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;z-index:var(--ic-z-index-page-header)}:host(.sticky){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay)}header{background-color:var(--ic-architectural-40)}header.border-bottom{border-bottom:var(--ic-space-1px) solid var(--ic-architectural-300)}header.tabs{padding-top:var(--ic-space-md)}.breadcrumb-area{margin-bottom:var(--ic-space-md)}.main-content{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"title-area action-area"\n "input-area action-area";-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md);justify-content:space-between;width:100%}.title-area{display:flex;flex-direction:column;flex:1;min-width:19rem;grid-area:title-area}.header-content{display:flex;align-items:center;width:100%;flex-wrap:wrap;row-gap:var(--ic-space-xs);-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md)}.heading{display:inline-block;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.subheading.small{margin-top:var(--ic-space-xs)}.action-area{display:flex;gap:var(--ic-space-md);flex-flow:row wrap;justify-self:end;justify-content:flex-end;height:-moz-fit-content;height:fit-content;grid-area:action-area}.input-area,.navigation-area{margin-top:var(--ic-space-md);width:100%}.tabs-slot{display:flex;overflow-x:auto;padding:0.5rem;margin:-0.5rem}.tabs-slot::-webkit-scrollbar{display:none}.input-area{grid-area:input-area}@media screen and (max-width: 576px){::slotted(ic-text-field){--input-width:100%;max-width:20rem}.main-content{grid-template-areas:"title-area"\n "action-area"\n "input-area";justify-content:flex-start}.title-area{min-width:0}.action-area{min-width:100%;margin-top:var(--ic-space-md);justify-content:start}}@media screen and (min-width: 992px){:host(.sticky-desktop){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay)}}';const d=class{constructor(e){t(this,e);this.resizeObserver=null;this.resizeObserverCallback=()=>{if(this.reverseOrder&&s(this.el,"actions")){this.applyReverseOrder()}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.el)};this.applyReverseOrder=()=>{const t=n();if(t!==this.deviceSize){this.deviceSize=t}const e=this.el.shadowRoot.querySelector("div.action-area");const i=[];for(let t=0;t<this.actionContent.length;t++){const e=this.actionContent[t];let a=e.offsetHeight;if(a===undefined){a=0}i.push(a)}const a=Math.max(...i);let s=e.offsetHeight;if(s===undefined){s=0}const r=()=>{this.actionContent=this.actionContent.reverse();this.actionContent.forEach((t=>{this.el.append(t)}));this.areButtonsReversed=!this.areButtonsReversed};if(this.deviceSize>o.S&&s<=a&&!this.areButtonsReversed||(this.deviceSize>o.S&&s>a||this.deviceSize<=o.S)&&this.areButtonsReversed){r()}};this.heading=undefined;this.subheading=undefined;this.aligned="left";this.small=false;this.border=true;this.sticky=false;this.stickyDesktopOnly=false;this.reverseOrder=false;this.deviceSize=o.XL;this.areButtonsReversed=false;this.actionContent=undefined}componentWillLoad(){this.actionContent=Array.from(this.el.querySelectorAll(`[slot="actions"]`))}componentDidLoad(){r(this.runResizeObserver)}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){const{small:t,border:a,heading:n,subheading:o,aligned:r,sticky:l,stickyDesktopOnly:d}=this;return e(i,{class:{["sticky"]:l,["sticky-desktop"]:!l&&d}},e("header",{class:{["border-bottom"]:a,["tabs"]:s(this.el,"tabs")}},e("ic-section-container",{aligned:r,fullHeight:s(this.el,"tabs")},s(this.el,"breadcrumbs")&&e("div",{class:"breadcrumb-area"},e("slot",{name:"breadcrumbs"})),e("div",{class:"main-content"},e("div",{class:"title-area"},e("div",{class:"header-content"},e("slot",{name:"heading"},e("ic-typography",{variant:t?"h4":"h2",class:"heading"},e("h2",null,n))),e("slot",{name:"heading-adornment"})),e("div",null,e("slot",{name:"subheading"},o&&e("ic-typography",{variant:"body",class:{["subheading"]:true,["small"]:t}},o)))),s(this.el,"actions")&&e("div",{class:"action-area"},e("slot",{name:"actions"})),s(this.el,"input")&&e("div",{class:"input-area"},e("slot",{name:"input"}))),(s(this.el,"stepper")||s(this.el,"tabs"))&&e("div",{class:"navigation-area"},s(this.el,"stepper")&&!s(this.el,"tabs")&&e("slot",{name:"stepper"}),s(this.el,"tabs")&&e("nav",{"aria-label":"navigation-landmark-page-header"},e("ic-horizontal-scroll",null,e("ul",{class:"tabs-slot"},e("slot",{name:"tabs"}))))))))}get el(){return a(this)}};d.style=l;export{d as ic_page_header};
|
2
|
+
//# sourceMappingURL=p-e16e817e.entry.js.map
|
@@ -0,0 +1 @@
|
|
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","isSlotUsed","el","applyReverseOrder","runResizeObserver","ResizeObserver","observe","currSize","getCurrentDeviceSize","deviceSize","actionArea","shadowRoot","querySelector","actionHeights","i","actionContent","length","action","actionHeight","offsetHeight","undefined","push","max","Math","actionAreaHeight","appendActionContent","reverse","forEach","btn","append","areButtonsReversed","DEVICE_SIZES","S","XL","[object Object]","Array","from","querySelectorAll","checkResizeObserver","disconnect","small","border","heading","subheading","aligned","sticky","stickyDesktopOnly","h","Host","class","fullHeight","name","variant","aria-label"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-page-header: z-index of page-header\n */\n\n:host {\n display: block;\n z-index: var(--ic-z-index-page-header);\n}\n\n:host(.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: var(--ic-space-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: 19rem;\n grid-area: title-area;\n}\n\n.header-content {\n display: flex;\n align-items: center;\n width: 100%;\n flex-wrap: wrap;\n 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: 0.5rem;\n margin: -0.5rem;\n}\n\n.tabs-slot::-webkit-scrollbar {\n display: none;\n}\n\n.input-area {\n grid-area: input-area;\n}\n\n@media screen and (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n\n max-width: 20rem;\n }\n\n .main-content {\n grid-template-areas:\n \"title-area\"\n \"action-area\"\n \"input-area\";\n justify-content: flex-start;\n }\n\n .title-area {\n min-width: 0;\n }\n\n .action-area {\n min-width: 100%;\n margin-top: var(--ic-space-md);\n justify-content: start;\n }\n}\n\n@media screen and (min-width: 992px) {\n :host(.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 page header.\n */\n @Prop() heading?: string;\n /**\n * The subtitle to render on the page header.\n */\n @Prop() subheading?: string;\n /**\n * The alignment of the page header.\n */\n @Prop() aligned?: IcAlignment = \"left\";\n /**\n * If `true`, the small styling will be applied to the page header.\n */\n @Prop() small?: boolean = false;\n /**\n * If `true`, a border will be displayed along the bottom of the page header.\n */\n @Prop() border?: boolean = true;\n /**\n * If `true`, the page header will be sticky at all breakpoints.\n */\n @Prop() sticky?: boolean = false;\n /**\n * If `true`, the page header will only be sticky for viewport widths of 992px and above.\n */\n @Prop() stickyDesktopOnly?: boolean = false;\n /**\n * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.\n */\n @Prop() reverseOrder?: boolean = false;\n\n @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 && isSlotUsed(this.el, \"actions\")) {\n this.applyReverseOrder();\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private applyReverseOrder = (): void => {\n const currSize = getCurrentDeviceSize();\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n\n const actionArea = this.el.shadowRoot.querySelector(\n \"div.action-area\"\n ) as HTMLElement;\n const actionHeights: number[] = [];\n\n /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n for (let i = 0; i < this.actionContent.length; i++) {\n const action = this.actionContent[i] as HTMLElement;\n let actionHeight = action.offsetHeight;\n if (actionHeight === undefined) {\n actionHeight = 0;\n }\n actionHeights.push(actionHeight);\n }\n\n const max = Math.max(...actionHeights);\n\n /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small 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 const appendActionContent = () => {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string | Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n };\n\n if (\n (this.deviceSize > DEVICE_SIZES.S &&\n actionAreaHeight <= max &&\n !this.areButtonsReversed) ||\n (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n this.deviceSize <= DEVICE_SIZES.S) &&\n this.areButtonsReversed)\n ) {\n appendActionContent();\n }\n };\n\n 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 aria-label=\"navigation-landmark-page-header\">\n <ic-horizontal-scroll>\n <ul class=\"tabs-slot\">\n <slot name=\"tabs\" />\n </ul>\n </ic-horizontal-scroll>\n </nav>\n )}\n </div>\n )}\n </ic-section-container>\n </header>\n </Host>\n );\n }\n}\n"]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as t,c as e,h as s,H as n,g as i}from"./p-589f6dd3.js";import{I as a}from"./p-6f57b13c.js";const d=":host{display:block}:host(.ic-tab-panel-light){color:white}";const c=class{constructor(s){t(this,s);this.tabPanelCreated=e(this,"tabPanelCreated",7);this.tabPanelRemoved=e(this,"tabPanelRemoved",7);this.contextId="default";this.tabPosition=undefined;this.panelId=undefined;this.selectedTab=undefined;this.appearance="dark"}connectedCallback(){this.tabPanelCreated.emit(this.host)}disconnectedCallback(){const t=document.querySelector(`ic-tab-context[context-id=${this.contextId}]`);if(t){t.tabRemovedHandler()}}render(){const{panelId:t,selectedTab:e,appearance:i}=this;return s(n,{class:{["ic-tab-panel-light"]:i===a.Light},role:"tabpanel",hidden:t!==undefined&&e!==undefined?!(t===e):true},s("div",null,s("slot",null)))}get host(){return i(this)}};c.style=d;export{c as ic_tab_panel};
|
2
|
+
//# sourceMappingURL=p-e6217f40.entry.js.map
|
@@ -0,0 +1 @@
|
|
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]","this","tabPanelCreated","emit","host","tabContext","document","querySelector","contextId","tabRemovedHandler","panelId","selectedTab","appearance","h","Host","class","IcThemeForegroundEnum","Light","role","hidden","undefined"],"mappings":"oGAAA,MAAMA,EAAgB,oECmBTC,EAAQ,gJAO2B,uGAoBI,OAYlDC,oBACEC,KAAKC,gBAAgBC,KAAKF,KAAKG,MAGjCJ,uBACE,MAAMK,EAAaC,SAASC,cAC1B,6BAA6BN,KAAKO,cAEpC,GAAIH,EAAY,CACdA,EAAWI,qBAIfT,SACE,MAAMU,QAAEA,EAAOC,YAAEA,EAAWC,WAAEA,GAAeX,KAC7C,OACEY,EAACC,EAAI,CACHC,MAAO,CACLf,CAAC,sBAAuBY,IAAeI,EAAsBC,OAE/DC,KAAK,WACLC,OACET,IAAYU,WAAaT,IAAgBS,YACnCV,IAAYC,GACd,MAGNE,EAAA,MAAA,KACEA,EAAA,OAAA","sourcesContent":[":host {\n display: block;\n}\n\n:host(.ic-tab-panel-light) {\n color: white;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n} from \"@stencil/core\";\nimport {\n IcThemeForegroundEnum,\n IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\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 * @deprecated This is no longer required.\n * The context id is passed down from `ic-tab-context`\n */\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /**\n * @internal The position of the tab panel inside the tabs array in context.\n */\n @Prop({ reflect: true }) tabPosition?: number;\n\n /**\n * @internal The shared ID that links the panel and tab.\n */\n @Prop({ reflect: true }) panelId?: string;\n\n /**\n * @internal The shared ID of the currently selected tab.\n */\n @Prop() selectedTab?: string;\n\n /**\n * @internal The appearance of the tabs, e.g dark, or light.\n */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /**\n * @internal Emitted when a tab panel is dynamically created.\n */\n @Event() tabPanelCreated: EventEmitter<HTMLIcTabPanelElement>;\n\n /**\n * @internal Emitted when a tab panel is unmounted.\n */\n @Event() tabPanelRemoved: EventEmitter<void>;\n\n connectedCallback(): void {\n this.tabPanelCreated.emit(this.host);\n }\n\n disconnectedCallback(): void {\n const tabContext = document.querySelector(\n `ic-tab-context[context-id=${this.contextId}]`\n ) as HTMLIcTabContextElement;\n if (tabContext) {\n tabContext.tabRemovedHandler();\n }\n }\n\n render() {\n const { panelId, selectedTab, appearance } = this;\n return (\n <Host\n class={{\n [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\n }}\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,2 +1,2 @@
|
|
1
|
-
import{r as t,c as e,h as i,H as o,g as a}from"./p-589f6dd3.js";import{I as s}from"./p-6f57b13c.js";const r='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--indicator-initial-color:rgba(23 89 188 / 0%);--indicator-color:var(--ic-action-default);--focus-indicator:var(--ic-border-focus);--label-color:var(--ic-color-primary-text);--background-color-hover:var(--ic-action-default-bg-hover);--background-color-active:var(--ic-action-default-bg-active);display:flex;align-items:center;border-radius:0;color:var(--label-color);height:2.5rem;padding:0 var(--ic-space-md);cursor:pointer;position:relative;border-bottom:var(--ic-space-xxs) solid var(--indicator-initial-color);gap:var(--ic-space-xs);transition:all var(--ic-easing-transition-fast)}:host(:focus){box-shadow:var(--focus-indicator);border-radius:var(--ic-border-radius)}:host(:focus-visible){outline:var(--ic-hc-focus-outline)}:host(:hover){background-color:var(--background-color-hover)}:host(:active){background-color:var(--background-color-active)}:host(.ic-tab-light){--indicator-initial-color:rgb(255 255 255 / 0%);--indicator-color:rgb(255 255 255 / 100%);--focus-indicator:var(--ic-border-focus);--label-color:white;--background-color-hover:var(--ic-action-dark-bg-hover);--background-color-active:var(--ic-action-dark-bg-active)}:host(.selected){border-bottom:var(--ic-space-xxs) solid var(--indicator-color)}:host(.disabled){pointer-events:none;color:var(--ic-architectural-300)}:host(.selected.with-transition){transition:all var(--ic-easing-transition-slow),\n border-color var(--ic-transition-duration-slow)}.ic-tab-label{pointer-events:none}::slotted(svg){fill:currentcolor}@media (forced-colors: active){:host{border-bottom:var(--ic-space-xxs) solid canvas}:host(.disabled){color:GrayText}}';const n=class{constructor(i){t(this,i);this.tabClick=e(this,"tabClick",7);this.tabFocus=e(this,"tabFocus",7);this.tabCreated=e(this,"tabCreated",7);this.tabRemoved=e(this,"tabRemoved",7);this.isInitialRender=true;this.focusFromClick=false;this.handleClick=()=>{this.tabClick.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition});if(this.focusFromClick){this.tabFocus.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition});this.focusFromClick=false}};this.handleFocus=()=>{if(!this.focusFromClick){this.focusTabId=this.tabId;this.tabFocus.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition})}};this.handleMouseDown=()=>{this.focusFromClick=true};this.contextId="default";this.disabled=false;this.selected=false;this.tabId=undefined;this.tabPosition=undefined;this.appearance="dark"}async setFocus(){if(this.host){this.host.focus()}}componentDidUpdate(){this.isInitialRender=false}connectedCallback(){this.tabCreated.emit(this.host)}disconnectedCallback(){const t=document.querySelector(`ic-tab-context[context-id=${this.contextId}]`);t.tabRemovedHandler(!!this.focusTabId)}render(){const{disabled:t,selected:e,appearance:a}=this;return i(o,{class:{["with-transition"]:!this.isInitialRender,["ic-tab-light"]:a===s.Light,["selected"]:e,["disabled"]:t},role:"tab","aria-selected":e?"true":"false",onClick:this.handleClick,onFocus:this.handleFocus,onMouseDown:this.handleMouseDown,"aria-disabled":t?"true":"false",tabindex:this.selected?0:-1},this.host.querySelector('[slot="icon"]')&&i("slot",{name:"icon"}),i("ic-typography",{class:"ic-tab-label",variant:"label"},i("span",null,i("slot",null))))}get host(){return a(this)}};n.style=r;export{n as ic_tab};
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as t,c as e,h as i,H as o,g as a}from"./p-589f6dd3.js";import{I as s}from"./p-6f57b13c.js";const r='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--indicator-initial-color:rgba(23 89 188 / 0%);--indicator-color:var(--ic-action-default);--focus-indicator:var(--ic-border-focus);--label-color:var(--ic-color-primary-text);--background-color-hover:var(--ic-action-default-bg-hover);--background-color-active:var(--ic-action-default-bg-active);display:flex;align-items:center;border-radius:0;color:var(--label-color);height:2.5rem;padding:0 var(--ic-space-md);cursor:pointer;position:relative;border-bottom:var(--ic-space-xxs) solid var(--indicator-initial-color);gap:var(--ic-space-xs);transition:all var(--ic-easing-transition-fast)}:host(:focus){box-shadow:var(--focus-indicator);border-radius:var(--ic-border-radius)}:host(:focus-visible){outline:var(--ic-hc-focus-outline)}:host(:hover){background-color:var(--background-color-hover)}:host(:active){background-color:var(--background-color-active)}:host(.ic-tab-light){--indicator-initial-color:rgb(255 255 255 / 0%);--indicator-color:rgb(255 255 255 / 100%);--focus-indicator:var(--ic-border-focus);--label-color:white;--background-color-hover:var(--ic-action-dark-bg-hover);--background-color-active:var(--ic-action-dark-bg-active)}:host(.selected){border-bottom:var(--ic-space-xxs) solid var(--indicator-color)}:host(.disabled){pointer-events:none;color:var(--ic-architectural-300)}:host(.selected.with-transition){transition:all var(--ic-easing-transition-slow),\n border-color var(--ic-transition-duration-slow)}.ic-tab-label{pointer-events:none}::slotted(svg){fill:currentcolor}@media (forced-colors: active){:host{border-bottom:var(--ic-space-xxs) solid canvas}:host(.disabled){color:GrayText}}';const n=class{constructor(i){t(this,i);this.tabClick=e(this,"tabClick",7);this.tabFocus=e(this,"tabFocus",7);this.tabCreated=e(this,"tabCreated",7);this.tabRemoved=e(this,"tabRemoved",7);this.isInitialRender=true;this.focusFromClick=false;this.handleClick=()=>{this.tabClick.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition});if(this.focusFromClick){this.tabFocus.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition});this.focusFromClick=false}};this.handleFocus=()=>{if(!this.focusFromClick){this.focusTabId=this.tabId;this.tabFocus.emit({tabId:this.tabId,contextId:this.contextId,position:this.tabPosition})}};this.handleMouseDown=()=>{this.focusFromClick=true};this.contextId="default";this.disabled=false;this.selected=false;this.tabId=undefined;this.tabPosition=undefined;this.appearance="dark"}async setFocus(){if(this.host){this.host.focus()}}componentDidUpdate(){this.isInitialRender=false}connectedCallback(){this.tabCreated.emit(this.host)}disconnectedCallback(){const t=document.querySelector(`ic-tab-context[context-id=${this.contextId}]`);if(t){t.tabRemovedHandler(!!this.focusTabId)}}render(){const{disabled:t,selected:e,appearance:a}=this;return i(o,{class:{["with-transition"]:!this.isInitialRender,["ic-tab-light"]:a===s.Light,["selected"]:e,["disabled"]:t},role:"tab","aria-selected":e?"true":"false",onClick:this.handleClick,onFocus:this.handleFocus,onMouseDown:this.handleMouseDown,"aria-disabled":t?"true":"false",tabindex:this.selected?0:-1},this.host.querySelector('[slot="icon"]')&&i("slot",{name:"icon"}),i("ic-typography",{class:"ic-tab-label",variant:"label"},i("span",null,i("slot",null))))}get host(){return a(this)}};n.style=r;export{n as ic_tab};
|
2
|
+
//# sourceMappingURL=p-faeedfd1.entry.js.map
|
@@ -0,0 +1 @@
|
|
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","focusTabId","handleMouseDown","[object Object]","host","focus","tabCreated","tabContext","document","querySelector","tabRemovedHandler","disabled","selected","appearance","h","Host","class","IcThemeForegroundEnum","Light","role","aria-selected","onClick","onFocus","onMouseDown","aria-disabled","tabindex","name","variant"],"mappings":"oGAAA,MAAMA,EAAW,w7HCyBJC,EAAG,mLA0CNC,KAAAC,gBAA2B,KAC3BD,KAAAE,eAA0B,MAG1BF,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,KAAKY,WAAaZ,KAAKM,MAEvBN,KAAKU,SAASL,KAAK,CACjBC,MAAON,KAAKM,MACZC,UAAWP,KAAKO,UAChBC,SAAUR,KAAKS,gBAKbT,KAAAa,gBAAkB,KAIxBb,KAAKE,eAAiB,qBA1EsB,wBAKjB,oBAGiB,sEASI,OAgElDY,iBACE,GAAId,KAAKe,KAAM,CACbf,KAAKe,KAAKC,SAIdF,qBACEd,KAAKC,gBAAkB,MAGzBa,oBACEd,KAAKiB,WAAWZ,KAAKL,KAAKe,MAG5BD,uBACE,MAAMI,EAAaC,SAASC,cAC1B,6BAA6BpB,KAAKO,cAEpC,GAAIW,EAAY,CACdA,EAAWG,oBAAoBrB,KAAKY,aAIxCE,SACE,MAAMQ,SAAEA,EAAQC,SAAEA,EAAQC,WAAEA,GAAexB,KAC3C,OACEyB,EAACC,EAAI,CACHC,MAAO,CACLb,CAAC,oBAAqBd,KAAKC,gBAC3Ba,CAAC,gBAAiBU,IAAeI,EAAsBC,MACvDf,CAAC,YAAaS,EACdT,CAAC,YAAaQ,GAEhBQ,KAAK,MAAKC,gBACKR,EAAW,OAAS,QACnCS,QAAShC,KAAKG,YACd8B,QAASjC,KAAKW,YACduB,YAAalC,KAAKa,gBAAesB,gBAClBb,EAAW,OAAS,QACnCc,SAAUpC,KAAKuB,SAAW,GAAK,GAE9BvB,KAAKe,KAAKK,cAAc,kBAAoBK,EAAA,OAAA,CAAMY,KAAK,SACxDZ,EAAA,gBAAA,CAAeE,MAAM,eAAeW,QAAQ,SAC1Cb,EAAA,OAAA,KACEA,EAAA,OAAA","sourcesContent":["@import \"../../global/normalize.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: 2.5rem;\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: var(--ic-hc-focus-outline);\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-light) {\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: currentcolor;\n}\n\n@media (forced-colors: active) {\n :host {\n border-bottom: var(--ic-space-xxs) solid canvas;\n }\n\n :host(.disabled) {\n color: GrayText;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n Method,\n} from \"@stencil/core\";\n\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 The unique context needed 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 * If `true`, the disabled state will be set.\n */\n @Prop() disabled?: boolean = false;\n\n /** @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. */\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 = \"dark\";\n\n /**\n * @internal Emitted when a tab is selected.\n */\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /**\n * @internal Emitted when a tab is focussed.\n */\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n /**\n * @internal Emitted when a tab is dynamically created.\n */\n @Event() tabCreated: EventEmitter<HTMLIcTabElement>;\n\n /**\n * @internal Emitted when a tab is unmounted.\n */\n @Event() tabRemoved: EventEmitter<void>;\n\n private isInitialRender: boolean = true;\n private focusFromClick: boolean = false;\n private focusTabId: string;\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.focusTabId = this.tabId;\n\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 /**\n * Sets focus on the tab.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.host) {\n this.host.focus();\n }\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n connectedCallback(): void {\n this.tabCreated.emit(this.host);\n }\n\n disconnectedCallback(): void {\n const tabContext = document.querySelector(\n `ic-tab-context[context-id=${this.contextId}]`\n ) as HTMLIcTabContextElement;\n if (tabContext) {\n tabContext.tabRemovedHandler(!!this.focusTabId);\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-light\"]: appearance === IcThemeForegroundEnum.Light,\n [\"selected\"]: selected,\n [\"disabled\"]: disabled,\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 +1,2 @@
|
|
1
|
-
import{r as e,h as t,H as n,g as i}from"./p-589f6dd3.js";import{I as o}from"./p-6f57b13c.js";import{k as a,s as r,a as s}from"./p-
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as e,h as t,H as n,g as i}from"./p-589f6dd3.js";import{I as o}from"./p-6f57b13c.js";import{k as a,s as r,a as s}from"./p-471820e6.js";const c='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-theme-tertiary);color:var(--ic-theme-text);--hero-heading-bottom-margin:var(--ic-space-md)}:host(.dark){background-color:var(--ic-theme-secondary)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg);flex-wrap:wrap}.secondary-container{display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--ic-theme-text)}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned="left"]) .left-container,:host([content-aligned="left"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned="center"]) .left-container,:host([content-aligned="center"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host(.small),:host(.small) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.small),:host(.small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.small),:host(.small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}.right-container{margin-left:3.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host(.small),:host(.small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:17.5rem}:host(.secondary-heading) .section-container,:host(.small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host(.small),:host(.small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:16.5rem}:host(.secondary-heading) .section-container,:host(.small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}';const d=class{constructor(t){e(this,t);this.heading=undefined;this.subheading=undefined;this.secondaryHeading=undefined;this.secondarySubheading=undefined;this.backgroundImage=undefined;this.disableBackgroundParallax=false;this.aligned="left";this.contentAligned="left";this.small=false;this.rightContent=false;this.scrollFactor="right -100px";this.leftContentFullWidth=!this.rightContent&&this.secondaryHeading===undefined;this.foregroundColor=a()}themeChangeHandler(e){const t=e.detail;this.foregroundColor=t.mode}doScroll(){if(this.disableBackgroundParallax){return}const e=document.scrollingElement.scrollTop;const t=.4;const n=-100+e*t;this.scrollFactor="right "+n+"px"}componentWillLoad(){this.rightContent=r(this.el,"secondary")}componentDidLoad(){s([{prop:this.heading,propName:"heading"}],"Hero")}componentWillRender(){this.rightContent=r(this.el,"secondary")}render(){const{aligned:e,small:i,heading:a,subheading:r,secondaryHeading:s,secondarySubheading:c,foregroundColor:d,backgroundImage:h,scrollFactor:l}=this;let m={};if(h!==undefined){m={"background-image":"url("+h+")","background-position":l}}return t(n,{class:{[o.Dark]:d===o.Dark,["has-background-image"]:h!==undefined,["small"]:i,["secondary-heading"]:!!s},style:m},t("ic-section-container",{aligned:e,fullHeight:true,class:"section-container"},t("div",{class:{["left-container"]:true,["left-container-full-width"]:this.leftContentFullWidth}},t("div",{class:"heading"},t("slot",{name:"heading"},t("ic-typography",{variant:i?"h2":"h1",class:{["heading-bottom-spacing"]:!i}},a))),t("div",{class:"subheading"},t("slot",{name:"subheading"},t("ic-typography",{variant:"body"},r))),t("div",{class:"interaction-container"},t("slot",{name:"interaction"}))),(s!==undefined||this.rightContent)&&t("div",{class:"right-container"},t("slot",{name:"secondary"},s&&t("div",{class:"secondary-container"},t("div",{class:"secondary-heading"},t("ic-typography",{variant:"h4"},s)),t("div",{class:"secondary-subheading"},t("ic-typography",{variant:"subtitle-small"},c)))))))}get el(){return i(this)}};d.style=c;export{d as ic_hero};
|
2
|
+
//# sourceMappingURL=p-fb5861c6.entry.js.map
|