npm - @ukic/web-components - Versions diffs - 2.21.0 → 2.22.0 - Mend

@ukic/web-components 2.21.0 → 2.22.0

Files changed (105) hide show

package/dist/core/p-4a0acd0f.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["icNavigationItemCss","NavigationItem","this","isInitialRender","displayDefaultNavigationItem","href","hreflang","target","rel","referrerpolicy","download","label","variant","isTopNavChild","inTopNavSideMenu","ChevronIconComponent","expandable","h","class","svg","innerHTML","chevronIcon","IconComponent","el","querySelector","name","isSlotUsed","referrerPolicy","ref","itemEl","part","OpenInNew","tabindex","topNavResizedHandler","detail","size","deviceSize","_a","parentEl","customMobileBreakpoint","DEVICE_SIZES","L","sideNavExpandHandler","sideNavExpanded","sideNavMobile","isSideNavMobile","handleBlur","relatedTarget","tagName","childBlur","emit","handleClick","navItemClicked","generateTooltipLabel","navigationSlot","textContent","children","renderNavigationItemContent","XL","getThemeForegroundColor","disconnectedCallback","navigationType","removeEventListener","componentWillLoad","navType","parent","getNavItemParentDetails","getCurrentDeviceSize","addEventListener","parentElement","ariaLabel","trim","componentDidUpdate","themeChangeHandler","focusStyle","mode","setFocus","focus","render","selected","Host","displayNavigationTooltip","collapsedIconLabel","onBlur","onClick","role","placement","hasAttribute"],"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\n:host(:focus-within) {\n z-index: var(--ic-z-index-navigation-item);\n}\n\n/ chevron /\nsvg {\n width: var(--ic-space-xl);\n fill: var(--ic-theme-text);\n}\n\n.svg {\n margin-left: auto;\n}\n\n.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(--ic-theme-text);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n white-space: nowrap;\n}\n\n:host(.navigation-item) ::slotted(a) {\n height: 100%;\n font: var(--ic-font-label) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n content: \"\";\n height: 0.25rem;\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-theme-text);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover);\n cursor: pointer;\n}\n\n:host(\n .navigation-item:not(\n .navigation-item-page-header,\n .navigation-item-side-menu\n )\n )\n ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(\n .navigation-item:not(\n .navigation-item-top-nav-child,\n .navigation-item-side-menu,\n .navigation-item-top-nav-child-selected\n .navigation-item-side-menu-selected\n )\n )\n .focus-indicator:focus-within {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected.dark) .link:focus,\n:host(.navigation-item.dark) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-theme-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n min-height: 2.5rem;\n height: auto;\n width: 100%;\n box-sizing: border-box;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-decoration: none;\n 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-side-menu) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset) !important;\n width: auto;\n border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n transition: box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n margin-left: var(--ic-space-xs) !important;\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n height: 2.5rem;\n width: fit-content;\n min-width: 9.063rem;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) !important;\n text-decoration: none;\n position: relative;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n z-index: 1;\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius-inset);\n box-shadow: var(--ic-border-focus-inset);\n transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus) {\n outline: var(--ic-hc-focus-outline);\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),\n:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus) {\n background-color: var(--ic-action-dark-bg-active) !important;\n}\n\n:host(.navigation-item-side-menu-selected) ,\n:host(.navigation-item-top-nav-child-selected) ,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: var(--ic-space-xs);\n height: inherit;\n min-height: 2.5rem;\n background-color: var(--ic-action-default);\n transition: left 0s;\n}\n\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-selected) .link:focus::before {\n margin-top: 0.25rem;\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-theme-text);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n.icon {\n height: var(--ic-space-lg);\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}\n\n:host(.navigation-item-side-nav-collapsed) .icon > ::slotted() {\n margin: auto !important;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n height: var(--navigation-item-height, 56px);\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-top: var(--ic-space-md) !important;\n padding-bottom: var(--ic-space-md) !important;\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-theme-text);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n content: \"\";\n display: block;\n position: absolute;\n 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(\n :not(\n .navigation-item-side-nav-collapsed\n ).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label\n )\n .link {\n opacity: var(--navigation-item-label-opacity);\n height: auto;\n}\n\n:host(\n .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n )\n .link,\n:host(\n .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n )\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(\n .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n )\n ::slotted(a) {\n display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n margin: 0 auto;\n box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n border-radius: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n height: 2.5rem !important;\n color: var(--ic-color-primary-text) !important;\n transition: all var(--ic-easing-transition-fast) !important;\n box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link::after,\n:host(.navigation-item-page-header) ::slotted(a.active)::after {\n content: \" \" !important;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ic-space-xxs);\n background-color: var(--ic-action-default) !important;\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n background-color: var(--ic-action-default-bg-hover) !important;\n cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n background-color: var(--ic-action-default-bg-active) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::after {\n border-bottom-left-radius: var(--ic-border-radius);\n border-bottom-right-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n ::slotted(a.active) {\n transition: all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n .link:focus::before {\n display: none;\n}\n\n.open-in-new-icon {\n flex: 1;\n}\n\n.open-in-new-icon svg {\n margin-top: var(--ic-space-xxs);\n padding-left: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav) .open-in-new-icon {\n margin-left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-top-nav) .open-in-new-icon svg,\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-side-nav) .open-in-new-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n:host(.navigation-item-side-menu) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg,\n:host(.navigation-item-side-menu) .open-in-new-icon svg {\n fill: var(--ic-color-primary-text);\n}\n\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 Listen,\n Method,\n h,\n Host,\n Prop,\n State,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getNavItemParentDetails,\n isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\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 /\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;\n private isInitialRender: boolean = true;\n private itemEl: HTMLElement;\n\n @Element() el: HTMLIcNavigationItemElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() focusStyle = getThemeForegroundColor();\n @State() inTopNavSideMenu: boolean = false;\n @State() isSideNavMobile: boolean = false;\n @State() isTopNavChild: boolean = false;\n @State() navigationType: IcNavType \| \"\";\n @State() parentEl: HTMLElement;\n @State() sideNavExpanded: boolean = false;\n\n /\n @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n /\n @Prop() collapsedIconLabel: boolean = false;\n\n /\n @internal If `true`, the navigation item will be displayed within a tooltip.\n /\n @Prop() displayNavigationTooltip: boolean = 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: boolean = false;\n\n /\n The destination of the navigation item.\n /\n @Prop() href: string = \"\";\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: boolean = 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 @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.navigationType === \"side\") {\n this.parentEl.removeEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.removeEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n }\n }\n\n componentWillLoad(): void {\n const { navType, parent } = getNavItemParentDetails(this.el);\n this.navigationType = navType;\n this.parentEl = parent;\n this.deviceSize = getCurrentDeviceSize();\n\n if (this.navigationType === \"side\") {\n this.parentEl.addEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.addEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n 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 = this.navigationSlot.textContent.trim();\n }\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler({ detail }: CustomEvent<IcTheme>): 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?.focus();\n }\n\n private displayDefaultNavigationItem = (\n href: string,\n hreflang: string,\n target: string,\n rel: string,\n referrerpolicy: ReferrerPolicy,\n download: string \| boolean,\n label: string\n ): HTMLElement => {\n const variant =\n this.isTopNavChild \|\| this.inTopNavSideMenu ? \"body\" : \"label\";\n const ChevronIconComponent = this.expandable && (\n <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n );\n const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n <div class=\"icon\">\n <slot name=\"icon\"></slot>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n );\n\n if (href !== \"\") {\n return (\n <a\n href={href}\n target={target}\n rel={rel}\n hreflang={hreflang}\n referrerPolicy={referrerpolicy}\n download={download !== false ? download : null}\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n part=\"link\"\n >\n {IconComponent}\n\n <ic-typography variant={variant}>{label}</ic-typography>\n <div class=\"chevron-container\">{ChevronIconComponent}</div>\n {target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n );\n }\n\n return (\n <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n </div>\n );\n };\n\n private topNavResizedHandler = ({\n detail,\n }: CustomEvent<{ size: number }>): void => {\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>): void => {\n const { sideNavExpanded, sideNavMobile } = detail;\n this.sideNavExpanded = sideNavExpanded;\n this.isSideNavMobile = 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 = () => {\n this.navItemClicked.emit();\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 if (this.el.children[0]) {\n return this.el.children[0].textContent;\n }\n\n return \"\";\n };\n\n private renderNavigationItemContent = () => {\n if (this.label) {\n return this.displayDefaultNavigationItem(\n this.href,\n this.hreflang,\n this.target,\n this.rel,\n this.referrerpolicy,\n this.download,\n this.label\n );\n }\n\n if (this.navigationSlot) {\n return <slot name=\"navigation-item\"></slot>;\n }\n return <slot></slot>;\n };\n\n render() {\n const { inTopNavSideMenu, isTopNavChild, selected } = this;\n\n return (\n <Host\n class={{\n [\"navigation-item\"]: true,\n [\"navigation-item-top-nav\"]:\n !inTopNavSideMenu && this.navigationType === \"top\",\n [\"navigation-item-top-nav-child-selected\"]:\n isTopNavChild && !inTopNavSideMenu && selected,\n [this.focusStyle]:\n (!inTopNavSideMenu && !isTopNavChild) \|\|\n (this.navigationType === \"side\" && isTopNavChild),\n [\"navigation-item-selected\"]: !isTopNavChild && selected,\n [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n [\"navigation-item-page-header\"]:\n this.navigationType === \"page-header\",\n [\"with-transition\"]: !this.isInitialRender,\n [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded \|\| this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed-with-label\"]:\n !this.sideNavExpanded &&\n this.navigationType === \"side\" &&\n this.collapsedIconLabel &&\n !this.isSideNavMobile,\n [\"expandable\"]: this.expandable,\n }}\n onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n onClick={this.handleClick}\n aria-current={selected ? \"page\" : null}\n role=\"listitem\"\n >\n {/ Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n <ic-tooltip\n label={this.generateTooltipLabel()}\n target=\"navigation-item\"\n placement=\"right\"\n class={{\n [\"tooltip-navigation-item\"]: true,\n [\"tooltip-navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded \|\| this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n }}\n >\n {this.renderNavigationItemContent()}\n </ic-tooltip>\n </Host>\n );\n }\n}\n"],"mappings":"gOAAA,MAAMA,EAAsB,m9lB,MCuCfC,EAAc,M,6GAEjBC,KAAAC,gBAA2B,KA6I3BD,KAAAE,6BAA+B,CACrCC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,KAEA,MAAMC,EACJV,KAAKW,eAAiBX,KAAKY,iBAAmB,OAAS,QACzD,MAAMC,EAAuBb,KAAKc,YAChCC,EAAA,OAAKC,MAAO,CAAEC,IAAK,MAAQC,UAAWC,IAExC,MAAMC,EAAgBpB,KAAKqB,GAAGC,cAAc,kBAC1CP,EAAA,OAAKC,MAAM,QACTD,EAAA,QAAMQ,KAAK,SACVC,EAAWxB,KAAKqB,GAAI,UAAYN,EAAA,QAAMQ,KAAK,WAIhD,GAAIpB,IAAS,GAAI,CACf,OACEY,EAAA,KACEZ,KAAMA,EACNE,OAAQA,EACRC,IAAKA,EACLF,SAAUA,EACVqB,eAAgBlB,EAChBC,SAAUA,IAAa,MAAQA,EAAW,KAC1CQ,MAAM,OACNU,IAAML,GAAQrB,KAAK2B,OAASN,EAC5BO,KAAK,QAEJR,EAEDL,EAAA,iBAAeL,QAASA,GAAUD,GAClCM,EAAA,OAAKC,MAAM,qBAAqBH,GAC/BR,IAAW,UACVU,EAAA,QAAMC,MAAM,mBAAmBE,UAAWW,I,CAMlD,OACEd,EAAA,OAAKe,SAAS,IAAId,MAAM,OAAOU,IAAML,GAAQrB,KAAK2B,OAASN,GACxDD,EACDL,EAAA,iBAAeL,QAASA,GAAUD,GACjCI,EACG,EAIFb,KAAA+B,qBAAuB,EAC7BC,a,MAEA,MAAMC,KAAEA,GAASD,EACjB,GAAIC,IAASjC,KAAKkC,WAAY,CAC5BlC,KAAKkC,WAAaD,EAClBjC,KAAKY,iBACHqB,MACCE,EAACnC,KAAKoC,YAAuC,MAAAD,SAAA,SAAAA,EAC1CE,yBAA0BC,EAAaC,E,GAIzCvC,KAAAwC,qBAAuB,EAC7BR,aAEA,MAAMS,gBAAEA,EAAeC,cAAEA,GAAkBV,EAC3ChC,KAAKyC,gBAAkBA,EACvBzC,KAAK2C,gBAAkBD,CAAa,EAG9B1C,KAAA4C,WAAa,EAAGC,oBACtB,GACEA,IAAkB,MACjBA,EAA8BC,UAAY,qBAC3C,CACA9C,KAAK+C,UAAUC,M,GAIXhD,KAAAiD,YAAc,KACpBjD,KAAKkD,eAAeF,MAAM,EAGpBhD,KAAAmD,qBAAuB,KAC7B,GAAInD,KAAKS,MAAO,CACd,OAAOT,KAAKS,K,CAGd,GAAIT,KAAKoD,eAAgB,CACvB,OAAOpD,KAAKoD,eAAeC,W,CAG7B,GAAIrD,KAAKqB,GAAGiC,SAAS,GAAI,CACvB,OAAOtD,KAAKqB,GAAGiC,SAAS,GAAGD,W,CAG7B,MAAO,EAAE,EAGHrD,KAAAuD,4BAA8B,KACpC,GAAIvD,KAAKS,MAAO,CACd,OAAOT,KAAKE,6BACVF,KAAKG,KACLH,KAAKI,SACLJ,KAAKK,OACLL,KAAKM,IACLN,KAAKO,eACLP,KAAKQ,SACLR,KAAKS,M,CAIT,GAAIT,KAAKoD,eAAgB,CACvB,OAAOrC,EAAA,QAAMQ,KAAK,mB,CAEpB,OAAOR,EAAA,YAAa,E,gBAhQQuB,EAAakB,G,gBACrBC,I,sBACe,M,qBACD,M,mBACF,M,2EAGE,M,wBAKE,M,8BAKM,M,cAKN,M,gBAKR,M,UAKP,G,4GAyBK,M,sBAiB5B,oBAAAC,GACE,GAAI1D,KAAK2D,iBAAmB,OAAQ,CAClC3D,KAAKoC,SAASwB,oBACZ,kBACA5D,KAAKwC,qB,MAEF,GAAIxC,KAAK2D,iBAAmB,MAAO,CACxC3D,KAAKoC,SAASwB,oBACZ,gBACA5D,KAAK+B,qB,EAKX,iBAAA8B,GACE,MAAMC,QAAEA,EAAOC,OAAEA,GAAWC,EAAwBhE,KAAKqB,IACzDrB,KAAK2D,eAAiBG,EACtB9D,KAAKoC,SAAW2B,EAChB/D,KAAKkC,WAAa+B,IAElB,GAAIjE,KAAK2D,iBAAmB,OAAQ,CAClC3D,KAAKoC,SAAS8B,iBACZ,kBACAlE,KAAKwC,qB,MAEF,GAAIxC,KAAK2D,iBAAmB,MAAO,CACxC3D,KAAKoC,SAAS8B,iBACZ,gBACAlE,KAAK+B,sBAEP,GAAI/B,KAAKqB,GAAG8C,cAAcrB,UAAY,sBACpC9C,KAAKW,cAAgB,KACvB,GACEX,KAAKkC,YACJlC,KAAKoC,SAAwCC,uBAE9CrC,KAAKY,iBAAmB,I,CAG5BZ,KAAKoD,eAAiBpD,KAAKqB,GAAGC,cAAc,4BAC5C,GAAItB,KAAKoD,eAAgB,CACvBpD,KAAKoD,eAAegB,UAAYpE,KAAKoD,eAAeC,YAAYgB,M,EAIpE,kBAAAC,GACEtE,KAAKC,gBAAkB,K,CAIzB,kBAAAsE,EAAmBvC,OAAEA,IACnBhC,KAAKwE,WAAaxC,EAAOyC,I,CAO3B,cAAMC,G,OACJvC,EAAAnC,KAAK2B,UAAM,MAAAQ,SAAA,SAAAA,EAAEwC,O,CA8Hf,MAAAC,GACE,MAAMhE,iBAAEA,EAAgBD,cAAEA,EAAakE,SAAEA,GAAa7E,KAEtD,OACEe,EAAC+D,EAAI,CACH9D,MAAO,CACL,CAAC,mBAAoB,KACrB,CAAC,4BACEJ,GAAoBZ,KAAK2D,iBAAmB,MAC/C,CAAC,0CACChD,IAAkBC,GAAoBiE,EACxC,CAAC7E,KAAKwE,aACF5D,IAAqBD,GACtBX,KAAK2D,iBAAmB,QAAUhD,EACrC,CAAC,6BAA8BA,GAAiBkE,EAChD,CAAC,6BAA8BjE,EAC/B,CAAC,sCAAuCA,GAAoBiE,EAC5D,CAAC,iCAAkClE,IAAkBC,EACrD,CAAC,+BACCZ,KAAK2D,iBAAmB,cAC1B,CAAC,oBAAqB3D,KAAKC,gBAC3B,CAAC,4BAA6BD,KAAK2D,iBAAmB,OACtD,CAAC,wCACG3D,KAAKyC,iBAAmBzC,KAAK+E,2BAC/B/E,KAAK2D,iBAAmB,OAC1B,CAAC,kDACE3D,KAAKyC,iBACNzC,KAAK2D,iBAAmB,QACxB3D,KAAKgF,qBACJhF,KAAK2C,gBACR,CAAC,cAAe3C,KAAKc,YAEvBmE,OAAQtE,IAAkBC,EAAmBZ,KAAK4C,WAAa,KAC/DsC,QAASlF,KAAKiD,YAAW,eACX4B,EAAW,OAAS,KAClCM,KAAK,YAGLpE,EAAA,cACEN,MAAOT,KAAKmD,uBACZ9C,OAAO,kBACP+E,UAAU,QACVpE,MAAO,CACL,CAAC,2BAA4B,KAC7B,CAAC,gDACGhB,KAAKyC,iBAAmBzC,KAAK+E,2BAC/B/E,KAAK2D,iBAAmB,OAC1B,CAAC,wDACC3D,KAAKqB,GAAGgE,aAAa,2CAGxBrF,KAAKuD,+B"}
1	+ {"version":3,"names":["icNavigationItemCss","NavigationItem","this","isInitialRender","displayDefaultNavigationItem","href","hreflang","target","rel","referrerpolicy","download","label","variant","isTopNavChild","inTopNavSideMenu","ChevronIconComponent","expandable","h","class","svg","innerHTML","chevronIcon","IconComponent","el","querySelector","name","isSlotUsed","referrerPolicy","ref","itemEl","part","OpenInNew","tabindex","topNavResizedHandler","detail","size","deviceSize","_a","parentEl","customMobileBreakpoint","DEVICE_SIZES","L","sideNavExpandHandler","sideNavExpanded","sideNavMobile","isSideNavMobile","handleBlur","relatedTarget","tagName","childBlur","emit","handleClick","navItemClicked","generateTooltipLabel","navigationSlot","textContent","children","renderNavigationItemContent","XL","getThemeForegroundColor","disconnectedCallback","navigationType","removeEventListener","componentWillLoad","navType","parent","getNavItemParentDetails","getCurrentDeviceSize","addEventListener","parentElement","ariaLabel","trim","componentDidUpdate","themeChangeHandler","focusStyle","mode","setFocus","focus","render","selected","Host","displayNavigationTooltip","collapsedIconLabel","onBlur","onClick","role","placement","hasAttribute"],"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\n:host(:focus-within) {\n z-index: var(--ic-z-index-navigation-item);\n}\n\n/ chevron /\nsvg {\n width: var(--ic-space-xl);\n fill: var(--ic-theme-text);\n}\n\n.svg {\n margin-left: auto;\n}\n\n.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(--ic-theme-text);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--ic-space-md) var(--ic-space-xxs);\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n white-space: nowrap;\n}\n\n:host(.navigation-item) ::slotted(a) {\n height: 100%;\n font: var(--ic-font-label) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;\n padding: 0 var(--ic-space-md) !important;\n}\n\n:host(.navigation-item-selected) .link::after,\n:host(.navigation-item-selected) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav) ::slotted(a.active)::after {\n content: \"\";\n height: 0.25rem;\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: var(--ic-theme-text);\n}\n\n:host(.navigation-item-selected.navigation-item-page-header)\n ::slotted(a.active)::after,\n:host(.navigation-item-selected.navigation-item-page-header) .link::after,\n:host(.navigation-item.navigation-item-page-header) ::slotted(a.active)::after,\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::after {\n content: none;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n box-shadow: none;\n}\n\n:host(.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover);\n cursor: pointer;\n}\n\n:host(\n .navigation-item:not(\n .navigation-item-page-header,\n .navigation-item-side-menu\n )\n )\n ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(\n .navigation-item:not(\n .navigation-item-top-nav-child,\n .navigation-item-side-menu,\n .navigation-item-top-nav-child-selected\n .navigation-item-side-menu-selected\n )\n )\n .focus-indicator:focus-within {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item) .link:focus,\n:host(.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected) .link:focus,\n:host(.navigation-item) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item-selected.dark) .link:focus,\n:host(.navigation-item.dark) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(.navigation-item) .link:active:not(:focus),\n:host(.navigation-item) ::slotted(a:active:not(:focus)) {\n background-color: var(--ic-theme-active);\n}\n\n:host(.navigation-item-side-menu) .link,\n:host(.navigation-item-side-menu) ::slotted(a) {\n min-height: 2.5rem;\n height: auto;\n width: 100%;\n box-sizing: border-box;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-decoration: none;\n 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-side-menu) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n transition: box-shadow var(--ic-easing-transition-fast),\n background-color var(--ic-easing-transition-fast);\n}\n\n:host(.navigation-item-side-menu) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.navigation-item-side-menu) ::slotted(a:hover:not(:focus)) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-side-menu) .focus-indicator:focus-within {\n box-shadow: none;\n}\n\n:host(.navigation-item-side-menu) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset) !important;\n width: auto;\n border-radius: var(--ic-border-radius-inset) !important;\n}\n\n:host(.navigation-item-side-menu-selected) .link,\n:host(.navigation-item-side-menu-selected) ::slotted(a) {\n transition: box-shadow var(--ic-easing-transition-slow),\n background-color var(--ic-easing-transition-slow);\n}\n\n:host(.navigation-item-side-menu-selected) .link:focus,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n margin-left: var(--ic-space-xs) !important;\n padding-left: var(--ic-space-xs) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link,\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n height: 2.5rem;\n width: fit-content;\n min-width: 9.063rem;\n color: var(--ic-color-primary-text);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--ic-space-md) !important;\n text-decoration: none;\n position: relative;\n transition: box-shadow var(--ic-transition-duration-fast),\n border-radius var(--ic-transition-duration-slow);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a) {\n font: var(--ic-font-body) !important;\n letter-spacing: var(--ic-font-letter-spacing-0pt005) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:hover:not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:hover):not(:focus) {\n background-color: var(--ic-action-dark-bg-hover) !important;\n}\n\n:host(.navigation-item-top-nav-child) .link:focus,\n:host(.navigation-item-top-nav-child) ::slotted(a:focus) {\n z-index: 1;\n outline: var(--ic-hc-focus-outline);\n border-radius: var(--ic-border-radius-inset);\n box-shadow: var(--ic-border-focus-inset);\n transition: border-radius 0s, box-shadow var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n}\n\n:host(.navigation-item-side-menu) .link:active:not(:focus) {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) .link:active:not(:focus),\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus) {\n outline: var(--ic-hc-focus-outline);\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a:active):not(:focus),\n:host(.navigation-item-side-menu) ::slotted(a:active):not(:focus) {\n background-color: var(--ic-action-dark-bg-active) !important;\n}\n\n:host(.navigation-item-side-menu-selected) ,\n:host(.navigation-item-top-nav-child-selected) ,\n:host(.navigation-item-side-menu) ::slotted(a.active),\n:host(.navigation-item-top-nav-child) ::slotted(a.active) {\n font-weight: 700 !important;\n}\n\n:host(.navigation-item-top-nav-child) ::slotted(a.active)::before,\n:host(.navigation-item-top-nav-child-selected) .link::before,\n:host(.navigation-item-side-menu-selected) .link::before,\n:host(.navigation-item-side-menu) ::slotted(a.active)::before,\n:host(.navigation-item-side-menu-selected) .link:focus::before,\n:host(.navigation-item-side-menu) ::slotted(a.active:focus)::before {\n content: \"\";\n position: absolute;\n left: 0;\n width: var(--ic-space-xs);\n height: inherit;\n min-height: 2.5rem;\n background-color: var(--ic-action-default);\n transition: left 0s;\n}\n\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-selected) .link:focus::before {\n margin-top: 0.25rem;\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-theme-text);\n width: var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n}\n\n.icon {\n height: var(--ic-space-lg);\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}\n\n:host(.navigation-item-side-nav-collapsed) .icon > ::slotted() {\n margin: auto !important;\n}\n\n:host(.navigation-item-side-nav) .link,\n:host(.navigation-item-side-nav) ::slotted(a) {\n height: var(--navigation-item-height, 56px);\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-top: var(--ic-space-md) !important;\n padding-bottom: var(--ic-space-md) !important;\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-theme-text);\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::before,\n:host(.navigation-item-side-nav) ::slotted(a.active)::before {\n content: \"\";\n display: block;\n position: absolute;\n 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(\n :not(\n .navigation-item-side-nav-collapsed\n ).navigation-item-side-nav.navigation-item-side-nav-collapsed-with-label\n )\n .link {\n opacity: var(--navigation-item-label-opacity);\n height: auto;\n}\n\n:host(\n .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n )\n .link,\n:host(\n .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n )\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(\n .navigation-item-top-nav-child.navigation-item-side-nav-collapsed-with-label\n )\n ::slotted(a) {\n display: block;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link::after,\n:host(.navigation-item-side-nav) ::slotted(a.active)::after {\n display: none;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:focus,\n:host(.navigation-item-side-nav.navigation-item) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus-inset);\n border-radius: var(--ic-border-radius-inset);\n background-color: transparent;\n}\n\n:host(.navigation-item-side-nav.navigation-item-selected) .link:focus,\n:host(.navigation-item-side-nav) ::slotted(a.active:focus) {\n margin: 0 auto;\n box-shadow: inset 0.313rem 0 0 var(--ic-theme-text);\n border-radius: 0;\n}\n\n:host(.navigation-item-side-nav.navigation-item) .link:hover:not(:focus) {\n background-color: var(--ic-theme-hover) !important;\n}\n\n:host(.navigation-item-page-header).link,\n:host(.navigation-item-page-header) a,\n:host(.navigation-item-page-header) ::slotted(a) {\n height: 2.5rem !important;\n color: var(--ic-color-primary-text) !important;\n transition: all var(--ic-easing-transition-fast) !important;\n box-shadow: rgba(23 89 188 / 0%) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link::after,\n:host(.navigation-item-page-header) ::slotted(a.active)::after {\n content: \" \" !important;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ic-space-xxs);\n background-color: var(--ic-action-default) !important;\n}\n\n:host(.navigation-item-page-header) .link:hover,\n:host(.navigation-item-page-header) ::slotted(.link:hover),\n:host(.navigation-item-page-header) ::slotted(a:hover),\n:host(.navigation-item-page-header) .link:hover:not(:focus) {\n background-color: var(--ic-action-default-bg-hover) !important;\n cursor: pointer;\n}\n\n:host(.navigation-item-page-header) .link:focus,\n:host(.navigation-item-page-header) ::slotted(a:focus) {\n box-shadow: var(--ic-border-focus);\n}\n\n:host(.navigation-item-page-header) .link:active,\n:host(.navigation-item-page-header) ::slotted(a:active) {\n background-color: var(--ic-action-default-bg-active) !important;\n}\n\n:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::after {\n border-bottom-left-radius: var(--ic-border-radius);\n border-bottom-right-radius: var(--ic-border-radius);\n}\n\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n .link,\n:host(.navigation-item-page-header.navigation-item-selected.with-transition)\n ::slotted(a.active) {\n transition: all var(--ic-easing-transition-fast),\n border-color var(--ic-transition-duration-fast);\n}\n\n:host(.navigation-item-page-header) ::slotted(a.active)::before,\n:host(.navigation-item-page-header) ::slotted(a.active:focus)::before,\n:host(.navigation-item-page-header.navigation-item-selected)\n .link:focus::before {\n display: none;\n}\n\n.open-in-new-icon {\n flex: 1;\n}\n\n.open-in-new-icon svg {\n margin-top: var(--ic-space-xxs);\n padding-left: var(--ic-space-xxs);\n}\n\n:host(.navigation-item-side-nav) .open-in-new-icon {\n margin-left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.navigation-item-top-nav) .open-in-new-icon svg,\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-side-nav) .open-in-new-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n:host(.navigation-item-side-menu) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.navigation-item-page-header) .open-in-new-icon svg,\n:host(.navigation-item-top-nav-child) .open-in-new-icon svg,\n:host(.navigation-item-side-menu) .open-in-new-icon svg {\n fill: var(--ic-color-primary-text);\n}\n\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 Listen,\n Method,\n h,\n Host,\n Prop,\n State,\n} from \"@stencil/core\";\n\nimport {\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getNavItemParentDetails,\n isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcNavType, IcTheme } from \"../../utils/types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\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;\n private isInitialRender: boolean = true;\n private itemEl: HTMLElement;\n\n @Element() el: HTMLIcNavigationItemElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() focusStyle = getThemeForegroundColor();\n @State() inTopNavSideMenu: boolean = false;\n @State() isSideNavMobile: boolean = false;\n @State() isTopNavChild: boolean = false;\n @State() navigationType: IcNavType \| \"\";\n @State() parentEl: HTMLElement;\n @State() sideNavExpanded: boolean = false;\n\n /\n @internal If `true`, the icon and label will be displayed when side navigation is collapsed.\n /\n @Prop() collapsedIconLabel: boolean = false;\n\n /\n @internal If `true`, the navigation item will be displayed within a tooltip.\n /\n @Prop() displayNavigationTooltip: boolean = 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: boolean = false;\n\n /\n The destination of the navigation item.\n /\n @Prop() href: string = \"\";\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: boolean = 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 @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.navigationType === \"side\") {\n this.parentEl.removeEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.removeEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n }\n }\n\n componentWillLoad(): void {\n const { navType, parent } = getNavItemParentDetails(this.el);\n this.navigationType = navType;\n this.parentEl = parent;\n this.deviceSize = getCurrentDeviceSize();\n\n if (this.navigationType === \"side\") {\n this.parentEl.addEventListener(\n \"sideNavExpanded\",\n this.sideNavExpandHandler\n );\n } else if (this.navigationType === \"top\") {\n this.parentEl.addEventListener(\n \"topNavResized\",\n this.topNavResizedHandler\n );\n 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 = this.navigationSlot.textContent.trim();\n }\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler({ detail }: CustomEvent<IcTheme>): 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?.focus();\n }\n\n private displayDefaultNavigationItem = (\n href: string,\n hreflang: string,\n target: string,\n rel: string,\n referrerpolicy: ReferrerPolicy,\n download: string \| boolean,\n label: string\n ): HTMLElement => {\n const variant =\n this.isTopNavChild \|\| this.inTopNavSideMenu ? \"body\" : \"label\";\n const ChevronIconComponent = this.expandable && (\n <div class={{ svg: true }} innerHTML={chevronIcon}></div>\n );\n const IconComponent = this.el.querySelector('[slot=\"icon\"]') && (\n <div class=\"icon\">\n <slot name=\"icon\"></slot>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n );\n\n if (href !== \"\") {\n return (\n <a\n href={href}\n target={target}\n rel={rel}\n hreflang={hreflang}\n referrerPolicy={referrerpolicy}\n download={download !== false ? download : null}\n class=\"link\"\n ref={(el) => (this.itemEl = el)}\n part=\"link\"\n >\n {IconComponent}\n\n <ic-typography variant={variant}>{label}</ic-typography>\n <div class=\"chevron-container\">{ChevronIconComponent}</div>\n {target === \"_blank\" && (\n <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n );\n }\n\n return (\n <div tabindex=\"0\" class=\"link\" ref={(el) => (this.itemEl = el)}>\n {IconComponent}\n <ic-typography variant={variant}>{label}</ic-typography>\n {ChevronIconComponent}\n </div>\n );\n };\n\n private topNavResizedHandler = ({\n detail,\n }: CustomEvent<{ size: number }>): void => {\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>): void => {\n const { sideNavExpanded, sideNavMobile } = detail;\n this.sideNavExpanded = sideNavExpanded;\n this.isSideNavMobile = 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 = () => {\n this.navItemClicked.emit();\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 if (this.el.children[0]) {\n return this.el.children[0].textContent;\n }\n\n return \"\";\n };\n\n private renderNavigationItemContent = () => {\n if (this.label) {\n return this.displayDefaultNavigationItem(\n this.href,\n this.hreflang,\n this.target,\n this.rel,\n this.referrerpolicy,\n this.download,\n this.label\n );\n }\n\n if (this.navigationSlot) {\n return <slot name=\"navigation-item\"></slot>;\n }\n return <slot></slot>;\n };\n\n render() {\n const { inTopNavSideMenu, isTopNavChild, selected } = this;\n\n return (\n <Host\n class={{\n [\"navigation-item\"]: true,\n [\"navigation-item-top-nav\"]:\n !inTopNavSideMenu && this.navigationType === \"top\",\n [\"navigation-item-top-nav-child-selected\"]:\n isTopNavChild && !inTopNavSideMenu && selected,\n [this.focusStyle]:\n (!inTopNavSideMenu && !isTopNavChild) \|\|\n (this.navigationType === \"side\" && isTopNavChild),\n [\"navigation-item-selected\"]: !isTopNavChild && selected,\n [\"navigation-item-side-menu\"]: inTopNavSideMenu,\n [\"navigation-item-side-menu-selected\"]: inTopNavSideMenu && selected,\n [\"navigation-item-top-nav-child\"]: isTopNavChild && !inTopNavSideMenu,\n [\"navigation-item-page-header\"]:\n this.navigationType === \"page-header\",\n [\"with-transition\"]: !this.isInitialRender,\n [\"navigation-item-side-nav\"]: this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded \|\| this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"navigation-item-side-nav-collapsed-with-label\"]:\n !this.sideNavExpanded &&\n this.navigationType === \"side\" &&\n this.collapsedIconLabel &&\n !this.isSideNavMobile,\n [\"expandable\"]: this.expandable,\n }}\n onBlur={isTopNavChild && !inTopNavSideMenu ? this.handleBlur : null}\n onClick={this.handleClick}\n aria-current={selected ? \"page\" : null}\n role=\"listitem\"\n >\n {/ Tooltip enabled by applying navigation-item-side-nav-collapsed class to host */}\n <ic-tooltip\n label={this.generateTooltipLabel()}\n target=\"navigation-item\"\n placement=\"right\"\n class={{\n [\"tooltip-navigation-item\"]: true,\n [\"tooltip-navigation-item-side-nav-collapsed\"]:\n (!this.sideNavExpanded \|\| this.displayNavigationTooltip) &&\n this.navigationType === \"side\",\n [\"tooltip-long-label-navigation-item-side-nav-expanded\"]:\n this.el.hasAttribute(\"[display-navigation-tooltip = 'true']\"),\n }}\n >\n {this.renderNavigationItemContent()}\n </ic-tooltip>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/core/p-687af4e5.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["icStepCss","Step","stepTypeChangeHandler","this","variant","stepType","current","render","ariaLabel","stepStatus","isPropDefined","toUpperCase","slice","compactStepStyling","statusIcon","h","class","innerHTML","checkIcon","warningIcon","compactStep","size","stepNum","progress","stepTitle","lastStepNum","stepSubtitle","undefined","lastStep","nextStepTitle","icon","partialBar","finalStep","el","parentElement","classList","contains","defaultStep","Host","role","_a","appearance"],"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING /\n:host {\n display: flex;\n flex: auto;\n}\n\n.step {\n display: flex;\n flex: 1 1 0;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n}\n\n.step-title,\n.step-subtitle,\n.step-status,\n.next-step {\n white-space: pre-line;\n}\n\n.visually-hidden {\n position: absolute;\n left: -625rem;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n/ COMPACT STEP STYLING /\n:host(.compact) {\n column-gap: var(--ic-space-sm);\n\n --compact-step-inner-color: var(--ic-status-info);\n --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.compact.light) {\n --compact-step-inner-color: var(--ic-status-info-contrast);\n --compact-step-outer-color: var(--ic-architectural-600);\n}\n\n:host(.compact) .step {\n column-gap: var(--ic-space-sm);\n}\n\n:host(.compact) .step:not(.current) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n margin: var(--ic-space-xs) 0 0;\n}\n\n:host ic-loading-indicator::part(ic-loading-container) {\n border-radius: 50%;\n}\n\n:host(:not(.light)) ic-loading-indicator::part(ic-loading-container) {\n background-color: var(--ic-architectural-white);\n}\n\n:host(.compact) .step-title-area {\n display: flex;\n flex-direction: column;\n width: 14.25rem;\n}\n\n:host(.compact.light) .disabled .step-title-area {\n color: var(--ic-architectural-400);\n}\n\n.info-line {\n display: flex;\n column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n display: flex;\n color: var(--ic-color-secondary-text);\n column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n color: var(--ic-status-success);\n}\n\n:host(.light) .compact-step-completed .step-status {\n color: var(--ic-status-success-contrast);\n}\n\n.compact-step-disabled :is(.step-title, .step-status) {\n color: var(--ic-color-tertiary-text);\n}\n\n:host(.light) .compact-step-disabled :is(.step-status) {\n color: var(--ic-architectural-white);\n}\n\n.step-num {\n color: var(--ic-color-secondary-text);\n white-space: nowrap;\n}\n\n:host(.light) .step-num {\n color: var(--ic-architectural-white);\n}\n\n:host(.compact) .step-icon {\n margin: var(--ic-space-xxxs);\n}\n\n:host(.compact) .step-icon svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n/ DEFAULT STEP STYLING /\n:host(.default) .step {\n flex-direction: column;\n}\n\n:host(.default.last-step) {\n flex-grow: initial;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 2.5rem;\n}\n\n:host(.default) .step-icon {\n border-radius: 50%;\n}\n\n:host(.default:not(.light)) .step-icon {\n background-color: var(--ic-architectural-white);\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n:host(.default) .current {\n color: var(--ic-status-info);\n}\n\n:host(.default.light) .current,\n:host(.default.light) .current .step-title-area {\n color: var(--ic-status-info-contrast);\n}\n\n:host(.default) .step-title-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n width: 100%;\n}\n\n:host(.light) .step-title-area {\n color: var(--ic-architectural-200);\n}\n\n:host(.compact.light) .step-title-area {\n color: var(--ic-architectural-white);\n}\n\n:host(.default) .step-title,\n.step-subtitle {\n width: fit-content;\n}\n\n.step-subtitle {\n color: var(--ic-color-tertiary-text);\n}\n\n:host(.light) .step-subtitle {\n color: var(--ic-architectural-white);\n}\n\n.current .step-subtitle {\n color: var(--ic-color-primary-text);\n}\n\n:host(.default) .completed {\n color: var(--ic-status-success);\n}\n\n:host(.default.light) .completed,\n:host(.default.light) .completed .step-title-area {\n color: var(--ic-status-success-contrast);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-architectural-200) 0 0 0 0.125rem;\n}\n\n:host(.light) .active .step-icon-inner {\n color: var(--ic-architectural-white);\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-status-info);\n color: white;\n}\n\n:host(.light) .current .step-icon-inner {\n background-color: var(--ic-status-info-contrast);\n}\n\n.disabled {\n color: var(--ic-architectural-200);\n}\n\n:host(.default.light) .disabled,\n:host(.default.light) .disabled .step-title-area {\n color: var(--ic-architectural-400);\n}\n\n.disabled .step-icon-inner {\n border: var(--ic-border-width) dashed var(--ic-architectural-200);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n}\n\n:host(.light) .disabled .step-icon-inner {\n border: var(--ic-border-width) dashed var(--ic-architectural-400);\n}\n\n.disabled .step-title-area,\n:host(.default.light) .disabled .step-subtitle {\n color: var(--ic-color-tertiary-text);\n}\n\n.completed .step-icon-inner {\n background: var(--ic-status-success);\n box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n:host(.light) .completed .step-icon-inner {\n background: var(--ic-status-success-contrast);\n box-shadow: inset var(--ic-status-success-contrast) 0 0 0 var(--ic-space-xxxs);\n}\n\n:host(.default) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-status-info);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 var(--ic-space-xxxs));\n\n /* compensating for the circle being bigger than other steps /\n}\n\n:host(.default.light) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-status-info-contrast);\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-architectural-200);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n:host(.light) .step-connect {\n background-color: var(--ic-architectural-600);\n}\n\n.aligned-full-width.step-connect {\n min-width: 6.25rem;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 0.125rem dashed var(--ic-architectural-200);\n border-radius: 0;\n}\n\n:host(.light) .disabled .step-connect {\n border-top: 0.125rem dashed var(--ic-architectural-600);\n}\n\n.completed .step-connect {\n background-color: var(--ic-status-success);\n}\n\n:host(.light) .completed .step-connect {\n background-color: var(--ic-status-success-contrast);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-status-info);\n}\n\n:host(.light) .step-connect-inner {\n background-color: var(--ic-status-info-contrast);\n}\n\n.step-icon-inner .check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n width: var(--ic-space-md);\n height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n fill: var(--ic-color-white-text);\n}\n\n/* High Contrast */\n@media (forced-colors: active) {\n / COMPACT STEP /\n .compact-step-disabled :is(.step-title, .step-status) {\n color: GrayText;\n }\n\n / DEFAULT STEP /\n .step-connect:not(.disabled .step-connect) {\n border: var(--ic-hc-border);\n }\n\n .active .step-icon-inner,\n .completed .step-icon-inner,\n .current .step-icon-inner {\n forced-color-adjust: none;\n box-shadow: inset canvastext 0 0 0 0.125rem;\n background-color: transparent;\n color: canvastext;\n }\n\n :host(.default) .current .step-icon {\n padding: 0;\n border: none;\n }\n\n .disabled,\n .disabled .step-title-area {\n color: GrayText;\n }\n\n .step-connect-inner,\n .completed .step-connect {\n background-color: canvastext;\n }\n\n .step-icon-inner .check-icon > svg > path {\n fill: canvastext;\n }\n}\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport { IcStepVariants, IcStepStatuses, IcStepTypes } from \"./ic-step.types\";\nimport { isPropDefined } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n\n /\n @internal If a compact stepper is being used, this sets the styling of the step.\n /\n @Prop() compactStepStyling?: IcStepTypes;\n\n /\n @internal If `true`, and a compact stepper is being used, the current step will be the only step in view.\n /\n @Prop({ mutable: true }) current?: boolean = false;\n\n /\n @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n /\n @Prop() lastStep!: boolean;\n\n /\n @internal The step number of the final step. This is managed by ic-stepper.\n /\n @Prop() lastStepNum?: number;\n\n /\n @internal The name of the next step. This is managed by ic-stepper.\n /\n @Prop() nextStepTitle?: string;\n\n /\n @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n /\n @Prop() progress?: number;\n\n /\n @internal The step number, managed by ic-stepper.\n /\n @Prop() stepNum?: number;\n\n /\n The status of the step. Use this prop to display a status message on the step if it is required or optional.\n /\n @Prop() stepStatus?: IcStepStatuses;\n\n /\n Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n /\n @Prop() stepSubtitle?: string;\n\n /\n The title of the step within the stepper.\n /\n @Prop() stepTitle?: string;\n\n /\n @internal The variant of the step. This is managed by ic-stepper.\n /\n @Prop() variant!: IcStepVariants;\n\n /\n The state of the step within the stepper.\n */\n @Prop() stepType?: IcStepTypes = \"active\";\n\n @Watch(\"stepType\")\n stepTypeChangeHandler(): void {\n if (this.variant === \"compact\" && this.stepType === \"current\") {\n this.current = true;\n } else {\n this.current = false;\n }\n }\n\n render() {\n // ARIA LABEL\n let ariaLabel = \"\";\n\n if (this.stepType === \"completed\") {\n ariaLabel = \". Completed step\";\n } else if (this.stepType === \"disabled\") {\n ariaLabel = \". Non-required step\";\n } else if (this.stepStatus === \"required\") {\n ariaLabel = \". Required step\";\n } else if (this.stepStatus === \"optional\") {\n ariaLabel = \". Optional step\";\n }\n\n // STEP STATUS\n let stepStatus;\n if (isPropDefined(this.stepStatus)) {\n stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);\n }\n\n // STEP TYPE\n let stepType;\n if (\n this.stepType === \"disabled\" \|\|\n this.compactStepStyling === \"disabled\"\n ) {\n stepType = \"Not required\";\n } else if (this.compactStepStyling === \"completed\") {\n stepType = \"Completed\";\n }\n\n // STATUS ICON FOR COMPACT STEP\n let statusIcon;\n if (\n this.stepType === \"completed\" \|\|\n this.compactStepStyling === \"completed\"\n ) {\n statusIcon = (\n <span\n class=\"check-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={checkIcon}\n ></span>\n );\n } else if (\n this.stepType === \"disabled\" \|\|\n this.compactStepStyling === \"disabled\"\n ) {\n statusIcon = (\n <span\n class=\"warning-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={warningIcon}\n ></span>\n );\n }\n\n // COMPACT STEP COMPONENT\n const compactStep = (\n <div\n class={{\n [\"step\"]: true,\n [\"current\"]: this.current,\n [`compact-step-${this.compactStepStyling}`]:\n !!this.compactStepStyling,\n }}\n >\n <ic-loading-indicator\n class={{\n \"compact-step-progress-indicator\": true,\n \"not-required\":\n this.stepType === \"disabled\" \|\|\n this.compactStepStyling === \"disabled\",\n }}\n aria-hidden=\"true\"\n size=\"small\"\n inner-label={this.stepNum}\n progress={this.progress}\n ></ic-loading-indicator>\n <div class=\"step-title-area\">\n <ic-typography variant=\"h4\" class=\"step-title\">\n {this.stepTitle}\n </ic-typography>\n <div class=\"info-line\">\n <ic-typography variant=\"caption\" class=\"step-num\">\n {`${this.stepNum} of ${this.lastStepNum}`}\n <span class=\"visually-hidden\"> steps</span>\n </ic-typography>\n {(this.stepSubtitle \|\|\n this.stepType === \"completed\" \|\|\n this.stepType === \"disabled\" \|\|\n (this.variant === \"compact\" &&\n !!this.compactStepStyling &&\n this.compactStepStyling !== \"active\") \|\|\n !!this.stepStatus) && (\n <div class=\"step-status\">\n {statusIcon !== undefined && statusIcon}\n {(this.stepSubtitle \|\| stepType) && (\n <ic-typography variant=\"caption\">\n {this.stepSubtitle !== null &&\n isPropDefined(this.stepSubtitle)\n ? this.stepSubtitle\n : this.stepType === \"disabled\" \|\|\n (this.variant === \"compact\" &&\n this.compactStepStyling === \"disabled\") \|\|\n this.stepType === \"completed\" \|\|\n (this.variant === \"compact\" &&\n this.compactStepStyling === \"completed\")\n ? stepType\n : this.stepStatus && stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n {this.lastStep ? (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n Last step\n </ic-typography>\n ) : (\n isPropDefined(this.nextStepTitle) && (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n Next<span class=\"visually-hidden\"> step is</span>:{\" \"}\n {this.nextStepTitle}\n </ic-typography>\n )\n )}\n </div>\n </div>\n );\n\n // ICON FOR DEFAULT STEP\n let icon;\n if (this.stepType !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n // STEP CONNECT FOR DEFAULT STEP\n const partialBar = this.stepType === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n\n const finalStep = !this.lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"default\") &&\n !this.el.parentElement.classList.contains(\"aligned-left\"),\n }}\n >\n {partialBar}\n </div>\n );\n\n // DEFAULT STEP COMPONENT\n const defaultStep = (\n <div\n class={{\n [\"step\"]: true,\n [`${this.stepType}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(this.stepTitle \|\| this.stepSubtitle \|\| this.stepStatus) && (\n <div class=\"step-title-area\">\n {this.stepTitle && (\n <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n {this.stepTitle}\n </ic-typography>\n )}\n {this.stepTitle && (this.stepSubtitle \|\| this.stepStatus) && (\n <ic-typography variant=\"caption\" class=\"step-subtitle\">\n {this.stepSubtitle !== null && isPropDefined(this.stepSubtitle)\n ? this.stepSubtitle\n : stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`Step ${this.stepNum}${ariaLabel}`}\n aria-current={(this.current \|\| this.stepType === \"current\") && \"step\"}\n class={{\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"default\") &&\n !this.el.parentElement.classList.contains(\"aligned-left\"),\n [`${this.variant}`]: true,\n [\"light\"]:\n (this.el.parentElement as HTMLIcStepperElement)?.appearance ===\n \"light\",\n }}\n >\n {this.variant === \"compact\" ? compactStep : defaultStep}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["icStepCss","Step","stepTypeChangeHandler","this","variant","stepType","current","render","ariaLabel","stepStatus","isPropDefined","toUpperCase","slice","compactStepStyling","statusIcon","h","class","innerHTML","checkIcon","warningIcon","compactStep","size","stepNum","progress","stepTitle","lastStepNum","stepSubtitle","undefined","lastStep","nextStepTitle","icon","partialBar","finalStep","el","parentElement","classList","contains","defaultStep","Host","role","_a","appearance"],"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING /\n:host {\n display: flex;\n flex: auto;\n}\n\n.step {\n display: flex;\n flex: 1 1 0;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n}\n\n.step-title,\n.step-subtitle,\n.step-status,\n.next-step {\n white-space: pre-line;\n}\n\n.visually-hidden {\n position: absolute;\n left: -625rem;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n/ COMPACT STEP STYLING /\n:host(.compact) {\n column-gap: var(--ic-space-sm);\n\n --compact-step-inner-color: var(--ic-status-info);\n --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.compact.light) {\n --compact-step-inner-color: var(--ic-status-info-contrast);\n --compact-step-outer-color: var(--ic-architectural-600);\n}\n\n:host(.compact) .step {\n column-gap: var(--ic-space-sm);\n}\n\n:host(.compact) .step:not(.current) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n margin: var(--ic-space-xs) 0 0;\n}\n\n:host ic-loading-indicator::part(ic-loading-container) {\n border-radius: 50%;\n}\n\n:host(:not(.light)) ic-loading-indicator::part(ic-loading-container) {\n background-color: var(--ic-architectural-white);\n}\n\n:host(.compact) .step-title-area {\n display: flex;\n flex-direction: column;\n width: 14.25rem;\n}\n\n:host(.compact.light) .disabled .step-title-area {\n color: var(--ic-architectural-400);\n}\n\n.info-line {\n display: flex;\n column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n display: flex;\n color: var(--ic-color-secondary-text);\n column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n color: var(--ic-status-success);\n}\n\n:host(.light) .compact-step-completed .step-status {\n color: var(--ic-status-success-contrast);\n}\n\n.compact-step-disabled :is(.step-title, .step-status) {\n color: var(--ic-color-tertiary-text);\n}\n\n:host(.light) .compact-step-disabled :is(.step-status) {\n color: var(--ic-architectural-white);\n}\n\n.step-num {\n color: var(--ic-color-secondary-text);\n white-space: nowrap;\n}\n\n:host(.light) .step-num {\n color: var(--ic-architectural-white);\n}\n\n:host(.compact) .step-icon {\n margin: var(--ic-space-xxxs);\n}\n\n:host(.compact) .step-icon svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n/ DEFAULT STEP STYLING /\n:host(.default) .step {\n flex-direction: column;\n}\n\n:host(.default.last-step) {\n flex-grow: initial;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 2.5rem;\n}\n\n:host(.default) .step-icon {\n border-radius: 50%;\n}\n\n:host(.default:not(.light)) .step-icon {\n background-color: var(--ic-architectural-white);\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n:host(.default) .current {\n color: var(--ic-status-info);\n}\n\n:host(.default.light) .current,\n:host(.default.light) .current .step-title-area {\n color: var(--ic-status-info-contrast);\n}\n\n:host(.default) .step-title-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n width: 100%;\n}\n\n:host(.light) .step-title-area {\n color: var(--ic-architectural-200);\n}\n\n:host(.compact.light) .step-title-area {\n color: var(--ic-architectural-white);\n}\n\n:host(.default) .step-title,\n.step-subtitle {\n width: fit-content;\n}\n\n.step-subtitle {\n color: var(--ic-color-tertiary-text);\n}\n\n:host(.light) .step-subtitle {\n color: var(--ic-architectural-white);\n}\n\n.current .step-subtitle {\n color: var(--ic-color-primary-text);\n}\n\n:host(.default) .completed {\n color: var(--ic-status-success);\n}\n\n:host(.default.light) .completed,\n:host(.default.light) .completed .step-title-area {\n color: var(--ic-status-success-contrast);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-architectural-200) 0 0 0 0.125rem;\n}\n\n:host(.light) .active .step-icon-inner {\n color: var(--ic-architectural-white);\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-status-info);\n color: white;\n}\n\n:host(.light) .current .step-icon-inner {\n background-color: var(--ic-status-info-contrast);\n}\n\n.disabled {\n color: var(--ic-architectural-200);\n}\n\n:host(.default.light) .disabled,\n:host(.default.light) .disabled .step-title-area {\n color: var(--ic-architectural-400);\n}\n\n.disabled .step-icon-inner {\n border: var(--ic-border-width) dashed var(--ic-architectural-200);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n}\n\n:host(.light) .disabled .step-icon-inner {\n border: var(--ic-border-width) dashed var(--ic-architectural-400);\n}\n\n.disabled .step-title-area,\n:host(.default.light) .disabled .step-subtitle {\n color: var(--ic-color-tertiary-text);\n}\n\n.completed .step-icon-inner {\n background: var(--ic-status-success);\n box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n:host(.light) .completed .step-icon-inner {\n background: var(--ic-status-success-contrast);\n box-shadow: inset var(--ic-status-success-contrast) 0 0 0 var(--ic-space-xxxs);\n}\n\n:host(.default) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-status-info);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 var(--ic-space-xxxs));\n\n /* compensating for the circle being bigger than other steps /\n}\n\n:host(.default.light) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-status-info-contrast);\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-architectural-200);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n:host(.light) .step-connect {\n background-color: var(--ic-architectural-600);\n}\n\n.aligned-full-width.step-connect {\n min-width: 6.25rem;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 0.125rem dashed var(--ic-architectural-200);\n border-radius: 0;\n}\n\n:host(.light) .disabled .step-connect {\n border-top: 0.125rem dashed var(--ic-architectural-600);\n}\n\n.completed .step-connect {\n background-color: var(--ic-status-success);\n}\n\n:host(.light) .completed .step-connect {\n background-color: var(--ic-status-success-contrast);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-status-info);\n}\n\n:host(.light) .step-connect-inner {\n background-color: var(--ic-status-info-contrast);\n}\n\n.step-icon-inner .check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n width: var(--ic-space-md);\n height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n fill: var(--ic-color-white-text);\n}\n\n/* High Contrast */\n@media (forced-colors: active) {\n / COMPACT STEP /\n .compact-step-disabled :is(.step-title, .step-status) {\n color: GrayText;\n }\n\n / DEFAULT STEP /\n .step-connect:not(.disabled .step-connect) {\n border: var(--ic-hc-border);\n }\n\n .active .step-icon-inner,\n .completed .step-icon-inner,\n .current .step-icon-inner {\n forced-color-adjust: none;\n box-shadow: inset canvastext 0 0 0 0.125rem;\n background-color: transparent;\n color: canvastext;\n }\n\n :host(.default) .current .step-icon {\n padding: 0;\n border: none;\n }\n\n .disabled,\n .disabled .step-title-area {\n color: GrayText;\n }\n\n .step-connect-inner,\n .completed .step-connect {\n background-color: canvastext;\n }\n\n .step-icon-inner .check-icon > svg > path {\n fill: canvastext;\n }\n}\n\n/ Add back in after storybook has the `color-scheme: light dark` code /\n\n/ @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n :host(:not(.light)) .step-icon-inner {\n color: var(--ic-architectural-black);\n }\n\n .step-num,\n .step-subtitle {\n color: var(--ic-architectural-white) !important;\n }\n} /\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport { IcStepVariants, IcStepStatuses, IcStepTypes } from \"./ic-step.types\";\nimport { isPropDefined } from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n\n /\n @internal If a compact stepper is being used, this sets the styling of the step.\n /\n @Prop() compactStepStyling?: IcStepTypes;\n\n /\n @internal If `true`, and a compact stepper is being used, the current step will be the only step in view.\n /\n @Prop({ mutable: true }) current?: boolean = false;\n\n /\n @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n /\n @Prop() lastStep!: boolean;\n\n /\n @internal The step number of the final step. This is managed by ic-stepper.\n /\n @Prop() lastStepNum?: number;\n\n /\n @internal The name of the next step. This is managed by ic-stepper.\n /\n @Prop() nextStepTitle?: string;\n\n /\n @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n /\n @Prop() progress?: number;\n\n /\n @internal The step number, managed by ic-stepper.\n /\n @Prop() stepNum?: number;\n\n /\n The status of the step. Use this prop to display a status message on the step if it is required or optional.\n /\n @Prop() stepStatus?: IcStepStatuses;\n\n /\n Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n /\n @Prop() stepSubtitle?: string;\n\n /\n The title of the step within the stepper.\n /\n @Prop() stepTitle?: string;\n\n /\n @internal The variant of the step. This is managed by ic-stepper.\n /\n @Prop() variant!: IcStepVariants;\n\n /\n The state of the step within the stepper.\n */\n @Prop() stepType?: IcStepTypes = \"active\";\n\n @Watch(\"stepType\")\n stepTypeChangeHandler(): void {\n if (this.variant === \"compact\" && this.stepType === \"current\") {\n this.current = true;\n } else {\n this.current = false;\n }\n }\n\n render() {\n // ARIA LABEL\n let ariaLabel = \"\";\n\n if (this.stepType === \"completed\") {\n ariaLabel = \". Completed step\";\n } else if (this.stepType === \"disabled\") {\n ariaLabel = \". Non-required step\";\n } else if (this.stepStatus === \"required\") {\n ariaLabel = \". Required step\";\n } else if (this.stepStatus === \"optional\") {\n ariaLabel = \". Optional step\";\n }\n\n // STEP STATUS\n let stepStatus;\n if (isPropDefined(this.stepStatus)) {\n stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);\n }\n\n // STEP TYPE\n let stepType;\n if (\n this.stepType === \"disabled\" \|\|\n this.compactStepStyling === \"disabled\"\n ) {\n stepType = \"Not required\";\n } else if (this.compactStepStyling === \"completed\") {\n stepType = \"Completed\";\n }\n\n // STATUS ICON FOR COMPACT STEP\n let statusIcon;\n if (\n this.stepType === \"completed\" \|\|\n this.compactStepStyling === \"completed\"\n ) {\n statusIcon = (\n <span\n class=\"check-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={checkIcon}\n ></span>\n );\n } else if (\n this.stepType === \"disabled\" \|\|\n this.compactStepStyling === \"disabled\"\n ) {\n statusIcon = (\n <span\n class=\"warning-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={warningIcon}\n ></span>\n );\n }\n\n // COMPACT STEP COMPONENT\n const compactStep = (\n <div\n class={{\n [\"step\"]: true,\n [\"current\"]: this.current,\n [`compact-step-${this.compactStepStyling}`]:\n !!this.compactStepStyling,\n }}\n >\n <ic-loading-indicator\n class={{\n \"compact-step-progress-indicator\": true,\n \"not-required\":\n this.stepType === \"disabled\" \|\|\n this.compactStepStyling === \"disabled\",\n }}\n aria-hidden=\"true\"\n size=\"small\"\n inner-label={this.stepNum}\n progress={this.progress}\n ></ic-loading-indicator>\n <div class=\"step-title-area\">\n <ic-typography variant=\"h4\" class=\"step-title\">\n {this.stepTitle}\n </ic-typography>\n <div class=\"info-line\">\n <ic-typography variant=\"caption\" class=\"step-num\">\n {`${this.stepNum} of ${this.lastStepNum}`}\n <span class=\"visually-hidden\"> steps</span>\n </ic-typography>\n {(this.stepSubtitle \|\|\n this.stepType === \"completed\" \|\|\n this.stepType === \"disabled\" \|\|\n (this.variant === \"compact\" &&\n !!this.compactStepStyling &&\n this.compactStepStyling !== \"active\") \|\|\n !!this.stepStatus) && (\n <div class=\"step-status\">\n {statusIcon !== undefined && statusIcon}\n {(this.stepSubtitle \|\| stepType) && (\n <ic-typography variant=\"caption\">\n {this.stepSubtitle !== null &&\n isPropDefined(this.stepSubtitle)\n ? this.stepSubtitle\n : this.stepType === \"disabled\" \|\|\n (this.variant === \"compact\" &&\n this.compactStepStyling === \"disabled\") \|\|\n this.stepType === \"completed\" \|\|\n (this.variant === \"compact\" &&\n this.compactStepStyling === \"completed\")\n ? stepType\n : this.stepStatus && stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n {this.lastStep ? (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n Last step\n </ic-typography>\n ) : (\n isPropDefined(this.nextStepTitle) && (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n Next<span class=\"visually-hidden\"> step is</span>:{\" \"}\n {this.nextStepTitle}\n </ic-typography>\n )\n )}\n </div>\n </div>\n );\n\n // ICON FOR DEFAULT STEP\n let icon;\n if (this.stepType !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n // STEP CONNECT FOR DEFAULT STEP\n const partialBar = this.stepType === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n\n const finalStep = !this.lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"default\") &&\n !this.el.parentElement.classList.contains(\"aligned-left\"),\n }}\n >\n {partialBar}\n </div>\n );\n\n // DEFAULT STEP COMPONENT\n const defaultStep = (\n <div\n class={{\n [\"step\"]: true,\n [`${this.stepType}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(this.stepTitle \|\| this.stepSubtitle \|\| this.stepStatus) && (\n <div class=\"step-title-area\">\n {this.stepTitle && (\n <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n {this.stepTitle}\n </ic-typography>\n )}\n {this.stepTitle && (this.stepSubtitle \|\| this.stepStatus) && (\n <ic-typography variant=\"caption\" class=\"step-subtitle\">\n {this.stepSubtitle !== null && isPropDefined(this.stepSubtitle)\n ? this.stepSubtitle\n : stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`Step ${this.stepNum}${ariaLabel}`}\n aria-current={(this.current \|\| this.stepType === \"current\") && \"step\"}\n class={{\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"default\") &&\n !this.el.parentElement.classList.contains(\"aligned-left\"),\n [`${this.variant}`]: true,\n [\"light\"]:\n (this.el.parentElement as HTMLIcStepperElement)?.appearance ===\n \"light\",\n }}\n >\n {this.variant === \"compact\" ? compactStep : defaultStep}\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/core/p-7dbd0a9f.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["icSearchBarCss","inputIds","SearchBar","this","assistiveHintEl","hasTimedOut","inputId","menuCloseFromMenuChangeEvent","menuId","preLoad","preventSubmit","prevNoOption","retryButtonClick","truncateValue","handleClear","ev","keyboardEvent","mouseEvent","type","code","value","inputEl","loading","clearTimeout","timeoutTimer","filteredOptions","options","el","setFocus","icClear","emit","preventDefault","onInput","target","noOptions","labelField","emptyOptionListText","valueField","length","setMenuChange","disableFilter","rawFilteredOptions","getFilteredMenuOptions","showClearButton","handleShowClearButton","debounceAriaLiveUpdate","onInputBlur","nextFocus","relatedTarget","icInputBlur","onInputFocus","icInputFocus","handleClearBlur","icClearBlur","clearButtonFocused","handleSubmitSearchBlur","icSubmitSearchBlur","searchSubmitFocused","handleMouseDown","handleSubmitSearchFocus","handleSubmitSearch","highlightedValue","undefined","icSubmitSearch","form","closest","searchSubmitButton","handleHiddenFormButtonClick","handleSubmitSearchKeyDown","key","handleRetry","retryViaKeyPress","detail","keyPressed","icRetryLoad","triggerLoading","loadingOption","loadingLabel","timeout","window","setTimeout","loadingErrorLabel","timedOut","handleOptionSelect","label","icOptionSelect","handleMenuOptionHighlight","optionValue","_a","optionId","replace","ariaActiveDescendant","handleMenuChange","open","handleMenuCloseFromMenuChange","focusInput","icMenuChange","handleHostFocus","handleTruncateValue","icSearchBarFocus","handleHostBlur","menu","icSearchBarBlur","visible","handleFocusClearButton","fromEvent","truncate","renderAssistiveHintEl","input","_b","shadowRoot","querySelector","Object","keys","hasOptionsOrFilterDisabled","document","createElement","innerText","hintText","id","style","display","after","updateSearchResultAriaLive","searchResultsStatusEl","charactersUntilSuggestion","hadNoOptions","searchMode","isSubmitDisabled","valueNotSet","valueLengthLess","disabled","highlightFirstOptionAfterNoResults","handleSetFirstOption","prevNoOptionsList","find","filteredOption","loadingHandler","newValue","filteredOptionsHandler","newOptions","some","opt","watchOptionsHandler","watchValueHandler","getLabelFromValue","disconnectedCallback","remove","componentWillLoad","removeDisabledFalse","small","size","componentDidLoad","focusOnLoad","onComponentRequiredPropUndefined","prop","propName","anchorEl","componentWillRender","handleKeyDown","keyEv","event","handleKeyboardOpen","handleKeyUp","debounceAriaLive","render","name","required","placeholder","helperText","readonly","spellcheck","fullWidth","hideLabel","autofocus","autocapitalize","autocomplete","disabledMode","describedBy","getInputDescribedByText","trim","describedById","disabledText","hasSuggestedSearch","menuOpen","menuRendered","isOrHasLoaded","expanded","renderHiddenInput","h","Host","class","onFocus","onBlur","ref","ariaExpanded","role","autoFocus","inputmode","debounce","slot","innerHTML","clearIcon","onClick","onMouseDown","onKeyDown","variant","appearance","IcThemeForegroundEnum","Light","Dark","searchIcon","Default","fullwidth","activationType","autoFocusOnSelected","inputLabel","onMenuOptionSelect","onMenuStateChange","onMenuOptionId","onRetryButtonClicked","parentEl"],"sources":["src/components/ic-search-bar/ic-search-bar.css?tag=ic-search-bar&encapsulation=shadow","src/components/ic-search-bar/ic-search-bar.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-menu: z-index of search bar menu\n /\n\n:host(.search) {\n --divider-height: 1.5rem;\n}\n\n:host(.search.small) {\n --divider-height: 1rem;\n}\n\n:host(.fullwidth) {\n width: 100%;\n}\n\n:host(.search) .disabled:hover {\n border-color: var(--ic-architectural-200);\n}\n\n:host(.search.disabled) .disabled svg {\n color: var(--ic-architectural-200);\n}\n\n:host(.search) .disabled svg {\n color: var(--ic-architectural-400);\n}\n\n/ CLEAR /\n\n.clear-button-container {\n align-items: center;\n margin-right: var(--ic-space-1px);\n display: none;\n visibility: hidden;\n}\n\n.clear-button {\n border-radius: var(--ic-border-radius);\n transition: box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition);\n}\n\n.clear-button:focus,\n.clear-button:active {\n background-color: var(--ic-focus-blue);\n box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow);\n border-radius: 0.25rem;\n}\n\n.clear-button:focus,\n.clear-button:active {\n fill: white;\n}\n\n.clear-button-visible {\n visibility: visible;\n display: flex;\n}\n\n.search-submit-button-container {\n display: flex;\n align-items: center;\n}\n\n.search-submit-button-disabled .ic-tooltip-container {\n display: none !important;\n}\n\n.search-submit-button:focus,\n.search-submit-button:active {\n background-color: var(--ic-focus-blue) !important;\n box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow) !important;\n border-radius: var(--ic-space-xxs);\n}\n\n.search-submit-button:focus,\n.search-submit-button:active * {\n fill: white;\n}\n\n.divider {\n width: var(--ic-border-width);\n background-color: var(--ic-action-dark-active);\n height: var(--divider-height);\n}\n\n:host(.dark) .divider {\n background-color: var(--ic-architectural-200);\n}\n\n.menu-container {\n width: var(--input-width, 20rem);\n position: relative;\n top: var(--ic-space-xxxs);\n}\n\n.menu-container.fullwidth {\n width: 100%;\n}\n\n.no-results {\n cursor: not-allowed;\n}\n\n.search-results-status {\n border: 0;\n clip: rect(0, 0, 0, 0, 0);\n height: var(--ic-space-1px);\n margin-bottom: calc(-1 * var(--ic-space-1px));\n margin-right: calc(-1 * var(--ic-space-1px));\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: var(--ic-space-1px);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n} from \"@stencil/core\";\n\nimport {\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcThemeForegroundEnum,\n IcMenuOption,\n IcSizesNoLarge,\n} from \"../../utils/types\";\nimport {\n getInputDescribedByText,\n renderHiddenInput,\n handleHiddenFormButtonClick,\n getLabelFromValue,\n onComponentRequiredPropUndefined,\n getFilteredMenuOptions,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n IcSearchBarBlurEventDetail,\n IcSearchBarSearchModes,\n} from \"./ic-search-bar.types\";\nimport { IcValueEventDetail, IcBlurEventDetail } from \"../../utils/types\";\nimport {\n IcMenuChangeEventDetail,\n IcOptionSelectEventDetail,\n} from \"../ic-menu/ic-menu.types\";\n\nimport clearIcon from \"../../assets/clear-icon.svg\";\nimport searchIcon from \"../../assets/search-icon.svg\";\n\nlet inputIds = 0;\n\n@Component({\n tag: \"ic-search-bar\",\n styleUrl: \"ic-search-bar.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class SearchBar {\n private anchorEl: HTMLElement;\n private assistiveHintEl: HTMLSpanElement = null;\n private debounceAriaLive: number;\n private hasTimedOut = false;\n private inputEl: HTMLIcTextFieldElement;\n private inputId = `ic-search-bar-input-${inputIds++}`;\n private menu: HTMLIcMenuElement;\n private menuCloseFromMenuChangeEvent: boolean = false;\n private menuId = `${this.inputId}-menu`;\n private preLoad = true;\n private preventSubmit: boolean = false;\n private prevNoOption: boolean = false;\n private retryButtonClick: boolean = false;\n private retryViaKeyPress: boolean;\n private timeoutTimer: number;\n private truncateValue = false;\n private searchSubmitButton: HTMLIcButtonElement;\n\n @Element() el: HTMLIcSearchBarElement;\n\n @State() ariaActiveDescendant: string;\n @State() clearButtonFocused: boolean = false;\n @State() highlightedValue: string;\n @State() open: boolean = false;\n @State() searchSubmitFocused: boolean = false;\n @State() showClearButton: boolean = false;\n\n /*\n The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n /\n @Prop() autocapitalize = \"off\";\n\n /\n The state of autocompletion the browser can apply on the text value.\n /\n @Prop() autocomplete?: IcAutocompleteTypes = \"off\";\n\n /\n The state of autocorrection the browser can apply when the user is entering/editing the text value.\n /\n @Prop() autocorrect?: IcAutocorrectStates = \"off\";\n\n /\n If `true`, the form control will have input focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.\n /\n @Prop() charactersUntilSuggestion: number = 2;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n /\n Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\n * If `true`, all options provided will be displayed.\n /\n @Prop() disableFilter?: boolean = false;\n\n /\n The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n /\n @Prop() debounce?: number = 0;\n\n /\n The text displayed when there are no options in the option list.\n /\n @Prop() emptyOptionListText = \"No results found\";\n\n /\n If `true`, the search bar will be focused when component loaded.\n /\n @Prop() focusOnLoad?: boolean = false;\n\n /\n Specify whether the search bar fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText?: string = \"\";\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel?: boolean = false;\n\n /\n The hint text for the hidden assistive description element.\n /\n @Prop() hintText?: string =\n \"When autocomplete results are available use the up and down arrows to choose and press enter to select\";\n\n /\n The label for the search bar.\n /\n @Prop() label!: string;\n\n /\n The custom name for the label field to correspond with the IcMenuOption type.\n /\n @Prop() labelField?: string = \"label\";\n\n /\n Trigger loading state when fetching options asynchronously\n /\n @Prop({ mutable: true }) loading?: boolean = false;\n\n /\n Change the message displayed when external loading times out.\n /\n @Prop() loadingErrorLabel?: string = \"Loading Error\";\n\n /\n Change the message displayed whilst the options are being loaded externally.\n /\n @Prop() loadingLabel?: string = \"Loading...\";\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n The placeholder value to display.\n /\n @Prop() placeholder?: string = \"Search\";\n\n /\n If `true`, the readonly state will be set.\n /\n @Prop() readonly?: boolean = false;\n\n /\n If `true`, the search bar will require a value.\n /\n @Prop() required?: boolean = false;\n\n /\n Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.\n /\n @Prop() searchMode?: IcSearchBarSearchModes = \"navigation\";\n\n /\n The size of the search bar component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n If `true`, the value of the search will have its spelling and grammar checked.\n /\n @Prop() spellcheck: boolean = false;\n\n /\n If using external filtering, set a timeout for when loading takes too long.\n /\n @Prop() timeout?: number;\n\n /\n The custom name for the value field to correspond with the IcMenuOption type.\n /\n @Prop() valueField?: string = \"value\";\n\n @Watch(\"loading\")\n loadingHandler(newValue: boolean): void {\n if (newValue && !this.hasTimedOut) {\n this.preLoad = false;\n this.triggerLoading();\n }\n }\n\n @State() filteredOptions: IcMenuOption[] = [];\n\n @Watch(\"filteredOptions\")\n filteredOptionsHandler(newOptions: IcMenuOption[]): void {\n this.hasTimedOut = newOptions.some((opt) => opt.timedOut);\n }\n\n /\n The suggested search options.\n /\n @Prop() options?: IcMenuOption[] = [];\n\n @Watch(\"options\")\n watchOptionsHandler(newOptions: IcMenuOption[]): void {\n if (this.disableFilter && !this.hasTimedOut) {\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n if (newOptions.length > 0) {\n this.filteredOptions = newOptions;\n } else {\n if (this.hadNoOptions()) {\n return;\n }\n this.setMenuChange(true);\n !this.preLoad &&\n (this.filteredOptions = [\n {\n [this.labelField]: this.emptyOptionListText,\n [this.valueField]: \"\",\n },\n ]);\n this.preLoad = true;\n }\n }\n this.debounceAriaLiveUpdate();\n }\n\n /\n The value of the search input.\n /\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n @Watch(\"value\")\n watchValueHandler(newValue: string): void {\n if (\n this.inputEl &&\n this.options &&\n !!getLabelFromValue(\n newValue,\n this.options,\n this.valueField,\n this.labelField\n )\n ) {\n this.inputEl.value = getLabelFromValue(\n newValue,\n this.options,\n this.valueField,\n this.labelField\n );\n } else if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n }\n\n // The icChange event is defined here so that it appears as an event for search bar\n // The actual event is emitted from the child ic-text-field\n /\n Emitted when the value has changed.\n /\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when value is cleared with clear button\n /\n @Event() icClear: EventEmitter<void>;\n private handleClear = (ev: Event) => {\n const keyboardEvent = ev as KeyboardEvent;\n const mouseEvent = ev as MouseEvent;\n\n if (\n mouseEvent.type === \"click\" \|\|\n keyboardEvent.code === \"Enter\" \|\|\n keyboardEvent.code === \"Space\"\n ) {\n this.value = \"\";\n this.inputEl.value = \"\";\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n this.filteredOptions = this.options;\n this.el.setFocus();\n\n this.icClear.emit();\n ev.preventDefault();\n\n this.preventSubmit = true;\n }\n };\n\n // The icInput event is defined here so that it appears as an event for search bar\n // The actual event is emitted from the child ic-text-field\n /\n Emitted when a keyboard input occurred.\n /\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n\n const noOptions = [\n { [this.labelField]: this.emptyOptionListText, [this.valueField]: \"\" },\n ];\n\n if (this.options.length > 0) {\n this.setMenuChange(true);\n\n this.preLoad = false;\n\n if (this.disableFilter === false) {\n const rawFilteredOptions = getFilteredMenuOptions(\n this.options,\n false,\n this.value,\n \"anywhere\",\n this.labelField\n );\n\n this.filteredOptions =\n rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;\n }\n }\n\n if (!this.showClearButton) {\n this.handleShowClearButton(true);\n }\n\n this.debounceAriaLiveUpdate();\n };\n\n /\n @deprecated This event should not be used anymore. Use icSearchBarBlur instead.\n /\n @Event() icInputBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n private onInputBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icInputBlur.emit({ value: value, relatedTarget: nextFocus });\n };\n\n /\n @deprecated This event should not be used anymore. Use icSearchBarFocus instead.\n /\n @Event() icInputFocus: EventEmitter<IcValueEventDetail>;\n private onInputFocus = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icInputFocus.emit({ value: value });\n\n this.handleShowClearButton(true);\n };\n\n /\n Emitted when option is highlighted within the menu\n /\n @Event() icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;\n\n /\n Emitted when the state of the menu changes (i.e. open or close)\n /\n @Event() icMenuChange: EventEmitter<IcMenuChangeEventDetail>;\n /\n @internal - Emitted when blur is invoked from clear button\n /\n @Event() icClearBlur: EventEmitter<IcBlurEventDetail>;\n private handleClearBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icClearBlur.emit({ relatedTarget: nextFocus });\n\n this.clearButtonFocused = false;\n };\n\n /\n Emitted when the 'retry loading' button is clicked\n /\n @Event() icRetryLoad: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when the search value has been submitted\n /\n @Event() icSubmitSearch: EventEmitter<IcValueEventDetail>;\n\n /\n @internal - Emitted when blur is invoked from search submit button\n /\n @Event() icSubmitSearchBlur: EventEmitter<IcBlurEventDetail>;\n private handleSubmitSearchBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icSubmitSearchBlur.emit({ relatedTarget: nextFocus });\n\n this.searchSubmitFocused = false;\n };\n\n /\n Emitted when blur is invoked from ic-search-bar\n /\n @Event() icSearchBarBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n\n /\n Emitted when focus is invoked from ic-search-bar\n /\n @Event() icSearchBarFocus: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.assistiveHintEl) {\n this.assistiveHintEl.remove();\n }\n }\n\n componentWillLoad(): void {\n this.watchValueHandler(this.value);\n\n removeDisabledFalse(this.disabled, this.el);\n\n if (this.small) {\n this.size = \"small\";\n }\n }\n\n componentDidLoad(): void {\n if (this.focusOnLoad) {\n this.el.setFocus();\n }\n\n if (this.hasOptionsOrFilterDisabled()) {\n this.renderAssistiveHintEl();\n if (this.disableFilter) {\n this.filteredOptions = this.options;\n }\n }\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Search Bar\"\n );\n\n if (this.inputEl !== undefined) {\n this.anchorEl = this.inputEl.shadowRoot.querySelector(\n \"ic-input-component-container\"\n );\n }\n }\n\n componentWillRender(): void {\n this.highlightFirstOptionAfterNoResults();\n }\n\n @Listen(\"icKeydown\", {})\n handleKeyDown(ev: CustomEvent): void {\n const keyEv: KeyboardEvent = ev.detail.event;\n if (this.menu && this.open) {\n this.menu.handleKeyboardOpen(keyEv);\n }\n }\n\n @Listen(\"keyup\", {})\n handleKeyUp(ev: KeyboardEvent): void {\n if (ev.key === \"Enter\") {\n if (this.preventSubmit \|\| this.isSubmitDisabled()) {\n return;\n }\n\n this.handleSubmitSearch();\n this.setMenuChange(false);\n }\n\n if (ev.key === \"Escape\") {\n this.setMenuChange(false);\n }\n\n if (this.preventSubmit) {\n this.preventSubmit = false;\n }\n }\n\n /\n Sets focus on the native `input`.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n if (this.inputEl) {\n this.inputEl.setFocus();\n }\n }\n\n private handleMouseDown = (ev: Event) => {\n ev.preventDefault();\n };\n\n private handleSubmitSearchFocus = () => {\n this.searchSubmitFocused = true;\n };\n\n private handleSubmitSearch = () => {\n this.highlightedValue && (this.value = this.highlightedValue);\n this.highlightedValue = undefined;\n this.icSubmitSearch.emit({ value: this.value });\n\n const form: HTMLFormElement = this.el.closest(\"FORM\");\n\n if (this.searchSubmitButton && !!form && !this.preventSubmit) {\n handleHiddenFormButtonClick(form, this.searchSubmitButton);\n }\n };\n\n private debounceAriaLiveUpdate() {\n clearTimeout(this.debounceAriaLive);\n\n this.debounceAriaLive = window.setTimeout(() => {\n this.updateSearchResultAriaLive();\n }, 500);\n }\n\n private handleSubmitSearchKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === \" \") {\n ev.preventDefault();\n this.handleSubmitSearch();\n }\n };\n\n private handleRetry = (ev: CustomEvent<IcValueEventDetail>) => {\n this.retryViaKeyPress = ev.detail.keyPressed === \"Enter\";\n this.icRetryLoad.emit({ value: ev.detail.value });\n this.triggerLoading();\n this.retryButtonClick = true;\n };\n\n private triggerLoading = () => {\n const loadingOption: IcMenuOption[] = [\n {\n [this.labelField]: this.loadingLabel,\n [this.valueField]: \"\",\n loading: true,\n },\n ];\n if (this.filteredOptions !== loadingOption)\n this.filteredOptions = loadingOption;\n if (this.timeout) {\n this.timeoutTimer = window.setTimeout(() => {\n this.filteredOptions = [\n {\n [this.labelField]: this.loadingErrorLabel,\n [this.valueField]: \"\",\n timedOut: true,\n },\n ];\n }, this.timeout);\n }\n };\n\n private handleOptionSelect = (ev: CustomEvent) => {\n if (ev.detail.label === this.emptyOptionListText) {\n this.el.setFocus();\n return;\n }\n\n this.value = ev.detail.value;\n this.icOptionSelect.emit({ value: this.value });\n };\n\n private handleMenuOptionHighlight = (ev: CustomEvent) => {\n const optionValue = ev.detail.optionId?.replace(`${this.menuId}-`, \"\");\n optionValue && (this.highlightedValue = optionValue);\n if (ev.detail.optionId) {\n this.ariaActiveDescendant = ev.detail.optionId;\n } else {\n this.ariaActiveDescendant = undefined;\n }\n };\n\n private handleMenuChange = (ev: CustomEvent) => {\n this.setMenuChange(ev.detail.open);\n if (!ev.detail.open) {\n this.handleMenuCloseFromMenuChange(true);\n if (ev.detail.focusInput === undefined \|\| ev.detail.focusInput) {\n this.el.setFocus();\n }\n }\n };\n\n private setMenuChange = (open: boolean) => {\n if (this.open !== open) {\n this.open = open;\n this.icMenuChange.emit({ open });\n }\n };\n\n private handleHostFocus = () => {\n if (this.options && this.value && !this.menuCloseFromMenuChangeEvent) {\n this.setMenuChange(true);\n }\n this.handleTruncateValue(false);\n\n this.icSearchBarFocus.emit();\n };\n\n private handleHostBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n if (\n this.open &&\n this.options &&\n nextFocus !== this.menu &&\n !this.retryViaKeyPress &&\n !this.retryButtonClick\n ) {\n this.setMenuChange(false);\n }\n\n if (this.retryButtonClick \|\| this.retryViaKeyPress) {\n this.inputEl.setFocus();\n }\n\n this.handleShowClearButton(false);\n this.handleMenuCloseFromMenuChange(false);\n this.handleTruncateValue(true);\n this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n };\n\n private handleShowClearButton = (visible: boolean): void => {\n this.showClearButton = visible;\n };\n\n private handleFocusClearButton = (): void => {\n this.clearButtonFocused = true;\n };\n\n private handleMenuCloseFromMenuChange = (fromEvent: boolean): void => {\n this.menuCloseFromMenuChangeEvent = fromEvent;\n };\n\n private handleTruncateValue = (truncate: boolean): void => {\n this.truncateValue = truncate;\n };\n\n private renderAssistiveHintEl = (): void => {\n const input = this.el.shadowRoot\n .querySelector(\"ic-text-field\")\n ?.shadowRoot?.querySelector(`#${this.inputId}`);\n\n if (\n input &&\n Object.keys(input).length > 0 &&\n this.hasOptionsOrFilterDisabled()\n ) {\n this.assistiveHintEl = document.createElement(\"span\");\n this.assistiveHintEl.innerText = this.hintText;\n this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;\n this.assistiveHintEl.style.display = \"none\";\n if (input.after !== undefined) {\n input.after(this.assistiveHintEl);\n }\n }\n };\n\n private updateSearchResultAriaLive = (): void => {\n const searchResultsStatusEl = this.el.shadowRoot.querySelector(\n \".search-results-status\"\n ) as HTMLParagraphElement;\n\n if (searchResultsStatusEl) {\n if (\n !this.open \|\|\n this.value === \"\" \|\|\n this.value.length < this.charactersUntilSuggestion\n ) {\n searchResultsStatusEl.innerText = \"\";\n } else if (\n this.hasOptionsOrFilterDisabled() &&\n this.filteredOptions.length > 0 &&\n this.open &&\n !this.filteredOptions[0].loading\n ) {\n if (this.hadNoOptions()) {\n searchResultsStatusEl.innerText = this.emptyOptionListText;\n } else {\n searchResultsStatusEl.innerText = `${\n this.filteredOptions.length\n } result${this.filteredOptions.length > 1 ? \"s\" : \"\"} available`;\n }\n }\n }\n };\n\n private hasOptionsOrFilterDisabled = (): boolean =>\n this.options.length > 0 \|\| this.disableFilter;\n\n private hadNoOptions = (): boolean =>\n this.filteredOptions.length === 1 &&\n this.filteredOptions[0][this.labelField] === this.emptyOptionListText &&\n this.searchMode === \"navigation\";\n\n private isSubmitDisabled = (): boolean => {\n const valueNotSet =\n this.value === undefined \|\| this.value === null \|\| this.value === \"\";\n const valueLengthLess = this.value.length < this.charactersUntilSuggestion;\n return (\n valueNotSet \|\|\n valueLengthLess \|\|\n this.disabled \|\|\n this.hadNoOptions() \|\|\n this.hasTimedOut \|\|\n this.loading\n );\n };\n\n private highlightFirstOptionAfterNoResults = () => {\n if (this.prevNoOption && this.menu && !this.hasTimedOut) {\n this.menu.handleSetFirstOption();\n this.prevNoOption = false;\n }\n const prevNoOptionsList = this.filteredOptions.find(\n (filteredOption) =>\n filteredOption[this.labelField] === this.emptyOptionListText \|\|\n filteredOption[this.labelField] === this.loadingErrorLabel \|\|\n filteredOption[this.labelField] === this.loadingLabel\n );\n if (prevNoOptionsList) {\n this.prevNoOption = true;\n }\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n small,\n size,\n placeholder,\n helperText,\n disabled,\n value,\n readonly,\n spellcheck,\n fullWidth,\n options,\n open,\n hideLabel,\n menuId,\n ariaActiveDescendant,\n truncateValue,\n autofocus,\n autocapitalize,\n autocomplete,\n filteredOptions,\n } = this;\n\n const disabledMode = readonly \|\| disabled ? true : false;\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n ).trim();\n\n let describedById;\n\n if (describedBy !== \"\" && this.hasOptionsOrFilterDisabled()) {\n describedById = `${describedBy} ${this.inputId}-assistive-hint`;\n } else if (this.hasOptionsOrFilterDisabled()) {\n describedById = `${this.inputId}-assistive-hint`;\n } else if (describedBy !== \"\") {\n describedById = describedBy;\n } else {\n describedById = undefined;\n }\n\n const disabledText = disabledMode && !readonly;\n const hasSuggestedSearch = value && this.hasOptionsOrFilterDisabled();\n const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;\n const menuRendered =\n menuOpen && value.length >= this.charactersUntilSuggestion;\n const isOrHasLoaded =\n this.filteredOptions.length === 1 &&\n (this.filteredOptions[0][this.labelField] === this.loadingLabel \|\|\n filteredOptions[0][this.labelField] === this.loadingErrorLabel);\n\n let expanded;\n\n if (options.length > 0) {\n if (menuOpen) {\n expanded = \"true\";\n } else {\n expanded = \"false\";\n }\n } else {\n expanded = undefined;\n }\n\n renderHiddenInput(true, this.el, name, value, disabledMode);\n\n return (\n <Host\n class={{\n [\"search\"]: true,\n [\"fullwidth\"]: fullWidth,\n [\"disabled\"]: disabled,\n [\"small\"]: size === \"small\",\n }}\n onFocus={this.handleHostFocus}\n onBlur={this.handleHostBlur}\n >\n <ic-text-field\n ref={(el) => (this.inputEl = el)}\n inputId={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n size={size}\n hideLabel={hideLabel}\n fullWidth={fullWidth}\n name={name}\n truncateValue={truncateValue}\n value={\n options &&\n !!getLabelFromValue(\n value,\n options,\n this.valueField,\n this.labelField\n )\n ? getLabelFromValue(\n value,\n options,\n this.valueField,\n this.labelField\n )\n : value\n }\n placeholder={placeholder}\n onInput={this.onInput}\n onBlur={this.onInputBlur}\n onFocus={this.onInputFocus}\n aria-label={hideLabel ? label : \"\"}\n aria-describedby={describedById}\n aria-owns={menuRendered ? menuId : undefined}\n aria-haspopup={options.length > 0 ? \"listbox\" : undefined}\n ariaExpanded={expanded}\n ariaActiveDescendant={ariaActiveDescendant}\n aria-autocomplete={hasSuggestedSearch ? \"list\" : undefined}\n role={hasSuggestedSearch ? \"combobox\" : undefined}\n autocomplete={autocomplete}\n autocapitalize={autocapitalize}\n autoFocus={autofocus}\n spellcheck={spellcheck}\n inputmode=\"search\"\n debounce={this.debounce}\n >\n <div\n class={{\n \"clear-button-container\": true,\n \"clear-button-visible\":\n value && !disabledMode && this.showClearButton,\n }}\n slot=\"clear-button\"\n >\n <ic-button\n id=\"clear-button\"\n class=\"clear-button\"\n aria-label=\"Clear\"\n innerHTML={clearIcon}\n onClick={this.handleClear}\n onMouseDown={this.handleMouseDown}\n size={size}\n onFocus={this.handleFocusClearButton}\n onBlur={this.handleClearBlur}\n onKeyDown={this.handleClear}\n type=\"submit\"\n variant=\"icon\"\n appearance={\n this.clearButtonFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Dark\n }\n ></ic-button>\n <div class=\"divider\"></div>\n </div>\n <div\n class={{\n \"search-submit-button-container\": true,\n \"search-submit-button-disabled\": this.isSubmitDisabled(),\n }}\n slot=\"search-submit-button\"\n >\n <ic-button\n id=\"search-submit-button\"\n aria-label=\"Search\"\n ref={(el) => (this.searchSubmitButton = el)}\n class={{\n [\"search-submit-button\"]: true,\n [\"search-submit-button-small\"]: !!small,\n }}\n disabled={this.isSubmitDisabled()}\n innerHTML={searchIcon}\n size={size}\n onClick={this.handleSubmitSearch}\n onMouseDown={this.handleMouseDown}\n onBlur={this.handleSubmitSearchBlur}\n onFocus={this.handleSubmitSearchFocus}\n onKeyDown={this.handleSubmitSearchKeyDown}\n type=\"submit\"\n variant=\"icon\"\n appearance={\n this.searchSubmitFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Default\n }\n ></ic-button>\n </div>\n <div\n class={{\n \"menu-container\": true,\n fullwidth: fullWidth,\n }}\n slot=\"menu\"\n >\n {menuRendered && (\n <ic-menu\n class={{\n \"no-results\": this.hadNoOptions() \|\| isOrHasLoaded,\n }}\n activationType=\"manual\"\n anchorEl={this.anchorEl}\n autoFocusOnSelected={false}\n searchMode={this.searchMode}\n inputEl={this.inputEl}\n inputLabel={label}\n ref={(el) => (this.menu = el)}\n small={size === \"small\"}\n fullWidth={fullWidth}\n menuId={menuId}\n open={!!menuRendered}\n options={filteredOptions}\n onMenuOptionSelect={this.handleOptionSelect}\n onMenuStateChange={this.handleMenuChange}\n onMenuOptionId={this.handleMenuOptionHighlight}\n onRetryButtonClicked={this.handleRetry}\n parentEl={this.el}\n value={value}\n labelField={this.labelField}\n valueField={this.valueField}\n ></ic-menu>\n )}\n </div>\n </ic-text-field>\n <div\n aria-live=\"polite\"\n role=\"status\"\n class=\"search-results-status\"\n ></div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["icSearchBarCss","inputIds","SearchBar","this","assistiveHintEl","hasTimedOut","inputId","menuCloseFromMenuChangeEvent","menuId","preLoad","preventSubmit","prevNoOption","retryButtonClick","truncateValue","handleClear","ev","keyboardEvent","mouseEvent","type","code","value","inputEl","loading","clearTimeout","timeoutTimer","filteredOptions","options","el","setFocus","icClear","emit","preventDefault","onInput","target","noOptions","labelField","emptyOptionListText","valueField","length","setMenuChange","disableFilter","rawFilteredOptions","getFilteredMenuOptions","showClearButton","handleShowClearButton","debounceAriaLiveUpdate","onInputBlur","nextFocus","relatedTarget","icInputBlur","onInputFocus","icInputFocus","handleClearBlur","icClearBlur","clearButtonFocused","handleSubmitSearchBlur","icSubmitSearchBlur","searchSubmitFocused","handleMouseDown","handleSubmitSearchFocus","handleSubmitSearch","highlightedValue","undefined","icSubmitSearch","form","closest","searchSubmitButton","handleHiddenFormButtonClick","handleSubmitSearchKeyDown","key","handleRetry","retryViaKeyPress","detail","keyPressed","icRetryLoad","triggerLoading","loadingOption","loadingLabel","timeout","window","setTimeout","loadingErrorLabel","timedOut","handleOptionSelect","label","icOptionSelect","handleMenuOptionHighlight","optionValue","_a","optionId","replace","ariaActiveDescendant","handleMenuChange","open","handleMenuCloseFromMenuChange","focusInput","icMenuChange","handleHostFocus","handleTruncateValue","icSearchBarFocus","handleHostBlur","menu","icSearchBarBlur","visible","handleFocusClearButton","fromEvent","truncate","renderAssistiveHintEl","input","_b","shadowRoot","querySelector","Object","keys","hasOptionsOrFilterDisabled","document","createElement","innerText","hintText","id","style","display","after","updateSearchResultAriaLive","searchResultsStatusEl","charactersUntilSuggestion","hadNoOptions","searchMode","isSubmitDisabled","valueNotSet","valueLengthLess","disabled","highlightFirstOptionAfterNoResults","handleSetFirstOption","prevNoOptionsList","find","filteredOption","loadingHandler","newValue","filteredOptionsHandler","newOptions","some","opt","watchOptionsHandler","watchValueHandler","getLabelFromValue","disconnectedCallback","remove","componentWillLoad","removeDisabledFalse","small","size","componentDidLoad","focusOnLoad","onComponentRequiredPropUndefined","prop","propName","anchorEl","componentWillRender","handleKeyDown","keyEv","event","handleKeyboardOpen","handleKeyUp","debounceAriaLive","render","name","required","placeholder","helperText","readonly","spellcheck","fullWidth","hideLabel","autofocus","autocapitalize","autocomplete","disabledMode","describedBy","getInputDescribedByText","trim","describedById","disabledText","hasSuggestedSearch","menuOpen","menuRendered","isOrHasLoaded","expanded","renderHiddenInput","h","Host","class","onFocus","onBlur","ref","ariaExpanded","role","autoFocus","inputmode","debounce","slot","innerHTML","clearIcon","onClick","onMouseDown","onKeyDown","variant","appearance","IcThemeForegroundEnum","Light","Dark","searchIcon","Default","fullwidth","activationType","autoFocusOnSelected","inputLabel","onMenuOptionSelect","onMenuStateChange","onMenuOptionId","onRetryButtonClicked","parentEl"],"sources":["src/components/ic-search-bar/ic-search-bar.css?tag=ic-search-bar&encapsulation=shadow","src/components/ic-search-bar/ic-search-bar.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-menu: z-index of search bar menu\n /\n\n:host(.search) {\n --divider-height: 1.5rem;\n}\n\n:host(.search.small) {\n --divider-height: 1rem;\n}\n\n:host(.fullwidth) {\n width: 100%;\n}\n\n:host(.search) .disabled:hover {\n border-color: var(--ic-architectural-200);\n}\n\n:host(.search.disabled) .disabled svg {\n color: var(--ic-architectural-200);\n}\n\n:host(.search) .disabled svg {\n color: var(--ic-architectural-400);\n}\n\n/ CLEAR /\n\n.clear-button-container {\n align-items: center;\n margin-right: var(--ic-space-1px);\n display: none;\n visibility: hidden;\n}\n\n.clear-button {\n border-radius: var(--ic-border-radius);\n transition: box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition);\n}\n\n.clear-button:focus,\n.clear-button:active {\n background-color: var(--ic-focus-blue);\n box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow);\n border-radius: 0.25rem;\n}\n\n.clear-button:focus,\n.clear-button:active {\n fill: white;\n}\n\n.clear-button-visible {\n visibility: visible;\n display: flex;\n}\n\n.search-submit-button-container {\n display: flex;\n align-items: center;\n}\n\n.search-submit-button-disabled .ic-tooltip-container {\n display: none !important;\n}\n\n.search-submit-button:focus,\n.search-submit-button:active {\n background-color: var(--ic-focus-blue) !important;\n box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow) !important;\n border-radius: var(--ic-space-xxs);\n}\n\n.search-submit-button:focus,\n.search-submit-button:active * {\n fill: white;\n}\n\n.divider {\n width: var(--ic-border-width);\n background-color: var(--ic-action-dark-active);\n height: var(--divider-height);\n}\n\n:host(.dark) .divider {\n background-color: var(--ic-architectural-200);\n}\n\n.menu-container {\n width: var(--input-width, 20rem);\n position: relative;\n top: var(--ic-space-xxxs);\n}\n\n.menu-container.fullwidth {\n width: 100%;\n}\n\n.no-results {\n cursor: not-allowed;\n}\n\n.search-results-status {\n border: 0;\n clip: rect(0, 0, 0, 0, 0);\n height: var(--ic-space-1px);\n margin-bottom: calc(-1 * var(--ic-space-1px));\n margin-right: calc(-1 * var(--ic-space-1px));\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: var(--ic-space-1px);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n} from \"@stencil/core\";\n\nimport {\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcThemeForegroundEnum,\n IcMenuOption,\n IcSizesNoLarge,\n} from \"../../utils/types\";\nimport {\n getInputDescribedByText,\n renderHiddenInput,\n handleHiddenFormButtonClick,\n getLabelFromValue,\n onComponentRequiredPropUndefined,\n getFilteredMenuOptions,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n IcSearchBarBlurEventDetail,\n IcSearchBarSearchModes,\n} from \"./ic-search-bar.types\";\nimport { IcValueEventDetail, IcBlurEventDetail } from \"../../utils/types\";\nimport {\n IcMenuChangeEventDetail,\n IcOptionSelectEventDetail,\n} from \"../ic-menu/ic-menu.types\";\n\nimport clearIcon from \"../../assets/clear-icon.svg\";\nimport searchIcon from \"../../assets/search-icon.svg\";\n\nlet inputIds = 0;\n\n@Component({\n tag: \"ic-search-bar\",\n styleUrl: \"ic-search-bar.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class SearchBar {\n private anchorEl: HTMLElement;\n private assistiveHintEl: HTMLSpanElement = null;\n private debounceAriaLive: number;\n private hasTimedOut = false;\n private inputEl: HTMLIcTextFieldElement;\n private inputId = `ic-search-bar-input-${inputIds++}`;\n private menu: HTMLIcMenuElement;\n private menuCloseFromMenuChangeEvent: boolean = false;\n private menuId = `${this.inputId}-menu`;\n private preLoad = true;\n private preventSubmit: boolean = false;\n private prevNoOption: boolean = false;\n private retryButtonClick: boolean = false;\n private retryViaKeyPress: boolean;\n private timeoutTimer: number;\n private truncateValue = false;\n private searchSubmitButton: HTMLIcButtonElement;\n\n @Element() el: HTMLIcSearchBarElement;\n\n @State() ariaActiveDescendant: string;\n @State() clearButtonFocused: boolean = false;\n @State() highlightedValue: string;\n @State() open: boolean = false;\n @State() searchSubmitFocused: boolean = false;\n @State() showClearButton: boolean = false;\n\n /*\n The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n /\n @Prop() autocapitalize = \"off\";\n\n /\n The state of autocompletion the browser can apply on the text value.\n /\n @Prop() autocomplete?: IcAutocompleteTypes = \"off\";\n\n /\n The state of autocorrection the browser can apply when the user is entering/editing the text value.\n /\n @Prop() autocorrect?: IcAutocorrectStates = \"off\";\n\n /\n If `true`, the form control will have input focus when the page loads.\n /\n @Prop() autofocus = false;\n\n /\n The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.\n /\n @Prop() charactersUntilSuggestion: number = 2;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n /\n Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\n * If `true`, all options provided will be displayed.\n /\n @Prop() disableFilter?: boolean = false;\n\n /\n The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n /\n @Prop() debounce?: number = 0;\n\n /\n The text displayed when there are no options in the option list.\n /\n @Prop() emptyOptionListText = \"No results found\";\n\n /\n If `true`, the search bar will be focused when component loaded.\n /\n @Prop() focusOnLoad?: boolean = false;\n\n /\n Specify whether the search bar fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText?: string = \"\";\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel?: boolean = false;\n\n /\n The hint text for the hidden assistive description element.\n /\n @Prop() hintText?: string =\n \"When autocomplete results are available use the up and down arrows to choose and press enter to select\";\n\n /\n The label for the search bar.\n /\n @Prop() label!: string;\n\n /\n The custom name for the label field to correspond with the IcMenuOption type.\n /\n @Prop() labelField?: string = \"label\";\n\n /\n Trigger loading state when fetching options asynchronously\n /\n @Prop({ mutable: true }) loading?: boolean = false;\n\n /\n Change the message displayed when external loading times out.\n /\n @Prop() loadingErrorLabel?: string = \"Loading Error\";\n\n /\n Change the message displayed whilst the options are being loaded externally.\n /\n @Prop() loadingLabel?: string = \"Loading...\";\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n The placeholder value to display.\n /\n @Prop() placeholder?: string = \"Search\";\n\n /\n If `true`, the readonly state will be set.\n /\n @Prop() readonly?: boolean = false;\n\n /\n If `true`, the search bar will require a value.\n /\n @Prop() required?: boolean = false;\n\n /\n Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.\n /\n @Prop() searchMode?: IcSearchBarSearchModes = \"navigation\";\n\n /\n The size of the search bar component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n If `true`, the value of the search will have its spelling and grammar checked.\n /\n @Prop() spellcheck: boolean = false;\n\n /\n If using external filtering, set a timeout for when loading takes too long.\n /\n @Prop() timeout?: number;\n\n /\n The custom name for the value field to correspond with the IcMenuOption type.\n /\n @Prop() valueField?: string = \"value\";\n\n @Watch(\"loading\")\n loadingHandler(newValue: boolean): void {\n if (newValue && !this.hasTimedOut) {\n this.preLoad = false;\n this.triggerLoading();\n }\n }\n\n @State() filteredOptions: IcMenuOption[] = [];\n\n @Watch(\"filteredOptions\")\n filteredOptionsHandler(newOptions: IcMenuOption[]): void {\n this.hasTimedOut = newOptions.some((opt) => opt.timedOut);\n }\n\n /\n The suggested search options.\n /\n @Prop() options?: IcMenuOption[] = [];\n\n @Watch(\"options\")\n watchOptionsHandler(newOptions: IcMenuOption[]): void {\n if (this.disableFilter && !this.hasTimedOut) {\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n if (newOptions.length > 0) {\n this.filteredOptions = newOptions;\n } else {\n if (this.hadNoOptions()) {\n return;\n }\n this.setMenuChange(true);\n !this.preLoad &&\n (this.filteredOptions = [\n {\n [this.labelField]: this.emptyOptionListText,\n [this.valueField]: \"\",\n },\n ]);\n this.preLoad = true;\n }\n }\n this.debounceAriaLiveUpdate();\n }\n\n /\n The value of the search input.\n /\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n @Watch(\"value\")\n watchValueHandler(newValue: string): void {\n if (\n this.inputEl &&\n this.options &&\n !!getLabelFromValue(\n newValue,\n this.options,\n this.valueField,\n this.labelField\n )\n ) {\n this.inputEl.value = getLabelFromValue(\n newValue,\n this.options,\n this.valueField,\n this.labelField\n );\n } else if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n }\n\n // The icChange event is defined here so that it appears as an event for search bar\n // The actual event is emitted from the child ic-text-field\n /\n Emitted when the value has changed.\n /\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when value is cleared with clear button\n /\n @Event() icClear: EventEmitter<void>;\n private handleClear = (ev: Event) => {\n const keyboardEvent = ev as KeyboardEvent;\n const mouseEvent = ev as MouseEvent;\n\n if (\n mouseEvent.type === \"click\" \|\|\n keyboardEvent.code === \"Enter\" \|\|\n keyboardEvent.code === \"Space\"\n ) {\n this.value = \"\";\n this.inputEl.value = \"\";\n this.loading = false;\n clearTimeout(this.timeoutTimer);\n this.filteredOptions = this.options;\n this.el.setFocus();\n\n this.icClear.emit();\n ev.preventDefault();\n\n this.preventSubmit = true;\n }\n };\n\n // The icInput event is defined here so that it appears as an event for search bar\n // The actual event is emitted from the child ic-text-field\n /\n Emitted when a keyboard input occurred.\n /\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n\n const noOptions = [\n { [this.labelField]: this.emptyOptionListText, [this.valueField]: \"\" },\n ];\n\n if (this.options.length > 0) {\n this.setMenuChange(true);\n\n this.preLoad = false;\n\n if (this.disableFilter === false) {\n const rawFilteredOptions = getFilteredMenuOptions(\n this.options,\n false,\n this.value,\n \"anywhere\",\n this.labelField\n );\n\n this.filteredOptions =\n rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;\n }\n }\n\n if (!this.showClearButton) {\n this.handleShowClearButton(true);\n }\n\n this.debounceAriaLiveUpdate();\n };\n\n /\n @deprecated This event should not be used anymore. Use icSearchBarBlur instead.\n /\n @Event() icInputBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n private onInputBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icInputBlur.emit({ value: value, relatedTarget: nextFocus });\n };\n\n /\n @deprecated This event should not be used anymore. Use icSearchBarFocus instead.\n /\n @Event() icInputFocus: EventEmitter<IcValueEventDetail>;\n private onInputFocus = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icInputFocus.emit({ value: value });\n\n this.handleShowClearButton(true);\n };\n\n /\n Emitted when option is highlighted within the menu\n /\n @Event() icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;\n\n /\n Emitted when the state of the menu changes (i.e. open or close)\n /\n @Event() icMenuChange: EventEmitter<IcMenuChangeEventDetail>;\n /\n @internal - Emitted when blur is invoked from clear button\n /\n @Event() icClearBlur: EventEmitter<IcBlurEventDetail>;\n private handleClearBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icClearBlur.emit({ relatedTarget: nextFocus });\n\n this.clearButtonFocused = false;\n };\n\n /\n Emitted when the 'retry loading' button is clicked\n /\n @Event() icRetryLoad: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when the search value has been submitted\n /\n @Event() icSubmitSearch: EventEmitter<IcValueEventDetail>;\n\n /\n @internal - Emitted when blur is invoked from search submit button\n /\n @Event() icSubmitSearchBlur: EventEmitter<IcBlurEventDetail>;\n private handleSubmitSearchBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n\n this.icSubmitSearchBlur.emit({ relatedTarget: nextFocus });\n\n this.searchSubmitFocused = false;\n };\n\n /\n Emitted when blur is invoked from ic-search-bar\n /\n @Event() icSearchBarBlur: EventEmitter<IcSearchBarBlurEventDetail>;\n\n /\n Emitted when focus is invoked from ic-search-bar\n /\n @Event() icSearchBarFocus: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.assistiveHintEl) {\n this.assistiveHintEl.remove();\n }\n }\n\n componentWillLoad(): void {\n this.watchValueHandler(this.value);\n\n removeDisabledFalse(this.disabled, this.el);\n\n if (this.small) {\n this.size = \"small\";\n }\n }\n\n componentDidLoad(): void {\n if (this.focusOnLoad) {\n this.el.setFocus();\n }\n\n if (this.hasOptionsOrFilterDisabled()) {\n this.renderAssistiveHintEl();\n if (this.disableFilter) {\n this.filteredOptions = this.options;\n }\n }\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Search Bar\"\n );\n\n if (this.inputEl !== undefined) {\n this.anchorEl = this.inputEl.shadowRoot.querySelector(\n \"ic-input-component-container\"\n );\n }\n }\n\n componentWillRender(): void {\n this.highlightFirstOptionAfterNoResults();\n }\n\n @Listen(\"icKeydown\", {})\n handleKeyDown(ev: CustomEvent): void {\n const keyEv: KeyboardEvent = ev.detail.event;\n if (this.menu && this.open) {\n this.menu.handleKeyboardOpen(keyEv);\n }\n }\n\n @Listen(\"keyup\", {})\n handleKeyUp(ev: KeyboardEvent): void {\n if (ev.key === \"Enter\") {\n if (this.preventSubmit \|\| this.isSubmitDisabled()) {\n return;\n }\n\n this.handleSubmitSearch();\n this.setMenuChange(false);\n }\n\n if (ev.key === \"Escape\") {\n this.setMenuChange(false);\n }\n\n if (this.preventSubmit) {\n this.preventSubmit = false;\n }\n }\n\n /\n Sets focus on the native `input`.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n if (this.inputEl) {\n this.inputEl.setFocus();\n }\n }\n\n private handleMouseDown = (ev: Event) => {\n ev.preventDefault();\n };\n\n private handleSubmitSearchFocus = () => {\n this.searchSubmitFocused = true;\n };\n\n private handleSubmitSearch = () => {\n this.highlightedValue && (this.value = this.highlightedValue);\n this.highlightedValue = undefined;\n this.icSubmitSearch.emit({ value: this.value });\n\n const form: HTMLFormElement = this.el.closest(\"FORM\");\n\n if (this.searchSubmitButton && !!form && !this.preventSubmit) {\n handleHiddenFormButtonClick(form, this.searchSubmitButton);\n }\n };\n\n private debounceAriaLiveUpdate() {\n clearTimeout(this.debounceAriaLive);\n\n this.debounceAriaLive = window.setTimeout(() => {\n this.updateSearchResultAriaLive();\n }, 500);\n }\n\n private handleSubmitSearchKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === \" \") {\n ev.preventDefault();\n this.handleSubmitSearch();\n }\n };\n\n private handleRetry = (ev: CustomEvent<IcValueEventDetail>) => {\n this.retryViaKeyPress = ev.detail.keyPressed === \"Enter\";\n this.icRetryLoad.emit({ value: ev.detail.value });\n this.triggerLoading();\n this.retryButtonClick = true;\n };\n\n private triggerLoading = () => {\n const loadingOption: IcMenuOption[] = [\n {\n [this.labelField]: this.loadingLabel,\n [this.valueField]: \"\",\n loading: true,\n },\n ];\n if (this.filteredOptions !== loadingOption)\n this.filteredOptions = loadingOption;\n if (this.timeout) {\n this.timeoutTimer = window.setTimeout(() => {\n this.filteredOptions = [\n {\n [this.labelField]: this.loadingErrorLabel,\n [this.valueField]: \"\",\n timedOut: true,\n },\n ];\n }, this.timeout);\n }\n };\n\n private handleOptionSelect = (ev: CustomEvent) => {\n if (ev.detail.label === this.emptyOptionListText) {\n this.el.setFocus();\n return;\n }\n\n this.value = ev.detail.value;\n this.icOptionSelect.emit({ value: this.value });\n };\n\n private handleMenuOptionHighlight = (ev: CustomEvent) => {\n const optionValue = ev.detail.optionId?.replace(`${this.menuId}-`, \"\");\n optionValue && (this.highlightedValue = optionValue);\n if (ev.detail.optionId) {\n this.ariaActiveDescendant = ev.detail.optionId;\n } else {\n this.ariaActiveDescendant = undefined;\n }\n };\n\n private handleMenuChange = (ev: CustomEvent<IcMenuChangeEventDetail>) => {\n this.setMenuChange(ev.detail.open);\n if (!ev.detail.open) {\n this.handleMenuCloseFromMenuChange(true);\n if (ev.detail.focusInput === undefined \|\| ev.detail.focusInput) {\n this.el.setFocus();\n }\n }\n };\n\n private setMenuChange = (open: boolean) => {\n if (this.open !== open) {\n this.open = open;\n this.icMenuChange.emit({ open });\n }\n };\n\n private handleHostFocus = () => {\n if (this.options && this.value && !this.menuCloseFromMenuChangeEvent) {\n this.setMenuChange(true);\n }\n this.handleTruncateValue(false);\n\n this.icSearchBarFocus.emit();\n };\n\n private handleHostBlur = (ev: Event) => {\n const nextFocus = (ev as FocusEvent).relatedTarget;\n if (\n this.open &&\n this.options &&\n nextFocus !== this.menu &&\n !this.retryViaKeyPress &&\n !this.retryButtonClick\n ) {\n this.setMenuChange(false);\n }\n\n if (this.retryButtonClick \|\| this.retryViaKeyPress) {\n this.inputEl.setFocus();\n }\n\n this.handleShowClearButton(false);\n this.handleMenuCloseFromMenuChange(false);\n this.handleTruncateValue(true);\n this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });\n this.retryViaKeyPress = false;\n this.retryButtonClick = false;\n };\n\n private handleShowClearButton = (visible: boolean): void => {\n this.showClearButton = visible;\n };\n\n private handleFocusClearButton = (): void => {\n this.clearButtonFocused = true;\n };\n\n private handleMenuCloseFromMenuChange = (fromEvent: boolean): void => {\n this.menuCloseFromMenuChangeEvent = fromEvent;\n };\n\n private handleTruncateValue = (truncate: boolean): void => {\n this.truncateValue = truncate;\n };\n\n private renderAssistiveHintEl = (): void => {\n const input = this.el.shadowRoot\n .querySelector(\"ic-text-field\")\n ?.shadowRoot?.querySelector(`#${this.inputId}`);\n\n if (\n input &&\n Object.keys(input).length > 0 &&\n this.hasOptionsOrFilterDisabled()\n ) {\n this.assistiveHintEl = document.createElement(\"span\");\n this.assistiveHintEl.innerText = this.hintText;\n this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;\n this.assistiveHintEl.style.display = \"none\";\n if (input.after !== undefined) {\n input.after(this.assistiveHintEl);\n }\n }\n };\n\n private updateSearchResultAriaLive = (): void => {\n const searchResultsStatusEl = this.el.shadowRoot.querySelector(\n \".search-results-status\"\n ) as HTMLParagraphElement;\n\n if (searchResultsStatusEl) {\n if (\n !this.open \|\|\n this.value === \"\" \|\|\n this.value.length < this.charactersUntilSuggestion\n ) {\n searchResultsStatusEl.innerText = \"\";\n } else if (\n this.hasOptionsOrFilterDisabled() &&\n this.filteredOptions.length > 0 &&\n this.open &&\n !this.filteredOptions[0].loading\n ) {\n if (this.hadNoOptions()) {\n searchResultsStatusEl.innerText = this.emptyOptionListText;\n } else {\n searchResultsStatusEl.innerText = `${\n this.filteredOptions.length\n } result${this.filteredOptions.length > 1 ? \"s\" : \"\"} available`;\n }\n }\n }\n };\n\n private hasOptionsOrFilterDisabled = (): boolean =>\n this.options.length > 0 \|\| this.disableFilter;\n\n private hadNoOptions = (): boolean =>\n this.filteredOptions.length === 1 &&\n this.filteredOptions[0][this.labelField] === this.emptyOptionListText &&\n this.searchMode === \"navigation\";\n\n private isSubmitDisabled = (): boolean => {\n const valueNotSet =\n this.value === undefined \|\| this.value === null \|\| this.value === \"\";\n const valueLengthLess = this.value.length < this.charactersUntilSuggestion;\n return (\n valueNotSet \|\|\n valueLengthLess \|\|\n this.disabled \|\|\n this.hadNoOptions() \|\|\n this.hasTimedOut \|\|\n this.loading\n );\n };\n\n private highlightFirstOptionAfterNoResults = () => {\n if (this.prevNoOption && this.menu && !this.hasTimedOut) {\n this.menu.handleSetFirstOption();\n this.prevNoOption = false;\n }\n const prevNoOptionsList = this.filteredOptions.find(\n (filteredOption) =>\n filteredOption[this.labelField] === this.emptyOptionListText \|\|\n filteredOption[this.labelField] === this.loadingErrorLabel \|\|\n filteredOption[this.labelField] === this.loadingLabel\n );\n if (prevNoOptionsList) {\n this.prevNoOption = true;\n }\n };\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n small,\n size,\n placeholder,\n helperText,\n disabled,\n value,\n readonly,\n spellcheck,\n fullWidth,\n options,\n open,\n hideLabel,\n menuId,\n ariaActiveDescendant,\n truncateValue,\n autofocus,\n autocapitalize,\n autocomplete,\n filteredOptions,\n } = this;\n\n const disabledMode = readonly \|\| disabled ? true : false;\n\n const describedBy = getInputDescribedByText(\n inputId,\n helperText !== \"\",\n false\n ).trim();\n\n let describedById;\n\n if (describedBy !== \"\" && this.hasOptionsOrFilterDisabled()) {\n describedById = `${describedBy} ${this.inputId}-assistive-hint`;\n } else if (this.hasOptionsOrFilterDisabled()) {\n describedById = `${this.inputId}-assistive-hint`;\n } else if (describedBy !== \"\") {\n describedById = describedBy;\n } else {\n describedById = undefined;\n }\n\n const disabledText = disabledMode && !readonly;\n const hasSuggestedSearch = value && this.hasOptionsOrFilterDisabled();\n const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;\n const menuRendered =\n menuOpen && value.length >= this.charactersUntilSuggestion;\n const isOrHasLoaded =\n this.filteredOptions.length === 1 &&\n (this.filteredOptions[0][this.labelField] === this.loadingLabel \|\|\n filteredOptions[0][this.labelField] === this.loadingErrorLabel);\n\n let expanded;\n\n if (options.length > 0) {\n if (menuOpen) {\n expanded = \"true\";\n } else {\n expanded = \"false\";\n }\n } else {\n expanded = undefined;\n }\n\n renderHiddenInput(true, this.el, name, value, disabledMode);\n\n return (\n <Host\n class={{\n [\"search\"]: true,\n [\"fullwidth\"]: fullWidth,\n [\"disabled\"]: disabled,\n [\"small\"]: size === \"small\",\n }}\n onFocus={this.handleHostFocus}\n onBlur={this.handleHostBlur}\n >\n <ic-text-field\n ref={(el) => (this.inputEl = el)}\n inputId={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n size={size}\n hideLabel={hideLabel}\n fullWidth={fullWidth}\n name={name}\n truncateValue={truncateValue}\n value={\n options &&\n !!getLabelFromValue(\n value,\n options,\n this.valueField,\n this.labelField\n )\n ? getLabelFromValue(\n value,\n options,\n this.valueField,\n this.labelField\n )\n : value\n }\n placeholder={placeholder}\n onInput={this.onInput}\n onBlur={this.onInputBlur}\n onFocus={this.onInputFocus}\n aria-label={hideLabel ? label : \"\"}\n aria-describedby={describedById}\n aria-owns={menuRendered ? menuId : undefined}\n aria-haspopup={options.length > 0 ? \"listbox\" : undefined}\n ariaExpanded={expanded}\n ariaActiveDescendant={ariaActiveDescendant}\n aria-autocomplete={hasSuggestedSearch ? \"list\" : undefined}\n role={hasSuggestedSearch ? \"combobox\" : undefined}\n autocomplete={autocomplete}\n autocapitalize={autocapitalize}\n autoFocus={autofocus}\n spellcheck={spellcheck}\n inputmode=\"search\"\n debounce={this.debounce}\n >\n <div\n class={{\n \"clear-button-container\": true,\n \"clear-button-visible\":\n value && !disabledMode && this.showClearButton,\n }}\n slot=\"clear-button\"\n >\n <ic-button\n id=\"clear-button\"\n class=\"clear-button\"\n aria-label=\"Clear\"\n innerHTML={clearIcon}\n onClick={this.handleClear}\n onMouseDown={this.handleMouseDown}\n size={size}\n onFocus={this.handleFocusClearButton}\n onBlur={this.handleClearBlur}\n onKeyDown={this.handleClear}\n type=\"submit\"\n variant=\"icon\"\n appearance={\n this.clearButtonFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Dark\n }\n ></ic-button>\n <div class=\"divider\"></div>\n </div>\n <div\n class={{\n \"search-submit-button-container\": true,\n \"search-submit-button-disabled\": this.isSubmitDisabled(),\n }}\n slot=\"search-submit-button\"\n >\n <ic-button\n id=\"search-submit-button\"\n aria-label=\"Search\"\n ref={(el) => (this.searchSubmitButton = el)}\n class={{\n [\"search-submit-button\"]: true,\n [\"search-submit-button-small\"]: !!small,\n }}\n disabled={this.isSubmitDisabled()}\n innerHTML={searchIcon}\n size={size}\n onClick={this.handleSubmitSearch}\n onMouseDown={this.handleMouseDown}\n onBlur={this.handleSubmitSearchBlur}\n onFocus={this.handleSubmitSearchFocus}\n onKeyDown={this.handleSubmitSearchKeyDown}\n type=\"submit\"\n variant=\"icon\"\n appearance={\n this.searchSubmitFocused\n ? IcThemeForegroundEnum.Light\n : IcThemeForegroundEnum.Default\n }\n ></ic-button>\n </div>\n <div\n class={{\n \"menu-container\": true,\n fullwidth: fullWidth,\n }}\n slot=\"menu\"\n >\n {menuRendered && (\n <ic-menu\n class={{\n \"no-results\": this.hadNoOptions() \|\| isOrHasLoaded,\n }}\n activationType=\"manual\"\n anchorEl={this.anchorEl}\n autoFocusOnSelected={false}\n searchMode={this.searchMode}\n inputEl={this.inputEl}\n inputLabel={label}\n ref={(el) => (this.menu = el)}\n small={size === \"small\"}\n fullWidth={fullWidth}\n menuId={menuId}\n open={!!menuRendered}\n options={filteredOptions}\n onMenuOptionSelect={this.handleOptionSelect}\n onMenuStateChange={this.handleMenuChange}\n onMenuOptionId={this.handleMenuOptionHighlight}\n onRetryButtonClicked={this.handleRetry}\n parentEl={this.el}\n value={value}\n labelField={this.labelField}\n valueField={this.valueField}\n ></ic-menu>\n )}\n </div>\n </ic-text-field>\n <div\n aria-live=\"polite\"\n role=\"status\"\n class=\"search-results-status\"\n ></div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/core/p-9de95c50.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as o,h as e,H as i,g as a}from"./p-6b5e91e2.js";import{j as r,a as c,i as n}from"./p-063587c6.js";import"./p-26b7b18f.js";const s='/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--button-border:var(\n --toggle-button-border,\n var(--ic-border-width) solid var(--ic-action-default)\n )}:host(.dark){--button-border:var(\n --toggle-button-border,\n var(--ic-border-width) solid var(--ic-action-dark)\n )}:host(.light){--button-border:var(\n --toggle-button-border,\n var(--ic-border-width) solid var(--ic-action-light)\n )}:host(.disabled){--button-border:var(--toggle-button-border, var(--ic-border-disabled))}:host(.expand-toggle-group-child) ::part(button){width:100%;min-height:inherit;white-space:inherit;height:inherit}:host ic-button{--icon-width:var(--ic-space-lg);--icon-height:var(--ic-space-lg)}:host(.expand-toggle-group-child) ic-button{min-width:100%;min-height:100%;white-space:normal;height:100%}:host(.expand-toggle-group-child) ::part(button):focus,:host(.expand-toggle-group-child.checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n var(--ic-border-focus)}:host(.expand-toggle-group-child.light) ::part(button):focus,:host(.expand-toggle-group-child.dark) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-dark),\n var(--ic-border-focus)}:host(:focus){z-index:1}:host ::part(button){border:var(--button-border)}:host(.checked) ::part(button){background-color:var(--ic-action-default);color:var(--ic-architectural-white);box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white)}:host(.checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),\n var(--ic-border-focus)}:host(.checked) ::part(button):hover{background-color:var(--button-default-hover)}:host(.checked) ::part(button):active,:host(.icon.checked) ::part(button):active{background-color:var(--ic-action-default-active)}:host(.dark.checked) ::part(button){background-color:var(--ic-action-dark)}:host(.dark.checked) ::part(button):hover{background-color:var(--ic-action-dark-hover)}:host(.dark.checked) ::part(button):active,:host(.icon.dark.checked) ::part(button):active{background-color:var(--ic-action-dark-active)}:host(.light.checked) ::part(button){background-color:var(--ic-action-light);color:var(--ic-color-primary-text);box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black)}:host(.light.checked) ::part(button):hover{background-color:var(--ic-action-light-hover)}:host(.light.checked) ::part(button):active,:host(.icon.light.checked) ::part(button):active{background-color:var(--ic-action-light-active)}:host(.light.checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black),\n var(--ic-border-focus)}:host(.disabled) ::part(button),:host(.icon.disabled) ::part(button){border:var(--button-border)}:host(.disabled.checked) ::part(button),:host(.icon.disabled.checked) ::part(button){background-color:transparent}:host(.disabled.checked) ::part(button),:host(.icon.disabled.checked) ::part(button)::before{background-image:radial-gradient(var(--ic-architectural-400) 95%, white 20%);background-repeat:no-repeat}:host(.icon) ::part(button){border:var(--button-border);height:calc(var(--ic-space-xl) + var(--ic-space-xs));width:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.icon) ::part(button):active{background-color:var(--ic-action-default-bg-active)}:host(.icon.dark) ::part(button):active{background-color:var(--ic-action-dark-bg-active)}:host(.icon.light) ::part(button):active{background-color:var(--ic-action-light-bg-active)}:host(.icon.small) ::part(button){height:var(--ic-space-xl);width:var(--ic-space-xl)}:host(.icon.large) ::part(button){height:var(--ic-space-xxl);width:var(--ic-space-xxl)}:host(.checked.loading) ::part(button){background-color:var(--button-default-active)}:host(.loading) ::part(ic-loading-container){--inner-color:var(--ic-architectural-white)}:host(.checked.loading.light) ::part(button){background-color:var(--ic-action-light-active)}:host(.checked.loading.dark) ::part(button){background-color:var(--ic-action-dark-active)}@media (forced-colors: active){:host(.checked) ::part(button),:host(.checked) ::part(button):hover{background-color:Highlight}:host(.checked.light) ::part(button),:host(.checked.light) ::part(button):hover{background-color:Highlight}:host(.checked.dark) ::part(button),:host(.checked.dark) ::part(button):hover{background-color:Highlight}:host(.checked.disabled) ::part(button){background-color:GrayText}}';const h=class{constructor(e){t(this,e);this.icToggleChecked=o(this,"icToggleChecked",7);this.handleFocus=t=>{t.stopImmediatePropagation()};this.handleClick=()=>{!this.loading&&!this.disabled&&this.icToggleChecked.emit({checked:this.toggleChecked})};this.accessibleLabel=undefined;this.appearance="default";this.disabled=false;this.fullWidth=false;this.iconPlacement=undefined;this.label=undefined;this.loading=false;this.size="default";this.toggleChecked=false;this.variant="default"}componentWillLoad(){r(this.disabled,this.el);const t=this.el.parentElement.iconPlacement;this.iconPosition=this.iconPlacement\|\|t}componentDidLoad(){c([{prop:this.variant==="icon"?this.accessibleLabel:this.label,propName:this.variant==="icon"?"accessible-label":"label"}],"Toggle button")}handleHostClick(t){if(this.disabled){t.stopImmediatePropagation()}else if(!this.loading){this.toggleChecked=!this.toggleChecked}}render(){return e(i,{class:{["disabled"]:this.disabled,["checked"]:this.toggleChecked,[`${this.appearance}`]:true,["icon"]:this.variant==="icon",[`${this.size}`]:true,["loading"]:this.loading},onFocus:this.handleFocus},e("ic-button",{"aria-pressed":this.toggleChecked.toString(),variant:this.variant==="icon"?"icon":"secondary",onClick:this.handleClick,title:this.accessibleLabel,"aria-label":`${this.accessibleLabel?this.accessibleLabel:this.label}, ${this.toggleChecked?"ticked":"unticked"}`,disabled:this.disabled,appearance:this.appearance,size:this.size,fullWidth:this.fullWidth,loading:this.loading,"aria-disabled":`${this.disabled}`},this.variant!=="icon"&&this.label,e("slot",null),n(this.el,"icon")&&e("slot",{name:"icon",slot:`${this.iconPosition?`${this.iconPosition}-icon`:"icon"}`}),n(this.el,"badge")&&e("slot",{name:"badge",slot:"badge"})))}static get delegatesFocus(){return true}get el(){return a(this)}};h.style=s;export{h as ic_toggle_button};
2	+ //# sourceMappingURL=p-9de95c50.entry.js.map

