@ukic/web-components 3.6.0 → 3.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +39 -47
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +3 -10
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +2 -2
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-select.cjs.entry.js +2 -2
- package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +2 -2
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js +15 -4
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js +13 -4
- package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.stories.js +5 -3
- package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css +5 -0
- package/dist/collection/components/ic-menu/ic-menu.js +108 -47
- package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +3 -10
- package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
- package/dist/collection/components/ic-radio-group/ic-radio-group.stories.js +5 -3
- package/dist/collection/components/ic-search-bar/ic-search-bar.js +2 -2
- package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select.js +2 -2
- package/dist/collection/components/ic-select/ic-select.js.map +1 -1
- package/dist/collection/components/ic-select/ic-select_(multi).stories.js +7 -5
- package/dist/collection/components/ic-select/ic-select_(searchable).stories.js +7 -5
- package/dist/collection/components/ic-select/ic-select_(single).stories.js +7 -5
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +2 -2
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
- package/dist/collection/components/ic-side-navigation/ic-side-navigation.stories.js +31 -4
- package/dist/collection/components/ic-text-field/ic-text-field.stories.js +5 -10
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.css +17 -0
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +32 -3
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map +1 -1
- package/dist/collection/components/ic-toggle-button/ic-toggle-button.stories.js +7 -0
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.css +7 -0
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js +36 -3
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js.map +1 -1
- package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.stories.js +17 -0
- package/dist/components/ic-loading-indicator2.js +1 -1
- package/dist/components/ic-loading-indicator2.js.map +1 -1
- package/dist/components/ic-menu2.js +42 -47
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-item.js +3 -10
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-search-bar.js +2 -2
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-select.js +2 -2
- package/dist/components/ic-select.js.map +1 -1
- package/dist/components/ic-side-navigation.js +2 -2
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-tab-panel.js.map +1 -1
- package/dist/components/ic-text-field.js.map +1 -1
- package/dist/components/ic-toggle-button-group.js +17 -4
- package/dist/components/ic-toggle-button-group.js.map +1 -1
- package/dist/components/ic-toggle-button.js +14 -4
- package/dist/components/ic-toggle-button.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-7b9e10a0.entry.js → p-018eaee0.entry.js} +2 -2
- package/dist/core/p-018eaee0.entry.js.map +1 -0
- package/dist/core/{p-57309502.entry.js → p-02132a4c.entry.js} +2 -2
- package/dist/core/p-02132a4c.entry.js.map +1 -0
- package/dist/core/{p-4935b899.entry.js → p-152ddde9.entry.js} +2 -2
- package/dist/core/{p-4935b899.entry.js.map → p-152ddde9.entry.js.map} +1 -1
- package/dist/core/{p-b730963a.entry.js → p-182b7037.entry.js} +2 -2
- package/dist/core/p-182b7037.entry.js.map +1 -0
- package/dist/core/p-543b90c5.entry.js +2 -0
- package/dist/core/p-543b90c5.entry.js.map +1 -0
- package/dist/core/p-6b52e47f.entry.js +2 -0
- package/dist/core/p-6b52e47f.entry.js.map +1 -0
- package/dist/core/{p-e29ba8bd.entry.js → p-ab1103e1.entry.js} +2 -2
- package/dist/core/p-ab1103e1.entry.js.map +1 -0
- package/dist/core/{p-cd42b7c0.entry.js → p-d85b438a.entry.js} +2 -2
- package/dist/core/{p-cd42b7c0.entry.js.map → p-d85b438a.entry.js.map} +1 -1
- package/dist/esm/core.js +1 -1
- package/dist/esm/ic-button_3.entry.js +1 -1
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-input-component-container_3.entry.js +39 -47
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +3 -10
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-search-bar.entry.js +2 -2
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-select.entry.js +2 -2
- package/dist/esm/ic-select.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +2 -2
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button-group.entry.js +15 -4
- package/dist/esm/ic-toggle-button-group.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button.entry.js +13 -4
- package/dist/esm/ic-toggle-button.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-menu/ic-menu.d.ts +12 -4
- package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts +4 -0
- package/dist/types/components/ic-toggle-button-group/ic-toggle-button-group.d.ts +5 -0
- package/dist/types/components.d.ts +19 -0
- package/hydrate/index.js +82 -72
- package/hydrate/index.mjs +82 -72
- package/package.json +2 -2
- package/vscode-data.json +8 -0
- package/dist/core/p-57309502.entry.js.map +0 -1
- package/dist/core/p-7b9e10a0.entry.js.map +0 -1
- package/dist/core/p-9caa9e7b.entry.js +0 -2
- package/dist/core/p-9caa9e7b.entry.js.map +0 -1
- package/dist/core/p-b730963a.entry.js.map +0 -1
- package/dist/core/p-d7c8f10d.entry.js +0 -2
- package/dist/core/p-d7c8f10d.entry.js.map +0 -1
- package/dist/core/p-e29ba8bd.entry.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"file":"ic-side-navigation.entry.js","mappings":"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","names":["chevronIcon"],"sources":["src/components/ic-side-navigation/ic-side-navigation.css?tag=ic-side-navigation&encapsulation=shadow","src/components/ic-side-navigation/ic-side-navigation.tsx"],"sourcesContent":["/**\n * @prop --ic-z-index-side-navigation: z-index of side navigation panel\n */\n\n:host {\n display: block;\n\n --ic-typography-color: currentcolor;\n --side-navigation-position: fixed;\n --side-navigation-position-left: 0;\n --side-navigation-position-top: var(--ic-space-xxl);\n --side-navigation-height: var(--ic-space-xxl);\n --sm-side-navigation-top-bar-height: 3.5rem;\n --sm-side-navigation-collapsed-labels-width: 6rem;\n --sm-side-navigation-expand-transition-duration: var(\n --ic-transition-duration-slow\n );\n --side-navigation-width: 20rem;\n --sm-side-navigation-bottom-bar-height: 3.5rem;\n --keyline-lighten: var(--ic-space-1px) solid var(--ic-side-navigation-keyline);\n --keyline-darken: var(--ic-space-1px) solid var(--ic-state-layer-darken-20);\n --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);\n --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);\n\n z-index: var(--ic-z-index-side-navigation);\n}\n\n:host > * {\n box-sizing: border-box;\n}\n\n.side-navigation {\n display: flex;\n flex-direction: column;\n width: var(--side-navigation-width);\n color: var(--ic-side-navigation-text);\n position: var(--side-navigation-position);\n top: var(--side-navigation-position-top);\n left: calc(var(--side-navigation-width) * -1);\n bottom: 0;\n background-color: var(--ic-side-navigation-background);\n z-index: var(--ic-z-index-side-navigation);\n}\n\n:host(.ic-side-navigation-inline) .side-navigation {\n position: absolute;\n height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n.side-navigation-inner {\n background-color: var(--ic-side-navigation-background);\n display: flex;\n flex-direction: column;\n flex: 1 1 4rem;\n overflow: auto;\n}\n\n:host(.ic-side-navigation-inline) .side-navigation-inner {\n flex: 1;\n}\n\n:host(.xs-menu-open) .side-navigation {\n transition: left var(--ic-easing-transition-slow);\n left: 0;\n}\n\n:host(:has(.xs-menu-open, .xs-menu-close)) ::slotted(ic-navigation-item) {\n --navigation-item-side-nav-right: var(--ic-space-xl);\n}\n\n:host(.xs-menu-close) .side-navigation {\n left: calc(var(--side-navigation-width) * -1);\n transition: left var(--ic-easing-transition-slow);\n}\n\n:host(.xs-menu-close) .side-navigation > * {\n visibility: hidden;\n}\n\n:host(.anchor-right.xs-menu-open) .side-navigation {\n right: 0;\n left: auto;\n}\n\n:host(.anchor-right.xs-menu-close) .side-navigation {\n right: calc(var(--side-navigation-width) * -1);\n left: auto;\n transition: right var(--ic-easing-transition-slow);\n}\n\n.bottom-wrapper {\n border-top: var(--keyline-lighten);\n bottom: 0;\n left: 0;\n z-index: 2;\n background-color: var(--ic-side-navigation-background);\n display: flex;\n flex-direction: column;\n}\n\n:host(.ic-side-navigation-inline) .bottom-wrapper {\n position: sticky;\n}\n\n:host(.ic-side-navigation-dark) .bottom-wrapper {\n border-top: var(--keyline-darken);\n}\n\n/* Mobile Top Bar */\n\n.top-bar {\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: var(--side-navigation-height);\n padding: var(--ic-space-xs);\n box-sizing: border-box;\n background-color: var(--ic-side-navigation-background);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n border-bottom: var(--keyline-lighten);\n box-shadow: var(--ic-elevation-overlay);\n z-index: 2;\n overflow: hidden;\n visibility: visible;\n}\n\n:host(.ic-side-navigation-inline) .top-bar {\n position: absolute;\n}\n\n:host(.ic-side-navigation-dark) .top-bar {\n border-bottom: var(--keyline-darken);\n}\n\n.top-bar.dark a:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.app-title-wrapper {\n display: flex;\n margin-left: var(--ic-space-xs);\n border-left: var(--keyline-lighten);\n padding-left: var(--ic-space-xxs);\n color: var(--ic-side-navigation-text);\n align-items: center;\n}\n\n:host(.ic-side-navigation-dark) .app-title-wrapper {\n border-left: var(--keyline-darken);\n}\n\n.app-title-wrapper ic-typography h1 {\n margin: 0;\n}\n\n@media screen and (min-width: 340px) {\n .app-title-wrapper ic-typography {\n margin-left: var(--ic-space-xs);\n }\n}\n\n:host .title-link {\n display: flex;\n align-items: center;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n text-decoration: none;\n padding: var(--ic-space-xxs);\n color: var(--ic-side-navigation-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n color: var(--ic-side-navigation-text);\n}\n\nslot[name=\"app-title\"]::slotted(a),\nslot[name=\"app-icon\"]::slotted(a) {\n color: var(--ic-side-navigation-text);\n outline: none;\n text-decoration: none;\n display: flex;\n}\n\nslot[name=\"app-title\"]::slotted(ic-typography),\nslot[name=\"app-title\"]::slotted(a) {\n margin-left: var(--ic-space-xs) !important;\n}\n\nslot[name=\"app-title\"]::slotted(a) {\n font: var(--ic-font-subtitle-small);\n}\n\n@media screen and (min-width: 577px) {\n :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(ic-typography),\n :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(a) {\n position: absolute;\n left: -9999px;\n opacity: 0;\n transition: opacity var(--ic-easing-transition-slow);\n }\n\n :host(.sm-collapsed) slot[name=\"app-title\"]:dir(rtl)::slotted(ic-typography),\n :host(.sm-collapsed) slot[name=\"app-title\"]:dir(rtl)::slotted(a) {\n right: -9999px;\n }\n\n :host(.sm-expanded) slot[name=\"app-title\"]::slotted(a) {\n font: var(--ic-font-h3) !important;\n font-weight: var(--ic-font-weight-semibold) !important;\n margin-left: var(--ic-space-xs) !important;\n }\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-side-navigation-hover);\n}\n\n:host .title-link:active {\n background-color: var(--ic-side-navigation-pressed);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n background-color: transparent;\n}\n\n:host .title-link ic-typography {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n fill: var(--ic-side-navigation-text);\n}\n\n.app-icon-container {\n display: none;\n}\n\n.button-label {\n display: flex;\n align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n display: flex;\n}\n\n.menu-button {\n width: 6.5rem;\n}\n\n.app-status-wrapper {\n inset: 0 var(--ic-space-sm) 0 3.5rem;\n width: auto;\n display: flex;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-sm) 0;\n justify-content: flex-end;\n align-items: flex-end;\n pointer-events: none;\n height: fit-content;\n margin: 0 var(--ic-space-xs);\n}\n\n.app-status-wrapper .app-version {\n display: flex;\n overflow-wrap: break-word;\n padding-bottom: var(--ic-space-xxs);\n}\n\n.app-status-wrapper .app-status {\n display: flex;\n border-radius: 1rem;\n background-color: var(--ic-side-navigation-text);\n color: var(--ic-side-navigation-status-tag-text);\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n min-width: 1rem;\n}\n\n.app-status-wrapper .app-status-text {\n overflow-wrap: break-word;\n}\n\n:host(.ic-side-navigation-dark) .app-status-wrapper .app-status {\n --ic-typography-color: var(--ic-architectural-white);\n}\n\n.navigation-landmark-title {\n position: absolute;\n width: var(--ic-space-1px);\n height: var(--ic-space-1px);\n padding: 0;\n margin: calc(-1 * var(--ic-space-1px));\n overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n --navigation-group-height: 2.75rem;\n --navigation-group-justify-content: space-between;\n --navigation-group-hover: var(--ic-side-navigation-hover);\n --navigation-group-text-hover: var(--ic-side-navigation-text);\n --navigation-item-child-height: 3.5rem;\n --navigation-item-child-active: var(--ic-action-dark-bg-pressed);\n --navigation-item-child-color: var(--ic-side-navigation-text);\n --navigation-group-expand-toggle-padding: 0.25rem;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n --navigation-item-justify-content: flex-start;\n --navigation-item-min-height: 56px;\n --navigation-item-height: auto;\n}\n\n/* Toggle Chevron */\n\n.bottom-side-nav {\n position: relative;\n align-content: flex-end;\n min-height: var(--sm-side-navigation-top-bar-height);\n}\n\n.bottom-side-nav ic-divider {\n position: absolute;\n top: 0;\n}\n\n.primary-navigation {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n /* Hide scrollbar when required but keep functionality */\n scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n position: absolute;\n display: none;\n}\n\n.menu-visibility-visible {\n visibility: visible;\n width: 100%;\n}\n\n.app-title-show {\n min-width: 15.5rem;\n}\n\n:host(.side-display) {\n display: flex;\n flex-direction: column;\n height: 100vh;\n position: var(--side-navigation-position);\n left: 0;\n top: 0;\n bottom: 0;\n}\n\n:host(.side-display) .app-icon-container {\n height: 40px;\n display: flex;\n align-items: center;\n}\n\n:host(.side-display) .top-bar {\n --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n position: relative;\n padding: 0;\n box-shadow: none;\n}\n\n:host(.ic-side-navigation-inline.side-display) .top-bar {\n position: sticky;\n}\n\n:host(.anchor-right.side-display) .top-bar {\n box-shadow: 0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.anchor-right.side-display) .bottom-wrapper {\n box-shadow: 0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.side-display) .side-navigation,\n:host(.side-display) .top-bar {\n width: var(--sm-side-navigation-top-bar-height);\n}\n\n:host(.sm-collapsed.side-display) {\n width: var(--sm-side-navigation-top-bar-height);\n transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) {\n width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-expanded.side-display) {\n width: var(--side-navigation-width);\n transition: width var(--ic-easing-transition-slow);\n box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.side-display) .side-navigation {\n --side-navigation-position-top: 0;\n\n flex: 1;\n position: relative;\n top: auto;\n left: auto;\n bottom: auto;\n}\n\n:host(.ic-side-navigation-inline.side-display) .side-navigation {\n position: relative;\n}\n\n:host(.anchor-right.side-display) .side-navigation {\n left: auto;\n right: 0;\n}\n\n:host(.side-display) .app-title-wrapper {\n margin-left: 0;\n border-left: none;\n padding: var(--ic-space-xs) var(--ic-space-sm);\n}\n\n:host(.side-display) .app-title-wrapper ::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n}\n\n:host(.side-display) .app-title-wrapper ic-typography {\n font-weight: var(--ic-font-weight-semibold);\n}\n\n:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography {\n position: absolute;\n left: -9999px;\n opacity: 0;\n transition: opacity var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography:dir(rtl) {\n right: -9999px;\n}\n\n:host(.sm-expanded.side-display) ic-typography {\n position: relative;\n left: 0;\n}\n\n:host(.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n width: var(--side-navigation-width);\n transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.side-display) :is(.side-navigation, .top-bar) {\n width: var(--sm-side-navigation-top-bar-height);\n transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.anchor-right.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n left: auto;\n right: 0;\n}\n\n:host(.side-display) .app-status-wrapper,\n:host(.sm-collapsed.side-display) .app-status-wrapper {\n display: none;\n margin-left: 0;\n}\n\n:host(.sm-expanded.side-display) .app-status-wrapper {\n display: flex;\n max-width: 16rem;\n margin-right: calc(var(--ic-space-xxxs) + var(--ic-space-xs));\n}\n\n:host(.side-display) .bottom-side-nav {\n justify-items: flex-end;\n align-items: flex-end;\n justify-content: flex-end;\n display: flex;\n outline: none;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button {\n padding-left: var(--ic-space-md);\n height: var(--sm-side-navigation-top-bar-height);\n width: 100%;\n color: var(--ic-side-navigation-text);\n background-color: transparent;\n outline: var(--ic-hc-focus-outline);\n border: none;\n cursor: pointer;\n display: flex;\n transition: var(--ic-easing-transition-fast);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button {\n height: 100%;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button svg {\n justify-items: flex-start;\n align-self: center;\n display: inline-block;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button:hover {\n background-color: var(--ic-side-navigation-hover);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(1);\n transition: transform var(--ic-easing-transition-slow);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(-1);\n transition: transform var(--ic-easing-transition-slow);\n align-self: flex-end;\n margin-bottom: 0.875rem;\n}\n\n:host(.anchor-right.sm-collapsed.side-display)\n .bottom-side-nav\n .menu-expand-button\n svg {\n transform: scaleX(-1);\n}\n\n:host(.anchor-right.sm-expanded.side-display)\n .bottom-side-nav\n .menu-expand-button\n svg {\n transform: scaleX(1);\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item) {\n --navigation-item-label-opacity: 1;\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item),\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n --navigation-item-label-opacity: 0;\n --navigation-item-min-height: 3.5rem;\n --navigation-item-height: 3.5rem;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-item),\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n --navigation-item-label-opacity: 1;\n --navigation-item-height: auto;\n --navigation-item-min-height: 3.5rem;\n --navigation-item-width: 20rem;\n --navigation-item-side-nav-right: var(--ic-space-xl);\n --navigation-group-width: 20rem;\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n --navigation-group-title-position: absolute;\n --navigation-group-title-position-left: -9999px;\n --navigation-group-title-opacity: none;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n --navigation-group-title-position: relative;\n --navigation-group-title-position-left: 0;\n --navigation-group-expand-toggle-padding: 0.25rem;\n --navigation-group-title-opacity: flex;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .side-navigation,\n:host(.sm-collapsed.collapsed-labels.side-display) .top-bar {\n width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .menu-expand-button {\n padding: 0;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .app-title-wrapper {\n width: 100%;\n justify-content: center;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display)\n ::slotted(ic-navigation-group) {\n --navigation-group-justify-content: center;\n --navigation-item-label-opacity: 1;\n --navigation-group-item-min-width: 100%;\n --navigation-group-expand-toggle-padding: 1rem;\n}\n\n:host(.collapsed-labels.side-display) .bottom-side-nav .menu-expand-button {\n justify-content: center;\n}\n\n:host(.side-display) .collapsed-icon-labels-start {\n visibility: hidden;\n opacity: 0;\n}\n\n:host(.side-display) .collapsed-icon-labels-end {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n}\n\n/* Media Queries */\n\n@media screen and (max-width: 419px) {\n .top-bar {\n height: var(--side-navigation-height);\n }\n\n .side-navigation {\n width: 100%;\n }\n}\n\n@media screen and (min-width: 340px) {\n .app-icon-container {\n display: flex;\n }\n}\n\n@media screen and (min-width: 993px) {\n :host(.side-display) {\n position: sticky;\n left: auto;\n top: 0;\n bottom: 0;\n }\n\n :host(.sm-expanded.side-display) {\n box-shadow: none;\n }\n}\n\n@media (forced-colors: active) {\n .side-navigation,\n .top-bar {\n border-right: var(--ic-border-hc);\n }\n\n .menu-expand-button {\n color: Highlight !important;\n }\n\n slot[name=\"app-icon\"]::slotted(svg) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Listen,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\n\nimport menuIcon from \"../../assets/hamburger-menu-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n getCurrentDeviceSize,\n DEVICE_SIZES,\n checkResizeObserver,\n isSlotUsed,\n getBrandForegroundAppearance,\n getCssProperty,\n hasClassificationBanner,\n onComponentRequiredPropUndefined,\n isEmptyString,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport {\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar, IcExpandedDetail } from \"./ic-side-navigation.types\";\n\n/**\n * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot primary-navigation - Content will be rendered at the top of the side navigation.\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.\n */\n\n@Component({\n tag: \"ic-side-navigation\",\n styleUrl: \"ic-side-navigation.css\",\n shadow: true,\n})\nexport class SideNavigation {\n private ANIMATION_DURATION =\n parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n private IC_NAVIGATION_ITEM: string = \"ic-navigation-item\";\n private resizeObserver: ResizeObserver | null = null;\n private COLLAPSED_ICON_LABELS_END = \"collapsed-icon-labels-end\";\n private COLLAPSED_ICON_LABELS_START = \"collapsed-icon-labels-start\";\n private menuButton?: HTMLIcButtonElement;\n\n @Element() el: HTMLIcSideNavigationElement;\n\n @State() deviceSize: number = getCurrentDeviceSize();\n @State() deviceSizeAppTitle: number = DEVICE_SIZES.S;\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() hasSecondaryNavigation: boolean = false;\n @State() menuExpanded: boolean = false;\n @State() menuOpen: boolean = false;\n\n /**\n * The app title to be displayed. This is required, unless a slotted app title link is used.\n */\n @Prop() appTitle?: string;\n\n /**\n * If `true`, the side navigation will close when a navigation item is clicked. This behaviour is only applicable on larger device sizes.\n */\n @Prop() closeOnNavItemClick?: boolean = false;\n\n /**\n * If `true`, the icon and label will appear when side navigation is collapsed.\n */\n @Prop() collapsedIconLabels?: boolean = false;\n\n /**\n * If `true`, automatic parent wrapper styling will be disabled.\n */\n @Prop() disableAutoParentStyling?: boolean = false;\n\n /**\n * If `true`, the side navigation will not display as a top bar on small devices.\n */\n @Prop() disableTopBarBehaviour?: boolean = false;\n\n /**\n * If `true`, the side navigation will display in an expanded state.\n */\n @Prop() expanded?: boolean = false;\n\n @Watch(\"expanded\")\n watchExpandedHandler(): void {\n this.toggleMenuExpanded(this.expanded!);\n }\n\n /**\n * The URL that the app title link points to.\n */\n @Prop() href?: string = \"/\";\n\n /**\n * @internal If `true`, side navigation will be contained by its parent element.\n */\n @Prop() inline?: boolean = false;\n\n /**\n * The short title of the app to be displayed at small screen sizes in place of the app title.\n */\n @Prop() shortAppTitle?: string = \"\";\n\n /**\n * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).\n */\n @Prop() static?: boolean = false;\n\n /**\n * The status of the app to be displayed.\n */\n @Prop() status?: string;\n\n /**\n * The version of the app to be displayed.\n */\n @Prop() version?: string;\n\n /**\n * Emitted when the side navigation is collapsed and expanded.\n */\n @Event() icSideNavExpanded: EventEmitter<IcExpandedDetail>;\n\n componentWillLoad(): void {\n this.setMenuExpanded(this.expanded!);\n\n if (this.collapsedIconLabels) {\n this.setCollapsedIconLabels();\n }\n\n this.hasSecondaryNavigation = isSlotUsed(this.el, \"secondary-navigation\");\n }\n\n componentDidLoad(): void {\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuExpanded,\n sideNavMobile:\n this.deviceSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour,\n });\n\n checkResizeObserver(this.runResizeObserver);\n this.styleSlottedCollapsedIconLabel();\n this.arrangeSlottedNavigationItem(this.menuExpanded);\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n this.setExpandedButtonHeight();\n\n if (this.closeOnNavItemClick) {\n this.el.addEventListener(\n \"navItemClicked\",\n this.handleNavItemClicked as EventListener\n );\n }\n\n !isSlotUsed(this.el, \"app-title\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Side Navigation\"\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n\n this.el?.removeEventListener(\"transitionend\", this.transitionEndHandler);\n\n if (this.closeOnNavItemClick) {\n this.el.removeEventListener(\n \"navItemClicked\",\n this.handleNavItemClicked as EventListener\n );\n }\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.foregroundColor = detail.mode;\n }\n\n private emitSideNavigationExpanded = (objDetails: {\n sideNavExpanded: boolean;\n sideNavMobile?: boolean;\n }): void => {\n this.icSideNavExpanded.emit({\n sideNavExpanded: objDetails.sideNavExpanded,\n sideNavMobile: !!objDetails.sideNavMobile,\n });\n };\n\n private toggleMenu = (): void => {\n this.menuOpen = !this.menuOpen;\n this.setMobileMenuAriaAttributes(this.menuOpen);\n\n this.arrangeSlottedNavigationItem(this.menuOpen);\n\n this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuOpen,\n sideNavMobile: true,\n });\n };\n\n private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n const sideNav = this.el.shadowRoot?.querySelector(\n \"#side-navigation\"\n ) as HTMLDivElement;\n const sideNavInner = sideNav.querySelector(\n \".side-navigation-inner\"\n ) as HTMLElement;\n const bottomWrapper = sideNav.querySelector(\n \".bottom-wrapper\"\n ) as HTMLElement;\n\n const menuVisibilityVisible = \"menu-visibility-visible\";\n\n if (menuOpen) {\n bottomWrapper.classList.add(menuVisibilityVisible);\n sideNavInner.classList.add(menuVisibilityVisible);\n } else {\n setTimeout(() => {\n sideNavInner.classList.remove(menuVisibilityVisible);\n bottomWrapper.classList.remove(menuVisibilityVisible);\n }, this.ANIMATION_DURATION);\n }\n };\n\n private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n if (this.menuButton) {\n this.menuButton.setAttribute(\"aria-expanded\", `${menuOpen}`);\n this.menuButton.setAttribute(\n \"aria-label\",\n `${menuOpen ? \"Close\" : \"Open\"} navigation menu`\n );\n }\n };\n\n private setAndRemoveNoWrapAfterMenuExpanded = () => {\n const appTitle =\n this.el.shadowRoot?.querySelector(\".title-link ic-typography\") ||\n this.el.querySelector(\"[slot='app-title']\");\n\n appTitle?.classList.add(\"ic-typography-no-wrap\");\n\n setTimeout(() => {\n appTitle?.classList.remove(\"ic-typography-no-wrap\");\n }, this.ANIMATION_DURATION);\n };\n\n private toggleMenuExpanded = (expanded: boolean): void => {\n this.menuExpanded = expanded;\n\n if (this.menuExpanded) {\n this.setAndRemoveNoWrapAfterMenuExpanded();\n this.el.shadowRoot\n ?.querySelector(\".app-title-inner-wrapper\")\n ?.classList.add(\"app-title-show\");\n } else {\n this.el.style.setProperty(\"--navigation-item-width\", \"320px\");\n this.el.shadowRoot\n ?.querySelector(\".app-title-inner-wrapper\")\n ?.classList.remove(\"app-title-show\");\n\n this.el.addEventListener(\"transitionend\", (e) => {\n if (e.propertyName === \"width\") {\n this.el.style.setProperty(\"--navigation-item-width\", null);\n }\n });\n }\n\n this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n if (this.collapsedIconLabels) {\n this.animateCollapsedIconLabels();\n }\n\n this.setExpandedButtonHeight();\n this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n };\n\n /**\n * In order to style nested slotted elements (e.g. using React Router components), this method\n * rearranges the a tag and labels and adds inline styling expand/collapsed animations as external CSS classes are not\n * do not take affect.\n * @param menuExpanded boolean - true or false depending on side navigation state\n */\n private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n navItems.forEach((navItem) => {\n const isNamedSlot = isSlotUsed(navItem, \"navigation-item\");\n const isUnnamedSlot =\n navItem.children[0] && !navItem.children[0].getAttribute(\"slot\");\n if (isNamedSlot || isUnnamedSlot) {\n let navItemSlot;\n if (isNamedSlot) {\n navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\n } else {\n navItemSlot = navItem.children[0];\n }\n const iconWrapper = document.createElement(\"div\");\n const icon = navItemSlot?.querySelector(\"svg\");\n const badge = navItemSlot?.querySelector(\"ic-badge\");\n const label = navItem.textContent?.trim();\n const icTypography = document.createElement(\"ic-typography\");\n icTypography.classList.add(\n \"ic-typography-label\",\n \"hydrated\",\n \"navigation-item-side-nav-slotted-text\"\n );\n\n iconWrapper.style.position = \"relative\";\n iconWrapper.style.height = \"var(--ic-space-lg)\";\n\n icon && iconWrapper.append(icon);\n badge && iconWrapper.append(badge);\n\n if (label) {\n icTypography.textContent = label;\n }\n\n if (navItemSlot) {\n navItemSlot.textContent = \"\";\n navItemSlot.append(iconWrapper);\n navItemSlot.append(icTypography);\n }\n\n if (this.collapsedIconLabels) {\n this.styleSlottedCollapsedIconLabels(!!menuExpanded, icTypography);\n } else {\n this.styleSlottedIconLabels(!!menuExpanded, icTypography);\n }\n }\n });\n };\n\n private styleSlottedCollapsedIconLabels = (\n menuExpanded: boolean,\n icTypography: HTMLIcTypographyElement\n ) => {\n if (menuExpanded) {\n icTypography.style.marginTop = \"0\";\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n } else {\n icTypography.style.marginTop = \"10px\";\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n }\n };\n\n private setExpandedButtonHeight = () => {\n const appStatusWrapper = this.el.shadowRoot?.querySelector(\n \"#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper\"\n ) as HTMLDivElement;\n\n if (appStatusWrapper.offsetHeight !== 0) {\n this.el.style.setProperty(\n \"--sm-side-navigation-bottom-bar-height\",\n `${appStatusWrapper.offsetHeight}px`\n );\n }\n };\n\n private styleSlottedIconLabels = (\n menuExpanded: boolean,\n icTypography: HTMLSpanElement\n ) => {\n if (menuExpanded) {\n icTypography.style.opacity = \"1\";\n icTypography.style.visibility = \"visible\";\n icTypography.style.transition =\n \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n } else {\n icTypography.style.opacity = \"0\";\n icTypography.style.visibility = \"hidden\";\n icTypography.style.transition =\n \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n }\n };\n\n private transitionHandler = (type: string) => {\n const primaryNavigationWrapper = this.el.shadowRoot?.querySelector(\n \".primary-navigation\"\n );\n\n const secondaryNavigationWrapper = this.el.shadowRoot?.querySelector(\n \".bottom-wrapper > .secondary-navigation\"\n );\n\n const classToRemove =\n type === \"start\"\n ? this.COLLAPSED_ICON_LABELS_END\n : this.COLLAPSED_ICON_LABELS_START;\n\n const classToAdd =\n type === \"start\"\n ? this.COLLAPSED_ICON_LABELS_START\n : this.COLLAPSED_ICON_LABELS_END;\n\n if (primaryNavigationWrapper) {\n primaryNavigationWrapper.classList.remove(classToRemove);\n primaryNavigationWrapper.classList.add(classToAdd);\n }\n\n if (secondaryNavigationWrapper) {\n secondaryNavigationWrapper.classList.remove(classToRemove);\n secondaryNavigationWrapper.classList.add(classToAdd);\n }\n };\n\n private transitionEndHandler = () => {\n this.transitionHandler(\"end\");\n };\n\n private animateCollapsedIconLabels = () => {\n this.transitionHandler(\"start\");\n this.transitionEndHandler();\n\n this.el.addEventListener(\"transitionend\", this.transitionEndHandler);\n };\n\n private paddingIconWidth = (\n navItems: HTMLIcNavigationItemElement[]\n ): number => {\n const navItemLink =\n (navItems[0].shadowRoot &&\n (navItems[0].shadowRoot.querySelector(\"ic-tooltip a\") ||\n navItems[0].shadowRoot.querySelector(\"ic-tooltip div\"))) ||\n navItems[0].querySelector(\"a\") ||\n navItems[0].querySelector(\"div\");\n const navItemSVG = navItems[0].querySelector(\"svg\");\n\n if (navItemLink && navItemSVG) {\n const navStyles = {\n gap: window.getComputedStyle(navItemLink).gap,\n iconWidth: window.getComputedStyle(navItemSVG).width,\n paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,\n };\n\n return Object.values(navStyles).reduce((prev, curr) => {\n return (prev += parseInt(curr));\n }, 0);\n }\n\n return 0;\n };\n\n private displayTooltipWithExpandedLongLabel = (menuExpanded: boolean) => {\n let timer;\n\n if (menuExpanded) {\n timer = setTimeout(() => {\n const sideNavWidth = this.el.clientWidth;\n\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n\n const paddingIconDelta = navigationItems.length\n ? this.paddingIconWidth(navigationItems)\n : 0;\n\n navigationItems.forEach(\n (navigationItem: HTMLIcNavigationItemElement) => {\n const icTypographyScrollWidth =\n (\n navigationItem.shadowRoot &&\n navigationItem.shadowRoot.querySelector(\n \"ic-tooltip .link ic-typography.ic-typography-label\"\n )\n )?.scrollWidth ||\n navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n ?.scrollWidth;\n\n if (\n icTypographyScrollWidth &&\n icTypographyScrollWidth > sideNavWidth - paddingIconDelta\n ) {\n navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n }\n }\n );\n }, this.ANIMATION_DURATION);\n } else {\n clearTimeout(timer);\n\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n });\n }\n };\n\n private setMenuExpanded = (expanded: boolean): void => {\n this.menuExpanded = expanded;\n };\n\n private handleNavItemClicked = () => {\n if (\n !this.menuOpen &&\n this.deviceSize > DEVICE_SIZES.S &&\n this.menuExpanded\n ) {\n setTimeout(() => {\n this.toggleMenuExpanded(false);\n }, 0);\n }\n };\n\n /**\n * As the mobile top bar is fixed, a padding top is required\n * to push main content down the height of the mobile top bar\n * @param value - padding-top css value\n */\n private setParentPaddingTop = (value: string) => {\n this.el.parentElement?.style.setProperty(\"padding-top\", value);\n };\n\n private setParentPaddingLeft = (value: string) => {\n this.el.parentElement?.style.setProperty(\"padding-left\", value);\n };\n\n private renderAppTitle = (isAppNameSubtitleVariant: boolean) => {\n const displayShortAppTitle =\n this.deviceSize <= DEVICE_SIZES.S && !isEmptyString(this.shortAppTitle);\n return (\n <ic-typography\n variant={\n displayShortAppTitle || isAppNameSubtitleVariant\n ? \"subtitle-small\"\n : \"h3\"\n }\n aria-label={\n displayShortAppTitle\n ? `${this.appTitle} (${this.shortAppTitle})`\n : undefined\n }\n >\n <h1>{displayShortAppTitle ? this.shortAppTitle : this.appTitle}</h1>\n </ic-typography>\n );\n };\n\n private resizeObserverCallback = (currSize: number) => {\n this.deviceSize = currSize;\n\n const isSDeviceEnableTop =\n currSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour;\n\n if (!this.disableAutoParentStyling) {\n const topBarHeight =\n this.el.shadowRoot?.querySelector(\".top-bar\")?.scrollHeight;\n this.setParentPaddingTop(isSDeviceEnableTop ? `${topBarHeight}px` : \"0\");\n if (isSDeviceEnableTop) this.setParentPaddingLeft(\"0\");\n if (isSDeviceEnableTop && this.inline) {\n this.el.parentElement?.style.setProperty(\n \"height\",\n `calc(100% - ${topBarHeight}px)`\n );\n } else if (!isSDeviceEnableTop) {\n this.el.parentElement?.style.setProperty(\"height\", \"100%\");\n }\n }\n\n const notSmallDisableTop =\n currSize > DEVICE_SIZES.S || this.disableTopBarBehaviour;\n\n if (!this.disableAutoParentStyling) {\n const paddingLeft = `calc(var(--ic-space-xxl) ${\n this.collapsedIconLabels ? \"* 2\" : \"+ var(--ic-space-xs)\"\n })`;\n\n if (currSize > DEVICE_SIZES.L) {\n this.setParentPaddingTop(\"0\");\n this.setParentPaddingLeft(\"0\");\n } else if (\n notSmallDisableTop &&\n currSize <= DEVICE_SIZES.M &&\n this.static\n ) {\n this.setParentPaddingLeft(paddingLeft);\n } else if (notSmallDisableTop && currSize <= DEVICE_SIZES.L) {\n this.setParentPaddingLeft(\n this.static && this.menuExpanded\n ? \"calc(var(--ic-space-xl) * 10)\"\n : paddingLeft\n );\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.deviceSizeAppTitle = currSize;\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(document.body, { box: \"content-box\" });\n };\n\n private setCollapsedIconLabels = () => {\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n });\n };\n\n private styleSlottedCollapsedIconLabel = () => {\n const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n Array.from(\n this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n );\n\n dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n if (\n icTypography.parentElement?.parentElement?.classList.contains(\n \"navigation-item-side-nav-collapsed-with-label\"\n )\n ) {\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n icTypography.style.marginTop = \"10px\";\n }\n });\n };\n\n private renderTopBar = ({\n isSDevice,\n foregroundColor,\n menuOpen,\n href,\n isAppNameSubtitleVariant,\n }: IcTopBar) => {\n const hasTitle = this.appTitle !== \"\" && isPropDefined(this.appTitle);\n\n const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\n <div\n class={{\n \"top-bar\": true,\n [this.foregroundColor]: true,\n }}\n >\n {isSDevice && (\n <nav\n aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n aria-hidden=\"false\"\n >\n <ic-button\n aria-label=\"Open navigation menu\"\n class=\"menu-button\"\n id=\"menu-button\"\n variant=\"secondary\"\n size=\"small\"\n full-width=\"true\"\n theme={\n foregroundColor == \"default\" || foregroundColor == \"light\"\n ? \"light\"\n : \"dark\"\n }\n monochrome\n onClick={this.toggleMenu}\n ariaOwnsId=\"side-navigation\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n ref={(el) => (this.menuButton = el)}\n >\n <span\n class=\"mobile-top-bar-menu-icon\"\n slot=\"left-icon\"\n innerHTML={menuOpen ? closeIcon : menuIcon}\n ></span>\n {menuOpen ? \"Close\" : \"Menu\"}\n </ic-button>\n <span\n id=\"menu-navigation-toggle-button-landmark\"\n class=\"navigation-landmark-title\"\n aria-hidden=\"true\"\n >\n Navigation menu toggle button\n </span>\n </nav>\n )}\n <div class=\"app-title-wrapper\">\n {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n <Component {...attrs} class=\"title-link\">\n <div class=\"app-icon-container\" aria-hidden=\"true\">\n <slot name=\"app-icon\"></slot>\n </div>\n <div class=\"app-title-inner-wrapper\">\n {isSlotUsed(this.el, \"app-title\") ? (\n <slot name=\"app-title\"></slot>\n ) : (\n this.renderAppTitle(isAppNameSubtitleVariant)\n )}\n </div>\n </Component>\n )}\n </div>\n </div>\n );\n };\n\n render() {\n const {\n appTitle,\n menuOpen,\n foregroundColor,\n menuExpanded,\n href,\n status,\n version,\n collapsedIconLabels,\n inline,\n } = this;\n\n const isSDevice =\n !this.disableTopBarBehaviour && this.deviceSize === DEVICE_SIZES.S;\n const isSDeviceDisableTop =\n this.disableTopBarBehaviour && this.deviceSize === DEVICE_SIZES.S;\n const isMdDevice = this.deviceSize === DEVICE_SIZES.M;\n const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;\n const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;\n const displayExpandBtn =\n isMdDevice || isSDeviceDisableTop || (isLgDevice && !this.static);\n\n const topBarProps: IcTopBar = {\n isSDevice,\n foregroundColor,\n menuOpen,\n href: href!,\n isAppNameSubtitleVariant,\n appTitle: appTitle || \"\",\n };\n\n return (\n <Host\n class={{\n \"xs-menu-open\": menuOpen && isSDevice,\n \"xs-menu-close\": !menuOpen && isSDevice,\n \"sm-collapsed\": !isSDevice && !menuExpanded,\n \"sm-expanded\": !isSDevice && menuExpanded,\n \"side-display\":\n this.deviceSize > DEVICE_SIZES.S || !!this.disableTopBarBehaviour,\n [`ic-side-navigation-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [\"collapsed-labels\"]:\n !isSDevice && !menuExpanded && !!collapsedIconLabels,\n [\"ic-side-navigation-inline\"]: !!inline,\n }}\n >\n {isSDevice && this.renderTopBar({ ...topBarProps })}\n <div class=\"side-navigation\" id=\"side-navigation\">\n {!isSDevice && this.renderTopBar({ ...topBarProps })}\n <div class=\"side-navigation-inner\">\n {isSlotUsed(this.el, \"primary-navigation\") && (\n <nav\n class=\"primary-navigation\"\n aria-labelledby=\"primary-navigation-landmark\"\n >\n <span\n aria-hidden=\"true\"\n class=\"navigation-landmark-title\"\n id=\"primary-navigation-landmark\"\n >\n Primary\n </span>\n <ul class=\"navigation-list\">\n <slot name=\"primary-navigation\"></slot>\n </ul>\n </nav>\n )}\n </div>\n <div\n class={{\n [\"bottom-wrapper\"]: true,\n [\"classification-spacing\"]: hasClassificationBanner(),\n }}\n >\n {isSlotUsed(this.el, \"secondary-navigation\") && (\n <nav\n class=\"secondary-navigation\"\n aria-labelledby=\"secondary-navigation-landmark\"\n >\n <span\n aria-hidden=\"true\"\n class=\"navigation-landmark-title\"\n id=\"secondary-navigation-landmark\"\n >\n Secondary\n </span>\n <ul class=\"navigation-list\">\n <slot name=\"secondary-navigation\"></slot>\n </ul>\n </nav>\n )}\n <div class=\"bottom-side-nav\">\n {this.hasSecondaryNavigation && <ic-divider></ic-divider>}\n {displayExpandBtn && (\n <button\n class=\"menu-expand-button\"\n innerHTML={chevronIcon}\n onClick={() => this.toggleMenuExpanded(!this.menuExpanded)}\n aria-label={`${\n menuExpanded ? \"Collapse\" : \"Expand\"\n } side navigation`}\n ></button>\n )}\n <div class=\"app-status-wrapper\">\n {status !== \"\" && (\n <div\n class={{\n [\"app-status\"]: true,\n }}\n >\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {status}\n </ic-typography>\n </div>\n )}\n {version !== \"\" && (\n <ic-typography\n variant=\"label\"\n class=\"app-version\"\n aria-label=\"app version\"\n >\n {version}\n </ic-typography>\n )}\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
1
|
+
{"file":"ic-side-navigation.entry.js","mappings":"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","names":["chevronIcon"],"sources":["src/components/ic-side-navigation/ic-side-navigation.css?tag=ic-side-navigation&encapsulation=shadow","src/components/ic-side-navigation/ic-side-navigation.tsx"],"sourcesContent":["/**\n * @prop --ic-z-index-side-navigation: z-index of side navigation panel\n */\n\n:host {\n display: block;\n\n --ic-typography-color: currentcolor;\n --side-navigation-position: fixed;\n --side-navigation-position-left: 0;\n --side-navigation-position-top: var(--ic-space-xxl);\n --side-navigation-height: var(--ic-space-xxl);\n --sm-side-navigation-top-bar-height: 3.5rem;\n --sm-side-navigation-collapsed-labels-width: 6rem;\n --sm-side-navigation-expand-transition-duration: var(\n --ic-transition-duration-slow\n );\n --side-navigation-width: 20rem;\n --sm-side-navigation-bottom-bar-height: 3.5rem;\n --keyline-lighten: var(--ic-space-1px) solid var(--ic-side-navigation-keyline);\n --keyline-darken: var(--ic-space-1px) solid var(--ic-state-layer-darken-20);\n --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);\n --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);\n\n z-index: var(--ic-z-index-side-navigation);\n}\n\n:host > * {\n box-sizing: border-box;\n}\n\n.side-navigation {\n display: flex;\n flex-direction: column;\n width: var(--side-navigation-width);\n color: var(--ic-side-navigation-text);\n position: var(--side-navigation-position);\n top: var(--side-navigation-position-top);\n left: calc(var(--side-navigation-width) * -1);\n bottom: 0;\n background-color: var(--ic-side-navigation-background);\n z-index: var(--ic-z-index-side-navigation);\n}\n\n:host(.ic-side-navigation-inline) .side-navigation {\n position: absolute;\n height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n.side-navigation-inner {\n background-color: var(--ic-side-navigation-background);\n display: flex;\n flex-direction: column;\n flex: 1 1 4rem;\n overflow: auto;\n}\n\n:host(.ic-side-navigation-inline) .side-navigation-inner {\n flex: 1;\n}\n\n:host(.xs-menu-open) .side-navigation {\n transition: left var(--ic-easing-transition-slow);\n left: 0;\n}\n\n:host(:has(.xs-menu-open, .xs-menu-close)) ::slotted(ic-navigation-item) {\n --navigation-item-side-nav-right: var(--ic-space-xl);\n}\n\n:host(.xs-menu-close) .side-navigation {\n left: calc(var(--side-navigation-width) * -1);\n transition: left var(--ic-easing-transition-slow);\n}\n\n:host(.xs-menu-close) .side-navigation > * {\n visibility: hidden;\n}\n\n:host(.anchor-right.xs-menu-open) .side-navigation {\n right: 0;\n left: auto;\n}\n\n:host(.anchor-right.xs-menu-close) .side-navigation {\n right: calc(var(--side-navigation-width) * -1);\n left: auto;\n transition: right var(--ic-easing-transition-slow);\n}\n\n.bottom-wrapper {\n border-top: var(--keyline-lighten);\n bottom: 0;\n left: 0;\n z-index: 2;\n background-color: var(--ic-side-navigation-background);\n display: flex;\n flex-direction: column;\n}\n\n:host(.ic-side-navigation-inline) .bottom-wrapper {\n position: sticky;\n}\n\n:host(.ic-side-navigation-dark) .bottom-wrapper {\n border-top: var(--keyline-darken);\n}\n\n/* Mobile Top Bar */\n\n.top-bar {\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: var(--side-navigation-height);\n padding: var(--ic-space-xs);\n box-sizing: border-box;\n background-color: var(--ic-side-navigation-background);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n border-bottom: var(--keyline-lighten);\n box-shadow: var(--ic-elevation-overlay);\n z-index: 2;\n overflow: hidden;\n visibility: visible;\n}\n\n:host(.ic-side-navigation-inline) .top-bar {\n position: absolute;\n}\n\n:host(.ic-side-navigation-dark) .top-bar {\n border-bottom: var(--keyline-darken);\n}\n\n.top-bar.dark a:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.app-title-wrapper {\n display: flex;\n margin-left: var(--ic-space-xs);\n border-left: var(--keyline-lighten);\n padding-left: var(--ic-space-xxs);\n color: var(--ic-side-navigation-text);\n align-items: center;\n}\n\n:host(.ic-side-navigation-dark) .app-title-wrapper {\n border-left: var(--keyline-darken);\n}\n\n.app-title-wrapper ic-typography h1 {\n margin: 0;\n}\n\n@media screen and (min-width: 340px) {\n .app-title-wrapper ic-typography {\n margin-left: var(--ic-space-xs);\n }\n}\n\n:host .title-link {\n display: flex;\n align-items: center;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n text-decoration: none;\n padding: var(--ic-space-xxs);\n color: var(--ic-side-navigation-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n color: var(--ic-side-navigation-text);\n}\n\nslot[name=\"app-title\"]::slotted(a),\nslot[name=\"app-icon\"]::slotted(a) {\n color: var(--ic-side-navigation-text);\n outline: none;\n text-decoration: none;\n display: flex;\n}\n\nslot[name=\"app-title\"]::slotted(ic-typography),\nslot[name=\"app-title\"]::slotted(a) {\n margin-left: var(--ic-space-xs) !important;\n}\n\nslot[name=\"app-title\"]::slotted(a) {\n font: var(--ic-font-subtitle-small);\n}\n\n@media screen and (min-width: 577px) {\n :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(ic-typography),\n :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(a) {\n position: absolute;\n left: -9999px;\n opacity: 0;\n transition: opacity var(--ic-easing-transition-slow);\n }\n\n :host(.sm-collapsed) slot[name=\"app-title\"]:dir(rtl)::slotted(ic-typography),\n :host(.sm-collapsed) slot[name=\"app-title\"]:dir(rtl)::slotted(a) {\n right: -9999px;\n }\n\n :host(.sm-expanded) slot[name=\"app-title\"]::slotted(a) {\n font: var(--ic-font-h3) !important;\n font-weight: var(--ic-font-weight-semibold) !important;\n margin-left: var(--ic-space-xs) !important;\n }\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-side-navigation-hover);\n}\n\n:host .title-link:active {\n background-color: var(--ic-side-navigation-pressed);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n background-color: transparent;\n}\n\n:host .title-link ic-typography {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n fill: var(--ic-side-navigation-text);\n}\n\n.app-icon-container {\n display: none;\n}\n\n.button-label {\n display: flex;\n align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n display: flex;\n}\n\n.menu-button {\n width: 6.5rem;\n}\n\n.app-status-wrapper {\n inset: 0 var(--ic-space-sm) 0 3.5rem;\n width: auto;\n display: flex;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-sm) 0;\n justify-content: flex-end;\n align-items: flex-end;\n pointer-events: none;\n height: fit-content;\n margin: 0 var(--ic-space-xs);\n}\n\n.app-status-wrapper .app-version {\n display: flex;\n overflow-wrap: break-word;\n padding-bottom: var(--ic-space-xxs);\n}\n\n.app-status-wrapper .app-status {\n display: flex;\n border-radius: 1rem;\n background-color: var(--ic-side-navigation-text);\n color: var(--ic-side-navigation-status-tag-text);\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n min-width: 1rem;\n}\n\n.app-status-wrapper .app-status-text {\n overflow-wrap: break-word;\n}\n\n:host(.ic-side-navigation-dark) .app-status-wrapper .app-status {\n --ic-typography-color: var(--ic-architectural-white);\n}\n\n.navigation-landmark-title {\n position: absolute;\n width: var(--ic-space-1px);\n height: var(--ic-space-1px);\n padding: 0;\n margin: calc(-1 * var(--ic-space-1px));\n overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n --navigation-group-height: 2.75rem;\n --navigation-group-justify-content: space-between;\n --navigation-group-hover: var(--ic-side-navigation-hover);\n --navigation-group-text-hover: var(--ic-side-navigation-text);\n --navigation-item-child-height: 3.5rem;\n --navigation-item-child-active: var(--ic-action-dark-bg-pressed);\n --navigation-item-child-color: var(--ic-side-navigation-text);\n --navigation-group-expand-toggle-padding: 0.25rem;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n --navigation-item-justify-content: flex-start;\n --navigation-item-min-height: 56px;\n --navigation-item-height: auto;\n}\n\n/* Toggle Chevron */\n\n.bottom-side-nav {\n position: relative;\n align-content: flex-end;\n min-height: var(--sm-side-navigation-top-bar-height);\n}\n\n.bottom-side-nav ic-divider {\n position: absolute;\n top: 0;\n}\n\n.primary-navigation {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n /* Hide scrollbar when required but keep functionality */\n scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n position: absolute;\n display: none;\n}\n\n.menu-visibility-visible {\n visibility: visible;\n width: 100%;\n}\n\n.app-title-show {\n min-width: 15.5rem;\n}\n\n:host(.side-display) {\n display: flex;\n flex-direction: column;\n height: 100vh;\n position: var(--side-navigation-position);\n left: 0;\n top: 0;\n bottom: 0;\n}\n\n:host(.side-display) .app-icon-container {\n height: 40px;\n display: flex;\n align-items: center;\n}\n\n:host(.side-display) .top-bar {\n --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n position: relative;\n padding: 0;\n box-shadow: none;\n}\n\n:host(.ic-side-navigation-inline.side-display) .top-bar {\n position: sticky;\n}\n\n:host(.anchor-right.side-display) .top-bar {\n box-shadow: 0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.anchor-right.side-display) .bottom-wrapper {\n box-shadow: 0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.side-display) .side-navigation,\n:host(.side-display) .top-bar {\n width: var(--sm-side-navigation-top-bar-height);\n}\n\n:host(.sm-collapsed.side-display) {\n width: var(--sm-side-navigation-top-bar-height);\n transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) {\n width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-expanded.side-display) {\n width: var(--side-navigation-width);\n transition: width var(--ic-easing-transition-slow);\n box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.side-display) .side-navigation {\n --side-navigation-position-top: 0;\n\n flex: 1;\n position: relative;\n top: auto;\n left: auto;\n bottom: auto;\n}\n\n:host(.ic-side-navigation-inline.side-display) .side-navigation {\n position: relative;\n}\n\n:host(.anchor-right.side-display) .side-navigation {\n left: auto;\n right: 0;\n}\n\n:host(.side-display) .app-title-wrapper {\n margin-left: 0;\n border-left: none;\n padding: var(--ic-space-xs) var(--ic-space-sm);\n}\n\n:host(.side-display) .app-title-wrapper ::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n}\n\n:host(.side-display) .app-title-wrapper ic-typography {\n font-weight: var(--ic-font-weight-semibold);\n}\n\n:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography {\n position: absolute;\n left: -9999px;\n opacity: 0;\n transition: opacity var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography:dir(rtl) {\n right: -9999px;\n}\n\n:host(.sm-expanded.side-display) ic-typography {\n position: relative;\n left: 0;\n}\n\n:host(.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n width: var(--side-navigation-width);\n transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.side-display) :is(.side-navigation, .top-bar) {\n width: var(--sm-side-navigation-top-bar-height);\n transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.anchor-right.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n left: auto;\n right: 0;\n}\n\n:host(.side-display) .app-status-wrapper,\n:host(.sm-collapsed.side-display) .app-status-wrapper {\n display: none;\n margin-left: 0;\n}\n\n:host(.sm-expanded.side-display) .app-status-wrapper {\n display: flex;\n max-width: 16rem;\n margin-right: calc(var(--ic-space-xxxs) + var(--ic-space-xs));\n}\n\n:host(.side-display) .bottom-side-nav {\n justify-items: flex-end;\n align-items: flex-end;\n justify-content: flex-end;\n display: flex;\n outline: none;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button {\n padding-left: var(--ic-space-md);\n height: var(--sm-side-navigation-top-bar-height);\n width: 100%;\n color: var(--ic-side-navigation-text);\n background-color: transparent;\n outline: var(--ic-hc-focus-outline);\n border: none;\n cursor: pointer;\n display: flex;\n transition: var(--ic-easing-transition-fast);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button {\n height: 100%;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button svg {\n justify-items: flex-start;\n align-self: center;\n display: inline-block;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button:hover {\n background-color: var(--ic-side-navigation-hover);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button:focus {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(1);\n transition: transform var(--ic-easing-transition-slow);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg {\n transform: scaleX(-1);\n transition: transform var(--ic-easing-transition-slow);\n align-self: flex-end;\n margin-bottom: 0.875rem;\n}\n\n:host(.anchor-right.sm-collapsed.side-display)\n .bottom-side-nav\n .menu-expand-button\n svg {\n transform: scaleX(-1);\n}\n\n:host(.anchor-right.sm-expanded.side-display)\n .bottom-side-nav\n .menu-expand-button\n svg {\n transform: scaleX(1);\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item) {\n --navigation-item-label-opacity: 1;\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item),\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n --navigation-item-label-opacity: 0;\n --navigation-item-min-height: 3.5rem;\n --navigation-item-height: 3.5rem;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-item),\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n --navigation-item-label-opacity: 1;\n --navigation-item-height: auto;\n --navigation-item-min-height: 3.5rem;\n --navigation-item-width: 20rem;\n --navigation-item-side-nav-right: var(--ic-space-xl);\n --navigation-group-width: 20rem;\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n --navigation-group-title-position: absolute;\n --navigation-group-title-position-left: -9999px;\n --navigation-group-title-opacity: none;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n --navigation-group-title-position: relative;\n --navigation-group-title-position-left: 0;\n --navigation-group-expand-toggle-padding: 0.25rem;\n --navigation-group-title-opacity: flex;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .side-navigation,\n:host(.sm-collapsed.collapsed-labels.side-display) .top-bar {\n width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .menu-expand-button {\n padding: 0;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .app-title-wrapper {\n width: 100%;\n justify-content: center;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display)\n ::slotted(ic-navigation-group) {\n --navigation-group-justify-content: center;\n --navigation-item-label-opacity: 1;\n --navigation-group-item-min-width: 100%;\n --navigation-group-expand-toggle-padding: 1rem;\n}\n\n:host(.collapsed-labels.side-display) .bottom-side-nav .menu-expand-button {\n justify-content: center;\n}\n\n:host(.side-display) .collapsed-icon-labels-start {\n visibility: hidden;\n opacity: 0;\n}\n\n:host(.side-display) .collapsed-icon-labels-end {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n}\n\n/* Media Queries */\n\n@media screen and (max-width: 419px) {\n .top-bar {\n height: var(--side-navigation-height);\n }\n\n .side-navigation {\n width: 100%;\n }\n}\n\n@media screen and (min-width: 340px) {\n .app-icon-container {\n display: flex;\n }\n}\n\n@media screen and (min-width: 993px) {\n :host(.side-display) {\n position: sticky;\n left: auto;\n top: 0;\n bottom: 0;\n }\n\n :host(.sm-expanded.side-display) {\n box-shadow: none;\n }\n}\n\n@media (forced-colors: active) {\n .side-navigation,\n .top-bar {\n border-right: var(--ic-border-hc);\n }\n\n .menu-expand-button {\n color: Highlight !important;\n }\n\n slot[name=\"app-icon\"]::slotted(svg) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Listen,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\n\nimport menuIcon from \"../../assets/hamburger-menu-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n getCurrentDeviceSize,\n DEVICE_SIZES,\n checkResizeObserver,\n isSlotUsed,\n getBrandForegroundAppearance,\n getCssProperty,\n hasClassificationBanner,\n onComponentRequiredPropUndefined,\n isEmptyString,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport {\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar, IcExpandedDetail } from \"./ic-side-navigation.types\";\n\n/**\n * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot primary-navigation - Content will be rendered at the top of the side navigation.\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.\n */\n\n@Component({\n tag: \"ic-side-navigation\",\n styleUrl: \"ic-side-navigation.css\",\n shadow: true,\n})\nexport class SideNavigation {\n private ANIMATION_DURATION =\n parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n private IC_NAVIGATION_ITEM: string = \"ic-navigation-item\";\n private resizeObserver: ResizeObserver | null = null;\n private COLLAPSED_ICON_LABELS_END = \"collapsed-icon-labels-end\";\n private COLLAPSED_ICON_LABELS_START = \"collapsed-icon-labels-start\";\n private menuButton?: HTMLIcButtonElement;\n\n @Element() el: HTMLIcSideNavigationElement;\n\n @State() deviceSize: number = getCurrentDeviceSize();\n @State() deviceSizeAppTitle: number = DEVICE_SIZES.S;\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() hasSecondaryNavigation: boolean = false;\n @State() menuExpanded: boolean = false;\n @State() menuOpen: boolean = false;\n\n /**\n * The app title to be displayed. This is required, unless a slotted app title link is used.\n */\n @Prop() appTitle?: string;\n\n /**\n * If `true`, the side navigation will close when a navigation item is clicked. This behaviour is only applicable on larger device sizes.\n */\n @Prop() closeOnNavItemClick?: boolean = false;\n\n /**\n * If `true`, the icon and label will appear when side navigation is collapsed.\n */\n @Prop() collapsedIconLabels?: boolean = false;\n\n /**\n * If `true`, automatic parent wrapper styling will be disabled.\n */\n @Prop() disableAutoParentStyling?: boolean = false;\n\n /**\n * If `true`, the side navigation will not display as a top bar on small devices.\n */\n @Prop() disableTopBarBehaviour?: boolean = false;\n\n /**\n * If `true`, the side navigation will display in an expanded state.\n */\n @Prop() expanded?: boolean = false;\n\n @Watch(\"expanded\")\n watchExpandedHandler(): void {\n this.toggleMenuExpanded(this.expanded!);\n }\n\n /**\n * The URL that the app title link points to.\n */\n @Prop() href?: string = \"/\";\n\n /**\n * @internal If `true`, side navigation will be contained by its parent element.\n */\n @Prop() inline?: boolean = false;\n\n /**\n * The short title of the app to be displayed at small screen sizes in place of the app title.\n */\n @Prop() shortAppTitle?: string = \"\";\n\n /**\n * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).\n */\n @Prop() static?: boolean = false;\n\n /**\n * The status of the app to be displayed.\n */\n @Prop() status?: string;\n\n /**\n * The version of the app to be displayed.\n */\n @Prop() version?: string;\n\n /**\n * Emitted when the side navigation is collapsed and expanded.\n */\n @Event() icSideNavExpanded: EventEmitter<IcExpandedDetail>;\n\n componentWillLoad(): void {\n this.setMenuExpanded(this.expanded!);\n\n if (this.collapsedIconLabels) {\n this.setCollapsedIconLabels();\n }\n\n this.hasSecondaryNavigation = isSlotUsed(this.el, \"secondary-navigation\");\n }\n\n componentDidLoad(): void {\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuExpanded,\n sideNavMobile:\n this.deviceSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour,\n });\n\n checkResizeObserver(this.runResizeObserver);\n this.styleSlottedCollapsedIconLabel();\n this.arrangeSlottedNavigationItem(this.menuExpanded);\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n this.setExpandedButtonHeight();\n\n if (this.closeOnNavItemClick) {\n this.el.addEventListener(\n \"navItemClicked\",\n this.handleNavItemClicked as EventListener\n );\n }\n\n !isSlotUsed(this.el, \"app-title\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Side Navigation\"\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n\n this.el?.removeEventListener(\"transitionend\", this.transitionEndHandler);\n\n if (this.closeOnNavItemClick) {\n this.el.removeEventListener(\n \"navItemClicked\",\n this.handleNavItemClicked as EventListener\n );\n }\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.foregroundColor = detail.mode;\n }\n\n private emitSideNavigationExpanded = (objDetails: {\n sideNavExpanded: boolean;\n sideNavMobile?: boolean;\n }): void => {\n this.icSideNavExpanded.emit({\n sideNavExpanded: objDetails.sideNavExpanded,\n sideNavMobile: !!objDetails.sideNavMobile,\n });\n };\n\n private toggleMenu = (): void => {\n this.menuOpen = !this.menuOpen;\n this.setMobileMenuAriaAttributes(this.menuOpen);\n\n this.arrangeSlottedNavigationItem(this.menuOpen);\n\n this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n this.emitSideNavigationExpanded({\n sideNavExpanded: this.menuOpen,\n sideNavMobile: true,\n });\n };\n\n private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n const sideNav = this.el.shadowRoot?.querySelector(\n \"#side-navigation\"\n ) as HTMLDivElement;\n const sideNavInner = sideNav.querySelector(\n \".side-navigation-inner\"\n ) as HTMLElement;\n const bottomWrapper = sideNav.querySelector(\n \".bottom-wrapper\"\n ) as HTMLElement;\n\n const menuVisibilityVisible = \"menu-visibility-visible\";\n\n if (menuOpen) {\n bottomWrapper.classList.add(menuVisibilityVisible);\n sideNavInner.classList.add(menuVisibilityVisible);\n } else {\n setTimeout(() => {\n sideNavInner.classList.remove(menuVisibilityVisible);\n bottomWrapper.classList.remove(menuVisibilityVisible);\n }, this.ANIMATION_DURATION);\n }\n };\n\n private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n if (this.menuButton) {\n this.menuButton.setAttribute(\"aria-expanded\", `${menuOpen}`);\n this.menuButton.setAttribute(\n \"aria-label\",\n `${menuOpen ? \"Close\" : \"Open\"} navigation menu`\n );\n }\n };\n\n private setAndRemoveNoWrapAfterMenuExpanded = () => {\n const appTitle =\n this.el.shadowRoot?.querySelector(\".title-link ic-typography\") ||\n this.el.querySelector(\"[slot='app-title']\");\n\n appTitle?.classList.add(\"ic-typography-no-wrap\");\n\n setTimeout(() => {\n appTitle?.classList.remove(\"ic-typography-no-wrap\");\n }, this.ANIMATION_DURATION);\n };\n\n private toggleMenuExpanded = (expanded: boolean): void => {\n this.menuExpanded = expanded;\n\n if (this.menuExpanded) {\n this.setAndRemoveNoWrapAfterMenuExpanded();\n this.el.shadowRoot\n ?.querySelector(\".app-title-inner-wrapper\")\n ?.classList.add(\"app-title-show\");\n } else {\n this.el.style.setProperty(\"--navigation-item-width\", \"320px\");\n this.el.shadowRoot\n ?.querySelector(\".app-title-inner-wrapper\")\n ?.classList.remove(\"app-title-show\");\n\n this.el.addEventListener(\"transitionend\", (e) => {\n if (e.propertyName === \"width\") {\n this.el.style.setProperty(\"--navigation-item-width\", null);\n }\n });\n }\n\n this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n if (this.collapsedIconLabels) {\n this.animateCollapsedIconLabels();\n }\n\n this.setExpandedButtonHeight();\n this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n };\n\n /**\n * In order to style nested slotted elements (e.g. using React Router components), this method\n * rearranges the a tag and labels and adds inline styling expand/collapsed animations as external CSS classes are not\n * do not take affect.\n * @param menuExpanded boolean - true or false depending on side navigation state\n */\n private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n navItems.forEach((navItem) => {\n const isNamedSlot = isSlotUsed(navItem, \"navigation-item\");\n const isUnnamedSlot =\n navItem.children[0] && !navItem.children[0].getAttribute(\"slot\");\n if (isNamedSlot || isUnnamedSlot) {\n let navItemSlot;\n if (isNamedSlot) {\n navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\n } else {\n navItemSlot = navItem.children[0];\n }\n const iconWrapper = document.createElement(\"div\");\n const icon = navItemSlot?.querySelector(\"svg\");\n const badge = navItemSlot?.querySelector(\"ic-badge\");\n const label = navItem.textContent?.trim();\n const icTypography = document.createElement(\"ic-typography\");\n icTypography.classList.add(\n \"ic-typography-label\",\n \"hydrated\",\n \"navigation-item-side-nav-slotted-text\"\n );\n\n iconWrapper.style.position = \"relative\";\n iconWrapper.style.height = \"var(--ic-space-lg)\";\n\n icon && iconWrapper.append(icon);\n badge && iconWrapper.append(badge);\n\n if (label) {\n icTypography.textContent = label;\n }\n\n if (navItemSlot) {\n navItemSlot.textContent = \"\";\n navItemSlot.append(iconWrapper);\n navItemSlot.append(icTypography);\n }\n\n if (this.collapsedIconLabels) {\n this.styleSlottedCollapsedIconLabels(!!menuExpanded, icTypography);\n } else {\n this.styleSlottedIconLabels(!!menuExpanded, icTypography);\n }\n }\n });\n };\n\n private styleSlottedCollapsedIconLabels = (\n menuExpanded: boolean,\n icTypography: HTMLIcTypographyElement\n ) => {\n if (menuExpanded) {\n icTypography.style.marginTop = \"0\";\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n } else {\n icTypography.style.marginTop = \"10px\";\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n }\n };\n\n private setExpandedButtonHeight = () => {\n const appStatusWrapper = this.el.shadowRoot?.querySelector(\n \"#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper\"\n ) as HTMLDivElement;\n\n if (appStatusWrapper.offsetHeight !== 0) {\n this.el.style.setProperty(\n \"--sm-side-navigation-bottom-bar-height\",\n `${appStatusWrapper.offsetHeight}px`\n );\n }\n };\n\n private styleSlottedIconLabels = (\n menuExpanded: boolean,\n icTypography: HTMLSpanElement\n ) => {\n if (menuExpanded) {\n icTypography.style.opacity = \"1\";\n icTypography.style.visibility = \"visible\";\n icTypography.style.transition =\n \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n } else {\n icTypography.style.opacity = \"0\";\n icTypography.style.visibility = \"hidden\";\n icTypography.style.transition =\n \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n }\n };\n\n private transitionHandler = (type: string) => {\n const primaryNavigationWrapper = this.el.shadowRoot?.querySelector(\n \".primary-navigation\"\n );\n\n const secondaryNavigationWrapper = this.el.shadowRoot?.querySelector(\n \".bottom-wrapper > .secondary-navigation\"\n );\n\n const classToRemove =\n type === \"start\"\n ? this.COLLAPSED_ICON_LABELS_END\n : this.COLLAPSED_ICON_LABELS_START;\n\n const classToAdd =\n type === \"start\"\n ? this.COLLAPSED_ICON_LABELS_START\n : this.COLLAPSED_ICON_LABELS_END;\n\n if (primaryNavigationWrapper) {\n primaryNavigationWrapper.classList.remove(classToRemove);\n primaryNavigationWrapper.classList.add(classToAdd);\n }\n\n if (secondaryNavigationWrapper) {\n secondaryNavigationWrapper.classList.remove(classToRemove);\n secondaryNavigationWrapper.classList.add(classToAdd);\n }\n };\n\n private transitionEndHandler = () => {\n this.transitionHandler(\"end\");\n };\n\n private animateCollapsedIconLabels = () => {\n this.transitionHandler(\"start\");\n this.transitionEndHandler();\n\n this.el.addEventListener(\"transitionend\", this.transitionEndHandler);\n };\n\n private paddingIconWidth = (\n navItems: HTMLIcNavigationItemElement[]\n ): number => {\n const navItemLink =\n (navItems[0].shadowRoot &&\n (navItems[0].shadowRoot.querySelector(\"ic-tooltip a\") ||\n navItems[0].shadowRoot.querySelector(\"ic-tooltip div\"))) ||\n navItems[0].querySelector(\"a\") ||\n navItems[0].querySelector(\"div\");\n const navItemSVG = navItems[0].querySelector(\"svg\");\n\n if (navItemLink && navItemSVG) {\n const navStyles = {\n gap: window.getComputedStyle(navItemLink).gap,\n iconWidth: window.getComputedStyle(navItemSVG).width,\n paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,\n };\n\n return Object.values(navStyles).reduce((prev, curr) => {\n return (prev += parseInt(curr));\n }, 0);\n }\n\n return 0;\n };\n\n private displayTooltipWithExpandedLongLabel = (menuExpanded: boolean) => {\n let timer;\n\n if (menuExpanded) {\n timer = setTimeout(() => {\n const sideNavWidth = this.el.clientWidth;\n\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n\n const paddingIconDelta = navigationItems.length\n ? this.paddingIconWidth(navigationItems)\n : 0;\n\n navigationItems.forEach(\n (navigationItem: HTMLIcNavigationItemElement) => {\n const icTypographyScrollWidth =\n (\n navigationItem.shadowRoot &&\n navigationItem.shadowRoot.querySelector(\n \"ic-tooltip .link ic-typography.ic-typography-label\"\n )\n )?.scrollWidth ||\n navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n ?.scrollWidth;\n\n if (\n icTypographyScrollWidth &&\n icTypographyScrollWidth > sideNavWidth - paddingIconDelta\n ) {\n navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n }\n }\n );\n }, this.ANIMATION_DURATION);\n } else {\n clearTimeout(timer);\n\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n });\n }\n };\n\n private setMenuExpanded = (expanded: boolean): void => {\n this.menuExpanded = expanded;\n };\n\n private handleNavItemClicked = () => {\n if (\n !this.menuOpen &&\n this.deviceSize > DEVICE_SIZES.S &&\n this.menuExpanded\n ) {\n setTimeout(() => {\n this.toggleMenuExpanded(false);\n }, 0);\n }\n };\n\n /**\n * As the mobile top bar is fixed, a padding top is required\n * to push main content down the height of the mobile top bar\n * @param value - padding-top css value\n */\n private setParentPaddingTop = (value: string) => {\n this.el.parentElement?.style.setProperty(\"padding-top\", value);\n };\n\n private setParentPaddingLeft = (value: string) => {\n this.el.parentElement?.style.setProperty(\"padding-left\", value);\n };\n\n private renderAppTitle = (isAppNameSubtitleVariant: boolean) => {\n const displayShortAppTitle =\n this.deviceSize <= DEVICE_SIZES.S && !isEmptyString(this.shortAppTitle);\n return (\n <ic-typography\n variant={\n displayShortAppTitle || isAppNameSubtitleVariant\n ? \"subtitle-small\"\n : \"h3\"\n }\n aria-label={\n displayShortAppTitle\n ? `${this.appTitle} (${this.shortAppTitle})`\n : undefined\n }\n >\n <h1>{displayShortAppTitle ? this.shortAppTitle : this.appTitle}</h1>\n </ic-typography>\n );\n };\n\n private resizeObserverCallback = (currSize: number) => {\n this.deviceSize = currSize;\n\n const isSDeviceEnableTop =\n currSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour;\n\n if (!this.disableAutoParentStyling) {\n const topBarHeight =\n this.el.shadowRoot?.querySelector(\".top-bar\")?.scrollHeight;\n this.setParentPaddingTop(isSDeviceEnableTop ? `${topBarHeight}px` : \"0\");\n if (isSDeviceEnableTop) this.setParentPaddingLeft(\"0\");\n if (isSDeviceEnableTop && this.inline) {\n this.el.parentElement?.style.setProperty(\n \"height\",\n `calc(100% - ${topBarHeight}px)`\n );\n } else if (!isSDeviceEnableTop) {\n this.el.parentElement?.style.setProperty(\"height\", \"100%\");\n }\n }\n\n const notSmallDisableTop =\n currSize > DEVICE_SIZES.S || this.disableTopBarBehaviour;\n\n if (!this.disableAutoParentStyling) {\n const paddingLeft = `calc(var(--ic-space-xxl) ${\n this.collapsedIconLabels ? \"* 2\" : \"+ var(--ic-space-xs)\"\n })`;\n\n if (currSize > DEVICE_SIZES.L) {\n this.setParentPaddingTop(\"0\");\n this.setParentPaddingLeft(\"0\");\n } else if (\n notSmallDisableTop &&\n currSize <= DEVICE_SIZES.M &&\n this.static\n ) {\n this.setParentPaddingLeft(paddingLeft);\n } else if (notSmallDisableTop && currSize <= DEVICE_SIZES.L) {\n this.setParentPaddingLeft(\n this.static && this.menuExpanded\n ? \"calc(var(--ic-space-xl) * 10)\"\n : paddingLeft\n );\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.deviceSizeAppTitle = currSize;\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(document.body, { box: \"content-box\" });\n };\n\n private setCollapsedIconLabels = () => {\n const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n );\n navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n });\n };\n\n private styleSlottedCollapsedIconLabel = () => {\n const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n Array.from(\n this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n );\n\n dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n if (\n icTypography.parentElement?.parentElement?.classList.contains(\n \"navigation-item-side-nav-collapsed-with-label\"\n )\n ) {\n icTypography.style.whiteSpace = \"nowrap\";\n icTypography.style.overflow = \"hidden\";\n icTypography.style.textOverflow = \"ellipsis\";\n icTypography.style.marginTop = \"10px\";\n }\n });\n };\n\n private renderTopBar = ({\n isSDevice,\n foregroundColor,\n menuOpen,\n href,\n isAppNameSubtitleVariant,\n }: IcTopBar) => {\n const hasTitle = this.appTitle !== \"\" && isPropDefined(this.appTitle);\n\n const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\n <div\n class={{\n \"top-bar\": true,\n [this.foregroundColor]: true,\n }}\n >\n {isSDevice && (\n <nav\n aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n aria-hidden=\"false\"\n >\n <ic-button\n aria-label=\"Open navigation menu\"\n class=\"menu-button\"\n id=\"menu-button\"\n variant=\"secondary\"\n size=\"small\"\n full-width=\"true\"\n theme={\n foregroundColor == \"default\" || foregroundColor == \"light\"\n ? \"light\"\n : \"dark\"\n }\n monochrome\n onClick={this.toggleMenu}\n ariaOwnsId=\"side-navigation\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n ref={(el) => (this.menuButton = el)}\n >\n <span\n class=\"mobile-top-bar-menu-icon\"\n slot=\"left-icon\"\n innerHTML={menuOpen ? closeIcon : menuIcon}\n ></span>\n {menuOpen ? \"Close\" : \"Menu\"}\n </ic-button>\n <span\n id=\"menu-navigation-toggle-button-landmark\"\n class=\"navigation-landmark-title\"\n aria-hidden=\"true\"\n >\n Navigation menu toggle button\n </span>\n </nav>\n )}\n <div class=\"app-title-wrapper\">\n {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n <Component {...attrs} class=\"title-link\">\n <div class=\"app-icon-container\" aria-hidden=\"true\">\n <slot name=\"app-icon\"></slot>\n </div>\n <div class=\"app-title-inner-wrapper\">\n {isSlotUsed(this.el, \"app-title\") ? (\n <slot name=\"app-title\"></slot>\n ) : (\n this.renderAppTitle(isAppNameSubtitleVariant)\n )}\n </div>\n </Component>\n )}\n </div>\n </div>\n );\n };\n\n render() {\n const {\n appTitle,\n menuOpen,\n foregroundColor,\n menuExpanded,\n href,\n status,\n version,\n collapsedIconLabels,\n inline,\n } = this;\n\n const isSDevice =\n !this.disableTopBarBehaviour && this.deviceSize === DEVICE_SIZES.S;\n const isSDeviceDisableTop =\n this.disableTopBarBehaviour && this.deviceSize === DEVICE_SIZES.S;\n const isMdDevice = this.deviceSize === DEVICE_SIZES.M;\n const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;\n const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;\n const displayExpandBtn =\n isMdDevice || isSDeviceDisableTop || (isLgDevice && !this.static);\n\n const topBarProps: IcTopBar = {\n isSDevice,\n foregroundColor,\n menuOpen,\n href: href!,\n isAppNameSubtitleVariant,\n appTitle: appTitle || \"\",\n };\n\n return (\n <Host\n class={{\n \"xs-menu-open\": menuOpen && isSDevice,\n \"xs-menu-close\": !menuOpen && isSDevice,\n \"sm-collapsed\": !isSDevice && !menuExpanded,\n \"sm-expanded\": !isSDevice && menuExpanded,\n \"side-display\":\n this.deviceSize > DEVICE_SIZES.S || !!this.disableTopBarBehaviour,\n [`ic-side-navigation-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [\"collapsed-labels\"]:\n !isSDevice && !menuExpanded && !!collapsedIconLabels,\n [\"ic-side-navigation-inline\"]: !!inline,\n }}\n >\n {isSDevice && this.renderTopBar({ ...topBarProps })}\n <div class=\"side-navigation\" id=\"side-navigation\">\n {!isSDevice && this.renderTopBar({ ...topBarProps })}\n <div class=\"side-navigation-inner\">\n {isSlotUsed(this.el, \"primary-navigation\") && (\n <nav\n class=\"primary-navigation\"\n aria-labelledby=\"primary-navigation-landmark\"\n >\n <span\n aria-hidden=\"true\"\n class=\"navigation-landmark-title\"\n id=\"primary-navigation-landmark\"\n >\n Primary\n </span>\n <ul class=\"navigation-list\">\n <slot name=\"primary-navigation\"></slot>\n </ul>\n </nav>\n )}\n </div>\n <div\n class={{\n [\"bottom-wrapper\"]: true,\n [\"classification-spacing\"]: hasClassificationBanner(),\n }}\n >\n {isSlotUsed(this.el, \"secondary-navigation\") && (\n <nav\n class=\"secondary-navigation\"\n aria-labelledby=\"secondary-navigation-landmark\"\n >\n <span\n aria-hidden=\"true\"\n class=\"navigation-landmark-title\"\n id=\"secondary-navigation-landmark\"\n >\n Secondary\n </span>\n <ul class=\"navigation-list\">\n <slot name=\"secondary-navigation\"></slot>\n </ul>\n </nav>\n )}\n <div class=\"bottom-side-nav\">\n {this.hasSecondaryNavigation && <ic-divider></ic-divider>}\n {displayExpandBtn && (\n <button\n class=\"menu-expand-button\"\n innerHTML={chevronIcon}\n onClick={() => this.toggleMenuExpanded(!this.menuExpanded)}\n aria-label={`${\n menuExpanded ? \"Collapse\" : \"Expand\"\n } side navigation`}\n ></button>\n )}\n <div class=\"app-status-wrapper\">\n {status && (\n <div\n class={{\n [\"app-status\"]: true,\n }}\n >\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {status}\n </ic-typography>\n </div>\n )}\n {version && (\n <ic-typography\n variant=\"label\"\n class=\"app-version\"\n aria-label=\"app version\"\n >\n {version}\n </ic-typography>\n )}\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7a720e7.js';
|
2
2
|
import { r as removeDisabledFalse } from './helpers-f5ff3b42.js';
|
3
3
|
|
4
|
-
const icToggleButtonGroupCss = "/*! 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}:root{display:block}:host{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;min-width:-moz-min-content;min-width:min-content;border:var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);border-radius:var(--ic-border-radius)}:host(.ic-toggle-button-group-full-width){width:100%;max-width:100%}:host(.ic-toggle-button-group-loading){min-width:-moz-max-content;min-width:max-content}:host(:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast);outline:none}::slotted(ic-toggle-button){flex-grow:1;width:-moz-min-content;width:min-content;--toggle-button-border:none !important;--toggle-button-border-hover:none !important;--toggle-button-border-active:none !important}::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border)}:host(.ic-toggle-button-group-disabled){border:var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);pointer-events:none}:host(.ic-toggle-button-group-disabled) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled)}:host(.ic-toggle-button-group-monochrome){border:var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome)}:host(.ic-toggle-button-group-monochrome) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome)}:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome){border:var(--ic-border-width) dashed\n var(--ic-toggle-button-unselected-border-disabled-monochrome)}:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-disabled-monochrome)}";
|
4
|
+
const icToggleButtonGroupCss = "/*! 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}:root{display:block}:host{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;min-width:-moz-min-content;min-width:min-content;border:var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);border-radius:var(--ic-border-radius)}:host(.ic-toggle-button-group-full-width){width:100%;max-width:100%}:host(.ic-toggle-button-group-loading){min-width:-moz-max-content;min-width:max-content}:host(:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast);outline:none}::slotted(ic-toggle-button){flex-grow:1;width:-moz-min-content;width:min-content;--toggle-button-border:none !important;--toggle-button-border-hover:none !important;--toggle-button-border-active:none !important}::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border)}:host(.ic-toggle-button-group-disabled){border:var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);pointer-events:none}:host(.ic-toggle-button-group-disabled) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled)}:host(.ic-toggle-button-group-monochrome){border:var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome)}:host(.ic-toggle-button-group-monochrome) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome)}:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome){border:var(--ic-border-width) dashed\n var(--ic-toggle-button-unselected-border-disabled-monochrome)}:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-disabled-monochrome)}:host(.ic-toggle-button-group-hide-outline){--ic-toggle-button-unselected-border:transparent;--ic-toggle-button-unselected-border-disabled:transparent;--ic-toggle-button-unselected-border-monochrome:transparent;--ic-toggle-button-unselected-border-disabled-monochrome:transparent}";
|
5
5
|
const IcToggleButtonGroupStyle0 = icToggleButtonGroupCss;
|
6
6
|
|
7
7
|
const TOGGLE_GROUP = "IC-TOGGLE-BUTTON-GROUP";
|
@@ -33,6 +33,10 @@ const ToggleButtonGroup = class {
|
|
33
33
|
* If `true`, the toggle button group will display as black in the light theme, and white in dark theme.
|
34
34
|
*/
|
35
35
|
this.monochrome = false;
|
36
|
+
/**
|
37
|
+
* If `true`, the toggle button group will display with an outline.
|
38
|
+
*/
|
39
|
+
this.outline = true;
|
36
40
|
/**
|
37
41
|
* If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.
|
38
42
|
*/
|
@@ -143,6 +147,11 @@ const ToggleButtonGroup = class {
|
|
143
147
|
el.monochrome = this.monochrome;
|
144
148
|
});
|
145
149
|
}
|
150
|
+
watchOutlineHandler() {
|
151
|
+
this.getAllToggleButtons().forEach((el) => {
|
152
|
+
el.outline = this.outline;
|
153
|
+
});
|
154
|
+
}
|
146
155
|
watchSizeHandler() {
|
147
156
|
this.getAllToggleButtons().forEach((el) => {
|
148
157
|
el.size = this.size;
|
@@ -220,14 +229,15 @@ const ToggleButtonGroup = class {
|
|
220
229
|
document === null || document === void 0 ? void 0 : document.removeEventListener("keydown", this.keyListener);
|
221
230
|
}
|
222
231
|
render() {
|
223
|
-
const { accessibleLabel, disabled, fullWidth, loading, monochrome, theme } = this;
|
224
|
-
return (h(Host, { key: '
|
232
|
+
const { accessibleLabel, disabled, fullWidth, loading, monochrome, outline, theme, } = this;
|
233
|
+
return (h(Host, { key: 'b76a2d77d20894bcbf3bd350945e8953c9c690ef', role: "group", "aria-label": accessibleLabel, tabindex: 0, class: {
|
225
234
|
"ic-toggle-button-group-disabled": disabled,
|
226
235
|
"ic-toggle-button-group-full-width": fullWidth,
|
227
236
|
"ic-toggle-button-group-loading": loading,
|
228
237
|
"ic-toggle-button-group-monochrome": monochrome,
|
238
|
+
"ic-toggle-button-group-hide-outline": !outline,
|
229
239
|
[`ic-theme-${theme}`]: theme !== "inherit",
|
230
|
-
}, onFocus: this.handleHostFocus }, h("slot", { key: '
|
240
|
+
}, onFocus: this.handleHostFocus }, h("slot", { key: '755e5420c42800c0d436adf366afe611edd8e529' })));
|
231
241
|
}
|
232
242
|
get el() { return getElement(this); }
|
233
243
|
static get watchers() { return {
|
@@ -235,6 +245,7 @@ const ToggleButtonGroup = class {
|
|
235
245
|
"fullWidth": ["watchFullWidthHandler"],
|
236
246
|
"loading": ["watchLoadingHandler"],
|
237
247
|
"monochrome": ["watchMonochromeHandler"],
|
248
|
+
"outline": ["watchOutlineHandler"],
|
238
249
|
"size": ["watchSizeHandler"],
|
239
250
|
"theme": ["watchThemeHandler"],
|
240
251
|
"tooltipPlacement": ["watchTooltipPlacementHandler"],
|
@@ -1 +1 @@
|
|
1
|
-
{"file":"ic-toggle-button-group.entry.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button-group/ic-toggle-button-group.css?tag=ic-toggle-button-group&encapsulation=shadow","src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* PARENT HOST */\n\n:root {\n display: block;\n}\n\n:host {\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: min-content;\n border: var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.ic-toggle-button-group-full-width) {\n width: 100%;\n max-width: 100%;\n}\n\n:host(.ic-toggle-button-group-loading) {\n min-width: max-content;\n}\n\n:host(:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n}\n\n/* CHILDREN SLOTTED */\n\n::slotted(ic-toggle-button) {\n flex-grow: 1;\n width: min-content;\n\n --toggle-button-border: none !important;\n --toggle-button-border-hover: none !important;\n --toggle-button-border-active: none !important;\n}\n\n::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border);\n}\n\n/* DISABLED */\n:host(.ic-toggle-button-group-disabled) {\n border: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n pointer-events: none;\n}\n\n:host(.ic-toggle-button-group-disabled)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n}\n\n:host(.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) dashed\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcSizes,\n IcSelectTypes,\n IcSelectMethodTypes,\n IcThemeMode,\n IcButtonTooltipPlacement,\n IcIconPlacementOptions,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\nimport { removeDisabledFalse } from \"../../utils/helpers\";\n\ninterface lastKey {\n key: string | null;\n shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n tag: \"ic-toggle-button-group\",\n styleUrl: \"ic-toggle-button-group.css\",\n shadow: true,\n})\nexport class ToggleButtonGroup {\n @Element() el: HTMLIcToggleButtonGroupElement;\n\n @State() lastKeyPressed: lastKey = {\n key: null,\n shift: false,\n };\n\n /**\n * The accessible label of the toggle button group component to provide context for screen reader users.\n */\n @Prop() accessibleLabel = \"Toggle button group\";\n\n /**\n * If `true`, the toggle button group will be set to the disabled state.\n */\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.disabled = this.disabled;\n });\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * If `true`, the toggle button group will fill the width of the container.\n */\n @Prop() fullWidth = false;\n @Watch(\"fullWidth\")\n watchFullWidthHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.fullWidth = this.fullWidth;\n });\n }\n\n /**\n * The placement of the icons in relation to the toggle button labels.\n */\n @Prop() iconPlacement?: IcIconPlacementOptions;\n\n /**\n * If `true`, the toggle button group will be in loading state.\n */\n @Prop() loading = false;\n @Watch(\"loading\")\n watchLoadingHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.loading = this.loading;\n });\n }\n\n /**\n * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.\n */\n @Prop() monochrome = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.monochrome = this.monochrome;\n });\n }\n\n /**\n * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n */\n @Prop({ mutable: true }) selectMethod: IcSelectMethodTypes = \"manual\";\n\n /**\n * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n */\n @Prop() selectType: IcSelectTypes = \"single\";\n\n /**\n * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\n */\n @Prop() size: IcSizes = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.size = this.size;\n });\n }\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.theme = this.theme;\n });\n }\n\n /**\n * The position of the tooltip in relation to the toggle buttons.\n */\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n @Watch(\"tooltipPlacement\")\n watchTooltipPlacementHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.tooltipPlacement = this.tooltipPlacement;\n });\n }\n\n /**\n * The variant of the toggle button.\n */\n @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n @Watch(\"variant\")\n watchVariantHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.variant = this.variant;\n });\n }\n\n /**\n * Emitted when a toggle button is selected.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icToggleChecked\")\n selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n const allToggles = this.getAllToggleButtons();\n let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n\n if (tabTarget) tabTarget.focus(); // tabTarget used in proxySelectHandler\n\n if (this.selectType === \"single\") {\n if (!clickedToggle && tabTarget) {\n clickedToggle = tabTarget;\n }\n allToggles.forEach((el) => {\n if (el.id !== clickedToggle.id && el.checked) {\n el.checked = false;\n }\n });\n\n this.icChange.emit({\n checked: ev.detail.checked,\n selectedOption: clickedToggle,\n });\n } else {\n const toggledOptions = allToggles.filter(\n (el) => el.checked && !el.disabled\n );\n\n this.icChange.emit({\n checked: toggledOptions.map((opt) => opt.checked),\n toggledOptions: toggledOptions.map((opt) => ({\n toggleButton: opt,\n })),\n selectedOption: clickedToggle,\n });\n }\n }\n\n componentWillLoad(): void {\n if (this.selectType === \"multi\") this.selectMethod = \"manual\";\n if (this.selectMethod === \"auto\") this.selectType === \"single\";\n document.addEventListener(\"keydown\", this.keyListener);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.getAllToggleButtons().forEach((el, i) => {\n const btn = el.shadowRoot\n ?.querySelector(\"ic-button\")\n ?.shadowRoot?.querySelector(\"button\");\n if (btn) {\n const btnAriaLabel = btn.getAttribute(\"aria-label\");\n const aria = btnAriaLabel ? `${btnAriaLabel}, ` : \"\";\n btn.setAttribute(\"aria-label\", `${aria}${this.accessibleLabel}`);\n }\n\n el.id = i.toString();\n el.tabIndex = -1;\n el.addEventListener(\"keydown\", (ev) => {\n this.handleKeyDown(ev);\n });\n el.classList.add(\"expand-toggle-group-child\");\n });\n }\n\n disconnectedCallback(): void {\n document?.removeEventListener(\"keydown\", this.keyListener);\n }\n\n private keyListener = (ev: KeyboardEvent) => {\n this.lastKeyPressed = {\n key: ev.key,\n shift: ev.shiftKey,\n };\n };\n\n private handleHostFocus = ({ target, relatedTarget }: FocusEvent) => {\n if (this.loading || this.disabled) return;\n\n const el = target as HTMLIcToggleButtonGroupElement | null;\n const relEl = relatedTarget as HTMLIcToggleButtonElement | null;\n const toggleButtons = Array.from(\n el?.querySelectorAll(\"ic-toggle-button\") || []\n );\n const noToggleButtonsChecked = toggleButtons.every((el) => !el.checked);\n const { shift } = this.lastKeyPressed;\n if (\n ((noToggleButtonsChecked || this.selectType !== \"single\") && !shift) ||\n (noToggleButtonsChecked && shift && relEl?.tagName == TOGGLE_GROUP)\n ) {\n toggleButtons[0]?.focus();\n } else if (!shift || relEl?.tagName == TOGGLE_GROUP) {\n // if checked is true and selectMethod is \"single\", focus that toggle\n toggleButtons.filter((el) => el.checked)[0].focus();\n }\n };\n\n private handleKeyDown = ({ key }: KeyboardEvent) => {\n if (\n key !== \"ArrowDown\" &&\n key !== \"ArrowRight\" &&\n key !== \"ArrowLeft\" &&\n key !== \"ArrowUp\"\n )\n return;\n\n const toggleButtonOptions = this.getAllToggleButtons();\n const targetToggle =\n toggleButtonOptions[\n this.getNextItemToSelect(\n toggleButtonOptions.indexOf(\n toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n ),\n key === \"ArrowDown\" || key === \"ArrowRight\"\n )\n ];\n\n if (this.selectMethod === \"auto\") {\n // trigger selectHandler when unable to add 'target'\n targetToggle.checked = true;\n this.selectHandler(\n new CustomEvent(\"icToggleChecked\", {\n detail: {\n checked: targetToggle.checked,\n },\n }),\n targetToggle\n );\n } else {\n targetToggle.focus();\n }\n };\n\n private getNextItemToSelect = (currentItem: number, movingDown: boolean) => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const numToggles = toggleButtonOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = numToggles;\n } else if (nextItem > numToggles) {\n nextItem = 0;\n }\n\n if (toggleButtonOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private getAllToggleButtons = () =>\n Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n\n render() {\n const { accessibleLabel, disabled, fullWidth, loading, monochrome, theme } =\n this;\n\n return (\n <Host\n role=\"group\"\n aria-label={accessibleLabel}\n tabindex={0}\n class={{\n \"ic-toggle-button-group-disabled\": disabled,\n \"ic-toggle-button-group-full-width\": fullWidth,\n \"ic-toggle-button-group-loading\": loading,\n \"ic-toggle-button-group-monochrome\": monochrome,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onFocus={this.handleHostFocus}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
1
|
+
{"file":"ic-toggle-button-group.entry.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button-group/ic-toggle-button-group.css?tag=ic-toggle-button-group&encapsulation=shadow","src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* PARENT HOST */\n\n:root {\n display: block;\n}\n\n:host {\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: min-content;\n border: var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.ic-toggle-button-group-full-width) {\n width: 100%;\n max-width: 100%;\n}\n\n:host(.ic-toggle-button-group-loading) {\n min-width: max-content;\n}\n\n:host(:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n outline: none;\n}\n\n/* CHILDREN SLOTTED */\n\n::slotted(ic-toggle-button) {\n flex-grow: 1;\n width: min-content;\n\n --toggle-button-border: none !important;\n --toggle-button-border-hover: none !important;\n --toggle-button-border-active: none !important;\n}\n\n::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border);\n}\n\n/* DISABLED */\n:host(.ic-toggle-button-group-disabled) {\n border: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n pointer-events: none;\n}\n\n:host(.ic-toggle-button-group-disabled)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-space-1px) dashed\n var(--ic-toggle-button-unselected-border-disabled);\n}\n\n:host(.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) {\n border: var(--ic-border-width) dashed\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome)\n ::slotted(ic-toggle-button:not(:last-of-type)) {\n border-right: var(--ic-border-width) solid\n var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-hide-outline) {\n --ic-toggle-button-unselected-border: transparent;\n --ic-toggle-button-unselected-border-disabled: transparent;\n --ic-toggle-button-unselected-border-monochrome: transparent;\n --ic-toggle-button-unselected-border-disabled-monochrome: transparent;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcSizes,\n IcSelectTypes,\n IcSelectMethodTypes,\n IcThemeMode,\n IcButtonTooltipPlacement,\n IcIconPlacementOptions,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\nimport { removeDisabledFalse } from \"../../utils/helpers\";\n\ninterface lastKey {\n key: string | null;\n shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n tag: \"ic-toggle-button-group\",\n styleUrl: \"ic-toggle-button-group.css\",\n shadow: true,\n})\nexport class ToggleButtonGroup {\n @Element() el: HTMLIcToggleButtonGroupElement;\n\n @State() lastKeyPressed: lastKey = {\n key: null,\n shift: false,\n };\n\n /**\n * The accessible label of the toggle button group component to provide context for screen reader users.\n */\n @Prop() accessibleLabel = \"Toggle button group\";\n\n /**\n * If `true`, the toggle button group will be set to the disabled state.\n */\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.disabled = this.disabled;\n });\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * If `true`, the toggle button group will fill the width of the container.\n */\n @Prop() fullWidth = false;\n @Watch(\"fullWidth\")\n watchFullWidthHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.fullWidth = this.fullWidth;\n });\n }\n\n /**\n * The placement of the icons in relation to the toggle button labels.\n */\n @Prop() iconPlacement?: IcIconPlacementOptions;\n\n /**\n * If `true`, the toggle button group will be in loading state.\n */\n @Prop() loading = false;\n @Watch(\"loading\")\n watchLoadingHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.loading = this.loading;\n });\n }\n\n /**\n * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.\n */\n @Prop() monochrome = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.monochrome = this.monochrome;\n });\n }\n\n /**\n * If `true`, the toggle button group will display with an outline.\n */\n @Prop() outline = true;\n @Watch(\"outline\")\n watchOutlineHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.outline = this.outline;\n });\n }\n\n /**\n * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n */\n @Prop({ mutable: true }) selectMethod: IcSelectMethodTypes = \"manual\";\n\n /**\n * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n */\n @Prop() selectType: IcSelectTypes = \"single\";\n\n /**\n * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\n */\n @Prop() size: IcSizes = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.size = this.size;\n });\n }\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.theme = this.theme;\n });\n }\n\n /**\n * The position of the tooltip in relation to the toggle buttons.\n */\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n @Watch(\"tooltipPlacement\")\n watchTooltipPlacementHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.tooltipPlacement = this.tooltipPlacement;\n });\n }\n\n /**\n * The variant of the toggle button.\n */\n @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n @Watch(\"variant\")\n watchVariantHandler(): void {\n this.getAllToggleButtons().forEach((el) => {\n el.variant = this.variant;\n });\n }\n\n /**\n * Emitted when a toggle button is selected.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n @Listen(\"icToggleChecked\")\n selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n const allToggles = this.getAllToggleButtons();\n let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n\n if (tabTarget) tabTarget.focus(); // tabTarget used in proxySelectHandler\n\n if (this.selectType === \"single\") {\n if (!clickedToggle && tabTarget) {\n clickedToggle = tabTarget;\n }\n allToggles.forEach((el) => {\n if (el.id !== clickedToggle.id && el.checked) {\n el.checked = false;\n }\n });\n\n this.icChange.emit({\n checked: ev.detail.checked,\n selectedOption: clickedToggle,\n });\n } else {\n const toggledOptions = allToggles.filter(\n (el) => el.checked && !el.disabled\n );\n\n this.icChange.emit({\n checked: toggledOptions.map((opt) => opt.checked),\n toggledOptions: toggledOptions.map((opt) => ({\n toggleButton: opt,\n })),\n selectedOption: clickedToggle,\n });\n }\n }\n\n componentWillLoad(): void {\n if (this.selectType === \"multi\") this.selectMethod = \"manual\";\n if (this.selectMethod === \"auto\") this.selectType === \"single\";\n document.addEventListener(\"keydown\", this.keyListener);\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.getAllToggleButtons().forEach((el, i) => {\n const btn = el.shadowRoot\n ?.querySelector(\"ic-button\")\n ?.shadowRoot?.querySelector(\"button\");\n if (btn) {\n const btnAriaLabel = btn.getAttribute(\"aria-label\");\n const aria = btnAriaLabel ? `${btnAriaLabel}, ` : \"\";\n btn.setAttribute(\"aria-label\", `${aria}${this.accessibleLabel}`);\n }\n\n el.id = i.toString();\n el.tabIndex = -1;\n el.addEventListener(\"keydown\", (ev) => {\n this.handleKeyDown(ev);\n });\n el.classList.add(\"expand-toggle-group-child\");\n });\n }\n\n disconnectedCallback(): void {\n document?.removeEventListener(\"keydown\", this.keyListener);\n }\n\n private keyListener = (ev: KeyboardEvent) => {\n this.lastKeyPressed = {\n key: ev.key,\n shift: ev.shiftKey,\n };\n };\n\n private handleHostFocus = ({ target, relatedTarget }: FocusEvent) => {\n if (this.loading || this.disabled) return;\n\n const el = target as HTMLIcToggleButtonGroupElement | null;\n const relEl = relatedTarget as HTMLIcToggleButtonElement | null;\n const toggleButtons = Array.from(\n el?.querySelectorAll(\"ic-toggle-button\") || []\n );\n const noToggleButtonsChecked = toggleButtons.every((el) => !el.checked);\n const { shift } = this.lastKeyPressed;\n if (\n ((noToggleButtonsChecked || this.selectType !== \"single\") && !shift) ||\n (noToggleButtonsChecked && shift && relEl?.tagName == TOGGLE_GROUP)\n ) {\n toggleButtons[0]?.focus();\n } else if (!shift || relEl?.tagName == TOGGLE_GROUP) {\n // if checked is true and selectMethod is \"single\", focus that toggle\n toggleButtons.filter((el) => el.checked)[0].focus();\n }\n };\n\n private handleKeyDown = ({ key }: KeyboardEvent) => {\n if (\n key !== \"ArrowDown\" &&\n key !== \"ArrowRight\" &&\n key !== \"ArrowLeft\" &&\n key !== \"ArrowUp\"\n )\n return;\n\n const toggleButtonOptions = this.getAllToggleButtons();\n const targetToggle =\n toggleButtonOptions[\n this.getNextItemToSelect(\n toggleButtonOptions.indexOf(\n toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n ),\n key === \"ArrowDown\" || key === \"ArrowRight\"\n )\n ];\n\n if (this.selectMethod === \"auto\") {\n // trigger selectHandler when unable to add 'target'\n targetToggle.checked = true;\n this.selectHandler(\n new CustomEvent(\"icToggleChecked\", {\n detail: {\n checked: targetToggle.checked,\n },\n }),\n targetToggle\n );\n } else {\n targetToggle.focus();\n }\n };\n\n private getNextItemToSelect = (currentItem: number, movingDown: boolean) => {\n const toggleButtonOptions = this.getAllToggleButtons();\n const numToggles = toggleButtonOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = numToggles;\n } else if (nextItem > numToggles) {\n nextItem = 0;\n }\n\n if (toggleButtonOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private getAllToggleButtons = () =>\n Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n\n render() {\n const {\n accessibleLabel,\n disabled,\n fullWidth,\n loading,\n monochrome,\n outline,\n theme,\n } = this;\n\n return (\n <Host\n role=\"group\"\n aria-label={accessibleLabel}\n tabindex={0}\n class={{\n \"ic-toggle-button-group-disabled\": disabled,\n \"ic-toggle-button-group-full-width\": fullWidth,\n \"ic-toggle-button-group-loading\": loading,\n \"ic-toggle-button-group-monochrome\": monochrome,\n \"ic-toggle-button-group-hide-outline\": !outline,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onFocus={this.handleHostFocus}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|