npm - @ukic/web-components - Versions diffs - 3.10.0 → 3.12.0 - Mend

@ukic/web-components 3.10.0 → 3.12.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.

Files changed (676) hide show

package/dist/core/{p-493eaabb.entry.js.map → p-80e0f66e.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["icNavigationItemCss","IcNavigationItemStyle0","NavigationItem","constructor","hostRef","this","isInitialRender","hostMutationObserver","ANIMATION_DURATION","parseInt","getCssProperty","ARIA_LABEL_STRING","isInSideNav","deviceSize","DEVICE_SIZES","XL","focusStyle","getBrandForegroundAppearance","inTopNavSideMenu","isSideNavMobile","isTopNavChild","sideNavExpanded","ariaLabel","collapsedIconLabel","displayNavigationTooltip","download","expandable","href","selected","theme","displayDefaultNavigationItem","label","hreflang","target","rel","referrerpolicy","variant","ChevronIconComponent","h","class","svg","innerHTML","chevronIcon","slottedBadgeEl","el","querySelector","BadgeComponent","name","IconComponent","referrerPolicy","ref","itemEl","part","OpenInNew","tabindex","topNavResizedHandler","detail","size","_a","parentEl","customMobileBreakpoint","L","sideNavExpandHandler","sideNavMobile","sideNavToggleTooltip","handleBlur","relatedTarget","tagName","childBlur","emit","handleClick","navItemClicked","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","attribute","getAttribute","forceUpdate","generateTooltipLabel","navigationSlot","textContent","children","renderNavigationItemContent","showTooltip","tooltip","shadowRoot","collapsedClass","timer","displayTooltip","setTimeout","classList","add","clearTimeout","remove","navigationTypeChangeHandler","navigationType","disconnectedCallback","removeEventListener","_b","_c","disconnect","componentWillLoad","navType","parent","getNavItemParentDetails","getCurrentDeviceSize","contains","addEventListener","_d","_e","parentElement","_f","trim","hasAttribute","componentDidLoad","MutationObserver","observe","attributes","componentDidUpdate","brandChangeHandler","mode","setFocus","focus","render","isTopNavChildDesktop","Host","key","onBlur","onClick","role","placement"],"sources":["src/components/ic-navigation-item/ic-navigation-item.css?tag=ic-navigation-item&encapsulation=shadow","src/components/ic-navigation-item/ic-navigation-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-navigation-item: z-index of navigation item\n /\n\n:host {\n display: block;\n\n --navigation-link-colour: var(--ic-brand-text-color);\n}\n\n:host(:focus-within) {\n z-index: var(--ic-z-index-navigation-item);\n}\n\n/ chevron /\nsvg {\n width: var(--ic-space-xl);\n fill: var(--ic-brand-text-color);\n}\n\n.svg {\n margin-left: auto;\n}\n\n.chevron-container svg,\n.chevron-container .svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chevron-container {\n flex-grow: 1;\n}\n\n:host(.expandable.navigation-item) .link,\n:host(.expandable.navigation-item) ::slotted(a) {\n padding-right: 0;\n}\n\n:host(.navigation-item) .link,\n:host(.navigation-item) ::slotted(a) {\n height: calc(100% - var(--ic-space-xxs));\n width: fit-content;\n color: var(--navigation-link-colour);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n white-space: nowrap;\n}\n\n:host(.navigation-item) ::slotted(a) {\n height: 100%;\n font: var(--ic-font-label) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n content: \"\";\n height: 0.25rem;\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-top-navigation-theme);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-brand-hover);\n cursor: pointer;\n}\n\n:host(.navigation-item:not(.navigation-item-page-header, .navigation-item-side-menu, .navigation-item-top-nav-child))\n ::slotted(a:hover:not(:focus)),\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-brand-hover) !important;\n}\n\n:host(.navigation-item:not(.navigation-item-top-nav-child, .navigation-item-side-menu, .navigation-item-top-nav-child-selected\n .navigation-item-side-menu-selected))\n .focus-indicator:focus-within {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n outline-offset: calc(-1 (var(--ic-space-xxxs) + var(--ic-space-1px) / 2));\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n outline-offset: calc(-1 * (var(--ic-space-xxxs) + var(--ic-space-1px) / 2));\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-brand-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n min-height: 2.5rem;\n height: auto;\n width: 100%;\n box-sizing: border-box;\n color: var(--ic-top-navigation-nav-item);\n\n --ic-typography-color: var(--ic-top-navigation-nav-item);\n\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-decoration: none;\n text-wrap: wrap;\n white-space: normal;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(svg),\n:host(.navigation-item-side-menu) ::slotted(svg),\n:host(.navigation-item-page-header) ::slotted(svg) {\n fill: var(--ic-color-text-primary);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n background-color: var(--ic-top-navigation-nav-item-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-top-navigation-nav-item-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset) !important;\n width: auto;\n border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n transition: box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n margin-left: var(--ic-space-xs) !important;\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n height: 2.5rem;\n width: calc(100% - var(--ic-space-xl));\n min-width: 9.063rem;\n color: var(--ic-top-navigation-nav-item);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) !important;\n text-decoration: none;\n position: relative;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-top-navigation-nav-item-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n z-index: 1;\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius-inset);\n box-shadow: var(--ic-border-focus-inset);\n transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n background-color: var(--ic-top-navigation-nav-item-pressed);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active:not(:focus)) {\n outline: var(--ic-hc-focus-outline);\n background-color: var(--ic-top-navigation-nav-item-pressed);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active:not(:focus)),\n:host(.navigation-item-side-menu) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-top-navigation-nav-item-pressed) !important;\n}\n\n:host(.navigation-item-side-menu-selected) ,\n:host(.navigation-item-top-nav-child-selected) ,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: var(--ic-space-xs);\n height: inherit;\n min-height: 2.5rem;\n background-color: var(--ic-top-navigation-nav-item-banner);\n transition: left 0s;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before {\n margin-top: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus {\n margin-left: var(--ic-space-xs);\n margin-right: calc(-1 * var(--ic-space-xs));\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus::before {\n left: calc(-1 * var(--ic-space-xs));\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before {\n left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-side-menu-selected) .link::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .link {\n height: 100%;\n}\n\n:host(.navigation-item-side-nav-collapsed) ::slotted(svg),\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg) {\n margin: auto;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n align-items: center;\n padding: 0;\n margin: auto 0;\n width: fit-content;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) .link,\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a) {\n display: flex;\n flex-direction: column;\n height: fit-content;\n padding: var(--ic-space-xs) !important;\n gap: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n height: auto !important;\n gap: 0;\n width: auto;\n padding: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link\n ic-typography {\n opacity: 1;\n min-width: min-content;\n}\n\n:host(.navigation-item-side-nav-collapsed) svg,\n:host(.navigation-item-side-nav-collapsed-with-label) svg {\n display: none;\n}\n\n::slotted(svg) {\n fill: var(--ic-brand-text-color);\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n.icon {\n height: 1.5rem;\n width: var(--ic-space-xxl);\n margin-left: calc(-1 * var(--ic-space-md));\n flex: 0 1 0%;\n position: relative;\n}\n\n.icon > ::slotted() {\n margin-left: var(--ic-space-md) !important;\n margin-right: var(--ic-space-xs);\n}\n\n.inline-badge {\n margin-left: var(--ic-space-xs);\n}\n\n.badge {\n margin-left: 0;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon > ::slotted() {\n margin: auto !important;\n}\n\n:host(.navigation-item-side-nav) .icon > ::slotted() {\n margin-right: 0;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n height: var(--navigation-item-height, 4rem);\n min-height: var(--navigation-item-min-height);\n width: var(--navigation-item-width, auto);\n justify-content: var(--navigation-item-justify-content);\n display: flex;\n gap: var(--ic-space-xs);\n box-sizing: border-box;\n color: var(--navigation-item-child-color) !important;\n text-decoration: none !important;\n white-space: nowrap;\n padding: 0 var(--ic-space-md);\n text-wrap: wrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a) {\n height: var(--navigation-item-child-height);\n width: var(--navigation-group-width);\n color: var(--navigation-item-child-color) !important;\n display: flex;\n gap: 0.625rem;\n box-sizing: border-box;\n min-width: 0;\n transition: box-shadow var(--ic-easing-transition-fast);\n text-decoration: none !important;\n white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:active) {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav) a.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n a.link\n ic-typography,\n:host(.navigation-item-side-nav) div.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n div.link\n ic-typography,\n.navigation-item-side-nav-slotted-text {\n opacity: var(--navigation-item-label-opacity);\n transition: opacity var(--ic-easing-transition-slow);\n white-space: wrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {\n box-shadow: inset 0.313rem 0 0 var(--ic-brand-text-color);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0 0 0 0.313rem;\n border-radius: 0.688rem !important;\n transition: var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before {\n box-shadow: var(--ic-border-focus-inset);\n}\n\n:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link {\n opacity: var(--navigation-item-label-opacity);\n height: auto;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n min-width: var(--navigation-group-item-min-width);\n padding: var(--ic-space-xs) !important;\n height: auto;\n gap: 0;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n margin: 0 auto;\n box-shadow: inset 0.313rem 0 0 var(--ic-brand-text-color);\n border-radius: 0;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n height: 2.5rem !important;\n color: var(--ic-color-text-primary) !important;\n transition: all var(--ic-easing-transition-fast) !important;\n box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link::after,\n:host(.navigation-item-page-header) ::slotted(a.active)::after {\n content: \" \" !important;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ic-space-xxs);\n background-color: var(--ic-action-default) !important;\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n background-color: var(--ic-action-default-bg-hover) !important;\n cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n background-color: var(--ic-action-default-bg-pressed) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::after {\n border-bottom-left-radius: var(--ic-border-radius);\n border-bottom-right-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n ::slotted(a.active) {\n transition: all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n .link:focus::before {\n display: none;\n}\n\n.open-in-new-icon {\n flex: 1;\n}\n\n.open-in-new-icon svg {\n margin-top: var(--ic-space-xxs);\n padding-left: var(--ic-space-xs);\n}\n\n:host(.navigation-item-side-nav) .open-in-new-icon {\n margin-left: calc(-1 var(--ic-space-xs));\n}\n\n:host(.navigation-item-top-nav) .open-in-new-icon svg,\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-side-nav) .open-in-new-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n:host(.navigation-item-side-menu) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg,\n:host(.navigation-item-side-menu) .open-in-new-icon svg {\n fill: var(--ic-color-text-primary);\n}\n\n@media (forced-colors: active) {\n .open-in-new-icon svg {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n forceUpdate,\n Listen,\n Method,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCssProperty,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport {\n IcNavType,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundNoDefault,\n IcThemeMode,\n} from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { IcExpandedDetail } from \"../ic-side-navigation/ic-side-navigation.types\";\n\n/*\n @part link - The `<a>` within ic-navigation-item\n * @slot badge - Badge component overlaying the top right of the icon.\n * @slot icon - Content will be displayed to the left of the label for expanded navigation items, and in replacement of the label for collapsed navigation items.\n /\n\n@Component({\n tag: \"ic-navigation-item\",\n styleUrl: \"ic-navigation-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationItem {\n private navigationSlot: HTMLElement \| null;\n private isInitialRender = true;\n private itemEl?: HTMLElement;\n private hostMutationObserver: MutationObserver \| null = null;\n private ANIMATION_DURATION =\n parseInt(getCssProperty(\"--ic-transition-duration-slow\")) \|\| 0;\n private ARIA_LABEL_STRING = \"aria-label\";\n private isInSideNav = false;\n\n @Element() el: HTMLIcNavigationItemElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() focusStyle: IcBrandForegroundNoDefault \| IcBrandForeground =\n getBrandForegroundAppearance();\n @State() inTopNavSideMenu = false;\n @State() isSideNavMobile = false;\n @State() isTopNavChild = false;\n\n @State() navigationType: IcNavType \| \"\";\n @Watch(\"navigationType\")\n navigationTypeChangeHandler(): void {\n this.isInSideNav = this.navigationType === \"side\";\n }\n\n @State() parentEl: HTMLElement \| null;\n @State() sideNavExpanded = false;\n @State() ariaLabel = \"\";\n\n /\n @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n /\n @Prop() collapsedIconLabel = false;\n\n /\n @internal If `true`, the navigation item will be displayed within a tooltip.\n /\n @Prop() displayNavigationTooltip = false;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download: string \| boolean = false;\n\n /\n @internal If `true`, the navigation item will be expandable.\n /\n @Prop() expandable = false;\n\n /\n The destination of the navigation item.\n /\n @Prop() href = \"\";\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n The label of the navigation item.\n /\n @Prop() label?: string;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n If `true`, the navigation item will be set in a selected state.\n /\n @Prop() selected = false;\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n\n /\n 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\n /\n @internal - Emitted when item loses focus.\n /\n @Event() childBlur: EventEmitter<void>;\n\n /\n @internal - Emitted when navigation item clicked.\n /\n @Event() navItemClicked: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.isInSideNav) {\n this.parentEl?.removeEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.removeEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n }\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n const { navType, parent } = getNavItemParentDetails(this.el);\n this.navigationType = navType;\n this.isInSideNav = this.navigationType === \"side\";\n this.parentEl = parent;\n this.deviceSize = getCurrentDeviceSize();\n\n this.sideNavExpanded =\n this.parentEl?.classList.contains(\"sm-expanded\") \|\|\n this.parentEl?.classList.contains(\"xs-menu-open\") \|\|\n false;\n\n if (this.isInSideNav) {\n this.parentEl?.addEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.addEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n if (this.el.parentElement?.tagName === \"IC-NAVIGATION-GROUP\")\n this.isTopNavChild = true;\n if (\n this.deviceSize <=\n (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint\n )\n this.inTopNavSideMenu = true;\n }\n\n this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n if (this.navigationSlot) {\n this.navigationSlot.ariaLabel =\n this.navigationSlot.textContent?.trim() \|\| null;\n }\n\n if (this.el.hasAttribute(this.ARIA_LABEL_STRING)) {\n this.ariaLabel = this.el.getAttribute(this.ARIA_LABEL_STRING) \|\| \"\";\n }\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.focusStyle = detail.mode;\n }\n\n /\n Sets focus on the nav item.\n /\n @Method()\n async setFocus(): Promise<void> {\n this.itemEl ? this.itemEl.focus() : this.el.querySelector(\"a\")?.focus();\n }\n\n private displayDefaultNavigationItem = (\n href: string,\n label: string,\n hreflang?: string,\n target?: string,\n rel?: string,\n referrerpolicy?: ReferrerPolicy,\n download?: string \| boolean\n ) => {\n const variant =\n this.isTopNavChild \|\| this.inTopNavSideMenu ? \"body\" : \"label\";\n const ChevronIconComponent = this.expandable && (\n <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n );\n const slottedBadgeEl = this.el.querySelector('[slot=\"badge\"]');\n const BadgeComponent = slottedBadgeEl && (\n <div class=\"inline-badge\">\n <slot name=\"badge\"></slot>\n </div>\n );\n const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n <div class=\"icon\">\n <slot name=\"icon\"></slot>\n {this.isInSideNav && BadgeComponent}\n </div>\n );\n\n return href !== \"\" ? (\n <a\n href={href}\n target={target}\n rel={rel}\n hreflang={hreflang}\n referrerPolicy={referrerpolicy}\n download={download !== false ? download : null}\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n part=\"link\"\n aria-label={this.ariaLabel ? this.ariaLabel : null}\n >\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n {BadgeComponent}\n <div class=\"chevron-container\">{ChevronIconComponent}</div>\n </a>\n ) : (\n <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n {BadgeComponent}\n </div>\n );\n };\n\n private topNavResizedHandler = ({\n detail,\n }: CustomEvent<{ size: number }>) => {\n const { size } = detail;\n if (size !== this.deviceSize) {\n this.deviceSize = size;\n this.inTopNavSideMenu =\n size <=\n ((this.parentEl as HTMLIcTopNavigationElement)\n ?.customMobileBreakpoint \|\| DEVICE_SIZES.L);\n }\n };\n\n private sideNavExpandHandler = ({\n detail,\n }: CustomEvent<IcExpandedDetail>) => {\n const { sideNavExpanded, sideNavMobile } = detail;\n this.sideNavExpanded = sideNavExpanded;\n this.isSideNavMobile = sideNavMobile;\n this.sideNavToggleTooltip(!sideNavExpanded && !sideNavMobile);\n };\n\n private handleBlur = ({ relatedTarget }: FocusEvent) => {\n if (\n relatedTarget === null \|\|\n (relatedTarget as HTMLElement).tagName !== \"IC-NAVIGATION-ITEM\"\n ) {\n this.childBlur.emit();\n }\n };\n\n private handleClick = () => this.navItemClicked.emit();\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]) => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (attributeName) {\n const attribute = this.el.getAttribute(attributeName);\n if (attribute && attributeName === this.ARIA_LABEL_STRING) {\n this.ariaLabel = attribute;\n forceComponentUpdate = true;\n }\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private generateTooltipLabel = () => {\n if (this.label) {\n return this.label;\n }\n\n if (this.navigationSlot) {\n return this.navigationSlot.textContent \|\| \"\";\n }\n\n return this.el.children[0]?.textContent \|\| \"\";\n };\n\n private renderNavigationItemContent = () => {\n if (!this.label && !this.navigationSlot) return <slot></slot>;\n\n return this.label ? (\n this.displayDefaultNavigationItem(\n this.href,\n this.label,\n this.hreflang,\n this.target,\n this.rel,\n this.referrerpolicy,\n this.download\n )\n ) : (\n <slot name=\"navigation-item\"></slot>\n );\n };\n\n // Displays tooltip only once the collapsing animation is finished\n private sideNavToggleTooltip = (showTooltip: boolean) => {\n const tooltip = this.el.shadowRoot?.querySelector(\"ic-tooltip\");\n const collapsedClass = \"tooltip-navigation-item-side-nav-collapsed\";\n let timer;\n\n if (!tooltip) return;\n\n if (showTooltip) {\n tooltip.displayTooltip(false); // Hides tooltip for when mouse is hovering over icon\n timer = setTimeout(() => {\n tooltip.classList.add(collapsedClass);\n }, this.ANIMATION_DURATION);\n } else {\n clearTimeout(timer);\n tooltip.classList.remove(collapsedClass);\n }\n };\n\n render() {\n const {\n inTopNavSideMenu,\n isTopNavChild,\n selected,\n navigationType,\n focusStyle,\n isInitialRender,\n sideNavExpanded,\n displayNavigationTooltip,\n collapsedIconLabel,\n isSideNavMobile,\n expandable,\n isInSideNav,\n theme,\n } = this;\n\n const isTopNavChildDesktop = isTopNavChild && !inTopNavSideMenu;\n\n return (\n <Host\n class={{\n \"navigation-item\": true,\n \"navigation-item-selected\": !isTopNavChild && selected,\n \"navigation-item-top-nav\":\n !inTopNavSideMenu && navigationType === \"top\",\n \"navigation-item-top-nav-child\": isTopNavChildDesktop,\n \"navigation-item-top-nav-child-selected\":\n isTopNavChildDesktop && selected,\n \"navigation-item-side-menu\": inTopNavSideMenu,\n \"navigation-item-side-menu-selected\": inTopNavSideMenu && selected,\n \"navigation-item-page-header\": navigationType === \"page-header\",\n \"navigation-item-side-nav\": isInSideNav,\n \"navigation-item-side-nav-collapsed\":\n (!sideNavExpanded \|\| displayNavigationTooltip) && isInSideNav,\n \"navigation-item-side-nav-collapsed-with-label\":\n !sideNavExpanded &&\n isInSideNav &&\n collapsedIconLabel &&\n !isSideNavMobile,\n \"with-transition\": !isInitialRender,\n expandable,\n [focusStyle]: isTopNavChild ? isInSideNav : !inTopNavSideMenu,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onBlur={isTopNavChildDesktop ? this.handleBlur : null}\n onClick={this.handleClick}\n aria-current={selected ? \"page\" : null}\n role=\"listitem\"\n >\n {/ Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n <ic-tooltip\n label={this.generateTooltipLabel()}\n target=\"navigation-item\"\n placement=\"right\"\n class={{\n \"tooltip-navigation-item\": true,\n \"tooltip-navigation-item-side-nav-collapsed\":\n displayNavigationTooltip && isInSideNav,\n \"tooltip-long-label-navigation-item-side-nav-expanded\":\n this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n }}\n >\n {this.renderNavigationItemContent()}\n </ic-tooltip>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["icNavigationItemCss","IcNavigationItemStyle0","NavigationItem","constructor","hostRef","this","isInitialRender","hostMutationObserver","ANIMATION_DURATION","parseInt","getCssProperty","ARIA_LABEL_STRING","isInSideNav","deviceSize","DEVICE_SIZES","XL","focusStyle","getBrandForegroundAppearance","inTopNavSideMenu","isSideNavMobile","isTopNavChild","sideNavExpanded","ariaLabel","collapsedIconLabel","displayNavigationTooltip","download","expandable","href","selected","theme","displayDefaultNavigationItem","label","hreflang","target","rel","referrerpolicy","variant","ChevronIconComponent","h","class","svg","innerHTML","chevronIcon","slottedBadgeEl","el","querySelector","BadgeComponent","name","IconComponent","referrerPolicy","ref","itemEl","part","OpenInNew","tabindex","topNavResizedHandler","detail","size","_a","parentEl","customMobileBreakpoint","L","sideNavExpandHandler","sideNavMobile","sideNavToggleTooltip","handleBlur","relatedTarget","tagName","childBlur","emit","handleClick","navItemClicked","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","attribute","getAttribute","forceUpdate","generateTooltipLabel","navigationSlot","textContent","children","renderNavigationItemContent","showTooltip","tooltip","shadowRoot","collapsedClass","timer","displayTooltip","setTimeout","classList","add","clearTimeout","remove","navigationTypeChangeHandler","navigationType","disconnectedCallback","removeEventListener","_b","_c","disconnect","componentWillLoad","navType","parent","getNavItemParentDetails","getCurrentDeviceSize","contains","addEventListener","_d","_e","parentElement","_f","trim","hasAttribute","componentDidLoad","MutationObserver","observe","attributes","componentDidUpdate","brandChangeHandler","mode","setFocus","focus","render","isTopNavChildDesktop","Host","key","onBlur","onClick","role","placement"],"sources":["src/components/ic-navigation-item/ic-navigation-item.css?tag=ic-navigation-item&encapsulation=shadow","src/components/ic-navigation-item/ic-navigation-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-navigation-item: z-index of navigation item\n /\n\n:host {\n display: block;\n\n --navigation-link-colour: var(--ic-brand-text-color);\n}\n\n:host(:focus-within) {\n z-index: var(--ic-z-index-navigation-item);\n}\n\n/ chevron /\nsvg {\n width: var(--ic-space-xl);\n fill: var(--ic-brand-text-color);\n}\n\n.svg {\n margin-left: auto;\n}\n\n.chevron-container svg,\n.chevron-container .svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chevron-container {\n flex-grow: 1;\n}\n\n:host(.expandable.navigation-item) .link,\n:host(.expandable.navigation-item) ::slotted(a) {\n padding-right: 0;\n}\n\n:host(.navigation-item) .link,\n:host(.navigation-item) ::slotted(a) {\n height: calc(100% - var(--ic-space-xxs));\n width: fit-content;\n color: var(--navigation-link-colour);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n white-space: nowrap;\n}\n\n:host(.navigation-item) ::slotted(a) {\n height: 100%;\n font: var(--ic-font-label) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n content: \"\";\n height: 0.25rem;\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-top-navigation-theme);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-brand-hover);\n cursor: pointer;\n}\n\n:host(.navigation-item:not(.navigation-item-page-header, .navigation-item-side-menu, .navigation-item-top-nav-child))\n ::slotted(a:hover:not(:focus)),\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-brand-hover) !important;\n}\n\n:host(.navigation-item:not(.navigation-item-top-nav-child, .navigation-item-side-menu, .navigation-item-top-nav-child-selected\n .navigation-item-side-menu-selected))\n .focus-indicator:focus-within {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n outline-offset: calc(-1 (var(--ic-space-xxxs) + var(--ic-space-1px) / 2));\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n outline-offset: calc(-1 * (var(--ic-space-xxxs) + var(--ic-space-1px) / 2));\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-brand-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n min-height: 2.5rem;\n height: auto;\n width: 100%;\n box-sizing: border-box;\n color: var(--ic-top-navigation-nav-item);\n\n --ic-typography-color: var(--ic-top-navigation-nav-item);\n\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-decoration: none;\n text-wrap: wrap;\n white-space: normal;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(svg),\n:host(.navigation-item-side-menu) ::slotted(svg),\n:host(.navigation-item-page-header) ::slotted(svg) {\n fill: var(--ic-color-text-primary);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n background-color: var(--ic-top-navigation-nav-item-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-top-navigation-nav-item-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset) !important;\n width: auto;\n border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n transition: box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n margin-left: var(--ic-space-xs) !important;\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n height: 2.5rem;\n width: calc(100% - var(--ic-space-xl));\n min-width: 9.063rem;\n color: var(--ic-top-navigation-nav-item);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) !important;\n text-decoration: none;\n position: relative;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-top-navigation-nav-item-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n z-index: 1;\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius-inset);\n box-shadow: var(--ic-border-focus-inset);\n transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n background-color: var(--ic-top-navigation-nav-item-pressed);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active:not(:focus)) {\n outline: var(--ic-hc-focus-outline);\n background-color: var(--ic-top-navigation-nav-item-pressed);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active:not(:focus)),\n:host(.navigation-item-side-menu) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-top-navigation-nav-item-pressed) !important;\n}\n\n:host(.navigation-item-side-menu-selected) ,\n:host(.navigation-item-top-nav-child-selected) ,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: var(--ic-space-xs);\n height: inherit;\n min-height: 2.5rem;\n background-color: var(--ic-top-navigation-nav-item-banner);\n transition: left 0s;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before {\n margin-top: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus {\n margin-left: var(--ic-space-xs);\n margin-right: calc(-1 * var(--ic-space-xs));\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child-selected) .link:focus::before {\n left: calc(-1 * var(--ic-space-xs));\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n z-index: 1;\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before,\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus)::before {\n left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-side-menu-selected) .link::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .link {\n height: 100%;\n}\n\n:host(.navigation-item-side-nav-collapsed) ::slotted(svg),\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(svg) {\n margin: auto;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) .icon,\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n align-items: center;\n padding: 0;\n margin: auto 0;\n width: fit-content;\n pointer-events: none;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) ic-typography {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav-collapsed-with-label) .link,\n:host(.navigation-item-side-nav-collapsed-with-label) ::slotted(a) {\n display: flex;\n flex-direction: column;\n height: fit-content;\n padding: var(--ic-space-xs) !important;\n gap: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n height: auto !important;\n gap: 0;\n width: auto;\n padding: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n text-align: center;\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link\n ic-typography {\n opacity: 1;\n min-width: min-content;\n}\n\n:host(.navigation-item-side-nav-collapsed) svg,\n:host(.navigation-item-side-nav-collapsed-with-label) svg {\n display: none;\n}\n\n::slotted(svg) {\n fill: var(--ic-brand-text-color);\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n.icon {\n height: 1.5rem;\n width: var(--ic-space-xxl);\n margin-left: calc(-1 * var(--ic-space-md));\n flex: 0 1 0%;\n position: relative;\n}\n\n.icon > ::slotted() {\n margin-left: var(--ic-space-md) !important;\n margin-right: var(--ic-space-xs);\n}\n\n.inline-badge {\n margin-left: var(--ic-space-xs);\n}\n\n.badge {\n margin-left: 0;\n}\n\n:host(.navigation-item-side-nav-collapsed) .icon > ::slotted() {\n margin: auto !important;\n}\n\n:host(.navigation-item-side-nav) .icon > ::slotted() {\n margin-right: 0;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n height: var(--navigation-item-height, 4rem);\n min-height: var(--navigation-item-min-height);\n width: var(--navigation-item-width, auto);\n justify-content: var(--navigation-item-justify-content);\n display: flex;\n gap: var(--ic-space-xs);\n box-sizing: border-box;\n color: var(--navigation-item-child-color) !important;\n text-decoration: none !important;\n white-space: nowrap;\n padding: 0 var(--ic-space-md);\n text-wrap: wrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) ::slotted(a) {\n height: var(--navigation-item-child-height);\n width: var(--navigation-group-width);\n color: var(--navigation-item-child-color) !important;\n display: flex;\n gap: 0.625rem;\n box-sizing: border-box;\n min-width: 0;\n transition: box-shadow var(--ic-easing-transition-fast);\n text-decoration: none !important;\n white-space: nowrap;\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.navigation-item-side-nav.navigation-item-side-menu) .link:active {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav.navigation-item-top-nav-child) .link:active,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n ::slotted(a:active) {\n background-color: var(--navigation-item-child-active);\n}\n\n:host(.navigation-item-side-nav) a.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n a.link\n ic-typography,\n:host(.navigation-item-side-nav) div.link ic-typography,\n:host(.navigation-item-side-nav.navigation-item-top-nav-child)\n div.link\n ic-typography,\n.navigation-item-side-nav-slotted-text {\n opacity: var(--navigation-item-label-opacity);\n transition: opacity var(--ic-easing-transition-slow);\n white-space: wrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a.active) {\n box-shadow: inset 0.313rem 0 0 var(--ic-brand-text-color);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0 0 0 0.313rem;\n border-radius: 0.688rem !important;\n transition: var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus::before,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus)::before {\n box-shadow: var(--ic-border-focus-inset);\n}\n\n:host(:not(.navigation-item-side-nav-collapsed).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label)\n .link {\n opacity: var(--navigation-item-label-opacity);\n height: auto;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n .link,\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n min-width: var(--navigation-group-item-min-width);\n padding: var(--ic-space-xs) !important;\n height: auto;\n gap: 0;\n}\n\n:host(.navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label)\n ::slotted(a) {\n display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n margin: 0 auto;\n box-shadow: inset 0.313rem 0 0 var(--ic-brand-text-color);\n border-radius: 0;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n height: 2.5rem !important;\n color: var(--ic-color-text-primary) !important;\n transition: all var(--ic-easing-transition-fast) !important;\n box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link::after,\n:host(.navigation-item-page-header) ::slotted(a.active)::after {\n content: \" \" !important;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ic-space-xxs);\n background-color: var(--ic-action-default) !important;\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n background-color: var(--ic-action-default-bg-hover) !important;\n cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n background-color: var(--ic-action-default-bg-pressed) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::after {\n border-bottom-left-radius: var(--ic-border-radius);\n border-bottom-right-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n ::slotted(a.active) {\n transition: all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n .link:focus::before {\n display: none;\n}\n\n.open-in-new-icon {\n flex: 1;\n}\n\n.open-in-new-icon svg {\n margin-top: var(--ic-space-xxs);\n padding-left: var(--ic-space-xs);\n}\n\n:host(.navigation-item-side-nav) .open-in-new-icon {\n margin-left: calc(-1 var(--ic-space-xs));\n}\n\n:host(.navigation-item-top-nav) .open-in-new-icon svg,\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-side-nav) .open-in-new-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n:host(.navigation-item-side-menu) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg,\n:host(.navigation-item-side-menu) .open-in-new-icon svg {\n fill: var(--ic-color-text-primary);\n}\n\n@media (forced-colors: active) {\n .open-in-new-icon svg {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n forceUpdate,\n Listen,\n Method,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCssProperty,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getNavItemParentDetails,\n} from \"../../utils/helpers\";\nimport {\n IcNavType,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundNoDefault,\n IcThemeMode,\n} from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { IcExpandedDetail } from \"../ic-side-navigation/ic-side-navigation.types\";\n\n/*\n @part link - The `<a>` within ic-navigation-item\n * @slot badge - Badge component overlaying the top right of the icon.\n * @slot icon - Content will be displayed to the left of the label for expanded navigation items, and in replacement of the label for collapsed navigation items.\n /\n\n@Component({\n tag: \"ic-navigation-item\",\n styleUrl: \"ic-navigation-item.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationItem {\n private navigationSlot: HTMLElement \| null;\n private isInitialRender = true;\n private itemEl?: HTMLElement;\n private hostMutationObserver: MutationObserver \| null = null;\n private ANIMATION_DURATION =\n parseInt(getCssProperty(\"--ic-transition-duration-slow\")) \|\| 0;\n private ARIA_LABEL_STRING = \"aria-label\";\n private isInSideNav = false;\n\n @Element() el: HTMLIcNavigationItemElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() focusStyle: IcBrandForegroundNoDefault \| IcBrandForeground =\n getBrandForegroundAppearance();\n @State() inTopNavSideMenu = false;\n @State() isSideNavMobile = false;\n @State() isTopNavChild = false;\n\n @State() navigationType: IcNavType \| \"\";\n @Watch(\"navigationType\")\n navigationTypeChangeHandler(): void {\n this.isInSideNav = this.navigationType === \"side\";\n }\n\n @State() parentEl: HTMLElement \| null;\n @State() sideNavExpanded = false;\n @State() ariaLabel = \"\";\n\n /\n @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n /\n @Prop() collapsedIconLabel = false;\n\n /\n @internal If `true`, the navigation item will be displayed within a tooltip.\n /\n @Prop() displayNavigationTooltip = false;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download: string \| boolean = false;\n\n /\n @internal If `true`, the navigation item will be expandable.\n /\n @Prop() expandable = false;\n\n /\n The destination of the navigation item.\n /\n @Prop() href = \"\";\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n The label of the navigation item.\n /\n @Prop() label?: string;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n If `true`, the navigation item will be set in a selected state.\n /\n @Prop() selected = false;\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n\n /\n 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\n /\n @internal - Emitted when item loses focus.\n /\n @Event() childBlur: EventEmitter<void>;\n\n /\n @internal - Emitted when navigation item clicked.\n /\n @Event() navItemClicked: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.isInSideNav) {\n this.parentEl?.removeEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.removeEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n }\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n const { navType, parent } = getNavItemParentDetails(this.el);\n this.navigationType = navType;\n this.isInSideNav = this.navigationType === \"side\";\n this.parentEl = parent;\n this.deviceSize = getCurrentDeviceSize();\n\n this.sideNavExpanded =\n this.parentEl?.classList.contains(\"sm-expanded\") \|\|\n this.parentEl?.classList.contains(\"xs-menu-open\") \|\|\n false;\n\n if (this.isInSideNav) {\n this.parentEl?.addEventListener(\n \"icSideNavExpanded\",\n this.sideNavExpandHandler as EventListener\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl?.addEventListener(\n \"icTopNavResized\",\n this.topNavResizedHandler as EventListener\n );\n if (this.el.parentElement?.tagName === \"IC-NAVIGATION-GROUP\")\n this.isTopNavChild = true;\n if (\n this.deviceSize <=\n (this.parentEl as HTMLIcTopNavigationElement).customMobileBreakpoint\n )\n this.inTopNavSideMenu = true;\n }\n\n this.navigationSlot = this.el.querySelector('[slot=\"navigation-item\"]');\n if (this.navigationSlot) {\n this.navigationSlot.ariaLabel =\n this.navigationSlot.textContent?.trim() \|\| null;\n }\n\n if (this.el.hasAttribute(this.ARIA_LABEL_STRING)) {\n this.ariaLabel = this.el.getAttribute(this.ARIA_LABEL_STRING) \|\| \"\";\n }\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.focusStyle = detail.mode;\n }\n\n /\n Sets focus on the nav item.\n /\n @Method()\n async setFocus(): Promise<void> {\n this.itemEl ? this.itemEl.focus() : this.el.querySelector(\"a\")?.focus();\n }\n\n private displayDefaultNavigationItem = (\n href: string,\n label: string,\n hreflang?: string,\n target?: string,\n rel?: string,\n referrerpolicy?: ReferrerPolicy,\n download?: string \| boolean\n ) => {\n const variant =\n this.isTopNavChild \|\| this.inTopNavSideMenu ? \"body\" : \"label\";\n const ChevronIconComponent = this.expandable && (\n <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n );\n const slottedBadgeEl = this.el.querySelector('[slot=\"badge\"]');\n const BadgeComponent = slottedBadgeEl && (\n <div class=\"inline-badge\">\n <slot name=\"badge\"></slot>\n </div>\n );\n const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n <div class=\"icon\">\n <slot name=\"icon\"></slot>\n {this.isInSideNav && BadgeComponent}\n </div>\n );\n\n return href !== \"\" ? (\n <a\n href={href}\n target={target}\n rel={rel}\n hreflang={hreflang}\n referrerPolicy={referrerpolicy}\n download={download !== false ? download : null}\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n part=\"link\"\n aria-label={this.ariaLabel ? this.ariaLabel : null}\n >\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n {BadgeComponent}\n <div class=\"chevron-container\">{ChevronIconComponent}</div>\n </a>\n ) : (\n <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n {BadgeComponent}\n </div>\n );\n };\n\n private topNavResizedHandler = ({\n detail,\n }: CustomEvent<{ size: number }>) => {\n const { size } = detail;\n if (size !== this.deviceSize) {\n this.deviceSize = size;\n this.inTopNavSideMenu =\n size <=\n ((this.parentEl as HTMLIcTopNavigationElement)\n ?.customMobileBreakpoint \|\| DEVICE_SIZES.L);\n }\n };\n\n private sideNavExpandHandler = ({\n detail,\n }: CustomEvent<IcExpandedDetail>) => {\n const { sideNavExpanded, sideNavMobile } = detail;\n this.sideNavExpanded = sideNavExpanded;\n this.isSideNavMobile = sideNavMobile;\n this.sideNavToggleTooltip(!sideNavExpanded && !sideNavMobile);\n };\n\n private handleBlur = ({ relatedTarget }: FocusEvent) => {\n if (\n relatedTarget === null \|\|\n (relatedTarget as HTMLElement).tagName !== \"IC-NAVIGATION-ITEM\"\n ) {\n this.childBlur.emit();\n }\n };\n\n private handleClick = () => this.navItemClicked.emit();\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]) => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (attributeName) {\n const attribute = this.el.getAttribute(attributeName);\n if (attribute && attributeName === this.ARIA_LABEL_STRING) {\n this.ariaLabel = attribute;\n forceComponentUpdate = true;\n }\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private generateTooltipLabel = () => {\n if (this.label) {\n return this.label;\n }\n\n if (this.navigationSlot) {\n return this.navigationSlot.textContent \|\| \"\";\n }\n\n return this.el.children[0]?.textContent \|\| \"\";\n };\n\n private renderNavigationItemContent = () => {\n if (!this.label && !this.navigationSlot) return <slot></slot>;\n\n return this.label ? (\n this.displayDefaultNavigationItem(\n this.href,\n this.label,\n this.hreflang,\n this.target,\n this.rel,\n this.referrerpolicy,\n this.download\n )\n ) : (\n <slot name=\"navigation-item\"></slot>\n );\n };\n\n // Displays tooltip only once the collapsing animation is finished\n private sideNavToggleTooltip = (showTooltip: boolean) => {\n const tooltip = this.el.shadowRoot?.querySelector(\"ic-tooltip\");\n const collapsedClass = \"tooltip-navigation-item-side-nav-collapsed\";\n let timer;\n\n if (!tooltip) return;\n\n if (showTooltip) {\n tooltip.displayTooltip(false); // Hides tooltip for when mouse is hovering over icon\n timer = setTimeout(() => {\n tooltip.classList.add(collapsedClass);\n }, this.ANIMATION_DURATION);\n } else {\n clearTimeout(timer);\n tooltip.classList.remove(collapsedClass);\n }\n };\n\n render() {\n const {\n inTopNavSideMenu,\n isTopNavChild,\n selected,\n navigationType,\n focusStyle,\n isInitialRender,\n sideNavExpanded,\n displayNavigationTooltip,\n collapsedIconLabel,\n isSideNavMobile,\n expandable,\n isInSideNav,\n theme,\n } = this;\n\n const isTopNavChildDesktop = isTopNavChild && !inTopNavSideMenu;\n\n return (\n <Host\n class={{\n \"navigation-item\": true,\n \"navigation-item-selected\": !isTopNavChild && selected,\n \"navigation-item-top-nav\":\n !inTopNavSideMenu && navigationType === \"top\",\n \"navigation-item-top-nav-child\": isTopNavChildDesktop,\n \"navigation-item-top-nav-child-selected\":\n isTopNavChildDesktop && selected,\n \"navigation-item-side-menu\": inTopNavSideMenu,\n \"navigation-item-side-menu-selected\": inTopNavSideMenu && selected,\n \"navigation-item-page-header\": navigationType === \"page-header\",\n \"navigation-item-side-nav\": isInSideNav,\n \"navigation-item-side-nav-collapsed\":\n (!sideNavExpanded \|\| displayNavigationTooltip) && isInSideNav,\n \"navigation-item-side-nav-collapsed-with-label\":\n !sideNavExpanded &&\n isInSideNav &&\n collapsedIconLabel &&\n !isSideNavMobile,\n \"with-transition\": !isInitialRender,\n expandable,\n [focusStyle]: isTopNavChild ? isInSideNav : !inTopNavSideMenu,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n onBlur={isTopNavChildDesktop ? this.handleBlur : null}\n onClick={this.handleClick}\n aria-current={selected ? \"page\" : null}\n role=\"listitem\"\n >\n {/ Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n <ic-tooltip\n label={this.generateTooltipLabel()}\n target=\"navigation-item\"\n placement=\"right\"\n class={{\n \"tooltip-navigation-item\": true,\n \"tooltip-navigation-item-side-nav-collapsed\":\n displayNavigationTooltip && isInSideNav,\n \"tooltip-long-label-navigation-item-side-nav-expanded\":\n this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n }}\n >\n {this.renderNavigationItemContent()}\n </ic-tooltip>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/core/p-813ad03c.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as e,H as a,g as i}from"./p-8e4e97b4.js";import{i as s,o as c,a as o}from"./p-b57e59b7.js";import"./p-bddf799a.js";const d=':host{gap:var(--ic-space-xs);padding:var(--ic-space-xs)}:host,.action-area{display:flex;flex-direction:column}.action-area{gap:var(--ic-space-md)}:host ::slotted(svg),:host ::slotted(img){border-radius:var(--ic-space-xxs)}:host(.ic-empty-state-right),:host(.ic-empty-state-right) .action-area{align-items:flex-end;text-align:right}:host(.ic-empty-state-center),:host(.ic-empty-state-center) .action-area{align-items:center;text-align:center}:host(.image-medium) ::slotted(svg),:host(.image-medium) ::slotted(img){height:calc(3 * var(--ic-space-lg)) !important;width:calc(3 * var(--ic-space-lg)) !important}:host(.image-small) ::slotted(svg),:host(.image-small) ::slotted(img){height:var(--ic-space-xxl) !important;width:var(--ic-space-xxl) !important}:host(.image-large) ::slotted(svg),:host(.image-large) ::slotted(img){height:calc(4 * var(--ic-space-xl)) !important;width:calc(4 * var(--ic-space-xl)) !important}::slotted([slot="heading"]),.empty-state-heading{--ic-typography-color:var(--ic-empty-state-title)}::slotted([slot="subheading"]),.empty-state-subheading{--ic-typography-color:var(--ic-empty-state-subtitle)}::slotted([slot="body"]),.empty-state-body{--ic-typography-color:var(--ic-empty-state-body)}';const r=d;const l=class{constructor(e){t(this,e);this.hostMutationObserver=null;this.aligned="left";this.imageSize="medium";this.theme="inherit"}disconnectedCallback(){var t;(t=this.hostMutationObserver)===null\|\|t===void 0?void 0:t.disconnect()}componentDidLoad(){!s(this.el,"heading")&&c([{prop:this.heading,propName:"heading"}],"Empty State");this.hostMutationObserver=new MutationObserver((t=>o(t,["image","actions"],this)));this.hostMutationObserver.observe(this.el,{childList:true})}render(){const{aligned:t,body:i,maxLines:c,heading:o,imageSize:d,subheading:r,theme:l}=this;return e(a,{key:"d1f0ef089d59f00d57b70a44c22f248ce12314fa",class:{[`ic-empty-state-${t}`]:true,[`image-${d}`]:s(this.el,"image"),[`ic-theme-${l}`]:l!=="inherit"}},s(this.el,"image")&&e("slot",{key:"07406cfb8a629a854fe3e0b500f5a21db373e9a7",name:"image"}),e("div",{key:"cce8db2f16fd451a69c713792f42d4ca4a1d9e5e"},e("slot",{key:"6bb39d26bb009d445bce71434e5db8cf71829b2a",name:"heading"},e("ic-typography",{key:"46ffaf055facc3884b3b53041e89c5309db36869",variant:"h4",class:"empty-state-heading"},o)),e("slot",{key:"2d45d9838c8a13d2e4e916519a388c1a234eecb8",name:"subheading"},e("ic-typography",{key:"c3f0bac962303ac98f451821eb76d9ee731f9e19",variant:"subtitle-small",class:"empty-state-subheading"},r)),e("slot",{key:"a155c2825af5c81b8a19da1aa3b0878dc7abb478",name:"body"},e("ic-typography",{key:"2336a276e810acfa4bde850e78f9332acf4551ce",maxLines:c,class:"empty-state-body"},i))),s(this.el,"actions")&&e("div",{key:"75a4a0fce3f0a4206c35647de547e5caa76a015e",class:"action-area"},e("slot",{key:"2a0b08b6c6ade82137a5ea9337549092953a1a46",name:"actions"})))}get el(){return i(this)}};l.style=r;export{l as ic_empty_state};
2	+ //# sourceMappingURL=p-813ad03c.entry.js.map

package/dist/core/{p-6a576a8b.entry.js.map → p-813ad03c.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["icEmptyStateCss","IcEmptyStateStyle0","EmptyState","constructor","hostRef","this","hostMutationObserver","aligned","imageSize","theme","disconnectedCallback","_a","disconnect","componentDidLoad","isSlotUsed","el","onComponentRequiredPropUndefined","prop","heading","propName","MutationObserver","mutationList","renderDynamicChildSlots","observe","childList","render","body","maxLines","subheading","h","Host","key","class","name","variant"],"sources":["src/components/ic-empty-state/ic-empty-state.css?tag=ic-empty-state&encapsulation=shadow","src/components/ic-empty-state/ic-empty-state.tsx"],"sourcesContent":[":host {\n gap: var(--ic-space-xs);\n padding: var(--ic-space-xs);\n}\n\n:host,\n.action-area {\n display: flex;\n flex-direction: column;\n}\n\n.action-area {\n gap: var(--ic-space-md);\n}\n\n:host ::slotted(svg),\n:host ::slotted(img) {\n border-radius: var(--ic-space-xxs);\n}\n\n:host(.ic-empty-state-right),\n:host(.ic-empty-state-right) .action-area {\n align-items: flex-end;\n text-align: right;\n}\n\n:host(.ic-empty-state-center),\n:host(.ic-empty-state-center) .action-area {\n align-items: center;\n text-align: center;\n}\n\n:host(.image-medium) ::slotted(svg),\n:host(.image-medium) ::slotted(img) {\n height: calc(3 * var(--ic-space-lg)) !important;\n width: calc(3 * var(--ic-space-lg)) !important;\n}\n\n:host(.image-small) ::slotted(svg),\n:host(.image-small) ::slotted(img) {\n height: var(--ic-space-xxl) !important;\n width: var(--ic-space-xxl) !important;\n}\n\n:host(.image-large) ::slotted(svg),\n:host(.image-large) ::slotted(img) {\n height: calc(4 * var(--ic-space-xl)) !important;\n width: calc(4 * var(--ic-space-xl)) !important;\n}\n\n::slotted([slot=\"heading\"]),\n.empty-state-heading {\n --ic-typography-color: var(--ic-empty-state-title);\n}\n\n::slotted([slot=\"subheading\"]),\n.empty-state-subheading {\n --ic-typography-color: var(--ic-empty-state-subtitle);\n}\n\n::slotted([slot=\"body\"]),\n.empty-state-body {\n --ic-typography-color: var(--ic-empty-state-body);\n}\n","import { h, Component, Host, Prop, Element } from \"@stencil/core\";\n\nimport { IcEmptyStateAlignment } from \"./ic-empty-state.types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\n/*\n @slot image - Content is placed at the top above all other content.\n * @slot actions - Content is placed at the bottom below all other content.\n * @slot heading - Content will be rendered in place of the heading prop.\n * @slot subheading - Content will be rendered in place of the subheading prop.\n * @slot body - Content will be rendered in place of the body prop.\n /\n@Component({\n tag: \"ic-empty-state\",\n styleUrl: \"ic-empty-state.css\",\n shadow: true,\n})\nexport class EmptyState {\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcEmptyStateElement;\n\n /\n The alignment of the empty state container.\n /\n @Prop() aligned?: IcEmptyStateAlignment = \"left\";\n\n /\n The body text rendered in the empty state container.\n /\n @Prop() body?: string;\n\n /\n The number of lines of body text to display before truncating.\n /\n @Prop() maxLines?: number;\n\n /\n The title rendered in the empty state container.\n /\n @Prop() heading?: string;\n\n /\n The size of the image or icon used in the image slot.\n /\n @Prop() imageSize?: IcSizes = \"medium\";\n\n /\n The subtitle rendered in the empty state container.\n /\n @Prop() subheading?: string;\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\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Empty State\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, [\"image\", \"actions\"], this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n render() {\n const { aligned, body, maxLines, heading, imageSize, subheading, theme } =\n this;\n return (\n <Host\n class={{\n [`ic-empty-state-${aligned}`]: true,\n [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n {isSlotUsed(this.el, \"image\") && <slot name=\"image\"></slot>}\n <div>\n <slot name=\"heading\">\n <ic-typography variant=\"h4\" class=\"empty-state-heading\">\n {heading}\n </ic-typography>\n </slot>\n <slot name=\"subheading\">\n <ic-typography\n variant=\"subtitle-small\"\n class=\"empty-state-subheading\"\n >\n {subheading}\n </ic-typography>\n </slot>\n <slot name=\"body\">\n <ic-typography maxLines={maxLines} class=\"empty-state-body\">\n {body}\n </ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"actions\") && (\n <div class=\"action-area\">\n <slot name=\"actions\" />\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"~~2GAAA~~,MAAMA,EAAkB,gsCACxB,MAAAC,EAAeD,E,MCqBFE,EAAU,MALvB,WAAAC,CAAAC,G,UAMUC,KAAAC,qBAAgD,KAOhDD,KAAAE,QAAkC,OAoBlCF,KAAAG,UAAsB,SAUtBH,KAAAI,MAAsB,S,CAE9B,oBAAAC,G,OACEC,EAAAN,KAAKC,wBAAoB,MAAAK,SAAA,SAAAA,EAAEC,Y,CAG7B,gBAAAC,IACGC,EAAWT,KAAKU,GAAI,YACnBC,EACE,CAAC,CAAEC,KAAMZ,KAAKa,QAASC,SAAU,YACjC,eAGJd,KAAKC,qBAAuB,IAAIc,kBAAkBC,GAChDC,EAAwBD,EAAc,CAAC,QAAS,WAAYhB,QAE9DA,KAAKC,qBAAqBiB,QAAQlB,KAAKU,GAAI,CACzCS,UAAW,M,CAIf,MAAAC,GACE,MAAMlB,QAAEA,EAAOmB,KAAEA,EAAIC,SAAEA,EAAQT,QAAEA,EAAOV,UAAEA,EAASoB,WAAEA,EAAUnB,MAAEA,GAC/DJ,KACF,OACEwB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,CAAC,kBAAkBzB,KAAY,KAC/B,CAAC,SAASC,KAAcM,EAAWT,KAAKU,GAAI,SAC5C,CAAC,YAAYN,KAAUA,IAAU,YAGlCK,EAAWT,KAAKU,GAAI,UAAYc,EAAA,QAAAE,IAAA,2CAAME,KAAK,UAC5CJ,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAME,KAAK,WACTJ,EAAA,iBAAAE,IAAA,2CAAeG,QAAQ,KAAKF,MAAM,uBAC/Bd,IAGLW,EAAA,QAAAE,IAAA,2CAAME,KAAK,cACTJ,EAAA,iBAAAE,IAAA,2CACEG,QAAQ,iBACRF,MAAM,0BAELJ,IAGLC,EAAA,QAAAE,IAAA,2CAAME,KAAK,QACTJ,EAAA,iBAAAE,IAAA,2CAAeJ,SAAUA,EAAUK,MAAM,oBACtCN,KAINZ,EAAWT,KAAKU,GAAI,YACnBc,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,a","ignoreList":[]}
1	+ {"version":3,"names":["icEmptyStateCss","IcEmptyStateStyle0","EmptyState","constructor","hostRef","this","hostMutationObserver","aligned","imageSize","theme","disconnectedCallback","_a","disconnect","componentDidLoad","isSlotUsed","el","onComponentRequiredPropUndefined","prop","heading","propName","MutationObserver","mutationList","renderDynamicChildSlots","observe","childList","render","body","maxLines","subheading","h","Host","key","class","name","variant"],"sources":["src/components/ic-empty-state/ic-empty-state.css?tag=ic-empty-state&encapsulation=shadow","src/components/ic-empty-state/ic-empty-state.tsx"],"sourcesContent":[":host {\n gap: var(--ic-space-xs);\n padding: var(--ic-space-xs);\n}\n\n:host,\n.action-area {\n display: flex;\n flex-direction: column;\n}\n\n.action-area {\n gap: var(--ic-space-md);\n}\n\n:host ::slotted(svg),\n:host ::slotted(img) {\n border-radius: var(--ic-space-xxs);\n}\n\n:host(.ic-empty-state-right),\n:host(.ic-empty-state-right) .action-area {\n align-items: flex-end;\n text-align: right;\n}\n\n:host(.ic-empty-state-center),\n:host(.ic-empty-state-center) .action-area {\n align-items: center;\n text-align: center;\n}\n\n:host(.image-medium) ::slotted(svg),\n:host(.image-medium) ::slotted(img) {\n height: calc(3 * var(--ic-space-lg)) !important;\n width: calc(3 * var(--ic-space-lg)) !important;\n}\n\n:host(.image-small) ::slotted(svg),\n:host(.image-small) ::slotted(img) {\n height: var(--ic-space-xxl) !important;\n width: var(--ic-space-xxl) !important;\n}\n\n:host(.image-large) ::slotted(svg),\n:host(.image-large) ::slotted(img) {\n height: calc(4 * var(--ic-space-xl)) !important;\n width: calc(4 * var(--ic-space-xl)) !important;\n}\n\n::slotted([slot=\"heading\"]),\n.empty-state-heading {\n --ic-typography-color: var(--ic-empty-state-title);\n}\n\n::slotted([slot=\"subheading\"]),\n.empty-state-subheading {\n --ic-typography-color: var(--ic-empty-state-subtitle);\n}\n\n::slotted([slot=\"body\"]),\n.empty-state-body {\n --ic-typography-color: var(--ic-empty-state-body);\n}\n","import { h, Component, Host, Prop, Element } from \"@stencil/core\";\n\nimport { IcEmptyStateAlignment } from \"./ic-empty-state.types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\n/*\n @slot image - Content is placed at the top above all other content.\n * @slot actions - Content is placed at the bottom below all other content.\n * @slot heading - Content will be rendered in place of the heading prop.\n * @slot subheading - Content will be rendered in place of the subheading prop.\n * @slot body - Content will be rendered in place of the body prop.\n /\n@Component({\n tag: \"ic-empty-state\",\n styleUrl: \"ic-empty-state.css\",\n shadow: true,\n})\nexport class EmptyState {\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcEmptyStateElement;\n\n /\n The alignment of the empty state container.\n /\n @Prop() aligned?: IcEmptyStateAlignment = \"left\";\n\n /\n The body text rendered in the empty state container.\n /\n @Prop() body?: string;\n\n /\n The number of lines of body text to display before truncating.\n /\n @Prop() maxLines?: number;\n\n /\n The title rendered in the empty state container.\n /\n @Prop() heading?: string;\n\n /\n The size of the image or icon used in the image slot.\n /\n @Prop() imageSize?: IcSizes = \"medium\";\n\n /\n The subtitle rendered in the empty state container.\n /\n @Prop() subheading?: string;\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\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Empty State\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, [\"image\", \"actions\"], this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n render() {\n const { aligned, body, maxLines, heading, imageSize, subheading, theme } =\n this;\n return (\n <Host\n class={{\n [`ic-empty-state-${aligned}`]: true,\n [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n {isSlotUsed(this.el, \"image\") && <slot name=\"image\"></slot>}\n <div>\n <slot name=\"heading\">\n <ic-typography variant=\"h4\" class=\"empty-state-heading\">\n {heading}\n </ic-typography>\n </slot>\n <slot name=\"subheading\">\n <ic-typography\n variant=\"subtitle-small\"\n class=\"empty-state-subheading\"\n >\n {subheading}\n </ic-typography>\n </slot>\n <slot name=\"body\">\n <ic-typography maxLines={maxLines} class=\"empty-state-body\">\n {body}\n </ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"actions\") && (\n <div class=\"action-area\">\n <slot name=\"actions\" />\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"mIAAA,MAAMA,EAAkB,gsCACxB,MAAAC,EAAeD,E,MCqBFE,EAAU,MALvB,WAAAC,CAAAC,G,UAMUC,KAAAC,qBAAgD,KAOhDD,KAAAE,QAAkC,OAoBlCF,KAAAG,UAAsB,SAUtBH,KAAAI,MAAsB,S,CAE9B,oBAAAC,G,OACEC,EAAAN,KAAKC,wBAAoB,MAAAK,SAAA,SAAAA,EAAEC,Y,CAG7B,gBAAAC,IACGC,EAAWT,KAAKU,GAAI,YACnBC,EACE,CAAC,CAAEC,KAAMZ,KAAKa,QAASC,SAAU,YACjC,eAGJd,KAAKC,qBAAuB,IAAIc,kBAAkBC,GAChDC,EAAwBD,EAAc,CAAC,QAAS,WAAYhB,QAE9DA,KAAKC,qBAAqBiB,QAAQlB,KAAKU,GAAI,CACzCS,UAAW,M,CAIf,MAAAC,GACE,MAAMlB,QAAEA,EAAOmB,KAAEA,EAAIC,SAAEA,EAAQT,QAAEA,EAAOV,UAAEA,EAASoB,WAAEA,EAAUnB,MAAEA,GAC/DJ,KACF,OACEwB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,CAAC,kBAAkBzB,KAAY,KAC/B,CAAC,SAASC,KAAcM,EAAWT,KAAKU,GAAI,SAC5C,CAAC,YAAYN,KAAUA,IAAU,YAGlCK,EAAWT,KAAKU,GAAI,UAAYc,EAAA,QAAAE,IAAA,2CAAME,KAAK,UAC5CJ,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAME,KAAK,WACTJ,EAAA,iBAAAE,IAAA,2CAAeG,QAAQ,KAAKF,MAAM,uBAC/Bd,IAGLW,EAAA,QAAAE,IAAA,2CAAME,KAAK,cACTJ,EAAA,iBAAAE,IAAA,2CACEG,QAAQ,iBACRF,MAAM,0BAELJ,IAGLC,EAAA,QAAAE,IAAA,2CAAME,KAAK,QACTJ,EAAA,iBAAAE,IAAA,2CAAeJ,SAAUA,EAAUK,MAAM,oBACtCN,KAINZ,EAAWT,KAAKU,GAAI,YACnBc,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,a","ignoreList":[]}

package/dist/core/p-8558b9b7.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as t,H as i,g as o}from"./p-8e4e97b4.js";import{i as s}from"./p-b57e59b7.js";import"./p-bddf799a.js";const a='/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}.label-container{--ic-typography-color:var(--ic-accordion-group-title-text);color:var(--ic-accordion-group-title-text);padding:var(--ic-space-xs);display:flex;justify-content:space-between;align-items:center}:host(.ic-accordion-group-small) .label-container{padding:var(--ic-space-xxs) var(--ic-space-xs)}:host(.ic-accordion-group-large) .label-container{padding:var(--ic-space-sm) var(--ic-space-xs)}';const n=a;let r=0;const c=class{constructor(t){e(this,t);this.accordionGroupId=`ic-accordion-group-${r++}`;this.accessibleButtonLabel="accordions";this.theme="inherit";this.expanded=false;this.label="";this.singleExpansion=false;this.size="medium";this.handleExpanded=()=>{if(this.areAllAccordionsOpen){this.expanded=false;this.accordions.forEach((e=>{e.expanded=this.expanded}))}else{this.expanded=true;this.accordions.forEach((e=>{e.expanded=this.expanded}))}this.setExpandedToAreAllAccordionsOpen()};this.linkAccordions=()=>{this.accordions.forEach((e=>{e.setAttribute("context-id",this.accordionGroupId)}))};this.setExpandedToAreAllAccordionsOpen=()=>{this.areAllAccordionsOpen=this.accordions.every((e=>!!e.expanded))};this.accordionOpenBtnText=()=>!this.areAllAccordionsOpen?"See all":"Hide all"}watchThemeHandler(){this.accordions.forEach((e=>{e.theme=this.theme}))}watchExpandedHandler(){this.handleExpanded()}componentDidLoad(){const e=this.el.children;this.accordions=Array.from(e).filter((e=>e.tagName==="IC-ACCORDION"));this.linkAccordions();this.accordions.forEach((e=>{e.theme=this.theme}));this.accordions.forEach((e=>{e.size=this.size}));if(this.expanded){this.accordions.forEach((e=>{e.expanded=true}));this.setExpandedToAreAllAccordionsOpen()}else{this.setExpandedToAreAllAccordionsOpen();this.expanded=this.areAllAccordionsOpen}}handleAccordionClicked(e){if(!this.singleExpansion){this.setExpandedToAreAllAccordionsOpen()}else{this.accordions.forEach((t=>{if(t.expanded&&e.detail.id!==t.id){t.expanded=false}}))}}async setFocus(){const e=this.singleExpansion?this.accordions[0]:this.allButtonEl;e===null\|\|e===void 0?void 0:e.setFocus()}render(){const{size:e,label:o,singleExpansion:a,accessibleButtonLabel:n,theme:r}=this;return t(i,{key:"ec057d7f6e128e8429ebd9e14497a86d1eaf1abe","context-id":this.accordionGroupId,class:{[`ic-accordion-group-${e}`]:true,["ic-accordion-group"]:true,[`ic-theme-${r}`]:r!=="inherit"}},t("div",{key:"86acdf79730dc3d2dcc95a5928e1a1bebf83412f",class:"label-container"},t("ic-typography",{key:"5f2b615ebe87304b410b896d5b102da42ff5bcd6",variant:"h4"},t("h3",{key:"9b33f5f102e27e4268b0edd894d8d725fd8cc5a4"},s(this.el,"label")?t("slot",{name:"label"}):o)),!a&&t("ic-button",{key:"1b8d8332cd10fed2eea6959f02841cb4b1586902",ref:e=>this.allButtonEl=e,onClick:this.handleExpanded,variant:"tertiary","aria-label":`${this.accordionOpenBtnText()} ${n}`},this.accordionOpenBtnText())),t("slot",{key:"b93775721fd0cc7560115c6bb62824db59b2ea27"}))}get el(){return o(this)}static get watchers(){return{theme:["watchThemeHandler"],expanded:["watchExpandedHandler"]}}};c.style=n;export{c as ic_accordion_group};
2	+ //# sourceMappingURL=p-8558b9b7.entry.js.map

package/dist/core/{p-21cf2beb.entry.js.map → p-8558b9b7.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["icAccordionGroupCss","IcAccordionGroupStyle0","accordionGroupIds","AccordionGroup","constructor","hostRef","this","accordionGroupId","accessibleButtonLabel","theme","expanded","label","singleExpansion","size","handleExpanded","areAllAccordionsOpen","accordions","forEach","acc","setExpandedToAreAllAccordionsOpen","linkAccordions","accordion","setAttribute","every","accordionOpenBtnText","watchThemeHandler","watchExpandedHandler","componentDidLoad","accordionDirectChildren","el","children","Array","from","filter","child","tagName","handleAccordionClicked","event","detail","id","setFocus","focusEl","allButtonEl","render","h","Host","key","class","variant","isSlotUsed","name","ref","onClick"],"sources":["src/components/ic-accordion-group/ic-accordion-group.css?tag=ic-accordion-group&encapsulation=shadow","src/components/ic-accordion-group/ic-accordion-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.label-container {\n --ic-typography-color: var(--ic-accordion-group-title-text);\n\n color: var(--ic-accordion-group-title-text);\n padding: var(--ic-space-xs);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n:host(.ic-accordion-group-small) .label-container {\n padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n:host(.ic-accordion-group-large) .label-container {\n padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nlet accordionGroupIds = 0;\n\n/*\n @slot label - Content is placed as the accordion group title.\n /\n@Component({\n tag: \"ic-accordion-group\",\n styleUrl: \"ic-accordion-group.css\",\n shadow: true,\n})\nexport class AccordionGroup {\n private accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;\n private allButtonEl?: HTMLIcButtonElement;\n\n @Element() el: HTMLIcAccordionGroupElement;\n\n @State() accordions: HTMLIcAccordionElement[];\n\n @State() areAllAccordionsOpen: boolean;\n\n /\n The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.\n /\n @Prop() accessibleButtonLabel?: string = \"accordions\";\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.accordions.forEach((acc) => {\n acc.theme = this.theme;\n });\n }\n\n /\n If `true`, the accordion will load in an expanded state.\n /\n @Prop({ mutable: true }) expanded?: boolean = false;\n @Watch(\"expanded\")\n watchExpandedHandler() {\n this.handleExpanded();\n }\n\n /\n The header for the accordion group.\n /\n @Prop() label?: string = \"\";\n\n /\n If `true`, only one accordion will open at a time.\n /\n @Prop() singleExpansion?: boolean = false;\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n componentDidLoad(): void {\n const accordionDirectChildren = (this.el as HTMLElement).children;\n this.accordions = Array.from(accordionDirectChildren).filter(\n (child) => child.tagName === \"IC-ACCORDION\"\n ) as HTMLIcAccordionElement[];\n this.linkAccordions();\n this.accordions.forEach((acc) => {\n acc.theme = this.theme;\n });\n this.accordions.forEach((acc) => {\n acc.size = this.size;\n });\n if (this.expanded) {\n this.accordions.forEach((acc) => {\n acc.expanded = true;\n });\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.setExpandedToAreAllAccordionsOpen();\n this.expanded = this.areAllAccordionsOpen;\n }\n }\n\n @Listen(\"accordionClicked\")\n handleAccordionClicked(event: CustomEvent): void {\n if (!this.singleExpansion) {\n // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.accordions.forEach((acc) => {\n if (acc.expanded && event.detail.id !== acc.id) {\n acc.expanded = false;\n }\n });\n }\n }\n\n /\n Sets the focus on first focusable element in the accordion group. If the \"See/Hide all\" button is present, it will be focused.\n * Otherwise, the first accordion will be focused.\n */\n @Method()\n async setFocus(): Promise<void> {\n const focusEl = this.singleExpansion\n ? this.accordions[0]\n : this.allButtonEl;\n focusEl?.setFocus();\n }\n\n private handleExpanded = () => {\n if (this.areAllAccordionsOpen) {\n this.expanded = false;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n } else {\n this.expanded = true;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n }\n this.setExpandedToAreAllAccordionsOpen();\n };\n\n private linkAccordions = () => {\n this.accordions.forEach((accordion) => {\n accordion.setAttribute(\"context-id\", this.accordionGroupId);\n });\n };\n\n private setExpandedToAreAllAccordionsOpen = () => {\n this.areAllAccordionsOpen = this.accordions.every(\n (accordion) => !!accordion.expanded\n );\n };\n\n private accordionOpenBtnText = () => {\n return !this.areAllAccordionsOpen ? \"See all\" : \"Hide all\";\n };\n\n render() {\n const { size, label, singleExpansion, accessibleButtonLabel, theme } = this;\n return (\n <Host\n context-id={this.accordionGroupId}\n class={{\n [`ic-accordion-group-${size}`]: true,\n [\"ic-accordion-group\"]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"label-container\">\n <ic-typography variant=\"h4\">\n <h3>\n {isSlotUsed(this.el, \"label\") ? <slot name=\"label\" /> : label}\n </h3>\n </ic-typography>\n {!singleExpansion && (\n <ic-button\n ref={(el) => (this.allButtonEl = el)}\n onClick={this.handleExpanded}\n variant=\"tertiary\"\n aria-label={`${this.accordionOpenBtnText()} ${accessibleButtonLabel}`}\n >\n {this.accordionOpenBtnText()}\n </ic-button>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"~~6FAAA~~,MAAMA,EAAsB,qvFAC5B,MAAAC,EAAeD,ECaf,IAAIE,EAAoB,E,MAUXC,EAAc,MAL3B,WAAAC,CAAAC,G,UAMUC,KAAAC,iBAAmB,sBAAsBL,MAYzCI,KAAAE,sBAAiC,aAKjCF,KAAAG,MAAsB,UAWLH,KAAAI,SAAqB,MAStCJ,KAAAK,MAAiB,GAKjBL,KAAAM,gBAA4B,MAK5BN,KAAAO,KAAiB,SAmDjBP,KAAAQ,eAAiB,KACvB,GAAIR,KAAKS,qBAAsB,CAC7BT,KAAKI,SAAW,MAChBJ,KAAKU,WAAWC,SAASC,IACvBA,EAAIR,SAAWJ,KAAKI,QAAQ,G,KAEzB,CACLJ,KAAKI,SAAW,KAChBJ,KAAKU,WAAWC,SAASC,IACvBA,EAAIR,SAAWJ,KAAKI,QAAQ,G,CAGhCJ,KAAKa,mCAAmC,EAGlCb,KAAAc,eAAiB,KACvBd,KAAKU,WAAWC,SAASI,IACvBA,EAAUC,aAAa,aAAchB,KAAKC,iBAAiB,GAC3D,EAGID,KAAAa,kCAAoC,KAC1Cb,KAAKS,qBAAuBT,KAAKU,WAAWO,OACzCF,KAAgBA,EAAUX,UAC5B,EAGKJ,KAAAkB,qBAAuB,KACrBlB,KAAKS,qBAAuB,UAAY,U,CA3GlD,iBAAAU,GACEnB,KAAKU,WAAWC,SAASC,IACvBA,EAAIT,MAAQH,KAAKG,KAAK,G,CAS1B,oBAAAiB,GACEpB,KAAKQ,gB,CAkBP,gBAAAa,GACE,MAAMC,EAA2BtB,KAAKuB,GAAmBC,SACzDxB,KAAKU,WAAae,MAAMC,KAAKJ,GAAyBK,QACnDC,GAAUA,EAAMC,UAAY,iBAE/B7B,KAAKc,iBACLd,KAAKU,WAAWC,SAASC,IACvBA,EAAIT,MAAQH,KAAKG,KAAK,IAExBH,KAAKU,WAAWC,SAASC,IACvBA,EAAIL,KAAOP,KAAKO,IAAI,IAEtB,GAAIP,KAAKI,SAAU,CACjBJ,KAAKU,WAAWC,SAASC,IACvBA,EAAIR,SAAW,IAAI,IAErBJ,KAAKa,mC,KACA,CACLb,KAAKa,oCACLb,KAAKI,SAAWJ,KAAKS,oB,EAKzB,sBAAAqB,CAAuBC,GACrB,IAAK/B,KAAKM,gBAAiB,CAEzBN,KAAKa,mC,KACA,CACLb,KAAKU,WAAWC,SAASC,IACvB,GAAIA,EAAIR,UAAY2B,EAAMC,OAAOC,KAAOrB,EAAIqB,GAAI,CAC9CrB,EAAIR,SAAW,K,MAWvB,cAAM8B,GACJ,MAAMC,EAAUnC,KAAKM,gBACjBN,KAAKU,WAAW,GAChBV,KAAKoC,YACTD,IAAO,MAAPA,SAAO,SAAPA,EAASD,U,CAkCX,MAAAG,GACE,MAAM9B,KAAEA,EAAIF,MAAEA,EAAKC,gBAAEA,EAAeJ,sBAAEA,EAAqBC,MAAEA,GAAUH,KACvE,OACEsC,EAACC,EAAI,CAAAC,IAAA,wDACSxC,KAAKC,iBACjBwC,MAAO,CACL,CAAC,sBAAsBlC,KAAS,KAChC,CAAC,sBAAuB,KACxB,CAAC,YAAYJ,KAAUA,IAAU,YAGnCmC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,iBAAAE,IAAA,2CAAeE,QAAQ,MACrBJ,EAAA,MAAAE,IAAA,4CACGG,EAAW3C,KAAKuB,GAAI,SAAWe,EAAA,QAAMM,KAAK,UAAavC,KAG1DC,GACAgC,EAAA,aAAAE,IAAA,2CACEK,IAAMtB,GAAQvB,KAAKoC,YAAcb,EACjCuB,QAAS9C,KAAKQ,eACdkC,QAAQ,WAAU,aACN,GAAG1C,KAAKkB,0BAA0BhB,KAE7CF,KAAKkB,yBAIZoB,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
1	+ {"version":3,"names":["icAccordionGroupCss","IcAccordionGroupStyle0","accordionGroupIds","AccordionGroup","constructor","hostRef","this","accordionGroupId","accessibleButtonLabel","theme","expanded","label","singleExpansion","size","handleExpanded","areAllAccordionsOpen","accordions","forEach","acc","setExpandedToAreAllAccordionsOpen","linkAccordions","accordion","setAttribute","every","accordionOpenBtnText","watchThemeHandler","watchExpandedHandler","componentDidLoad","accordionDirectChildren","el","children","Array","from","filter","child","tagName","handleAccordionClicked","event","detail","id","setFocus","focusEl","allButtonEl","render","h","Host","key","class","variant","isSlotUsed","name","ref","onClick"],"sources":["src/components/ic-accordion-group/ic-accordion-group.css?tag=ic-accordion-group&encapsulation=shadow","src/components/ic-accordion-group/ic-accordion-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.label-container {\n --ic-typography-color: var(--ic-accordion-group-title-text);\n\n color: var(--ic-accordion-group-title-text);\n padding: var(--ic-space-xs);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n:host(.ic-accordion-group-small) .label-container {\n padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n:host(.ic-accordion-group-large) .label-container {\n padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nlet accordionGroupIds = 0;\n\n/*\n @slot label - Content is placed as the accordion group title.\n /\n@Component({\n tag: \"ic-accordion-group\",\n styleUrl: \"ic-accordion-group.css\",\n shadow: true,\n})\nexport class AccordionGroup {\n private accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;\n private allButtonEl?: HTMLIcButtonElement;\n\n @Element() el: HTMLIcAccordionGroupElement;\n\n @State() accordions: HTMLIcAccordionElement[];\n\n @State() areAllAccordionsOpen: boolean;\n\n /\n The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.\n /\n @Prop() accessibleButtonLabel?: string = \"accordions\";\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.accordions.forEach((acc) => {\n acc.theme = this.theme;\n });\n }\n\n /\n If `true`, the accordion will load in an expanded state.\n /\n @Prop({ mutable: true }) expanded?: boolean = false;\n @Watch(\"expanded\")\n watchExpandedHandler() {\n this.handleExpanded();\n }\n\n /\n The header for the accordion group.\n /\n @Prop() label?: string = \"\";\n\n /\n If `true`, only one accordion will open at a time.\n /\n @Prop() singleExpansion?: boolean = false;\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n componentDidLoad(): void {\n const accordionDirectChildren = (this.el as HTMLElement).children;\n this.accordions = Array.from(accordionDirectChildren).filter(\n (child) => child.tagName === \"IC-ACCORDION\"\n ) as HTMLIcAccordionElement[];\n this.linkAccordions();\n this.accordions.forEach((acc) => {\n acc.theme = this.theme;\n });\n this.accordions.forEach((acc) => {\n acc.size = this.size;\n });\n if (this.expanded) {\n this.accordions.forEach((acc) => {\n acc.expanded = true;\n });\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.setExpandedToAreAllAccordionsOpen();\n this.expanded = this.areAllAccordionsOpen;\n }\n }\n\n @Listen(\"accordionClicked\")\n handleAccordionClicked(event: CustomEvent): void {\n if (!this.singleExpansion) {\n // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.accordions.forEach((acc) => {\n if (acc.expanded && event.detail.id !== acc.id) {\n acc.expanded = false;\n }\n });\n }\n }\n\n /\n Sets the focus on first focusable element in the accordion group. If the \"See/Hide all\" button is present, it will be focused.\n * Otherwise, the first accordion will be focused.\n */\n @Method()\n async setFocus(): Promise<void> {\n const focusEl = this.singleExpansion\n ? this.accordions[0]\n : this.allButtonEl;\n focusEl?.setFocus();\n }\n\n private handleExpanded = () => {\n if (this.areAllAccordionsOpen) {\n this.expanded = false;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n } else {\n this.expanded = true;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n }\n this.setExpandedToAreAllAccordionsOpen();\n };\n\n private linkAccordions = () => {\n this.accordions.forEach((accordion) => {\n accordion.setAttribute(\"context-id\", this.accordionGroupId);\n });\n };\n\n private setExpandedToAreAllAccordionsOpen = () => {\n this.areAllAccordionsOpen = this.accordions.every(\n (accordion) => !!accordion.expanded\n );\n };\n\n private accordionOpenBtnText = () => {\n return !this.areAllAccordionsOpen ? \"See all\" : \"Hide all\";\n };\n\n render() {\n const { size, label, singleExpansion, accessibleButtonLabel, theme } = this;\n return (\n <Host\n context-id={this.accordionGroupId}\n class={{\n [`ic-accordion-group-${size}`]: true,\n [\"ic-accordion-group\"]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"label-container\">\n <ic-typography variant=\"h4\">\n <h3>\n {isSlotUsed(this.el, \"label\") ? <slot name=\"label\" /> : label}\n </h3>\n </ic-typography>\n {!singleExpansion && (\n <ic-button\n ref={(el) => (this.allButtonEl = el)}\n onClick={this.handleExpanded}\n variant=\"tertiary\"\n aria-label={`${this.accordionOpenBtnText()} ${accessibleButtonLabel}`}\n >\n {this.accordionOpenBtnText()}\n </ic-button>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"qHAAA,MAAMA,EAAsB,qvFAC5B,MAAAC,EAAeD,ECaf,IAAIE,EAAoB,E,MAUXC,EAAc,MAL3B,WAAAC,CAAAC,G,UAMUC,KAAAC,iBAAmB,sBAAsBL,MAYzCI,KAAAE,sBAAiC,aAKjCF,KAAAG,MAAsB,UAWLH,KAAAI,SAAqB,MAStCJ,KAAAK,MAAiB,GAKjBL,KAAAM,gBAA4B,MAK5BN,KAAAO,KAAiB,SAmDjBP,KAAAQ,eAAiB,KACvB,GAAIR,KAAKS,qBAAsB,CAC7BT,KAAKI,SAAW,MAChBJ,KAAKU,WAAWC,SAASC,IACvBA,EAAIR,SAAWJ,KAAKI,QAAQ,G,KAEzB,CACLJ,KAAKI,SAAW,KAChBJ,KAAKU,WAAWC,SAASC,IACvBA,EAAIR,SAAWJ,KAAKI,QAAQ,G,CAGhCJ,KAAKa,mCAAmC,EAGlCb,KAAAc,eAAiB,KACvBd,KAAKU,WAAWC,SAASI,IACvBA,EAAUC,aAAa,aAAchB,KAAKC,iBAAiB,GAC3D,EAGID,KAAAa,kCAAoC,KAC1Cb,KAAKS,qBAAuBT,KAAKU,WAAWO,OACzCF,KAAgBA,EAAUX,UAC5B,EAGKJ,KAAAkB,qBAAuB,KACrBlB,KAAKS,qBAAuB,UAAY,U,CA3GlD,iBAAAU,GACEnB,KAAKU,WAAWC,SAASC,IACvBA,EAAIT,MAAQH,KAAKG,KAAK,G,CAS1B,oBAAAiB,GACEpB,KAAKQ,gB,CAkBP,gBAAAa,GACE,MAAMC,EAA2BtB,KAAKuB,GAAmBC,SACzDxB,KAAKU,WAAae,MAAMC,KAAKJ,GAAyBK,QACnDC,GAAUA,EAAMC,UAAY,iBAE/B7B,KAAKc,iBACLd,KAAKU,WAAWC,SAASC,IACvBA,EAAIT,MAAQH,KAAKG,KAAK,IAExBH,KAAKU,WAAWC,SAASC,IACvBA,EAAIL,KAAOP,KAAKO,IAAI,IAEtB,GAAIP,KAAKI,SAAU,CACjBJ,KAAKU,WAAWC,SAASC,IACvBA,EAAIR,SAAW,IAAI,IAErBJ,KAAKa,mC,KACA,CACLb,KAAKa,oCACLb,KAAKI,SAAWJ,KAAKS,oB,EAKzB,sBAAAqB,CAAuBC,GACrB,IAAK/B,KAAKM,gBAAiB,CAEzBN,KAAKa,mC,KACA,CACLb,KAAKU,WAAWC,SAASC,IACvB,GAAIA,EAAIR,UAAY2B,EAAMC,OAAOC,KAAOrB,EAAIqB,GAAI,CAC9CrB,EAAIR,SAAW,K,MAWvB,cAAM8B,GACJ,MAAMC,EAAUnC,KAAKM,gBACjBN,KAAKU,WAAW,GAChBV,KAAKoC,YACTD,IAAO,MAAPA,SAAO,SAAPA,EAASD,U,CAkCX,MAAAG,GACE,MAAM9B,KAAEA,EAAIF,MAAEA,EAAKC,gBAAEA,EAAeJ,sBAAEA,EAAqBC,MAAEA,GAAUH,KACvE,OACEsC,EAACC,EAAI,CAAAC,IAAA,wDACSxC,KAAKC,iBACjBwC,MAAO,CACL,CAAC,sBAAsBlC,KAAS,KAChC,CAAC,sBAAuB,KACxB,CAAC,YAAYJ,KAAUA,IAAU,YAGnCmC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,iBAAAE,IAAA,2CAAeE,QAAQ,MACrBJ,EAAA,MAAAE,IAAA,4CACGG,EAAW3C,KAAKuB,GAAI,SAAWe,EAAA,QAAMM,KAAK,UAAavC,KAG1DC,GACAgC,EAAA,aAAAE,IAAA,2CACEK,IAAMtB,GAAQvB,KAAKoC,YAAcb,EACjCuB,QAAS9C,KAAKQ,eACdkC,QAAQ,WAAU,aACN,GAAG1C,KAAKkB,0BAA0BhB,KAE7CF,KAAKkB,yBAIZoB,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/core/p-8684efeb.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as n,h as e,H as o,g as i}from"./p-8e4e97b4.js";import{O as r}from"./p-426ec638.js";import{r as t,o as a,a as c,i as d,b as l}from"./p-b57e59b7.js";import"./p-bddf799a.js";const s='/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /\n\n/* Document\n ========================================================================== /\n\n/\n 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n /\n\nhtml {\n line-height: 1.15; / 1 /\n -webkit-text-size-adjust: 100%; / 2 /\n}\n\n/ Sections\n ========================================================================== /\n\n/\n Remove the margin in all browsers.\n /\n\nbody {\n margin: 0;\n}\n\n/\n Render the `main` element consistently in IE.\n /\n\nmain {\n display: block;\n}\n\n/\n Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n /\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/ Grouping content\n ========================================================================== /\n\n/\n 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n /\n\nhr {\n box-sizing: content-box; / 1 /\n height: 0; / 1 /\n overflow: visible; / 2 /\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\npre {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/ Text-level semantics\n ========================================================================== /\n\n/\n Remove the gray background on active links in IE 10.\n /\n\na {\n background-color: transparent;\n}\n\n/\n 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n /\n\nabbr[title] {\n border-bottom: none; / 1 /\n text-decoration: underline; / 2 /\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted; / 2 /\n}\n\n/\n Add the correct font weight in Chrome, Edge, and Safari.\n /\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/\n Add the correct font size in all browsers.\n /\n\nsmall {\n font-size: 80%;\n}\n\n/\n Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n /\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/ Embedded content\n ========================================================================== /\n\n/\n Remove the border on images inside links in IE 10.\n /\n\nimg {\n border-style: none;\n}\n\n/ Forms\n ========================================================================== /\n\n/\n 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n /\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; / 1 /\n font-size: 100%; / 1 /\n line-height: 1.15; / 1 /\n margin: 0; / 2 /\n}\n\n/\n Show the overflow in IE.\n * 1. Show the overflow in Edge.\n /\n\nbutton,\ninput {\n / 1 /\n overflow: visible;\n}\n\n/\n Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n /\n\nbutton,\nselect {\n / 1 /\n text-transform: none;\n}\n\n/\n Correct the inability to style clickable types in iOS and Safari.\n /\n\nbutton,\n[type="button"],\n[type="reset"],\n[type="submit"] {\n -webkit-appearance: button;\n}\n\n/\n Remove the inner border and padding in Firefox.\n /\n\nbutton::-moz-focus-inner,\n[type="button"]::-moz-focus-inner,\n[type="reset"]::-moz-focus-inner,\n[type="submit"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/\n Restore the focus styles unset by the previous rule.\n /\n\nbutton:-moz-focusring,\n[type="button"]:-moz-focusring,\n[type="reset"]:-moz-focusring,\n[type="submit"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/\n Correct the padding in Firefox.\n /\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/\n 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n /\n\nlegend {\n box-sizing: border-box; / 1 /\n color: inherit; / 2 /\n display: table; / 1 /\n max-width: 100%; / 1 /\n padding: 0; / 3 /\n white-space: normal; / 1 /\n}\n\n/\n Add the correct vertical alignment in Chrome, Firefox, and Opera.\n /\n\nprogress {\n vertical-align: baseline;\n}\n\n/\n Remove the default vertical scrollbar in IE 10+.\n /\n\ntextarea {\n overflow: auto;\n}\n\n/\n 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n /\n\n[type="checkbox"],\n[type="radio"] {\n box-sizing: border-box; / 1 /\n padding: 0; / 2 /\n}\n\n/\n Correct the cursor style of increment and decrement buttons in Chrome.\n /\n\n[type="number"]::-webkit-inner-spin-button,\n[type="number"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/\n 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n /\n\n[type="search"] {\n -webkit-appearance: textfield; / 1 /\n outline-offset: -2px; / 2 /\n}\n\n/\n Remove the inner padding in Chrome and Safari on macOS.\n /\n\n[type="search"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/\n 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n /\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; / 1 /\n font: inherit; / 2 /\n}\n\n/ Interactive\n ========================================================================== /\n\n/\n * Add the correct display in Edge, IE 10+, and Firefox.\n /\n\ndetails {\n display: block;\n}\n\n/\n * Add the correct display in all browsers.\n /\n\nsummary {\n display: list-item;\n}\n\n/ Misc\n ========================================================================== /\n\n/\n Add the correct display in IE 10+.\n /\n\ntemplate {\n display: none;\n}\n\n/\n Add the correct display in IE 10.\n */\n\n[hidden] {\n display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font-style: inherit;\n vertical-align: baseline;\n}\n\n\n:host {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n}\n\n.chip {\n --icon-color: var(--ic-action-chip-filled-icon);\n --text-color: var(--ic-action-chip-filled-label);\n --ic-typography-color: var(--text-color);\n\n align-items: center;\n background-color: var(--ic-action-chip-filled-background-default);\n border: var(--ic-border-width) solid transparent;\n border-radius: var(--ic-space-md);\n color: var(--text-color);\n cursor: pointer;\n display: flex;\n padding: calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xxs);\n position: relative;\n text-decoration: none;\n\n &:hover {\n background-color: var(--ic-action-chip-filled-background-hover);\n }\n\n &:active {\n background-color: var(--ic-action-chip-filled-background-pressed);\n }\n\n &:focus {\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n }\n}\n\n.small {\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n padding: var(--ic-space-1px) var(--ic-space-xxxs);\n}\n\n.large {\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px)) var(--ic-space-xs);\n}\n\n.outlined {\n --icon-color: var(--ic-action-chip-outlined-icon);\n --text-color: var(--ic-action-chip-outlined-label);\n\n background-color: transparent;\n border-color: var(--ic-action-chip-outlined-border-default);\n\n &.non-transparent {\n background-color: var(--ic-action-chip-outlined-background-default);\n }\n\n &:hover {\n --icon-color: var(--ic-action-chip-outlined-icon-hover);\n --text-color: var(--ic-action-chip-outlined-label-hover);\n\n background-color: var(--ic-action-chip-outlined-background-hover);\n border-color: var(--ic-action-chip-outlined-border-hover);\n }\n\n &:active {\n --icon-color: var(--ic-action-chip-outlined-icon-pressed);\n --text-color: var(--ic-action-chip-outlined-label-pressed);\n\n background-color: var(--ic-action-chip-outlined-background-pressed);\n border-color: var(--ic-action-chip-outlined-border-pressed);\n }\n}\n\n.monochrome {\n &.filled {\n background-color: var(\n --ic-action-chip-monochrome-filled-background-default\n );\n\n &:hover {\n background-color: var(\n --ic-action-chip-monochrome-filled-background-hover\n );\n }\n\n &:active {\n background-color: var(\n --ic-action-chip-monochrome-filled-background-pressed\n );\n }\n }\n\n &.outlined {\n --icon-color: var(--ic-action-chip-monochrome-outlined-icon);\n --text-color: var(--ic-action-chip-monochrome-outlined-label);\n\n border-color: var(--ic-action-chip-monochrome-outlined-border-default);\n\n &.non-transparent {\n background-color: var(\n --ic-action-chip-monochrome-outlined-background-default\n );\n }\n\n &:hover {\n --icon-color: var(--ic-action-chip-monochrome-outlined-icon-hover);\n --text-color: var(--ic-action-chip-monochrome-outlined-label-hover);\n\n background-color: var(\n --ic-action-chip-monochrome-outlined-background-hover\n );\n border-color: var(--ic-action-chip-monochrome-outlined-border-hover);\n }\n\n &:active {\n --icon-color: var(--ic-action-chip-monochrome-outlined-icon-pressed);\n --text-color: var(--ic-action-chip-monochrome-outlined-label-pressed);\n\n background-color: var(\n --ic-action-chip-monochrome-outlined-background-pressed\n );\n border-color: var(--ic-action-chip-monochrome-outlined-border-pressed);\n }\n }\n}\n\n.disabled {\n --icon-color: var(--ic-action-chip-icon-disabled) !important;\n --text-color: var(--ic-action-chip-label-disabled) !important;\n\n background-color: var(--ic-action-chip-background-disabled) !important;\n cursor: default;\n\n &.outlined {\n border-color: var(--ic-action-chip-outlined-border-disabled) !important;\n border-style: dashed;\n\n &:not(.non-transparent) {\n background-color: transparent !important;\n }\n }\n}\n\n.label {\n padding: 0 var(--ic-space-xs);\n}\n\n.icon {\n box-sizing: border-box;\n color: var(--icon-color);\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n padding: var(--ic-space-xxxs);\n}\n\n.open-in-new-icon {\n box-sizing: border-box;\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n.open-in-new-icon > svg {\n fill: var(--icon-color);\n height: inherit;\n width: inherit;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .chip {\n transition: var(--ic-easing-transition-fast);\n }\n}\n\n@media (forced-colors: active) {\n .chip {\n border: var(--ic-border-hc);\n\n &.disabled {\n --text-color: GrayText;\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n border-color: GrayText;\n\n svg,\n ::slotted(svg) {\n fill: GrayText;\n }\n }\n\n &:focus {\n border-color: Highlight;\n outline: none;\n }\n }\n}\n';const h=s;const b=class{constructor(e){n(this,e);this.disabled=false;this.download=false;this.monochrome=false;this.size="medium";this.theme="inherit";this.transparentBackground=true;this.type="button";this.variant="filled"}watchDisabledHandler(){t(this.disabled,this.el)}disconnectedCallback(){var n;(n=this.hostMutationObserver)===null\|\|n===void 0?void 0:n.disconnect()}componentWillLoad(){t(this.disabled,this.el)}componentDidLoad(){a([{prop:this.label,propName:"label"}],"Chip");this.hostMutationObserver=new MutationObserver((n=>c(n,["icon","badge"],this)));this.hostMutationObserver.observe(this.el,{childList:true})}async setFocus(){var n;(n=this.chipEl)===null\|\|n===void 0?void 0:n.focus()}render(){const{disabled:n,download:i,form:t,formaction:a,formenctype:c,formmethod:s,formnovalidate:h,formtarget:b,href:p,hreflang:m,label:u,monochrome:f,referrerpolicy:g,rel:v,size:x,target:y,theme:k,transparentBackground:w,type:z,variant:C}=this;const E=p?"a":"button";const S=E==="button";const I=S?{disabled:n,form:t,formaction:a,formenctype:c,formmethod:s,formnovalidate:h,formtarget:b,type:z}:{download:i!==false?i:null,href:p,hreflang:m,referrerpolicy:g,rel:v,target:y};return e(o,{key:"2c65125774e7ce4fc9cb0d447e0ebff984caad5a",class:{[`ic-theme-${k}`]:k!=="inherit"}},e(E,Object.assign({key:"af57a8bb5d0b29b4ff1023747bc0d4ca3824af73",class:{chip:true,disabled:S&&n,monochrome:f,"non-transparent":C==="outlined"&&!w,[`${x}`]:true,[`${C}`]:true},ref:n=>this.chipEl=n},I),d(this.el,"icon")&&e("div",{key:"755a2318e2968614423a5b88b2831e259caef7e3",class:"icon"},e("slot",{key:"4137b19dc8fc2be40a7ccf696f820e30c1b668b0",name:"icon"})),e("ic-typography",{key:"2b8615d3bce8b9b0d4b5e89cceac2b97b8d95105",variant:"label",class:{label:true,"in-ag-grid":l(this.el)}},e("span",{key:"3f5d55931b36640b30b472fcc4febecb6d502189"},u)),!S&&y==="_blank"&&e("span",{key:"d0c2331424af931db24f5d9fe2dc3500bf31db46",class:"open-in-new-icon",innerHTML:r}),d(this.el,"badge")&&e("slot",{key:"b0451850fd5b42f4120b7fa6e943332d64e52690",name:"badge"})))}static get delegatesFocus(){return true}get el(){return i(this)}static get watchers(){return{disabled:["watchDisabledHandler"]}}};b.style=h;export{b as ic_action_chip};
2	+ //# sourceMappingURL=p-8684efeb.entry.js.map

package/dist/core/{p-fc3b1155.entry.js.map → p-8684efeb.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["icActionChipCss","IcActionChipStyle0","ActionChip","constructor","hostRef","this","disabled","download","monochrome","size","theme","transparentBackground","type","variant","watchDisabledHandler","removeDisabledFalse","el","disconnectedCallback","_a","hostMutationObserver","disconnect","componentWillLoad","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","MutationObserver","mutationList","renderDynamicChildSlots","observe","childList","setFocus","chipEl","focus","render","form","formaction","formenctype","formmethod","formnovalidate","formtarget","href","hreflang","referrerpolicy","rel","target","TagType","isButtonElement","chipAttrs","h","Host","key","class","Object","assign","chip","ref","isSlotUsed","name","isElInAGGrid","innerHTML","OpenInNew"],"sources":["src/components/ic-action-chip/ic-action-chip.css?tag=ic-action-chip&encapsulation=shadow","src/components/ic-action-chip/ic-action-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n}\n\n.chip {\n --icon-color: var(--ic-action-chip-filled-icon);\n --text-color: var(--ic-action-chip-filled-label);\n --ic-typography-color: var(--text-color);\n\n align-items: center;\n background-color: var(--ic-action-chip-filled-background-default);\n border: var(--ic-border-width) solid transparent;\n border-radius: var(--ic-space-md);\n color: var(--text-color);\n cursor: pointer;\n display: flex;\n padding: calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xxs);\n position: relative;\n text-decoration: none;\n\n &:hover {\n background-color: var(--ic-action-chip-filled-background-hover);\n }\n\n &:active {\n background-color: var(--ic-action-chip-filled-background-pressed);\n }\n\n &:focus {\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n }\n}\n\n.small {\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n padding: var(--ic-space-1px) var(--ic-space-xxxs);\n}\n\n.large {\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px)) var(--ic-space-xs);\n}\n\n.outlined {\n --icon-color: var(--ic-action-chip-outlined-icon);\n --text-color: var(--ic-action-chip-outlined-label);\n\n background-color: transparent;\n border-color: var(--ic-action-chip-outlined-border-default);\n\n &.non-transparent {\n background-color: var(--ic-action-chip-outlined-background-default);\n }\n\n &:hover {\n --icon-color: var(--ic-action-chip-outlined-icon-hover);\n --text-color: var(--ic-action-chip-outlined-label-hover);\n\n background-color: var(--ic-action-chip-outlined-background-hover);\n border-color: var(--ic-action-chip-outlined-border-hover);\n }\n\n &:active {\n --icon-color: var(--ic-action-chip-outlined-icon-pressed);\n --text-color: var(--ic-action-chip-outlined-label-pressed);\n\n background-color: var(--ic-action-chip-outlined-background-pressed);\n border-color: var(--ic-action-chip-outlined-border-pressed);\n }\n}\n\n.monochrome {\n &.filled {\n background-color: var(\n --ic-action-chip-monochrome-filled-background-default\n );\n\n &:hover {\n background-color: var(\n --ic-action-chip-monochrome-filled-background-hover\n );\n }\n\n &:active {\n background-color: var(\n --ic-action-chip-monochrome-filled-background-pressed\n );\n }\n }\n\n &.outlined {\n --icon-color: var(--ic-action-chip-monochrome-outlined-icon);\n --text-color: var(--ic-action-chip-monochrome-outlined-label);\n\n border-color: var(--ic-action-chip-monochrome-outlined-border-default);\n\n &.non-transparent {\n background-color: var(\n --ic-action-chip-monochrome-outlined-background-default\n );\n }\n\n &:hover {\n --icon-color: var(--ic-action-chip-monochrome-outlined-icon-hover);\n --text-color: var(--ic-action-chip-monochrome-outlined-label-hover);\n\n background-color: var(\n --ic-action-chip-monochrome-outlined-background-hover\n );\n border-color: var(--ic-action-chip-monochrome-outlined-border-hover);\n }\n\n &:active {\n --icon-color: var(--ic-action-chip-monochrome-outlined-icon-pressed);\n --text-color: var(--ic-action-chip-monochrome-outlined-label-pressed);\n\n background-color: var(\n --ic-action-chip-monochrome-outlined-background-pressed\n );\n border-color: var(--ic-action-chip-monochrome-outlined-border-pressed);\n }\n }\n}\n\n.disabled {\n --icon-color: var(--ic-action-chip-icon-disabled) !important;\n --text-color: var(--ic-action-chip-label-disabled) !important;\n\n background-color: var(--ic-action-chip-background-disabled) !important;\n cursor: default;\n\n &.outlined {\n border-color: var(--ic-action-chip-outlined-border-disabled) !important;\n border-style: dashed;\n\n &:not(.non-transparent) {\n background-color: transparent !important;\n }\n }\n}\n\n.label {\n padding: 0 var(--ic-space-xs);\n}\n\n.icon {\n box-sizing: border-box;\n color: var(--icon-color);\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n padding: var(--ic-space-xxxs);\n}\n\n.open-in-new-icon {\n box-sizing: border-box;\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n.open-in-new-icon > svg {\n fill: var(--icon-color);\n height: inherit;\n width: inherit;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .chip {\n transition: var(--ic-easing-transition-fast);\n }\n}\n\n@media (forced-colors: active) {\n .chip {\n border: var(--ic-border-hc);\n\n &.disabled {\n --text-color: GrayText;\n\n appearance: none;\n border-color: GrayText;\n\n svg,\n ::slotted(svg) {\n fill: GrayText;\n }\n }\n\n &:focus {\n border-color: Highlight;\n outline: none;\n }\n }\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from \"@stencil/core\";\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport {\n isElInAGGrid,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcEmphasisType, IcSizes, IcThemeMode } from \"../../utils/types\";\nimport { IcButtonTypes } from \"../ic-button/ic-button.types\";\n\n/*\n @slot badge - Badge component overlaying the top right of the chip.\n * @slot icon - Content will be rendered at the start of the chip.\n /\n@Component({\n tag: \"ic-action-chip\",\n styleUrl: \"ic-action-chip.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ActionChip {\n private chipEl?: HTMLButtonElement \| HTMLAnchorElement;\n private hostMutationObserver?: MutationObserver;\n\n @Element() el: HTMLIcActionChipElement;\n\n /\n If `true`, the chip will appear disabled.\n /\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download: string \| boolean = false;\n\n /\n The <form> element to associate the chip with.\n /\n @Prop() form?: string;\n\n /\n The URL that processes the information submitted by the chip. It overrides the action attribute of the chip's form owner. Does nothing if there is no form owner.\n /\n @Prop() formaction?: string;\n\n /\n The way the submitted form data is encoded.\n /\n @Prop() formenctype?: string;\n\n /\n The HTTP method used to submit the form.\n /\n @Prop() formmethod?: string;\n\n /\n If `true`, the form will not be validated when submitted.\n /\n @Prop() formnovalidate?: boolean;\n\n /\n The place to display the response from submitting the form. It overrides the target attribute of the chip's form owner.\n /\n @Prop() formtarget?: string;\n\n /\n The URL that the link points to. This will render the chip as an \"a\" tag.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n The text rendered within the chip.\n /\n @Prop() label!: string;\n\n /\n If `true`, the button will display as monochromatic in either `light` or `dark` theme.\n /\n @Prop() monochrome = false;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n The size of the chip.\n /\n @Prop() size: IcSizes = \"medium\";\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n\n /\n Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.\n /\n @Prop() transparentBackground = true;\n\n /\n The type of the chip.\n /\n @Prop() type: IcButtonTypes = \"button\";\n\n /\n The emphasis of the chip.\n /\n @Prop() variant: IcEmphasisType = \"filled\";\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Chip\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, [\"icon\", \"badge\"], this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n /\n Sets focus on the chip.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.chipEl?.focus();\n }\n\n render() {\n const {\n disabled,\n download,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n href,\n hreflang,\n label,\n monochrome,\n referrerpolicy,\n rel,\n size,\n target,\n theme,\n transparentBackground,\n type,\n variant,\n } = this;\n\n const TagType = href ? \"a\" : \"button\";\n const isButtonElement = TagType === \"button\";\n\n const chipAttrs = isButtonElement\n ? {\n disabled,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n type,\n }\n : {\n download: download !== false ? download : null,\n href,\n hreflang,\n referrerpolicy,\n rel,\n target,\n };\n\n return (\n <Host\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <TagType\n class={{\n chip: true,\n disabled: isButtonElement && disabled,\n monochrome,\n \"non-transparent\": variant === \"outlined\" && !transparentBackground,\n [`${size}`]: true,\n [`${variant}`]: true,\n }}\n ref={(el) => (this.chipEl = el)}\n {...chipAttrs}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"label\"\n class={{ label: true, \"in-ag-grid\": isElInAGGrid(this.el) }}\n >\n <span>{label}</span>\n </ic-typography>\n {!isButtonElement && target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </TagType>\n </Host>\n );\n }\n}\n"],"mappings":"6JAAA,MAAMA,EAAkB,wsYACxB,MAAAC,EAAeD,E,MC8BFE,EAAU,MAPvB,WAAAC,CAAAC,G,UAgBUC,KAAAC,SAAW,MASXD,KAAAE,SAA6B,MAkD7BF,KAAAG,WAAa,MAebH,KAAAI,KAAgB,SAUhBJ,KAAAK,MAAqB,UAKrBL,KAAAM,sBAAwB,KAKxBN,KAAAO,KAAsB,SAKtBP,KAAAQ,QAA0B,Q,CAjGlC,oBAAAC,GACEC,EAAoBV,KAAKC,SAAUD,KAAKW,G,CAkG1C,oBAAAC,G,OACEC,EAAAb,KAAKc,wBAAoB,MAAAD,SAAA,SAAAA,EAAEE,Y,CAG7B,iBAAAC,GACEN,EAAoBV,KAAKC,SAAUD,KAAKW,G,CAG1C,gBAAAM,GACEC,EACE,CAAC,CAAEC,KAAMnB,KAAKoB,MAAOC,SAAU,UAC/B,QAGFrB,KAAKc,qBAAuB,IAAIQ,kBAAkBC,GAChDC,EAAwBD,EAAc,CAAC,OAAQ,SAAUvB,QAE3DA,KAAKc,qBAAqBW,QAAQzB,KAAKW,GAAI,CACzCe,UAAW,M,CAQf,cAAMC,G,OACJd,EAAAb,KAAK4B,UAAM,MAAAf,SAAA,SAAAA,EAAEgB,O,CAGf,MAAAC,GACE,MAAM7B,SACJA,EAAQC,SACRA,EAAQ6B,KACRA,EAAIC,WACJA,EAAUC,YACVA,EAAWC,WACXA,EAAUC,eACVA,EAAcC,WACdA,EAAUC,KACVA,EAAIC,SACJA,EAAQlB,MACRA,EAAKjB,WACLA,EAAUoC,eACVA,EAAcC,IACdA,EAAGpC,KACHA,EAAIqC,OACJA,EAAMpC,MACNA,EAAKC,sBACLA,EAAqBC,KACrBA,EAAIC,QACJA,GACER,KAEJ,MAAM0C,EAAUL,EAAO,IAAM,SAC7B,MAAMM,EAAkBD,IAAY,SAEpC,MAAME,EAAYD,EACd,CACE1C,WACA8B,OACAC,aACAC,cACAC,aACAC,iBACAC,aACA7B,QAEF,CACEL,SAAUA,IAAa,MAAQA,EAAW,KAC1CmC,OACAC,WACAC,iBACAC,MACAC,UAGN,OACEI,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,CAAC,YAAY3C,KAAUA,IAAU,YAGnCwC,EAACH,EAAOO,OAAAC,OAAA,CAAAH,IAAA,2CACNC,MAAO,CACLG,KAAM,KACNlD,SAAU0C,GAAmB1C,EAC7BE,aACA,kBAAmBK,IAAY,aAAeF,EAC9C,CAAC,GAAGF,KAAS,KACb,CAAC,GAAGI,KAAY,MAElB4C,IAAMzC,GAAQX,KAAK4B,OAASjB,GACxBiC,GAEHS,EAAWrD,KAAKW,GAAI,SACnBkC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,UAGfT,EAAA,iBAAAE,IAAA,2CACEvC,QAAQ,QACRwC,MAAO,CAAE5B,MAAO,KAAM,aAAcmC,EAAavD,KAAKW,MAEtDkC,EAAA,QAAAE,IAAA,4CAAO3B,KAEPuB,GAAmBF,IAAW,UAC9BI,EAAA,QAAAE,IAAA,2CAAMC,MAAM,mBAAmBQ,UAAWC,IAE3CJ,EAAWrD,KAAKW,GAAI,UAAYkC,EAAA,QAAAE,IAAA,2CAAMO,KAAK,W","ignoreList":[]}
1	+ {"version":3,"names":["icActionChipCss","IcActionChipStyle0","ActionChip","constructor","hostRef","this","disabled","download","monochrome","size","theme","transparentBackground","type","variant","watchDisabledHandler","removeDisabledFalse","el","disconnectedCallback","_a","hostMutationObserver","disconnect","componentWillLoad","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","MutationObserver","mutationList","renderDynamicChildSlots","observe","childList","setFocus","chipEl","focus","render","form","formaction","formenctype","formmethod","formnovalidate","formtarget","href","hreflang","referrerpolicy","rel","target","TagType","isButtonElement","chipAttrs","h","Host","key","class","Object","assign","chip","ref","isSlotUsed","name","isElInAGGrid","innerHTML","OpenInNew"],"sources":["src/components/ic-action-chip/ic-action-chip.css?tag=ic-action-chip&encapsulation=shadow","src/components/ic-action-chip/ic-action-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n}\n\n.chip {\n --icon-color: var(--ic-action-chip-filled-icon);\n --text-color: var(--ic-action-chip-filled-label);\n --ic-typography-color: var(--text-color);\n\n align-items: center;\n background-color: var(--ic-action-chip-filled-background-default);\n border: var(--ic-border-width) solid transparent;\n border-radius: var(--ic-space-md);\n color: var(--text-color);\n cursor: pointer;\n display: flex;\n padding: calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xxs);\n position: relative;\n text-decoration: none;\n\n &:hover {\n background-color: var(--ic-action-chip-filled-background-hover);\n }\n\n &:active {\n background-color: var(--ic-action-chip-filled-background-pressed);\n }\n\n &:focus {\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n }\n}\n\n.small {\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n padding: var(--ic-space-1px) var(--ic-space-xxxs);\n}\n\n.large {\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px)) var(--ic-space-xs);\n}\n\n.outlined {\n --icon-color: var(--ic-action-chip-outlined-icon);\n --text-color: var(--ic-action-chip-outlined-label);\n\n background-color: transparent;\n border-color: var(--ic-action-chip-outlined-border-default);\n\n &.non-transparent {\n background-color: var(--ic-action-chip-outlined-background-default);\n }\n\n &:hover {\n --icon-color: var(--ic-action-chip-outlined-icon-hover);\n --text-color: var(--ic-action-chip-outlined-label-hover);\n\n background-color: var(--ic-action-chip-outlined-background-hover);\n border-color: var(--ic-action-chip-outlined-border-hover);\n }\n\n &:active {\n --icon-color: var(--ic-action-chip-outlined-icon-pressed);\n --text-color: var(--ic-action-chip-outlined-label-pressed);\n\n background-color: var(--ic-action-chip-outlined-background-pressed);\n border-color: var(--ic-action-chip-outlined-border-pressed);\n }\n}\n\n.monochrome {\n &.filled {\n background-color: var(\n --ic-action-chip-monochrome-filled-background-default\n );\n\n &:hover {\n background-color: var(\n --ic-action-chip-monochrome-filled-background-hover\n );\n }\n\n &:active {\n background-color: var(\n --ic-action-chip-monochrome-filled-background-pressed\n );\n }\n }\n\n &.outlined {\n --icon-color: var(--ic-action-chip-monochrome-outlined-icon);\n --text-color: var(--ic-action-chip-monochrome-outlined-label);\n\n border-color: var(--ic-action-chip-monochrome-outlined-border-default);\n\n &.non-transparent {\n background-color: var(\n --ic-action-chip-monochrome-outlined-background-default\n );\n }\n\n &:hover {\n --icon-color: var(--ic-action-chip-monochrome-outlined-icon-hover);\n --text-color: var(--ic-action-chip-monochrome-outlined-label-hover);\n\n background-color: var(\n --ic-action-chip-monochrome-outlined-background-hover\n );\n border-color: var(--ic-action-chip-monochrome-outlined-border-hover);\n }\n\n &:active {\n --icon-color: var(--ic-action-chip-monochrome-outlined-icon-pressed);\n --text-color: var(--ic-action-chip-monochrome-outlined-label-pressed);\n\n background-color: var(\n --ic-action-chip-monochrome-outlined-background-pressed\n );\n border-color: var(--ic-action-chip-monochrome-outlined-border-pressed);\n }\n }\n}\n\n.disabled {\n --icon-color: var(--ic-action-chip-icon-disabled) !important;\n --text-color: var(--ic-action-chip-label-disabled) !important;\n\n background-color: var(--ic-action-chip-background-disabled) !important;\n cursor: default;\n\n &.outlined {\n border-color: var(--ic-action-chip-outlined-border-disabled) !important;\n border-style: dashed;\n\n &:not(.non-transparent) {\n background-color: transparent !important;\n }\n }\n}\n\n.label {\n padding: 0 var(--ic-space-xs);\n}\n\n.icon {\n box-sizing: border-box;\n color: var(--icon-color);\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n padding: var(--ic-space-xxxs);\n}\n\n.open-in-new-icon {\n box-sizing: border-box;\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n.open-in-new-icon > svg {\n fill: var(--icon-color);\n height: inherit;\n width: inherit;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .chip {\n transition: var(--ic-easing-transition-fast);\n }\n}\n\n@media (forced-colors: active) {\n .chip {\n border: var(--ic-border-hc);\n\n &.disabled {\n --text-color: GrayText;\n\n appearance: none;\n border-color: GrayText;\n\n svg,\n ::slotted(svg) {\n fill: GrayText;\n }\n }\n\n &:focus {\n border-color: Highlight;\n outline: none;\n }\n }\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from \"@stencil/core\";\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport {\n isElInAGGrid,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcEmphasisType, IcSizes, IcThemeMode } from \"../../utils/types\";\nimport { IcButtonTypes } from \"../ic-button/ic-button.types\";\n\n/*\n @slot badge - Badge component overlaying the top right of the chip.\n * @slot icon - Content will be rendered at the start of the chip.\n /\n@Component({\n tag: \"ic-action-chip\",\n styleUrl: \"ic-action-chip.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ActionChip {\n private chipEl?: HTMLButtonElement \| HTMLAnchorElement;\n private hostMutationObserver?: MutationObserver;\n\n @Element() el: HTMLIcActionChipElement;\n\n /\n If `true`, the chip will appear disabled.\n /\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download: string \| boolean = false;\n\n /\n The <form> element to associate the chip with.\n /\n @Prop() form?: string;\n\n /\n The URL that processes the information submitted by the chip. It overrides the action attribute of the chip's form owner. Does nothing if there is no form owner.\n /\n @Prop() formaction?: string;\n\n /\n The way the submitted form data is encoded.\n /\n @Prop() formenctype?: string;\n\n /\n The HTTP method used to submit the form.\n /\n @Prop() formmethod?: string;\n\n /\n If `true`, the form will not be validated when submitted.\n /\n @Prop() formnovalidate?: boolean;\n\n /\n The place to display the response from submitting the form. It overrides the target attribute of the chip's form owner.\n /\n @Prop() formtarget?: string;\n\n /\n The URL that the link points to. This will render the chip as an \"a\" tag.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n The text rendered within the chip.\n /\n @Prop() label!: string;\n\n /\n If `true`, the button will display as monochromatic in either `light` or `dark` theme.\n /\n @Prop() monochrome = false;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n The size of the chip.\n /\n @Prop() size: IcSizes = \"medium\";\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n\n /\n Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.\n /\n @Prop() transparentBackground = true;\n\n /\n The type of the chip.\n /\n @Prop() type: IcButtonTypes = \"button\";\n\n /\n The emphasis of the chip.\n /\n @Prop() variant: IcEmphasisType = \"filled\";\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Chip\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, [\"icon\", \"badge\"], this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n /\n Sets focus on the chip.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.chipEl?.focus();\n }\n\n render() {\n const {\n disabled,\n download,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n href,\n hreflang,\n label,\n monochrome,\n referrerpolicy,\n rel,\n size,\n target,\n theme,\n transparentBackground,\n type,\n variant,\n } = this;\n\n const TagType = href ? \"a\" : \"button\";\n const isButtonElement = TagType === \"button\";\n\n const chipAttrs = isButtonElement\n ? {\n disabled,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n type,\n }\n : {\n download: download !== false ? download : null,\n href,\n hreflang,\n referrerpolicy,\n rel,\n target,\n };\n\n return (\n <Host\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <TagType\n class={{\n chip: true,\n disabled: isButtonElement && disabled,\n monochrome,\n \"non-transparent\": variant === \"outlined\" && !transparentBackground,\n [`${size}`]: true,\n [`${variant}`]: true,\n }}\n ref={(el) => (this.chipEl = el)}\n {...chipAttrs}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"label\"\n class={{ label: true, \"in-ag-grid\": isElInAGGrid(this.el) }}\n >\n <span>{label}</span>\n </ic-typography>\n {!isButtonElement && target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </TagType>\n </Host>\n );\n }\n}\n"],"mappings":"qLAAA,MAAMA,EAAkB,wsYACxB,MAAAC,EAAeD,E,MC8BFE,EAAU,MAPvB,WAAAC,CAAAC,G,UAgBUC,KAAAC,SAAW,MASXD,KAAAE,SAA6B,MAkD7BF,KAAAG,WAAa,MAebH,KAAAI,KAAgB,SAUhBJ,KAAAK,MAAqB,UAKrBL,KAAAM,sBAAwB,KAKxBN,KAAAO,KAAsB,SAKtBP,KAAAQ,QAA0B,Q,CAjGlC,oBAAAC,GACEC,EAAoBV,KAAKC,SAAUD,KAAKW,G,CAkG1C,oBAAAC,G,OACEC,EAAAb,KAAKc,wBAAoB,MAAAD,SAAA,SAAAA,EAAEE,Y,CAG7B,iBAAAC,GACEN,EAAoBV,KAAKC,SAAUD,KAAKW,G,CAG1C,gBAAAM,GACEC,EACE,CAAC,CAAEC,KAAMnB,KAAKoB,MAAOC,SAAU,UAC/B,QAGFrB,KAAKc,qBAAuB,IAAIQ,kBAAkBC,GAChDC,EAAwBD,EAAc,CAAC,OAAQ,SAAUvB,QAE3DA,KAAKc,qBAAqBW,QAAQzB,KAAKW,GAAI,CACzCe,UAAW,M,CAQf,cAAMC,G,OACJd,EAAAb,KAAK4B,UAAM,MAAAf,SAAA,SAAAA,EAAEgB,O,CAGf,MAAAC,GACE,MAAM7B,SACJA,EAAQC,SACRA,EAAQ6B,KACRA,EAAIC,WACJA,EAAUC,YACVA,EAAWC,WACXA,EAAUC,eACVA,EAAcC,WACdA,EAAUC,KACVA,EAAIC,SACJA,EAAQlB,MACRA,EAAKjB,WACLA,EAAUoC,eACVA,EAAcC,IACdA,EAAGpC,KACHA,EAAIqC,OACJA,EAAMpC,MACNA,EAAKC,sBACLA,EAAqBC,KACrBA,EAAIC,QACJA,GACER,KAEJ,MAAM0C,EAAUL,EAAO,IAAM,SAC7B,MAAMM,EAAkBD,IAAY,SAEpC,MAAME,EAAYD,EACd,CACE1C,WACA8B,OACAC,aACAC,cACAC,aACAC,iBACAC,aACA7B,QAEF,CACEL,SAAUA,IAAa,MAAQA,EAAW,KAC1CmC,OACAC,WACAC,iBACAC,MACAC,UAGN,OACEI,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,CAAC,YAAY3C,KAAUA,IAAU,YAGnCwC,EAACH,EAAOO,OAAAC,OAAA,CAAAH,IAAA,2CACNC,MAAO,CACLG,KAAM,KACNlD,SAAU0C,GAAmB1C,EAC7BE,aACA,kBAAmBK,IAAY,aAAeF,EAC9C,CAAC,GAAGF,KAAS,KACb,CAAC,GAAGI,KAAY,MAElB4C,IAAMzC,GAAQX,KAAK4B,OAASjB,GACxBiC,GAEHS,EAAWrD,KAAKW,GAAI,SACnBkC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,UAGfT,EAAA,iBAAAE,IAAA,2CACEvC,QAAQ,QACRwC,MAAO,CAAE5B,MAAO,KAAM,aAAcmC,EAAavD,KAAKW,MAEtDkC,EAAA,QAAAE,IAAA,4CAAO3B,KAEPuB,GAAmBF,IAAW,UAC9BI,EAAA,QAAAE,IAAA,2CAAMC,MAAM,mBAAmBQ,UAAWC,IAE3CJ,EAAWrD,KAAKW,GAAI,UAAYkC,EAAA,QAAAE,IAAA,2CAAMO,KAAK,W","ignoreList":[]}

package/dist/core/p-8b99a806.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as i,c as t,h as a,H as e,g as s}from"./p-8e4e97b4.js";import{c as o}from"./p-f074ef5b.js";import{C as n}from"./p-3b185c32.js";import{z as d,f as l,D as r,g as p,i as c,K as h,h as v,o as g,v as m,I as b,e as u}from"./p-b57e59b7.js";import"./p-bddf799a.js";const f=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">\n <path d="M0 0h24v24H0V0z" fill="none" />\n <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />\n <title>menu icon</title>\n</svg>\n`;const y=':host{display:block;--ic-typography-color:currentcolor;--side-navigation-position:fixed;--side-navigation-position-left:0;--side-navigation-position-top:var(--ic-space-xxl);--side-navigation-height:var(--ic-space-xxl);--sm-side-navigation-top-bar-height:3.5rem;--sm-side-navigation-collapsed-labels-width:6rem;--sm-side-navigation-expand-transition-duration:var(\n --ic-transition-duration-slow\n );--side-navigation-width:20rem;--sm-side-navigation-bottom-bar-height:3.5rem;--keyline-lighten:var(--ic-space-1px) solid var(--ic-side-navigation-keyline);--keyline-darken:var(--ic-space-1px) solid var(--ic-state-layer-darken-20);--ic-button-secondary-text-monochrome:var(--ic-brand-text-color);--ic-button-secondary-border-monochrome:var(--ic-brand-text-color);z-index:var(--ic-z-index-side-navigation)}:host>{box-sizing:border-box}.side-navigation{display:flex;flex-direction:column;width:var(--side-navigation-width);color:var(--ic-side-navigation-text);position:var(--side-navigation-position);top:var(--side-navigation-position-top);left:calc(var(--side-navigation-width) -1);bottom:0;background-color:var(--ic-side-navigation-background);z-index:var(--ic-z-index-side-navigation)}:host(.ic-side-navigation-inline) .side-navigation{position:absolute;height:100%}:host(.anchor-right) .side-navigation{right:calc(var(--side-navigation-width) * -1)}.classification-spacing{margin-bottom:var(--ic-space-lg)}.navigation-list{padding:0;margin:0;list-style:none}.side-navigation-inner{background-color:var(--ic-side-navigation-background);display:flex;flex-direction:column;flex:1 1 4rem;overflow:auto}:host(.ic-side-navigation-inline) .side-navigation-inner{flex:1}:host(.xs-menu-open) .side-navigation{transition:left var(--ic-easing-transition-slow);left:0}:host(:has(.xs-menu-open,.xs-menu-close)) ::slotted(ic-navigation-item){--navigation-item-side-nav-right:var(--ic-space-xl)}:host(.xs-menu-close) .side-navigation{left:calc(var(--side-navigation-width) * -1);transition:left var(--ic-easing-transition-slow)}:host(.xs-menu-close) .side-navigation>{visibility:hidden}:host(.anchor-right.xs-menu-open) .side-navigation{right:0;left:auto}:host(.anchor-right.xs-menu-close) .side-navigation{right:calc(var(--side-navigation-width) -1);left:auto;transition:right var(--ic-easing-transition-slow)}.bottom-wrapper{border-top:var(--keyline-lighten);bottom:0;left:0;z-index:2;background-color:var(--ic-side-navigation-background);display:flex;flex-direction:column}:host(.ic-side-navigation-inline) .bottom-wrapper{position:sticky}:host(.ic-side-navigation-dark) .bottom-wrapper{border-top:var(--keyline-darken)}.top-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--side-navigation-height);padding:var(--ic-space-xs);box-sizing:border-box;background-color:var(--ic-side-navigation-background);position:fixed;top:0;left:0;right:0;border-bottom:var(--keyline-lighten);box-shadow:var(--ic-elevation-overlay);z-index:2;overflow:hidden;visibility:visible}:host(.ic-side-navigation-inline) .top-bar{position:absolute}:host(.ic-side-navigation-dark) .top-bar{border-bottom:var(--keyline-darken)}.top-bar.dark a:focus{box-shadow:var(--ic-border-focus)}.app-title-wrapper{display:flex;margin-left:var(--ic-space-xs);border-left:var(--keyline-lighten);padding-left:var(--ic-space-xxs);color:var(--ic-side-navigation-text);align-items:center}:host(.ic-side-navigation-dark) .app-title-wrapper{border-left:var(--keyline-darken)}.app-title-wrapper ic-typography h1{margin:0}@media screen and (min-width: 340px){.app-title-wrapper ic-typography{margin-left:var(--ic-space-xs)}}:host .title-link{display:flex;align-items:center;transition:box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);text-decoration:none;padding:var(--ic-space-xxs);color:var(--ic-side-navigation-text)}:host .title-link:visited,:host .title-link:active{color:var(--ic-side-navigation-text)}slot[name="app-title"]::slotted(a),slot[name="app-icon"]::slotted(a){color:var(--ic-side-navigation-text);outline:none;text-decoration:none;display:flex}slot[name="app-title"]::slotted(ic-typography),slot[name="app-title"]::slotted(a){margin-left:var(--ic-space-xs) !important}slot[name="app-title"]::slotted(a){font:var(--ic-font-subtitle-small)}@media screen and (min-width: 577px){:host(.sm-collapsed) slot[name="app-title"]::slotted(ic-typography),:host(.sm-collapsed) slot[name="app-title"]::slotted(a){position:absolute;left:-9999px;opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.sm-collapsed) slot[name="app-title"]:dir(rtl)::slotted(ic-typography),:host(.sm-collapsed) slot[name="app-title"]:dir(rtl)::slotted(a){right:-9999px}:host(.sm-expanded) slot[name="app-title"]::slotted(a){font:var(--ic-font-h3) !important;font-weight:var(--ic-font-weight-semibold) !important;margin-left:var(--ic-space-xs) !important}}:host .title-link:hover{border-radius:var(--ic-border-radius);background-color:var(--ic-side-navigation-hover)}:host .title-link:active{background-color:var(--ic-side-navigation-pressed)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);background-color:transparent}:host .title-link ic-typography{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.app-title-wrapper ::slotted(svg){fill:var(--ic-side-navigation-text)}.app-icon-container{display:none}.button-label{display:flex;align-items:center}.mobile-top-bar-menu-icon{display:flex}.menu-button{width:6.5rem}.app-status-wrapper{inset:0 var(--ic-space-sm) 0 3.5rem;width:auto;display:flex;gap:var(--ic-space-xs);padding:var(--ic-space-sm) 0;justify-content:flex-end;align-items:flex-end;pointer-events:none;height:-moz-fit-content;height:fit-content;margin:0 var(--ic-space-xs)}.app-status-wrapper .app-version{display:flex;overflow-wrap:break-word;padding-bottom:var(--ic-space-xxs)}.app-status-wrapper .app-status{display:flex;border-radius:1rem;background-color:var(--ic-side-navigation-text);color:var(--ic-side-navigation-status-tag-text);padding:var(--ic-space-xxs) var(--ic-space-lg);min-width:1rem}.app-status-wrapper .app-status-text{overflow-wrap:break-word}:host(.ic-side-navigation-dark) .app-status-wrapper .app-status{--ic-typography-color:var(--ic-architectural-white)}.navigation-landmark-title{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}::slotted(ic-navigation-group){--navigation-group-height:2.75rem;--navigation-group-justify-content:space-between;--navigation-group-hover:var(--ic-side-navigation-hover);--navigation-group-text-hover:var(--ic-side-navigation-text);--navigation-item-child-height:3.5rem;--navigation-item-child-active:var(--ic-action-dark-bg-pressed);--navigation-item-child-color:var(--ic-side-navigation-text);--navigation-group-expand-toggle-padding:0.25rem}::slotted(ic-navigation-item),::slotted(ic-navigation-group){--navigation-item-justify-content:flex-start;--navigation-item-min-height:56px;--navigation-item-height:auto}.bottom-side-nav{position:relative;align-content:flex-end;min-height:var(--sm-side-navigation-top-bar-height)}.bottom-side-nav ic-divider{position:absolute;top:0}.primary-navigation{flex:1;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}.primary-navigation::-webkit-scrollbar{display:none}.primary-navigation,.secondary-navigation{overflow-x:hidden}.bottom-side-nav .menu-expand-button{position:absolute;display:none}.menu-visibility-visible{visibility:visible;width:100%}.app-title-show{min-width:15.5rem}:host(.side-display){display:flex;flex-direction:column;height:100vh;position:var(--side-navigation-position);left:0;top:0;bottom:0}:host(.side-display) .app-icon-container{height:40px;display:flex;align-items:center}:host(.side-display) .top-bar{--side-navigation-height:var(--sm-side-navigation-top-bar-height);position:relative;padding:0;box-shadow:none}:host(.ic-side-navigation-inline.side-display) .top-bar{position:sticky}:host(.anchor-right.side-display) .top-bar{box-shadow:0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%)}:host(.anchor-right.side-display) .bottom-wrapper{box-shadow:0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%)}:host(.side-display) .side-navigation,:host(.side-display) .top-bar{width:var(--sm-side-navigation-top-bar-height)}:host(.sm-collapsed.side-display){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed.collapsed-labels.side-display){width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-expanded.side-display){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow);box-shadow:var(--ic-elevation-overlay)}:host(.side-display) .side-navigation{--side-navigation-position-top:0;flex:1;position:relative;top:auto;left:auto;bottom:auto}:host(.ic-side-navigation-inline.side-display) .side-navigation{position:relative}:host(.anchor-right.side-display) .side-navigation{left:auto;right:0}:host(.side-display) .app-title-wrapper{margin-left:0;border-left:none;padding:var(--ic-space-xs) var(--ic-space-sm)}:host(.side-display) .app-title-wrapper ::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg)}:host(.side-display) .app-title-wrapper ic-typography{font-weight:var(--ic-font-weight-semibold)}:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography{position:absolute;left:-9999px;opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography:dir(rtl){right:-9999px}:host(.sm-expanded.side-display) ic-typography{position:relative;left:0}:host(.sm-expanded.side-display) :is(.side-navigation,.top-bar){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed.side-display) :is(.side-navigation,.top-bar){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.anchor-right.sm-expanded.side-display) :is(.side-navigation,.top-bar){left:auto;right:0}:host(.side-display) .app-status-wrapper,:host(.sm-collapsed.side-display) .app-status-wrapper{display:none;margin-left:0}:host(.sm-expanded.side-display) .app-status-wrapper{display:flex;max-width:16rem;margin-right:calc(var(--ic-space-xxxs) + var(--ic-space-xs))}:host(.side-display) .bottom-side-nav{justify-items:flex-end;align-items:flex-end;justify-content:flex-end;display:flex;outline:none}:host(.side-display) .bottom-side-nav .menu-expand-button{padding-left:var(--ic-space-md);height:var(--sm-side-navigation-top-bar-height);width:100%;color:var(--ic-side-navigation-text);background-color:transparent;outline:var(--ic-hc-focus-outline);border:none;cursor:pointer;display:flex;transition:var(--ic-easing-transition-fast)}:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button{height:100%}:host(.side-display) .bottom-side-nav .menu-expand-button svg{justify-items:flex-start;align-self:center;display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.side-display) .bottom-side-nav .menu-expand-button:hover{background-color:var(--ic-side-navigation-hover)}:host(.side-display) .bottom-side-nav .menu-expand-button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1);transition:transform var(--ic-easing-transition-slow)}:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1);transition:transform var(--ic-easing-transition-slow);align-self:flex-end;margin-bottom:0.875rem}:host(.anchor-right.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1)}:host(.anchor-right.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1)}:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item){--navigation-item-label-opacity:1}:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item),:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group){--navigation-item-label-opacity:0;--navigation-item-min-height:3.5rem;--navigation-item-height:3.5rem}:host(.sm-expanded.side-display) ::slotted(ic-navigation-item),:host(.sm-expanded.side-display) ::slotted(ic-navigation-group){--navigation-item-label-opacity:1;--navigation-item-height:auto;--navigation-item-min-height:3.5rem;--navigation-item-width:20rem;--navigation-item-side-nav-right:var(--ic-space-xl);--navigation-group-width:20rem}:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group){--navigation-group-title-position:absolute;--navigation-group-title-position-left:-9999px;--navigation-group-title-opacity:none}:host(.sm-expanded.side-display) ::slotted(ic-navigation-group){--navigation-group-title-position:relative;--navigation-group-title-position-left:0;--navigation-group-expand-toggle-padding:0.25rem;--navigation-group-title-opacity:flex}:host(.sm-collapsed.collapsed-labels.side-display) .side-navigation,:host(.sm-collapsed.collapsed-labels.side-display) .top-bar{width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-collapsed.collapsed-labels.side-display) .menu-expand-button{padding:0}:host(.sm-collapsed.collapsed-labels.side-display) .app-title-wrapper{width:100%;justify-content:center}:host(.sm-collapsed.collapsed-labels.side-display) ::slotted(ic-navigation-group){--navigation-group-justify-content:center;--navigation-item-label-opacity:1;--navigation-group-item-min-width:100%;--navigation-group-expand-toggle-padding:1rem}:host(.collapsed-labels.side-display) .bottom-side-nav .menu-expand-button{justify-content:center}:host(.side-display) .collapsed-icon-labels-start{visibility:hidden;opacity:0}:host(.side-display) .collapsed-icon-labels-end{visibility:visible;opacity:1;transition:visibility 0s, opacity var(--ic-easing-transition-slow)}@media screen and (max-width: 419px){.top-bar{height:var(--side-navigation-height)}.side-navigation{width:100%}}@media screen and (min-width: 340px){.app-icon-container{display:flex}}@media screen and (min-width: 993px){:host(.side-display){position:sticky;left:auto;top:0;bottom:0}:host(.sm-expanded.side-display){box-shadow:none}}@media (forced-colors: active){.side-navigation,.top-bar{border-right:var(--ic-border-hc)}.menu-expand-button{color:Highlight !important}slot[name="app-icon"]::slotted(svg){fill:currentcolor}}';const x=y;const w=class{constructor(e){i(this,e);this.icSideNavExpanded=t(this,"icSideNavExpanded",7);this.ANIMATION_DURATION=parseInt(d("--ic-transition-duration-slow"))\|\|0;this.IC_NAVIGATION_ITEM="ic-navigation-item";this.resizeObserver=null;this.COLLAPSED_ICON_LABELS_END="collapsed-icon-labels-end";this.COLLAPSED_ICON_LABELS_START="collapsed-icon-labels-start";this.deviceSize=l();this.deviceSizeAppTitle=r.S;this.foregroundColor=p();this.hasSecondaryNavigation=false;this.menuExpanded=false;this.menuOpen=false;this.closeOnNavItemClick=false;this.collapsedIconLabels=false;this.disableAutoParentStyling=false;this.disableTopBarBehaviour=false;this.expanded=false;this.href="/";this.inline=false;this.shortAppTitle="";this.static=false;this.emitSideNavigationExpanded=i=>{this.icSideNavExpanded.emit({sideNavExpanded:i.sideNavExpanded,sideNavMobile:!!i.sideNavMobile})};this.toggleMenu=()=>{this.menuOpen=!this.menuOpen;this.setMobileMenuAriaAttributes(this.menuOpen);this.arrangeSlottedNavigationItem(this.menuOpen);this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);this.emitSideNavigationExpanded({sideNavExpanded:this.menuOpen,sideNavMobile:true})};this.setToggleMenuFlyoutMenuVisibility=i=>{var t;const a=(t=this.el.shadowRoot)===null\|\|t===void 0?void 0:t.querySelector("#side-navigation");const e=a.querySelector(".side-navigation-inner");const s=a.querySelector(".bottom-wrapper");const o="menu-visibility-visible";if(i){s.classList.add(o);e.classList.add(o)}else{setTimeout((()=>{e.classList.remove(o);s.classList.remove(o)}),this.ANIMATION_DURATION)}};this.setMobileMenuAriaAttributes=i=>{if(this.menuButton){this.menuButton.setAttribute("aria-expanded",`${i}`);this.menuButton.setAttribute("aria-label",`${i?"Close":"Open"} navigation menu`)}};this.setAndRemoveNoWrapAfterMenuExpanded=()=>{var i;const t=((i=this.el.shadowRoot)===null\|\|i===void 0?void 0:i.querySelector(".title-link ic-typography"))\|\|this.el.querySelector("[slot='app-title']");t===null\|\|t===void 0?void 0:t.classList.add("ic-typography-no-wrap");setTimeout((()=>{t===null\|\|t===void 0?void 0:t.classList.remove("ic-typography-no-wrap")}),this.ANIMATION_DURATION)};this.toggleMenuExpanded=i=>{var t,a,e,s;this.menuExpanded=i;if(this.menuExpanded){this.setAndRemoveNoWrapAfterMenuExpanded();(a=(t=this.el.shadowRoot)===null\|\|t===void 0?void 0:t.querySelector(".app-title-inner-wrapper"))===null\|\|a===void 0?void 0:a.classList.add("app-title-show")}else{this.el.style.setProperty("--navigation-item-width","320px");(s=(e=this.el.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector(".app-title-inner-wrapper"))===null\|\|s===void 0?void 0:s.classList.remove("app-title-show");this.el.addEventListener("transitionend",(i=>{if(i.propertyName==="width"){this.el.style.setProperty("--navigation-item-width",null)}}))}this.arrangeSlottedNavigationItem(this.menuExpanded);this.displayTooltipWithExpandedLongLabel(this.menuExpanded);if(this.collapsedIconLabels){this.animateCollapsedIconLabels()}this.setExpandedButtonHeight();this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded})};this.arrangeSlottedNavigationItem=i=>{const t=this.el.querySelectorAll("ic-navigation-item");t.forEach((t=>{var a;const e=c(t,"navigation-item");const s=t.children[0]&&!t.children[0].getAttribute("slot");if(e\|\|s){let s;if(e){s=t.querySelector("[slot='navigation-item']")}else{s=t.children[0]}const o=document.createElement("div");const n=s===null\|\|s===void 0?void 0:s.querySelector("svg");const d=s===null\|\|s===void 0?void 0:s.querySelector("ic-badge");const l=(a=t.textContent)===null\|\|a===void 0?void 0:a.trim();const r=document.createElement("ic-typography");r.classList.add("ic-typography-label","hydrated","navigation-item-side-nav-slotted-text");o.style.position="relative";o.style.height="var(--ic-space-lg)";n&&o.append(n);d&&o.append(d);if(l){r.textContent=l}if(s){s.textContent="";s.append(o);s.append(r)}if(this.collapsedIconLabels){this.styleSlottedCollapsedIconLabels(!!i,r)}else{this.styleSlottedIconLabels(!!i,r)}}}))};this.styleSlottedCollapsedIconLabels=(i,t)=>{if(i){t.style.marginTop="0";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}else{t.style.marginTop="10px";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}};this.setExpandedButtonHeight=()=>{var i;const t=(i=this.el.shadowRoot)===null\|\|i===void 0?void 0:i.querySelector("#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper");if(t.offsetHeight!==0){this.el.style.setProperty("--sm-side-navigation-bottom-bar-height",`${t.offsetHeight}px`)}};this.styleSlottedIconLabels=(i,t)=>{if(i){t.style.opacity="1";t.style.visibility="visible";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}else{t.style.opacity="0";t.style.visibility="hidden";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}};this.transitionHandler=i=>{var t,a;const e=(t=this.el.shadowRoot)===null\|\|t===void 0?void 0:t.querySelector(".primary-navigation");const s=(a=this.el.shadowRoot)===null\|\|a===void 0?void 0:a.querySelector(".bottom-wrapper > .secondary-navigation");const o=i==="start"?this.COLLAPSED_ICON_LABELS_END:this.COLLAPSED_ICON_LABELS_START;const n=i==="start"?this.COLLAPSED_ICON_LABELS_START:this.COLLAPSED_ICON_LABELS_END;if(e){e.classList.remove(o);e.classList.add(n)}if(s){s.classList.remove(o);s.classList.add(n)}};this.transitionEndHandler=()=>{this.transitionHandler("end")};this.animateCollapsedIconLabels=()=>{this.transitionHandler("start");this.transitionEndHandler();this.el.addEventListener("transitionend",this.transitionEndHandler)};this.paddingIconWidth=i=>{const t=i[0].shadowRoot&&(i[0].shadowRoot.querySelector("ic-tooltip a")\|\|i[0].shadowRoot.querySelector("ic-tooltip div"))\|\|i[0].querySelector("a")\|\|i[0].querySelector("div");const a=i[0].querySelector("svg");if(t&&a){const i={gap:window.getComputedStyle(t).gap,iconWidth:window.getComputedStyle(a).width,paddingLeft:window.getComputedStyle(t).paddingLeft};return Object.values(i).reduce(((i,t)=>i+=parseInt(t)),0)}return 0};this.displayTooltipWithExpandedLongLabel=i=>{let t;if(i){t=setTimeout((()=>{const i=this.el.clientWidth;const t=Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));const a=t.length?this.paddingIconWidth(t):0;t.forEach((t=>{var e,s;const o=((e=t.shadowRoot&&t.shadowRoot.querySelector("ic-tooltip .link ic-typography.ic-typography-label"))===null\|\|e===void 0?void 0:e.scrollWidth)\|\|((s=t.querySelector("ic-typography.ic-typography-label"))===null\|\|s===void 0?void 0:s.scrollWidth);if(o&&o>i-a){t.setAttribute("display-navigation-tooltip","true")}}))}),this.ANIMATION_DURATION)}else{clearTimeout(t);const i=Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));i.forEach((i=>{i.setAttribute("display-navigation-tooltip","false")}))}};this.setMenuExpanded=i=>{this.menuExpanded=i};this.handleNavItemClicked=()=>{if(!this.menuOpen&&this.deviceSize>r.S&&this.menuExpanded){setTimeout((()=>{this.toggleMenuExpanded(false)}),0)}};this.setParentPaddingTop=i=>{var t;(t=this.el.parentElement)===null\|\|t===void 0?void 0:t.style.setProperty("padding-top",i)};this.setParentPaddingLeft=i=>{var t;(t=this.el.parentElement)===null\|\|t===void 0?void 0:t.style.setProperty("padding-left",i)};this.renderAppTitle=i=>{const t=this.deviceSize<=r.S&&!h(this.shortAppTitle);return a("ic-typography",{variant:t\|\|i?"subtitle-small":"h3","aria-label":t?`${this.appTitle} (${this.shortAppTitle})`:undefined},a("h1",null,t?this.shortAppTitle:this.appTitle))};this.resizeObserverCallback=i=>{var t,a,e,s;this.deviceSize=i;const o=i===r.S&&!this.disableTopBarBehaviour;if(!this.disableAutoParentStyling){const i=(a=(t=this.el.shadowRoot)===null\|\|t===void 0?void 0:t.querySelector(".top-bar"))===null\|\|a===void 0?void 0:a.scrollHeight;this.setParentPaddingTop(o?`${i}px`:"0");if(o)this.setParentPaddingLeft("0");if(o&&this.inline){(e=this.el.parentElement)===null\|\|e===void 0?void 0:e.style.setProperty("height",`calc(100% - ${i}px)`)}else if(!o){(s=this.el.parentElement)===null\|\|s===void 0?void 0:s.style.setProperty("height","100%")}}const n=i>r.S\|\|this.disableTopBarBehaviour;if(!this.disableAutoParentStyling){const t=`calc(var(--ic-space-xxl) ${this.collapsedIconLabels?"* 2":"+ var(--ic-space-xs)"})`;if(i>r.L){this.setParentPaddingTop("0");this.setParentPaddingLeft("0")}else if(n&&i<=r.M&&this.static){this.setParentPaddingLeft(t)}else if(n&&i<=r.L){this.setParentPaddingLeft(this.static&&this.menuExpanded?"calc(var(--ic-space-xl) * 10)":t)}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const i=l();this.deviceSizeAppTitle=i;this.resizeObserverCallback(i)}));this.resizeObserver.observe(document.body,{box:"content-box"})};this.setCollapsedIconLabels=()=>{const i=Array.from(this.el.querySelectorAll(this.IC_NAVIGATION_ITEM));i.forEach((i=>{i.setAttribute("collapsed-icon-label","true")}))};this.styleSlottedCollapsedIconLabel=()=>{const i=Array.from(this.el.querySelectorAll(".navigation-item-side-nav-slotted-text"));i.forEach((i=>{var t,a;if((a=(t=i.parentElement)===null\|\|t===void 0?void 0:t.parentElement)===null\|\|a===void 0?void 0:a.classList.contains("navigation-item-side-nav-collapsed-with-label")){i.style.whiteSpace="nowrap";i.style.overflow="hidden";i.style.textOverflow="ellipsis";i.style.marginTop="10px"}}))};this.renderTopBar=({isSDevice:i,foregroundColor:t,menuOpen:e,href:s,isAppNameSubtitleVariant:n})=>{const d=this.appTitle!==""&&u(this.appTitle);const l=c(this.el,"app-title")?"div":"a";const r=l=="a"&&{href:s};return a("div",{class:{"top-bar":true,[this.foregroundColor]:true}},i&&a("nav",{"aria-labelledby":"menu-navigation-toggle-button-landmark","aria-hidden":"false"},a("ic-button",{"aria-label":"Open navigation menu",class:"menu-button",id:"menu-button",variant:"secondary",size:"small","full-width":"true",theme:t=="default"\|\|t=="light"?"light":"dark",monochrome:true,onClick:this.toggleMenu,ariaOwnsId:"side-navigation","aria-haspopup":"true","aria-expanded":"false",ref:i=>this.menuButton=i},a("span",{class:"mobile-top-bar-menu-icon",slot:"left-icon",innerHTML:e?o:f}),e?"Close":"Menu"),a("span",{id:"menu-navigation-toggle-button-landmark",class:"navigation-landmark-title","aria-hidden":"true"},"Navigation menu toggle button")),a("div",{class:"app-title-wrapper"},(d\|\|c(this.el,"app-title"))&&a(l,Object.assign({},r,{class:"title-link"}),a("div",{class:"app-icon-container","aria-hidden":"true"},a("slot",{name:"app-icon"})),a("div",{class:"app-title-inner-wrapper"},c(this.el,"app-title")?a("slot",{name:"app-title"}):this.renderAppTitle(n)))))}}watchExpandedHandler(){this.toggleMenuExpanded(this.expanded)}componentWillLoad(){this.setMenuExpanded(this.expanded);if(this.collapsedIconLabels){this.setCollapsedIconLabels()}this.hasSecondaryNavigation=c(this.el,"secondary-navigation")}componentDidLoad(){this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:this.deviceSize===r.S&&!this.disableTopBarBehaviour});v(this.runResizeObserver);this.styleSlottedCollapsedIconLabel();this.arrangeSlottedNavigationItem(this.menuExpanded);this.displayTooltipWithExpandedLongLabel(this.menuExpanded);this.setExpandedButtonHeight();if(this.closeOnNavItemClick){this.el.addEventListener("navItemClicked",this.handleNavItemClicked)}!c(this.el,"app-title")&&g([{prop:this.appTitle,propName:"app-title"}],"Side Navigation")}disconnectedCallback(){var i;if(this.resizeObserver!==null){this.resizeObserver.disconnect()}(i=this.el)===null\|\|i===void 0?void 0:i.removeEventListener("transitionend",this.transitionEndHandler);if(this.closeOnNavItemClick){this.el.removeEventListener("navItemClicked",this.handleNavItemClicked)}}brandChangeHandler({detail:i}){this.foregroundColor=i.mode}render(){const{appTitle:i,menuOpen:t,foregroundColor:s,menuExpanded:o,href:d,status:l,version:p,collapsedIconLabels:h,inline:v}=this;const g=!this.disableTopBarBehaviour&&this.deviceSize===r.S;const u=this.disableTopBarBehaviour&&this.deviceSize===r.S;const f=this.deviceSize===r.M;const y=this.deviceSize>=r.L;const x=this.deviceSizeAppTitle===r.S;const w=f\|\|u\|\|y&&!this.static;const k={isSDevice:g,foregroundColor:s,menuOpen:t,href:d,isAppNameSubtitleVariant:x,appTitle:i\|\|""};return a(e,{key:"1871b4817a2429ce72b39c00fc3d46bab905c6fc",class:{"xs-menu-open":t&&g,"xs-menu-close":!t&&g,"sm-collapsed":!g&&!o,"sm-expanded":!g&&o,"side-display":this.deviceSize>r.S\|\|!!this.disableTopBarBehaviour,[`ic-side-navigation-${b.Dark}`]:s===b.Dark,["collapsed-labels"]:!g&&!o&&!!h,["ic-side-navigation-inline"]:!!v}},g&&this.renderTopBar(Object.assign({},k)),a("div",{key:"aebfc5addba3dd16ecce70793aca0bb2ab17063c",class:"side-navigation",id:"side-navigation"},!g&&this.renderTopBar(Object.assign({},k)),a("div",{key:"a72db8a874a3e55441f1bb863820f46c0514797e",class:"side-navigation-inner"},c(this.el,"primary-navigation")&&a("nav",{key:"f3f9d819f3d6b28a754fae1d49f7ce11a701bfe8",class:"primary-navigation","aria-labelledby":"primary-navigation-landmark"},a("span",{key:"d955badde7737aef71f05e06628d9d15de29c64b","aria-hidden":"true",class:"navigation-landmark-title",id:"primary-navigation-landmark"},"Primary"),a("ul",{key:"b4f076849b8d539dfa3fe2d585cb3f20ce6182be",class:"navigation-list"},a("slot",{key:"aefe3f024c8d568d18f3258fd544ba2455689e4c",name:"primary-navigation"})))),a("div",{key:"06d0d7c5fdba21f969b7aa003367f0d6bf55c5ad",class:{["bottom-wrapper"]:true,["classification-spacing"]:m()}},c(this.el,"secondary-navigation")&&a("nav",{key:"98ec2710e3a7efb48f1e10e61883bf907809fd42",class:"secondary-navigation","aria-labelledby":"secondary-navigation-landmark"},a("span",{key:"5e5deaff8dcebd21aff6a3d12b8b74a63a1d30af","aria-hidden":"true",class:"navigation-landmark-title",id:"secondary-navigation-landmark"},"Secondary"),a("ul",{key:"fe90d8b0dd6f9eca02cbeff03282d6ceb9c6504c",class:"navigation-list"},a("slot",{key:"e8898037866399513e4d30079dfa22103728822f",name:"secondary-navigation"}))),a("div",{key:"6a6ff5aa39c7043b1086341bb1a6f6282d87e05f",class:"bottom-side-nav"},this.hasSecondaryNavigation&&a("ic-divider",{key:"436be776f4e8b35c22ce667f954496b70ecd9560"}),w&&a("button",{key:"ca535ebc2e5215117ab336d6e121303410ec5c2c",class:"menu-expand-button",innerHTML:n,onClick:()=>this.toggleMenuExpanded(!this.menuExpanded),"aria-label":`${o?"Collapse":"Expand"} side navigation`}),a("div",{key:"8421c8faeb1b0befe65bd8688ba0d1900d412fc2",class:"app-status-wrapper"},l&&a("div",{key:"5c05a7847f5f3bc96c2ffd257dced7e641d44ca5",class:{["app-status"]:true}},a("ic-typography",{key:"573a3ebe74fb8b2ed301781aa92415168a7360a7","aria-label":"app tag",variant:"label-uppercase",class:"app-status-text"},l)),p&&a("ic-typography",{key:"f7da37453fb39e3ca44f79f5780fe42ce7869bb8",variant:"label",class:"app-version","aria-label":"app version"},p))))))}get el(){return s(this)}static get watchers(){return{expanded:["watchExpandedHandler"]}}};w.style=x;export{w as ic_side_navigation};
2	+ //# sourceMappingURL=p-8b99a806.entry.js.map