package/dist/core/p-9de95c50.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["icToggleButtonCss","ToggleButton","this","handleFocus","ev","stopImmediatePropagation","handleClick","loading","disabled","icToggleChecked","emit","checked","toggleChecked","componentWillLoad","removeDisabledFalse","el","parentIconPlacement","parentElement","iconPlacement","iconPosition","componentDidLoad","onComponentRequiredPropUndefined","prop","variant","accessibleLabel","label","propName","handleHostClick","e","render","h","Host","class","appearance","size","onFocus","toString","onClick","title","fullWidth","isSlotUsed","name","slot"],"sources":["src/components/ic-toggle-button/ic-toggle-button.css?tag=ic-toggle-button&encapsulation=shadow","src/components/ic-toggle-button/ic-toggle-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP */\n:host {\n --button-border: var(\n --toggle-button-border,\n var(--ic-border-width) solid var(--ic-action-default)\n );\n}\n\n:host(.dark) {\n --button-border: var(\n --toggle-button-border,\n var(--ic-border-width) solid var(--ic-action-dark)\n );\n}\n\n:host(.light) {\n --button-border: var(\n --toggle-button-border,\n var(--ic-border-width) solid var(--ic-action-light)\n );\n}\n\n:host(.disabled) {\n --button-border: var(--toggle-button-border, var(--ic-border-disabled));\n}\n\n:host(.expand-toggle-group-child) ::part(button) {\n width: 100%;\n min-height: inherit;\n white-space: inherit;\n height: inherit;\n}\n\n:host ic-button {\n --icon-width: var(--ic-space-lg);\n --icon-height: var(--ic-space-lg);\n}\n\n:host(.expand-toggle-group-child) ic-button {\n min-width: 100%;\n min-height: 100%;\n white-space: normal;\n height: 100%;\n}\n\n:host(.expand-toggle-group-child) ::part(button):focus,\n:host(.expand-toggle-group-child.checked) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n var(--ic-border-focus);\n}\n\n:host(.expand-toggle-group-child.light) ::part(button):focus,\n:host(.expand-toggle-group-child.dark) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-dark),\n var(--ic-border-focus);\n}\n\n:host(:focus) {\n z-index: 1;\n}\n\n:host ::part(button) {\n border: var(--button-border);\n}\n\n:host(.checked) ::part(button) {\n background-color: var(--ic-action-default);\n color: var(--ic-architectural-white);\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white);\n}\n\n:host(.checked) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),\n var(--ic-border-focus);\n}\n\n:host(.checked) ::part(button):hover {\n background-color: var(--button-default-hover);\n}\n\n:host(.checked) ::part(button):active,\n:host(.icon.checked) ::part(button):active {\n background-color: var(--ic-action-default-active);\n}\n\n:host(.dark.checked) ::part(button) {\n background-color: var(--ic-action-dark);\n}\n\n:host(.dark.checked) ::part(button):hover {\n background-color: var(--ic-action-dark-hover);\n}\n\n:host(.dark.checked) ::part(button):active,\n:host(.icon.dark.checked) ::part(button):active {\n background-color: var(--ic-action-dark-active);\n}\n\n:host(.light.checked) ::part(button) {\n background-color: var(--ic-action-light);\n color: var(--ic-color-primary-text);\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black);\n}\n\n:host(.light.checked) ::part(button):hover {\n background-color: var(--ic-action-light-hover);\n}\n\n:host(.light.checked) ::part(button):active,\n:host(.icon.light.checked) ::part(button):active {\n background-color: var(--ic-action-light-active);\n}\n\n:host(.light.checked) ::part(button):focus {\n box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black),\n var(--ic-border-focus);\n}\n\n:host(.disabled) ::part(button),\n:host(.icon.disabled) ::part(button) {\n border: var(--button-border);\n}\n\n:host(.disabled.checked) ::part(button),\n:host(.icon.disabled.checked) ::part(button) {\n background-color: transparent;\n}\n\n:host(.disabled.checked) ::part(button),\n:host(.icon.disabled.checked) ::part(button)::before {\n background-image: radial-gradient(var(--ic-architectural-400) 95%, white 20%);\n background-repeat: no-repeat;\n}\n\n:host(.icon) ::part(button) {\n border: var(--button-border);\n height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n width: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.icon) ::part(button):active {\n background-color: var(--ic-action-default-bg-active);\n}\n\n:host(.icon.dark) ::part(button):active {\n background-color: var(--ic-action-dark-bg-active);\n}\n\n:host(.icon.light) ::part(button):active {\n background-color: var(--ic-action-light-bg-active);\n}\n\n:host(.icon.small) ::part(button) {\n height: var(--ic-space-xl);\n width: var(--ic-space-xl);\n}\n\n:host(.icon.large) ::part(button) {\n height: var(--ic-space-xxl);\n width: var(--ic-space-xxl);\n}\n\n:host(.checked.loading) ::part(button) {\n background-color: var(--button-default-active);\n}\n\n:host(.loading) ::part(ic-loading-container) {\n --inner-color: var(--ic-architectural-white);\n}\n\n:host(.checked.loading.light) ::part(button) {\n background-color: var(--ic-action-light-active);\n}\n\n:host(.checked.loading.dark) ::part(button) {\n background-color: var(--ic-action-dark-active);\n}\n\n@media (forced-colors: active) {\n :host(.checked) ::part(button),\n :host(.checked) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.checked.light) ::part(button),\n :host(.checked.light) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.checked.dark) ::part(button),\n :host(.checked.dark) ::part(button):hover {\n background-color: Highlight;\n }\n\n :host(.checked.disabled) ::part(button) {\n background-color: GrayText;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n Event,\n EventEmitter,\n Listen,\n h,\n} from \"@stencil/core\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeForeground } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n tag: \"ic-toggle-button\",\n styleUrl: \"ic-toggle-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ToggleButton {\n private iconPosition: \"left\" | \"right\" | \"top\";\n\n @Element() el: HTMLIcToggleButtonElement;\n\n /**\n * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n */\n @Prop() accessibleLabel?: string;\n\n /**\n * The appearance of the toggle button.\n */\n @Prop() appearance?: IcThemeForeground = \"default\";\n\n /**\n * If `true`, the toggle button will be in disabled state.\n */\n @Prop() disabled?: boolean = false;\n\n /**\n * If `true`, the toggle button will fill the width of the container.\n */\n @Prop() fullWidth?: boolean = false;\n\n /**\n * The placement of the icon in relation to the toggle button label.\n */\n @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n /**\n * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the toggle button will be in loading state.\n */\n @Prop() loading?: boolean = false;\n\n /**\n * The size of the toggle button to be displayed.\n */\n @Prop() size?: IcSizes = \"default\";\n\n /**\n * If `true`, the toggle button will be in a checked state.\n */\n @Prop({ mutable: true, reflect: true }) toggleChecked: boolean = false;\n\n /**\n * The variant of the toggle button.\n */\n @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n /**\n * Emitted when the user clicks a toggle button.\n */\n @Event() icToggleChecked: EventEmitter<{\n checked: boolean;\n }>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n const parentIconPlacement = (\n this.el.parentElement as HTMLIcToggleButtonGroupElement\n ).iconPlacement;\n this.iconPosition = this.iconPlacement || parentIconPlacement;\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [\n {\n prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n },\n ],\n \"Toggle button\"\n );\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(e: Event): void {\n if (this.disabled) {\n e.stopImmediatePropagation();\n } else if (!this.loading) {\n this.toggleChecked = !this.toggleChecked;\n }\n }\n\n private handleFocus = (ev: FocusEvent) => {\n ev.stopImmediatePropagation();\n };\n\n private handleClick = (): void => {\n !this.loading &&\n !this.disabled &&\n this.icToggleChecked.emit({\n checked: this.toggleChecked,\n });\n };\n\n render() {\n return (\n <Host\n class={{\n [\"disabled\"]: this.disabled,\n [\"checked\"]: this.toggleChecked,\n [`${this.appearance}`]: true,\n [\"icon\"]: this.variant === \"icon\",\n [`${this.size}`]: true,\n [\"loading\"]: this.loading,\n }}\n onFocus={this.handleFocus}\n >\n <ic-button\n aria-pressed={this.toggleChecked.toString()}\n variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n onClick={this.handleClick}\n title={this.accessibleLabel}\n aria-label={`${\n this.accessibleLabel ? this.accessibleLabel : this.label\n }, ${this.toggleChecked ? \"ticked\" : \"unticked\"}`}\n disabled={this.disabled}\n appearance={this.appearance}\n size={this.size}\n fullWidth={this.fullWidth}\n loading={this.loading}\n aria-disabled={`${this.disabled}`}\n >\n {this.variant !== \"icon\" && this.label}\n <slot />\n {isSlotUsed(this.el, \"icon\") && (\n <slot\n name=\"icon\"\n slot={`${\n this.iconPosition ? `${this.iconPosition}-icon` : \"icon\"\n }`}\n ></slot>\n )}\n {isSlotUsed(this.el, \"badge\") && (\n <slot name=\"badge\" slot=\"badge\"></slot>\n )}\n </ic-button>\n </Host>\n );\n }\n}\n"],"mappings":"0IAAA,MAAMA,EAAoB,irN,MC6BbC,EAAY,M,0EA4FfC,KAAAC,YAAeC,IACrBA,EAAGC,0BAA0B,EAGvBH,KAAAI,YAAc,MACnBJ,KAAKK,UACHL,KAAKM,UACNN,KAAKO,gBAAgBC,KAAK,CACxBC,QAAST,KAAKU,eACd,E,+CAxFmC,U,cAKZ,M,eAKC,M,+DAeF,M,UAKH,U,mBAKwC,M,aAKV,S,CASvD,iBAAAC,GACEC,EAAoBZ,KAAKM,SAAUN,KAAKa,IAExC,MAAMC,EACJd,KAAKa,GAAGE,cACRC,cACFhB,KAAKiB,aAAejB,KAAKgB,eAAiBF,C,CAG5C,gBAAAI,GACEC,EACE,CACE,CACEC,KAAMpB,KAAKqB,UAAY,OAASrB,KAAKsB,gBAAkBtB,KAAKuB,MAC5DC,SAAUxB,KAAKqB,UAAY,OAAS,mBAAqB,UAG7D,gB,CAKJ,eAAAI,CAAgBC,GACd,GAAI1B,KAAKM,SAAU,CACjBoB,EAAEvB,0B,MACG,IAAKH,KAAKK,QAAS,CACxBL,KAAKU,eAAiBV,KAAKU,a,EAgB/B,MAAAiB,GACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,YAAa9B,KAAKM,SACnB,CAAC,WAAYN,KAAKU,cAClB,CAAC,GAAGV,KAAK+B,cAAe,KACxB,CAAC,QAAS/B,KAAKqB,UAAY,OAC3B,CAAC,GAAGrB,KAAKgC,QAAS,KAClB,CAAC,WAAYhC,KAAKK,SAEpB4B,QAASjC,KAAKC,aAEd2B,EAAA,4BACgB5B,KAAKU,cAAcwB,WACjCb,QAASrB,KAAKqB,UAAY,OAAS,OAAS,YAC5Cc,QAASnC,KAAKI,YACdgC,MAAOpC,KAAKsB,gBAAe,aACf,GACVtB,KAAKsB,gBAAkBtB,KAAKsB,gBAAkBtB,KAAKuB,UAChDvB,KAAKU,cAAgB,SAAW,aACrCJ,SAAUN,KAAKM,SACfyB,WAAY/B,KAAK+B,WACjBC,KAAMhC,KAAKgC,KACXK,UAAWrC,KAAKqC,UAChBhC,QAASL,KAAKK,QAAO,gBACN,GAAGL,KAAKM,YAEtBN,KAAKqB,UAAY,QAAUrB,KAAKuB,MACjCK,EAAA,aACCU,EAAWtC,KAAKa,GAAI,SACnBe,EAAA,QACEW,KAAK,OACLC,KAAM,GACJxC,KAAKiB,aAAe,GAAGjB,KAAKiB,oBAAsB,WAIvDqB,EAAWtC,KAAKa,GAAI,UACnBe,EAAA,QAAMW,KAAK,QAAQC,KAAK,W"}