@ukic/web-components 2.37.1 → 2.38.0

package/dist/core/p-5d50fc1f.entry.js

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

package/dist/core/p-5d50fc1f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["icSideNavigationCss","SideNavigation","this","ANIMATION_DURATION","parseInt","getCssProperty","IC_NAVIGATION_ITEM","resizeObserver","COLLAPSED_ICON_LABELS_END","COLLAPSED_ICON_LABELS_START","menuButton","emitSideNavigationExpanded","objDetails","sideNavExpanded","emit","sideNavMobile","toggleMenu","menuOpen","setMobileMenuAriaAttributes","arrangeSlottedNavigationItem","setToggleMenuFlyoutMenuVisibility","sideNav","el","shadowRoot","querySelector","sideNavInner","bottomWrapper","menuVisibilityVisible","classList","add","setTimeout","remove","setAttribute","setAndRemoveNoWrapAfterMenuExpanded","appTitle","toggleMenuExpanded","expanded","deviceSize","DEVICE_SIZES","S","menuExpanded","style","setProperty","addEventListener","e","propertyName","displayTooltipWithExpandedLongLabel","collapsedIconLabels","animateCollapsedIconLabels","setExpandedButtonHeight","navItems","querySelectorAll","forEach","navItem","isNamedSlot","isSlotUsed","isUnnamedSlot","children","getAttribute","navItemSlot","iconWrapper","document","createElement","icon","label","textContent","trim","icTypography","height","append","styleSlottedCollapsedIconLabels","styleSlottedIconLabels","marginTop","whiteSpace","overflow","textOverflow","appStatusWrapper","offsetHeight","opacity","visibility","transition","transitionHandler","type","primaryNavigationWrapper","secondaryNavigationWrapper","classToRemove","classToAdd","transitionEndHandler","paddingIconWidth","navItemLink","navItemSVG","navStyles","gap","window","getComputedStyle","iconWidth","width","paddingLeft","Object","values","reduce","prev","curr","timer","sideNavWidth","clientWidth","navigationItems","Array","from","paddingIconDelta","length","navigationItem","icTypographyScrollWidth","_a","scrollWidth","_b","clearTimeout","setMenuExpanded","setParentPaddingTop","value","parentElement","setParentPaddingLeft","renderAppTitle","isAppNameSubtitleVariant","displayShortAppTitle","isEmptyString","shortAppTitle","h","variant","undefined","resizeObserverCallback","currSize","isSmallAndDisableTopBar","disableTopBarBehaviour","disableAutoParentStyling","topBarHeight","scrollHeight","inline","_c","L","M","static","runResizeObserver","ResizeObserver","getCurrentDeviceSize","deviceSizeAppTitle","observe","body","box","setCollapsedIconLabels","styleSlottedCollapsedIconLabel","dynamicSlottedIcTypographyComps","contains","renderTopBar","isSDevice","foregroundColor","href","hasTitle","isPropDefined","Component","attrs","class","id","size","appearance","onClick","ariaOwnsId","ref","slot","innerHTML","closeIcon","menuIcon","assign","name","getThemeForegroundColor","watchExpandedHandler","componentWillLoad","hasSecondaryNavigation","componentDidLoad","checkResizeObserver","onComponentRequiredPropUndefined","prop","propName","disconnectedCallback","disconnect","removeEventListener","themeChangeHandler","detail","mode","render","status","version","isMdDevice","isLgDevice","displayExpandBtn","topBarProps","Host","IcThemeForegroundEnum","Dark","hasClassificationBanner","chevronIcon"],"sources":["src/components/ic-side-navigation/ic-side-navigation.css?tag=ic-side-navigation&encapsulation=shadow","src/components/ic-side-navigation/ic-side-navigation.tsx"],"sourcesContent":["/**\n * @prop --ic-z-index-side-navigation: z-index of side navigation panel\n */\n\n:host {\n  display: block;\n\n  --side-navigation-position: fixed;\n  --side-navigation-position-left: 0;\n  --side-navigation-position-top: var(--ic-space-xxl);\n  --side-navigation-height: var(--ic-space-xxl);\n  --sm-side-navigation-top-bar-height: 3.5rem;\n  --sm-side-navigation-collapsed-labels-width: 6rem;\n  --sm-side-navigation-expand-transition-duration: var(\n    --ic-transition-duration-slow\n  );\n  --side-navigation-width: 20rem;\n  --sm-side-navigation-bottom-bar-height: 3.5rem;\n\n  z-index: var(--ic-z-index-side-navigation);\n}\n\n:host > * {\n  box-sizing: border-box;\n}\n\n.side-navigation {\n  display: flex;\n  flex-direction: column;\n  width: var(--side-navigation-width);\n  color: var(--ic-theme-text);\n  position: var(--side-navigation-position);\n  top: var(--side-navigation-position-top);\n  left: calc(var(--side-navigation-width) * -1);\n  bottom: 0;\n  background-color: var(--ic-theme-primary);\n  z-index: var(--ic-z-index-side-navigation);\n}\n\n:host(.inline) .side-navigation {\n  position: absolute;\n  height: 100%;\n}\n\n:host(.anchor-right) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n\n.navigation-list {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.side-navigation-inner {\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0;\n  overflow: auto;\n}\n\n:host(.inline) .side-navigation-inner {\n  flex: 1;\n}\n\n:host(.xs-menu-open) .side-navigation {\n  transition: left var(--ic-easing-transition-slow);\n  left: 0;\n}\n\n:host(:has(.xs-menu-open, .xs-menu-close)) ::slotted(ic-navigation-item) {\n  --navigation-item-side-nav-right: var(--ic-space-xl);\n}\n\n:host(.xs-menu-close) .side-navigation {\n  left: calc(var(--side-navigation-width) * -1);\n  transition: left var(--ic-easing-transition-slow);\n}\n\n:host(.xs-menu-close) .side-navigation > * {\n  visibility: hidden;\n}\n\n:host(.anchor-right.xs-menu-open) .side-navigation {\n  right: 0;\n  left: auto;\n}\n\n:host(.anchor-right.xs-menu-close) .side-navigation {\n  right: calc(var(--side-navigation-width) * -1);\n  left: auto;\n  transition: right var(--ic-easing-transition-slow);\n}\n\n.bottom-wrapper {\n  border-top: var(--ic-keyline-lighten);\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: -0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n  background-color: var(--ic-theme-primary);\n  display: flex;\n  flex-direction: column;\n}\n\n:host(.inline) .bottom-wrapper {\n  position: sticky;\n}\n\n:host(.dark) .bottom-wrapper {\n  border-top: var(--ic-keyline-darken);\n}\n\n/* Mobile Top Bar */\n\n.top-bar {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: var(--side-navigation-height);\n  padding: var(--ic-space-xs);\n  box-sizing: border-box;\n  background-color: var(--ic-theme-primary);\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  border-bottom: var(--ic-keyline-darken);\n  box-shadow: var(--ic-elevation-overlay);\n  z-index: 2;\n  overflow: hidden;\n  visibility: visible;\n}\n\n:host(.inline) .top-bar {\n  position: absolute;\n}\n\n.top-bar.dark a:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.top-bar.light {\n  border-bottom: var(--ic-keyline-lighten);\n}\n\n.app-title-wrapper {\n  display: flex;\n  margin-left: var(--ic-space-xs);\n  border-left: var(--ic-keyline-darken);\n  padding-left: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n  align-items: center;\n}\n\n.app-title-wrapper ic-typography h1 {\n  margin: 0;\n}\n\n@media screen and (min-width: 340px) {\n  .app-title-wrapper ic-typography {\n    margin-left: var(--ic-space-xs);\n  }\n}\n\n:host .title-link {\n  display: flex;\n  align-items: center;\n  transition: box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);\n  text-decoration: none;\n  padding: var(--ic-space-xxs);\n  color: var(--ic-theme-text);\n}\n\n:host .title-link:visited,\n:host .title-link:active {\n  color: var(--ic-theme-text);\n}\n\nslot[name=\"app-title\"]::slotted(a),\nslot[name=\"app-icon\"]::slotted(a) {\n  color: var(--ic-theme-text);\n  outline: none;\n  text-decoration: none;\n  display: flex;\n}\n\nslot[name=\"app-title\"]::slotted(ic-typography),\nslot[name=\"app-title\"]::slotted(a) {\n  margin-left: var(--ic-space-xs) !important;\n}\n\nslot[name=\"app-title\"]::slotted(a) {\n  font: var(--ic-font-subtitle-small);\n}\n\n@media screen and (min-width: 577px) {\n  :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(ic-typography),\n  :host(.sm-collapsed) slot[name=\"app-title\"]::slotted(a) {\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n    transition: opacity var(--ic-easing-transition-slow);\n  }\n\n  :host(.sm-collapsed) slot[name=\"app-title\"]:dir(rtl)::slotted(ic-typography),\n  :host(.sm-collapsed) slot[name=\"app-title\"]:dir(rtl)::slotted(a) {\n    right: -9999px;\n  }\n\n  :host(.sm-expanded) slot[name=\"app-title\"]::slotted(a) {\n    font: var(--ic-font-h3) !important;\n    font-weight: var(--ic-font-weight-semibold) !important;\n    margin-left: var(--ic-space-xs) !important;\n  }\n}\n\n:host .title-link:hover {\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active {\n  background-color: var(--ic-theme-active);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n  border-radius: var(--ic-border-radius);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  background-color: transparent;\n}\n\n:host .title-link ic-typography {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.app-title-wrapper ::slotted(svg) {\n  fill: var(--ic-theme-text);\n}\n\n.app-icon-container {\n  display: none;\n}\n\n.button-label {\n  display: flex;\n  align-items: center;\n}\n\n.mobile-top-bar-menu-icon {\n  display: flex;\n}\n\n.menu-button {\n  width: 6.5rem;\n}\n\n.app-status-wrapper {\n  inset: 0 var(--ic-space-sm) 0 3.5rem;\n  width: auto;\n  display: flex;\n  gap: var(--ic-space-xs);\n  padding: var(--ic-space-sm) 0;\n  justify-content: flex-end;\n  align-items: flex-end;\n  pointer-events: none;\n  height: fit-content;\n  margin: 0 var(--ic-space-xs);\n}\n\n.app-status-wrapper .app-version {\n  display: flex;\n  overflow-wrap: break-word;\n  padding-bottom: var(--ic-space-xxs);\n}\n\n.app-status-wrapper .app-status {\n  display: flex;\n  border-radius: 1rem;\n  background-color: var(--ic-theme-text);\n  color: var(--ic-color-primary-text);\n  padding: var(--ic-space-xxs) var(--ic-space-lg);\n  min-width: 1rem;\n}\n\n.app-status-wrapper .app-status-text {\n  overflow-wrap: break-word;\n}\n\n:host(.dark) .app-status-wrapper .app-status {\n  color: var(--ic-color-white-text);\n}\n\n.navigation-landmark-title {\n  position: absolute;\n  width: var(--ic-space-1px);\n  height: var(--ic-space-1px);\n  padding: 0;\n  margin: calc(-1 * var(--ic-space-1px));\n  overflow: hidden;\n}\n\n/* Navigation Group */\n\n::slotted(ic-navigation-group) {\n  --navigation-group-height: 2.75rem;\n  --navigation-group-width: 100%;\n  --navigation-group-justify-content: space-between;\n  --navigation-group-hover: var(--ic-theme-hover);\n  --navigation-group-text-hover: var(--ic-theme-text);\n  --navigation-item-child-height: 3.5rem;\n  --navigation-item-child-active: var(--ic-action-dark-bg-active);\n  --navigation-item-child-color: var(--ic-theme-text);\n  --navigation-group-expand-toggle-padding: 0.25rem;\n}\n\n/* Navigation Items */\n\n::slotted(ic-navigation-item),\n::slotted(ic-navigation-group) {\n  --navigation-item-justify-content: flex-start;\n  --navigation-item-min-height: 56px;\n  --navigation-item-height: auto;\n}\n\n/* Toggle Chevron */\n\n.bottom-side-nav {\n  position: relative;\n  align-content: flex-end;\n  min-height: var(--sm-side-navigation-top-bar-height);\n}\n\n.bottom-side-nav ic-divider {\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.primary-navigation {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n\n  /* Hide scrollbar when required but keep functionality */\n  scrollbar-width: none;\n}\n\n.primary-navigation::-webkit-scrollbar {\n  display: none;\n}\n\n.primary-navigation,\n.secondary-navigation {\n  overflow-x: hidden;\n}\n\n.bottom-side-nav .menu-expand-button {\n  position: absolute;\n  display: none;\n}\n\n.menu-visibility-visible {\n  visibility: visible;\n  width: 100%;\n}\n\n.app-title-show {\n  min-width: 15.5rem;\n}\n\n:host(.side-display) {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  position: var(--side-navigation-position);\n  left: 0;\n  top: 0;\n  bottom: 0;\n}\n\n:host(.side-display) .app-icon-container {\n  height: 40px;\n  display: flex;\n  align-items: center;\n}\n\n:host(.side-display) .top-bar {\n  --side-navigation-height: var(--sm-side-navigation-top-bar-height);\n\n  position: relative;\n  padding: 0;\n  box-shadow: -0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.inline.side-display) .top-bar {\n  position: sticky;\n}\n\n:host(.anchor-right.side-display) .top-bar {\n  box-shadow: 0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.anchor-right.side-display) .bottom-wrapper {\n  box-shadow: 0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);\n}\n\n:host(.side-display) .side-navigation,\n:host(.side-display) .top-bar {\n  width: var(--sm-side-navigation-top-bar-height);\n}\n\n:host(.sm-collapsed.side-display) {\n  width: var(--sm-side-navigation-top-bar-height);\n  transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) {\n  width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-expanded.side-display) {\n  width: var(--side-navigation-width);\n  transition: width var(--ic-easing-transition-slow);\n  box-shadow: var(--ic-elevation-overlay);\n}\n\n:host(.side-display) .side-navigation {\n  --side-navigation-position-top: 0;\n\n  flex: 1;\n  position: relative;\n  top: auto;\n  left: auto;\n  bottom: auto;\n}\n\n:host(.inline.side-display) .side-navigation {\n  position: relative;\n}\n\n:host(.anchor-right.side-display) .side-navigation {\n  left: auto;\n  right: 0;\n}\n\n:host(.side-display) .app-title-wrapper {\n  margin-left: 0;\n  border-left: none;\n  padding: var(--ic-space-xs) var(--ic-space-sm);\n}\n\n:host(.side-display) .app-title-wrapper ::slotted(svg) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n}\n\n:host(.side-display) .app-title-wrapper ic-typography {\n  font-weight: var(--ic-font-weight-semibold);\n}\n\n:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography {\n  position: absolute;\n  left: -9999px;\n  opacity: 0;\n  transition: opacity var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.side-display) .app-title-wrapper ic-typography:dir(rtl) {\n  right: -9999px;\n}\n\n:host(.sm-expanded.side-display) ic-typography {\n  position: relative;\n  left: 0;\n}\n\n:host(.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n  width: var(--side-navigation-width);\n  transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.sm-collapsed.side-display) :is(.side-navigation, .top-bar) {\n  width: var(--sm-side-navigation-top-bar-height);\n  transition: width var(--ic-easing-transition-slow);\n}\n\n:host(.anchor-right.sm-expanded.side-display) :is(.side-navigation, .top-bar) {\n  left: auto;\n  right: 0;\n}\n\n:host(.side-display) .app-status-wrapper,\n:host(.sm-collapsed.side-display) .app-status-wrapper {\n  display: none;\n  margin-left: 0;\n}\n\n:host(.sm-expanded.side-display) .app-status-wrapper {\n  display: flex;\n  max-width: 16rem;\n  margin-right: calc(var(--ic-space-xxxs) + var(--ic-space-xs));\n}\n\n:host(.side-display) .bottom-side-nav {\n  justify-items: flex-end;\n  align-items: flex-end;\n  justify-content: flex-end;\n  display: flex;\n  outline: none;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button {\n  padding-left: var(--ic-space-md);\n  height: var(--sm-side-navigation-top-bar-height);\n  width: 100%;\n  color: var(--ic-theme-text);\n  background-color: transparent;\n  outline: var(--ic-hc-focus-outline);\n  border: none;\n  cursor: pointer;\n  display: flex;\n  transition: var(--ic-easing-transition-fast);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button {\n  height: 100%;\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button svg {\n  justify-items: flex-start;\n  align-self: center;\n  display: inline-block;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button:hover {\n  background-color: var(--ic-theme-hover);\n}\n\n:host(.side-display) .bottom-side-nav .menu-expand-button:focus {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n  background-color: transparent;\n}\n\n:host(.sm-collapsed.side-display) .bottom-side-nav .menu-expand-button svg {\n  transform: scaleX(1);\n  transition: transform var(--ic-easing-transition-slow);\n}\n\n:host(.sm-expanded.side-display) .bottom-side-nav .menu-expand-button svg {\n  transform: scaleX(-1);\n  transition: transform var(--ic-easing-transition-slow);\n  align-self: flex-end;\n  margin-bottom: 0.875rem;\n}\n\n:host(.anchor-right.sm-collapsed.side-display)\n  .bottom-side-nav\n  .menu-expand-button\n  svg {\n  transform: scaleX(-1);\n}\n\n:host(.anchor-right.sm-expanded.side-display)\n  .bottom-side-nav\n  .menu-expand-button\n  svg {\n  transform: scaleX(1);\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item) {\n  --navigation-item-label-opacity: 1;\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-item),\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n  --navigation-item-label-opacity: 0;\n  --navigation-item-min-height: 56px;\n  --navigation-item-height: 56px;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-item),\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n  --navigation-item-label-opacity: 1;\n  --navigation-item-height: auto;\n  --navigation-item-min-height: 56px;\n  --navigation-item-width: 320px;\n  --navigation-item-side-nav-right: var(--ic-space-xl);\n}\n\n:host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {\n  --navigation-group-title-position: absolute;\n  --navigation-group-title-position-left: -9999px;\n  --navigation-group-title-opacity: none;\n}\n\n:host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {\n  --navigation-group-title-position: relative;\n  --navigation-group-title-position-left: 0;\n  --navigation-group-expand-toggle-padding: 0.25rem;\n  --navigation-group-title-opacity: flex;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .side-navigation,\n:host(.sm-collapsed.collapsed-labels.side-display) .top-bar {\n  width: var(--sm-side-navigation-collapsed-labels-width);\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .menu-expand-button {\n  padding: 0;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display) .app-title-wrapper {\n  width: 100%;\n  justify-content: center;\n}\n\n:host(.sm-collapsed.collapsed-labels.side-display)\n  ::slotted(ic-navigation-group) {\n  --navigation-group-justify-content: center;\n  --navigation-item-label-opacity: 1;\n  --navigation-group-item-min-width: 100%;\n  --navigation-group-expand-toggle-padding: 1rem;\n}\n\n:host(.collapsed-labels.side-display) .bottom-side-nav .menu-expand-button {\n  justify-content: center;\n}\n\n:host(.side-display) .collapsed-icon-labels-start {\n  visibility: hidden;\n  opacity: 0;\n}\n\n:host(.side-display) .collapsed-icon-labels-end {\n  visibility: visible;\n  opacity: 1;\n  transition: visibility 0s, opacity var(--ic-easing-transition-slow);\n}\n\n/* Media Queries */\n\n@media screen and (min-width: 340px) {\n  .app-icon-container {\n    display: flex;\n  }\n}\n\n@media screen and (min-width: 993px) {\n  :host(.side-display) {\n    position: sticky;\n    left: auto;\n    top: 0;\n    bottom: 0;\n  }\n\n  :host(.sm-expanded.side-display) {\n    box-shadow: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .side-navigation,\n  .top-bar {\n    border-right: var(--ic-hc-border);\n  }\n\n  .menu-expand-button {\n    color: Highlight !important;\n  }\n\n  slot[name=\"app-icon\"]::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport menuIcon from \"../../assets/hamburger-menu-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport {\n  getCurrentDeviceSize,\n  DEVICE_SIZES,\n  checkResizeObserver,\n  isSlotUsed,\n  getThemeForegroundColor,\n  getCssProperty,\n  hasClassificationBanner,\n  onComponentRequiredPropUndefined,\n  isEmptyString,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcTopBar, IcExpandedDetail } from \"./ic-side-navigation.types\";\n\n/**\n * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot primary-navigation - Content will be rendered at the top of the side navigation.\n * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.\n */\n\n@Component({\n  tag: \"ic-side-navigation\",\n  styleUrl: \"ic-side-navigation.css\",\n  shadow: true,\n})\nexport class SideNavigation {\n  private ANIMATION_DURATION =\n    parseInt(getCssProperty(\"--ic-transition-duration-slow\")) || 0;\n  private IC_NAVIGATION_ITEM: string = \"ic-navigation-item\";\n  private resizeObserver: ResizeObserver = null;\n  private COLLAPSED_ICON_LABELS_END = \"collapsed-icon-labels-end\";\n  private COLLAPSED_ICON_LABELS_START = \"collapsed-icon-labels-start\";\n  private menuButton: HTMLIcButtonElement = null;\n\n  @Element() el: HTMLIcSideNavigationElement;\n\n  @State() deviceSize: number = getCurrentDeviceSize();\n  @State() deviceSizeAppTitle: number = DEVICE_SIZES.S;\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() hasSecondaryNavigation: boolean = false;\n  @State() menuExpanded: boolean = false;\n  @State() menuOpen: boolean = false;\n\n  /**\n   * The app title to be displayed. This is required, unless a slotted app title link is used.\n   */\n  @Prop() appTitle: string;\n\n  /**\n   * If `true`, the icon and label will appear when side navigation is collapsed.\n   */\n  @Prop() collapsedIconLabels: boolean = false;\n\n  /**\n   * If `true`, automatic parent wrapper styling will be disabled.\n   */\n  @Prop() disableAutoParentStyling: boolean = false;\n\n  /**\n   * If `true`, the side navigation will not display as a top bar on small devices.\n   */\n  @Prop() disableTopBarBehaviour: boolean = false;\n\n  /**\n   * If `true`, the side navigation will display in an expanded state.\n   */\n  @Prop() expanded: boolean = false;\n\n  @Watch(\"expanded\")\n  watchExpandedHandler(): void {\n    this.toggleMenuExpanded(this.expanded);\n  }\n\n  /**\n   * The URL that the app title link points to.\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   * @internal If `true`, side navigation will be contained by its parent element.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * The short title of the app to be displayed at small screen sizes in place of the app title.\n   */\n  @Prop() shortAppTitle: string = \"\";\n\n  /**\n   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).\n   */\n  @Prop() static: boolean = false;\n\n  /**\n   * The status of the app to be displayed.\n   */\n  @Prop() status: string;\n\n  /**\n   * The version of the app to be displayed.\n   */\n  @Prop() version: string;\n\n  /**\n   * Emitted when the side navigation is collapsed and expanded.\n   */\n  @Event() sideNavExpanded: EventEmitter<IcExpandedDetail>;\n\n  componentWillLoad(): void {\n    this.setMenuExpanded(this.expanded);\n\n    if (this.collapsedIconLabels) {\n      this.setCollapsedIconLabels();\n    }\n\n    this.hasSecondaryNavigation = isSlotUsed(this.el, \"secondary-navigation\");\n  }\n\n  componentDidLoad(): void {\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuExpanded,\n      sideNavMobile:\n        this.deviceSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour,\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n    this.styleSlottedCollapsedIconLabel();\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    this.setExpandedButtonHeight();\n\n    !isSlotUsed(this.el, \"app-title\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.appTitle, propName: \"app-title\" }],\n        \"Side Navigation\"\n      );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n\n    this.el?.removeEventListener(\"transitionend\", this.transitionEndHandler);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent): void {\n    this.foregroundColor = (detail as IcTheme).mode;\n  }\n\n  private emitSideNavigationExpanded = (objDetails: {\n    sideNavExpanded: boolean;\n    sideNavMobile?: boolean;\n  }): void => {\n    this.sideNavExpanded.emit({\n      sideNavExpanded: objDetails.sideNavExpanded,\n      sideNavMobile: objDetails.sideNavMobile,\n    });\n  };\n\n  private toggleMenu = (): void => {\n    this.menuOpen = !this.menuOpen;\n    this.setMobileMenuAriaAttributes(this.menuOpen);\n\n    this.arrangeSlottedNavigationItem(this.menuOpen);\n\n    this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);\n\n    this.emitSideNavigationExpanded({\n      sideNavExpanded: this.menuOpen,\n      sideNavMobile: true,\n    });\n  };\n\n  private setToggleMenuFlyoutMenuVisibility = (menuOpen: boolean) => {\n    const sideNav = this.el.shadowRoot.querySelector(\n      \"#side-navigation\"\n    ) as HTMLDivElement;\n    const sideNavInner = sideNav.querySelector(\n      \".side-navigation-inner\"\n    ) as HTMLElement;\n    const bottomWrapper = sideNav.querySelector(\n      \".bottom-wrapper\"\n    ) as HTMLElement;\n\n    const menuVisibilityVisible = \"menu-visibility-visible\";\n\n    if (menuOpen) {\n      bottomWrapper.classList.add(menuVisibilityVisible);\n      sideNavInner.classList.add(menuVisibilityVisible);\n    } else {\n      setTimeout(() => {\n        sideNavInner.classList.remove(menuVisibilityVisible);\n        bottomWrapper.classList.remove(menuVisibilityVisible);\n      }, this.ANIMATION_DURATION);\n    }\n  };\n\n  private setMobileMenuAriaAttributes = (menuOpen: boolean) => {\n    if (this.menuButton !== null) {\n      this.menuButton.setAttribute(\"aria-expanded\", `${menuOpen}`);\n      this.menuButton.setAttribute(\n        \"aria-label\",\n        `${menuOpen ? \"Close\" : \"Open\"} navigation menu`\n      );\n    }\n  };\n\n  private setAndRemoveNoWrapAfterMenuExpanded = () => {\n    const appTitle =\n      this.el.shadowRoot.querySelector(\".title-link ic-typography\") ||\n      this.el.querySelector(\"[slot='app-title']\");\n\n    appTitle.classList.add(\"ic-typography-no-wrap\");\n\n    setTimeout(() => {\n      appTitle.classList.remove(\"ic-typography-no-wrap\");\n    }, this.ANIMATION_DURATION);\n  };\n\n  private toggleMenuExpanded = (expanded: boolean): void => {\n    if (this.deviceSize > DEVICE_SIZES.S) {\n      this.menuExpanded = expanded;\n    }\n\n    if (this.menuExpanded) {\n      this.setAndRemoveNoWrapAfterMenuExpanded();\n      this.el.shadowRoot\n        .querySelector(\".app-title-inner-wrapper\")\n        .classList.add(\"app-title-show\");\n    } else {\n      this.el.style.setProperty(\"--navigation-item-width\", \"320px\");\n      this.el.shadowRoot\n        .querySelector(\".app-title-inner-wrapper\")\n        .classList.remove(\"app-title-show\");\n\n      this.el.addEventListener(\"transitionend\", (e) => {\n        if (e.propertyName === \"width\") {\n          this.el.style.setProperty(\"--navigation-item-width\", null);\n        }\n      });\n    }\n\n    this.arrangeSlottedNavigationItem(this.menuExpanded);\n\n    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);\n\n    if (this.collapsedIconLabels) {\n      this.animateCollapsedIconLabels();\n    }\n\n    this.setExpandedButtonHeight();\n    this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });\n  };\n\n  /**\n   * In order to style nested slotted elements (e.g. using React Router components), this method\n   * rearranges the a tag and labels and adds inline styling expand/collapsed animations as external CSS classes are not\n   * do not take affect.\n   * @param menuExpanded boolean - true or false depending on side navigation state\n   */\n  private arrangeSlottedNavigationItem = (menuExpanded?: boolean) => {\n    const navItems = this.el.querySelectorAll(\"ic-navigation-item\");\n    navItems.forEach((navItem) => {\n      const isNamedSlot = isSlotUsed(navItem, \"navigation-item\");\n      const isUnnamedSlot =\n        navItem.children[0] && !navItem.children[0].getAttribute(\"slot\");\n      if (isNamedSlot || isUnnamedSlot) {\n        let navItemSlot;\n        if (isNamedSlot) {\n          navItemSlot = navItem.querySelector(\"[slot='navigation-item']\");\n        } else {\n          navItemSlot = navItem.children[0];\n        }\n        const iconWrapper = document.createElement(\"div\");\n        const icon = navItemSlot.querySelector(\"svg\");\n        const label = navItem.textContent.trim();\n        const icTypography = document.createElement(\"ic-typography\");\n        icTypography.classList.add(\n          \"ic-typography-label\",\n          \"hydrated\",\n          \"navigation-item-side-nav-slotted-text\"\n        );\n\n        iconWrapper.style.height = \"var(--ic-space-lg)\";\n        iconWrapper.append(icon);\n\n        navItemSlot.textContent = \"\";\n\n        icTypography.textContent = label;\n\n        navItemSlot.append(iconWrapper);\n        navItemSlot.append(icTypography);\n\n        if (this.collapsedIconLabels) {\n          this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);\n        } else {\n          this.styleSlottedIconLabels(menuExpanded, icTypography);\n        }\n      }\n    });\n  };\n\n  private styleSlottedCollapsedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLIcTypographyElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.marginTop = \"0\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    } else {\n      icTypography.style.marginTop = \"10px\";\n      icTypography.style.whiteSpace = \"nowrap\";\n      icTypography.style.overflow = \"hidden\";\n      icTypography.style.textOverflow = \"ellipsis\";\n    }\n  };\n\n  private setExpandedButtonHeight = () => {\n    const appStatusWrapper = this.el.shadowRoot.querySelector(\n      \"#side-navigation > .bottom-wrapper > .bottom-side-nav > .app-status-wrapper\"\n    ) as HTMLDivElement;\n\n    if (appStatusWrapper.offsetHeight !== 0) {\n      this.el.style.setProperty(\n        \"--sm-side-navigation-bottom-bar-height\",\n        `${appStatusWrapper.offsetHeight}px`\n      );\n    }\n  };\n\n  private styleSlottedIconLabels = (\n    menuExpanded: boolean,\n    icTypography: HTMLSpanElement\n  ) => {\n    if (menuExpanded) {\n      icTypography.style.opacity = \"1\";\n      icTypography.style.visibility = \"visible\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    } else {\n      icTypography.style.opacity = \"0\";\n      icTypography.style.visibility = \"hidden\";\n      icTypography.style.transition =\n        \"visibility 0s, opacity var(--ic-easing-transition-slow)\";\n    }\n  };\n\n  private transitionHandler = (type: string) => {\n    const primaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".primary-navigation\"\n    );\n\n    const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(\n      \".bottom-wrapper > .secondary-navigation\"\n    );\n\n    const classToRemove =\n      type === \"start\"\n        ? this.COLLAPSED_ICON_LABELS_END\n        : this.COLLAPSED_ICON_LABELS_START;\n\n    const classToAdd =\n      type === \"start\"\n        ? this.COLLAPSED_ICON_LABELS_START\n        : this.COLLAPSED_ICON_LABELS_END;\n\n    if (primaryNavigationWrapper) {\n      primaryNavigationWrapper.classList.remove(classToRemove);\n      primaryNavigationWrapper.classList.add(classToAdd);\n    }\n\n    if (secondaryNavigationWrapper) {\n      secondaryNavigationWrapper.classList.remove(classToRemove);\n      secondaryNavigationWrapper.classList.add(classToAdd);\n    }\n  };\n\n  private transitionEndHandler = () => {\n    this.transitionHandler(\"end\");\n  };\n\n  private animateCollapsedIconLabels = () => {\n    this.transitionHandler(\"start\");\n    this.transitionEndHandler();\n\n    this.el.addEventListener(\"transitionend\", this.transitionEndHandler);\n  };\n\n  private paddingIconWidth = (\n    navItems: HTMLIcNavigationItemElement[]\n  ): number => {\n    const navItemLink =\n      (navItems[0].shadowRoot &&\n        (navItems[0].shadowRoot.querySelector(\"ic-tooltip a\") ||\n          navItems[0].shadowRoot.querySelector(\"ic-tooltip div\"))) ||\n      navItems[0].querySelector(\"a\") ||\n      navItems[0].querySelector(\"div\");\n    const navItemSVG = navItems[0].querySelector(\"svg\");\n\n    const navStyles = {\n      gap: navItemLink ? window.getComputedStyle(navItemLink).gap : \"0\",\n      iconWidth: navItemSVG ? window.getComputedStyle(navItemSVG).width : \"0\",\n      paddingLeft: navItemLink\n        ? window.getComputedStyle(navItemLink).paddingLeft\n        : \"0\",\n    };\n\n    return Object.values(navStyles).reduce((prev, curr) => {\n      return (prev += parseInt(curr));\n    }, 0);\n  };\n\n  private displayTooltipWithExpandedLongLabel = (menuExpanded: boolean) => {\n    let timer;\n\n    if (menuExpanded) {\n      timer = setTimeout(() => {\n        const sideNavWidth = this.el.clientWidth;\n\n        const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n          this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n        );\n\n        const paddingIconDelta = navigationItems.length\n          ? this.paddingIconWidth(navigationItems)\n          : 0;\n\n        navigationItems.forEach(\n          (navigationItem: HTMLIcNavigationItemElement) => {\n            const icTypographyScrollWidth =\n              (\n                navigationItem.shadowRoot &&\n                navigationItem.shadowRoot.querySelector(\n                  \"ic-tooltip .link ic-typography.ic-typography-label\"\n                )\n              )?.scrollWidth ||\n              navigationItem.querySelector(\"ic-typography.ic-typography-label\")\n                ?.scrollWidth;\n\n            if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {\n              navigationItem.setAttribute(\"display-navigation-tooltip\", \"true\");\n            }\n          }\n        );\n      }, this.ANIMATION_DURATION);\n    } else {\n      clearTimeout(timer);\n\n      const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n        this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n      );\n      navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n        navigationItem.setAttribute(\"display-navigation-tooltip\", \"false\");\n      });\n    }\n  };\n\n  private setMenuExpanded = (expanded: boolean): void => {\n    this.menuExpanded = expanded;\n  };\n\n  /**\n   * As the mobile top bar is fixed, a padding top is required\n   * to push main content down the height of the mobile top bar\n   * @param value - padding-top css value\n   */\n  private setParentPaddingTop = (value: string) => {\n    this.el.parentElement?.style.setProperty(\"padding-top\", value);\n  };\n\n  private setParentPaddingLeft = (value: string) => {\n    this.el.parentElement?.style.setProperty(\"padding-left\", value);\n  };\n\n  private renderAppTitle = (isAppNameSubtitleVariant: boolean) => {\n    const displayShortAppTitle =\n      this.deviceSize <= DEVICE_SIZES.S && !isEmptyString(this.shortAppTitle);\n    return (\n      <ic-typography\n        variant={\n          displayShortAppTitle || isAppNameSubtitleVariant\n            ? \"subtitle-small\"\n            : \"h3\"\n        }\n        aria-label={\n          displayShortAppTitle\n            ? `${this.appTitle} (${this.shortAppTitle})`\n            : undefined\n        }\n      >\n        <h1>{displayShortAppTitle ? this.shortAppTitle : this.appTitle}</h1>\n      </ic-typography>\n    );\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    this.deviceSize = currSize;\n\n    const isSmallAndDisableTopBar =\n      currSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour;\n\n    if (!this.disableAutoParentStyling) {\n      const topBarHeight =\n        this.el.shadowRoot.querySelector(\".top-bar\")?.scrollHeight;\n      this.setParentPaddingTop(\n        isSmallAndDisableTopBar ? `${topBarHeight}px` : \"0\"\n      );\n      if (isSmallAndDisableTopBar) this.setParentPaddingLeft(\"0\");\n      if (isSmallAndDisableTopBar && this.inline) {\n        this.el.parentElement?.style.setProperty(\n          \"height\",\n          `calc(100% - ${topBarHeight}px)`\n        );\n      } else if (!isSmallAndDisableTopBar) {\n        this.el.parentElement?.style.setProperty(\"height\", \"100%\");\n      }\n    }\n\n    if (!this.disableAutoParentStyling) {\n      const paddingLeft = `calc(var(--ic-space-xxl) ${\n        this.collapsedIconLabels ? \"* 2\" : \"+ var(--ic-space-xs)\"\n      })`;\n\n      if (currSize > DEVICE_SIZES.L) {\n        this.setParentPaddingTop(\"0\");\n        this.setParentPaddingLeft(\"0\");\n      } else if (\n        (currSize > DEVICE_SIZES.S || this.disableTopBarBehaviour) &&\n        currSize <= DEVICE_SIZES.M &&\n        this.static\n      ) {\n        this.setParentPaddingLeft(paddingLeft);\n      } else if (\n        (currSize > DEVICE_SIZES.S || this.disableTopBarBehaviour) &&\n        currSize <= DEVICE_SIZES.L\n      ) {\n        this.setParentPaddingLeft(\n          this.static && this.menuExpanded\n            ? \"calc(var(--ic-space-xl) * 10)\"\n            : paddingLeft\n        );\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.deviceSizeAppTitle = currSize;\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(document.body, { box: \"content-box\" });\n  };\n\n  private setCollapsedIconLabels = () => {\n    const navigationItems: HTMLIcNavigationItemElement[] = Array.from(\n      this.el.querySelectorAll(this.IC_NAVIGATION_ITEM)\n    );\n    navigationItems.forEach((navigationItem: HTMLIcNavigationItemElement) => {\n      navigationItem.setAttribute(\"collapsed-icon-label\", \"true\");\n    });\n  };\n\n  private styleSlottedCollapsedIconLabel = () => {\n    const dynamicSlottedIcTypographyComps: HTMLIcTypographyElement[] =\n      Array.from(\n        this.el.querySelectorAll(\".navigation-item-side-nav-slotted-text\")\n      );\n\n    dynamicSlottedIcTypographyComps.forEach((icTypography) => {\n      if (\n        icTypography?.parentElement?.parentElement?.classList.contains(\n          \"navigation-item-side-nav-collapsed-with-label\"\n        )\n      ) {\n        icTypography.style.whiteSpace = \"nowrap\";\n        icTypography.style.overflow = \"hidden\";\n        icTypography.style.textOverflow = \"ellipsis\";\n        icTypography.style.marginTop = \"10px\";\n      }\n    });\n  };\n\n  private renderTopBar = ({\n    isSDevice,\n    foregroundColor,\n    menuOpen,\n    href,\n    isAppNameSubtitleVariant,\n  }: IcTopBar) => {\n    const hasTitle = this.appTitle !== \"\" && isPropDefined(this.appTitle);\n\n    const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n    };\n\n    return (\n      <div\n        class={{\n          \"top-bar\": true,\n          [this.foregroundColor]: true,\n        }}\n      >\n        {isSDevice && (\n          <nav\n            aria-labelledby=\"menu-navigation-toggle-button-landmark\"\n            aria-hidden=\"false\"\n          >\n            <ic-button\n              aria-label=\"Open navigation menu\"\n              class=\"menu-button\"\n              id=\"menu-button\"\n              variant=\"secondary\"\n              size=\"small\"\n              full-width=\"true\"\n              appearance={foregroundColor}\n              onClick={this.toggleMenu}\n              ariaOwnsId=\"side-navigation\"\n              aria-haspopup=\"true\"\n              aria-expanded=\"false\"\n              ref={(el) => (this.menuButton = el)}\n            >\n              <span\n                class=\"mobile-top-bar-menu-icon\"\n                slot=\"icon\"\n                innerHTML={menuOpen ? closeIcon : menuIcon}\n              ></span>\n              {menuOpen ? \"Close\" : \"Menu\"}\n            </ic-button>\n            <span\n              id=\"menu-navigation-toggle-button-landmark\"\n              class=\"navigation-landmark-title\"\n              aria-hidden=\"true\"\n            >\n              Navigation menu toggle button\n            </span>\n          </nav>\n        )}\n        <div class=\"app-title-wrapper\">\n          {(hasTitle || isSlotUsed(this.el, \"app-title\")) && (\n            <Component {...attrs} class=\"title-link\">\n              <div class=\"app-icon-container\" aria-hidden=\"true\">\n                <slot name=\"app-icon\"></slot>\n              </div>\n              <div class=\"app-title-inner-wrapper\">\n                {isSlotUsed(this.el, \"app-title\") ? (\n                  <slot name=\"app-title\"></slot>\n                ) : (\n                  this.renderAppTitle(isAppNameSubtitleVariant)\n                )}\n              </div>\n            </Component>\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    const {\n      appTitle,\n      menuOpen,\n      foregroundColor,\n      menuExpanded,\n      href,\n      status,\n      version,\n      collapsedIconLabels,\n      inline,\n    } = this;\n\n    const isSDevice =\n      !this.disableTopBarBehaviour && this.deviceSize === DEVICE_SIZES.S;\n    const isMdDevice = this.deviceSize === DEVICE_SIZES.M;\n    const isLgDevice = this.deviceSize >= DEVICE_SIZES.L;\n    const isAppNameSubtitleVariant = this.deviceSizeAppTitle === DEVICE_SIZES.S;\n    const displayExpandBtn =\n      isMdDevice || this.disableTopBarBehaviour || (isLgDevice && !this.static);\n\n    const topBarProps: IcTopBar = {\n      isSDevice,\n      foregroundColor,\n      menuOpen,\n      href,\n      isAppNameSubtitleVariant,\n      appTitle,\n    };\n\n    return (\n      <Host\n        class={{\n          \"xs-menu-open\": menuOpen && isSDevice,\n          \"xs-menu-close\": !menuOpen && isSDevice,\n          \"sm-collapsed\": !isSDevice && !menuExpanded,\n          \"sm-expanded\": !isSDevice && menuExpanded,\n          \"side-display\":\n            this.deviceSize > DEVICE_SIZES.S || this.disableTopBarBehaviour,\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"collapsed-labels\"]:\n            !isSDevice && !menuExpanded && collapsedIconLabels,\n          [\"inline\"]: inline,\n        }}\n      >\n        {isSDevice && this.renderTopBar({ ...topBarProps })}\n        <div class=\"side-navigation\" id=\"side-navigation\">\n          {!isSDevice && this.renderTopBar({ ...topBarProps })}\n          <div class=\"side-navigation-inner\">\n            {isSlotUsed(this.el, \"primary-navigation\") && (\n              <nav\n                class=\"primary-navigation\"\n                aria-labelledby=\"primary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"primary-navigation-landmark\"\n                >\n                  Primary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"primary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n          </div>\n          <div\n            class={{\n              [\"bottom-wrapper\"]: true,\n              [\"classification-spacing\"]: hasClassificationBanner(),\n            }}\n          >\n            {isSlotUsed(this.el, \"secondary-navigation\") && (\n              <nav\n                class=\"secondary-navigation\"\n                aria-labelledby=\"secondary-navigation-landmark\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  class=\"navigation-landmark-title\"\n                  id=\"secondary-navigation-landmark\"\n                >\n                  Secondary\n                </span>\n                <ul class=\"navigation-list\">\n                  <slot name=\"secondary-navigation\"></slot>\n                </ul>\n              </nav>\n            )}\n            <div class=\"bottom-side-nav\">\n              {this.hasSecondaryNavigation && <ic-divider></ic-divider>}\n              {displayExpandBtn && (\n                <button\n                  class=\"menu-expand-button\"\n                  innerHTML={chevronIcon}\n                  onClick={() => this.toggleMenuExpanded(!this.menuExpanded)}\n                  aria-label={`${\n                    menuExpanded ? \"Collapse\" : \"Expand\"\n                  } side navigation`}\n                ></button>\n              )}\n              <div class=\"app-status-wrapper\">\n                {status !== \"\" && (\n                  <div\n                    class={{\n                      [\"app-status\"]: true,\n                    }}\n                  >\n                    <ic-typography\n                      aria-label=\"app tag\"\n                      variant=\"label-uppercase\"\n                      class=\"app-status-text\"\n                    >\n                      {status}\n                    </ic-typography>\n                  </div>\n                )}\n                {version !== \"\" && (\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"app-version\"\n                    aria-label=\"app version\"\n                  >\n                    {version}\n                  </ic-typography>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/p-6f28caad.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as t,H as a,g as i}from"./p-6b5e91e2.js";import{c,h as e,g as r,b as o,d as h,e as n,a as l}from"./p-fd85797a.js";import"./p-26b7b18f.js";const d="@media (prefers-reduced-motion: no-preference){:host(.show){animation:expand var(--ic-transition-duration-slow)}:host(.hide){animation:shrink var(--ic-transition-duration-slow)}}:host{display:flex;height:var(--ic-space-md);min-width:var(--ic-space-md);width:-moz-fit-content;width:fit-content;border-radius:calc(2 * var(--ic-space-xxl));position:absolute}:host(.neutral){background-color:var(--ic-architectural-500)}:host(.light){background-color:var(--ic-architectural-40)}:host(.info){background-color:var(--ic-status-info)}:host(.warning){background-color:var(--ic-status-warning-mid)}:host(.error){background-color:var(--ic-status-error)}:host(.success){background-color:var(--ic-status-success)}:host(.small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.dot.default){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.dot.small){height:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));min-width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.dot.large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.foreground-dark) ::slotted(*){fill:var(--ic-color-primary-text)}:host(.foreground-light) ::slotted(*){fill:white}:host(.foreground-dark) ic-typography{color:var(--ic-color-primary-text)}:host(.foreground-light) ic-typography{color:white}:host(.text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.text.small) ic-typography{padding:0 0.2132rem}:host(.text.large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.icon.small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.icon.large) ::slotted(svg){width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));height:calc(var(--ic-space-sm) + var(--ic-space-xxxs));padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}:host(.far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.far.small),:host(.dot.far.large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.dot.far),:host(.dot.far.small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.near){top:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));right:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)))}:host(.dot.near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.inline){position:static}:host(.hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}@keyframes expand{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}";const p="IC-NAVIGATION-BUTTON";const x="IC-TOP-NAVIGATION";const v=class{constructor(t){s(this,t);this.ariaLabel=null;this.setBadgeColour=()=>{const s=c(this.customColor);if(s){this.customColorRGBA=s;const{r:t,g:a,b:i,a:c}=s;this.el.style.backgroundColor=`rgba(${t}, ${a}, ${i}, ${c})`}};this.getBadgeRGB=()=>{switch(this.variant){case"custom":return this.customColorRGBA;case"error":case"success":case"warning":case"info":{return o(r(`--ic-status-${this.variant}`))}case"neutral":case"light":return e(r(`--ic-architectural-${this.variant==="neutral"?500:40}`))}};this.getBadgeForeground=()=>{const{r:s,g:t,b:a}=this.getBadgeRGB();this.foregroundColour=h((s*299+t*587+a*114)/1e3)};this.getTextLabel=()=>this.maxNumber&&Number(this.textLabel)>this.maxNumber?`${this.maxNumber}+`:this.textLabel;this.setAccessibleLabel=()=>{const s=this.el.parentElement;const t=this.isAccessibleLabelDefined()?this.accessibleLabel:this.textLabel||"with badge being displayed";if(s){const{tagName:a}=s;if(a!=="IC-CARD"&&(a!=="IC-TAB"||a==="IC-TAB"&&this.parentAriaLabel)){const a=this.parentAriaLabel?`${this.parentAriaLabel} ,`:"";s.ariaLabel=this.visible?`${a} ${t}`:undefined}else{this.ariaLabel=`, ${t}`}}};this.setPositionInTopNavigation=()=>{const s=this.el.parentElement.parentElement;s.classList.contains("mobile-mode")?this.position="inline":this.position="near"};this.isInTopNav=()=>{const s=this.el.parentElement;const t=s.parentElement;return s.tagName===p&&t.tagName===x};this.isAccessibleLabelDefined=()=>n(this.accessibleLabel)&&this.accessibleLabel!==null;this.accessibleLabel=undefined;this.customColor=null;this.maxNumber=undefined;this.position="far";this.size="default";this.textLabel=undefined;this.type="text";this.variant="neutral";this.visible=true}accessibleLabelHandler(){this.setAccessibleLabel()}customColorHandler(){this.variant==="custom"&&this.setBadgeColour()}variantHandler(){this.getBadgeForeground()}visibleHandler(){this.setAccessibleLabel()}componentWillLoad(){var s;this.variant==="custom"&&this.setBadgeColour();this.getBadgeForeground();const t=(s=this.el.parentElement)===null||s===void 0?void 0:s.ariaLabel;if(t)this.parentAriaLabel=t;this.setAccessibleLabel()}componentDidLoad(){this.type==="text"&&l([{prop:this.textLabel,propName:"text-label"}],"Badge")}componentWillRender(){this.isInTopNav()&&this.setPositionInTopNavigation()}navBarMenuOpenHandler(){this.isInTopNav()&&(this.position="inline")}navBarMenuCloseHandler(){this.isInTopNav()&&(this.position="near")}async showBadge(){this.visible=true}async hideBadge(){this.visible=false}render(){const{ariaLabel:s,el:i,foregroundColour:c,getTextLabel:e,position:r,size:o,textLabel:h,type:n,variant:l,visible:d}=this;return t(a,{class:{[`${r}`]:true,[`${o}`]:true,[`${l}`]:true,[`${n}`]:true,[`foreground-${c}`]:c!==null,[`${d?"show":"hide"}`]:true},id:i.id||null,"aria-label":s,role:"status"},n==="icon"&&t("slot",{name:"badge-icon"}),n==="text"&&h&&t("ic-typography",{variant:o==="small"?"badge-small":"badge"},e()),n==="dot"&&t("span",{class:"sr-only"},"badge"))}static get delegatesFocus(){return true}get el(){return i(this)}static get watchers(){return{accessibleLabel:["accessibleLabelHandler"],customColor:["customColorHandler"],variant:["variantHandler"],visible:["visibleHandler"]}}};v.style=d;export{v as ic_badge};
+//# sourceMappingURL=p-6f28caad.entry.js.map

package/dist/core/p-6f28caad.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["icBadgeCss","NAVIGATION_BUTTON","TOP_NAVIGATION","Badge","this","ariaLabel","setBadgeColour","colorRGBA","convertToRGBA","customColor","customColorRGBA","r","g","b","a","el","style","backgroundColor","getBadgeRGB","variant","rgbaStrToObj","getCssProperty","hexToRgba","getBadgeForeground","foregroundColour","getThemeForegroundColor","getTextLabel","maxNumber","Number","textLabel","setAccessibleLabel","parentEl","parentElement","defaultAriaLabel","isAccessibleLabelDefined","accessibleLabel","tagName","parentAriaLabel","ariaLabelPrefix","visible","undefined","setPositionInTopNavigation","parentTopNavEl","classList","contains","position","isInTopNav","grandparentEl","isPropDefined","accessibleLabelHandler","customColorHandler","variantHandler","visibleHandler","componentWillLoad","_a","componentDidLoad","type","onComponentRequiredPropUndefined","prop","propName","componentWillRender","navBarMenuOpenHandler","navBarMenuCloseHandler","showBadge","hideBadge","render","size","h","Host","class","id","role","name"],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n  :host(.show) {\n    animation: expand var(--ic-transition-duration-slow);\n  }\n\n  :host(.hide) {\n    animation: shrink var(--ic-transition-duration-slow);\n  }\n}\n\n:host {\n  display: flex;\n  height: var(--ic-space-md);\n  min-width: var(--ic-space-md);\n  width: fit-content;\n  border-radius: calc(2 * var(--ic-space-xxl));\n  position: absolute;\n}\n\n:host(.neutral) {\n  background-color: var(--ic-architectural-500);\n}\n\n:host(.light) {\n  background-color: var(--ic-architectural-40);\n}\n\n:host(.info) {\n  background-color: var(--ic-status-info);\n}\n\n:host(.warning) {\n  background-color: var(--ic-status-warning-mid);\n}\n\n:host(.error) {\n  background-color: var(--ic-status-error);\n}\n\n:host(.success) {\n  background-color: var(--ic-status-success);\n}\n\n:host(.small) {\n  height: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host(.large) {\n  height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.dot.default) {\n  height: var(--ic-space-xs);\n  width: var(--ic-space-xs);\n  min-width: var(--ic-space-xs);\n}\n\n:host(.dot.small) {\n  height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.dot.large) {\n  height: var(--ic-space-sm);\n  width: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host(.foreground-dark) ::slotted(*) {\n  fill: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ::slotted(*) {\n  fill: white;\n}\n\n:host(.foreground-dark) ic-typography {\n  color: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ic-typography {\n  color: white;\n}\n\n:host(.text) ic-typography {\n  align-self: center;\n  padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.text.small) ic-typography {\n  padding: 0 0.2132rem;\n}\n\n:host(.text.large) ic-typography {\n  padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.icon) ::slotted(svg) {\n  width: var(--ic-space-sm);\n  height: var(--ic-space-sm);\n  padding: var(--ic-space-xxxs);\n}\n\n:host(.icon.small) ::slotted(svg) {\n  width: var(--ic-space-xs);\n  height: var(--ic-space-xs);\n}\n\n:host(.icon.large) ::slotted(svg) {\n  width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.far) {\n  top: calc(-1 * var(--ic-space-xs));\n  right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.far.small),\n:host(.dot.far.large) {\n  top: calc(-1 * var(--ic-space-xxs));\n  right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.dot.far),\n:host(.dot.far.small) {\n  top: calc(-1 * var(--ic-space-xxxs));\n  right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.near) {\n  top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n  right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.dot.near) {\n  top: calc(-1 * var(--ic-space-1px));\n  right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.inline) {\n  position: static;\n}\n\n:host(.hide) {\n  visibility: hidden !important;\n  transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n\n.sr-only:dir(rtl) {\n  right: -9999px;\n}\n\n@keyframes expand {\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes shrink {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0);\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcBadgePositions,\n  IcBadgeTypes,\n  IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n  IcColorRGBA,\n  IcSizes,\n  IcThemeForeground,\n  IcColor,\n} from \"../../utils/types\";\nimport {\n  convertToRGBA,\n  getCssProperty,\n  getThemeForegroundColor,\n  hexToRgba,\n  isPropDefined,\n  onComponentRequiredPropUndefined,\n  rgbaStrToObj,\n} from \"../../utils/helpers\";\n\nconst NAVIGATION_BUTTON = \"IC-NAVIGATION-BUTTON\";\nconst TOP_NAVIGATION = \"IC-TOP-NAVIGATION\";\n\n/**\n * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n */\n@Component({\n  tag: \"ic-badge\",\n  styleUrl: \"ic-badge.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Badge {\n  private ariaLabel: string = null;\n  private customColorRGBA: IcColorRGBA;\n  private foregroundColour: IcThemeForeground;\n  private parentAriaLabel: string;\n\n  @Element() el: HTMLIcBadgeElement;\n\n  /**\n   * The accessible label of the badge component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string;\n\n  @Watch(\"accessibleLabel\")\n  accessibleLabelHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  /**\n   * The custom badge colour. This will only style the badge component if variant=\"custom\".\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor = null;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n  }\n\n  /**\n   * The maximum number shown on the badge appended with a +.\n   * This will only be displayed if type=\"text\" and textLabel is not empty.\n   */\n  @Prop() maxNumber?: number;\n\n  /**\n   * The positioning of the badge in reference to the parent element.\n   */\n  @Prop({ mutable: true }) position?: IcBadgePositions = \"far\";\n\n  /**\n   * The size of the badge to be displayed.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * The text displayed in the badge. This will only be displayed if type=\"text\".\n   */\n  @Prop() textLabel?: string;\n\n  /**\n   * The type of badge to be displayed.\n   */\n  @Prop() type?: IcBadgeTypes = \"text\";\n\n  /**\n   * The variant of the badge to be displayed.\n   */\n  @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n  @Watch(\"variant\")\n  variantHandler(): void {\n    this.getBadgeForeground();\n  }\n\n  /**\n   * If `true`, the badge will be displayed.\n   */\n  @Prop({ mutable: true }) visible: boolean = true;\n\n  @Watch(\"visible\")\n  visibleHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  componentWillLoad(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n\n    this.getBadgeForeground();\n\n    const ariaLabel = this.el.parentElement?.ariaLabel;\n    if (ariaLabel) this.parentAriaLabel = ariaLabel;\n    this.setAccessibleLabel();\n  }\n\n  componentDidLoad(): void {\n    this.type === \"text\" &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.textLabel, propName: \"text-label\" }],\n        \"Badge\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.isInTopNav() && this.setPositionInTopNavigation();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.isInTopNav() && (this.position = \"inline\");\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.isInTopNav() && (this.position = \"near\");\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n   */\n  @Method()\n  async showBadge(): Promise<void> {\n    this.visible = true;\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n   */\n  @Method()\n  async hideBadge(): Promise<void> {\n    this.visible = false;\n  }\n\n  private setBadgeColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n\n    if (colorRGBA) {\n      this.customColorRGBA = colorRGBA;\n      const { r, g, b, a } = colorRGBA;\n      this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n    }\n  };\n\n  private getBadgeRGB = () => {\n    switch (this.variant) {\n      case \"custom\":\n        return this.customColorRGBA;\n      case \"error\":\n      case \"success\":\n      case \"warning\":\n      case \"info\": {\n        return rgbaStrToObj(getCssProperty(`--ic-status-${this.variant}`));\n      }\n      case \"neutral\":\n      case \"light\":\n        return hexToRgba(\n          getCssProperty(\n            `--ic-architectural-${this.variant === \"neutral\" ? 500 : 40}`\n          )\n        );\n    }\n  };\n\n  private getBadgeForeground = () => {\n    const { r, g, b } = this.getBadgeRGB();\n    this.foregroundColour = getThemeForegroundColor(\n      (r * 299 + g * 587 + b * 114) / 1000\n    );\n  };\n\n  private getTextLabel = () =>\n    this.maxNumber && Number(this.textLabel) > this.maxNumber\n      ? `${this.maxNumber}+`\n      : this.textLabel;\n\n  // Set aria-label on badge and / or parent element\n  // Aria-describedby seems to not work, probably due to shadow DOM\n  private setAccessibleLabel = () => {\n    const parentEl = this.el.parentElement;\n    const defaultAriaLabel = this.isAccessibleLabelDefined()\n      ? this.accessibleLabel\n      : this.textLabel || \"with badge being displayed\";\n\n    if (parentEl) {\n      const { tagName } = parentEl;\n      if (\n        tagName !== \"IC-CARD\" &&\n        (tagName !== \"IC-TAB\" || (tagName === \"IC-TAB\" && this.parentAriaLabel))\n      ) {\n        const ariaLabelPrefix = this.parentAriaLabel\n          ? `${this.parentAriaLabel} ,`\n          : \"\";\n        parentEl.ariaLabel = this.visible\n          ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n          : undefined;\n      } else {\n        this.ariaLabel = `, ${defaultAriaLabel}`;\n      }\n    }\n  };\n\n  private setPositionInTopNavigation = () => {\n    const parentTopNavEl = this.el.parentElement.parentElement;\n    parentTopNavEl.classList.contains(\"mobile-mode\")\n      ? (this.position = \"inline\")\n      : (this.position = \"near\");\n  };\n\n  private isInTopNav = (): boolean => {\n    const parentEl = this.el.parentElement;\n    const grandparentEl = parentEl.parentElement;\n    return (\n      parentEl.tagName === NAVIGATION_BUTTON &&\n      grandparentEl.tagName === TOP_NAVIGATION\n    );\n  };\n\n  private isAccessibleLabelDefined = () =>\n    isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n  render() {\n    const {\n      ariaLabel,\n      el,\n      foregroundColour,\n      getTextLabel,\n      position,\n      size,\n      textLabel,\n      type,\n      variant,\n      visible,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`${position}`]: true,\n          [`${size}`]: true,\n          [`${variant}`]: true,\n          [`${type}`]: true,\n          [`foreground-${foregroundColour}`]: foregroundColour !== null,\n          [`${visible ? \"show\" : \"hide\"}`]: true,\n        }}\n        id={el.id || null}\n        aria-label={ariaLabel}\n        role=\"status\"\n      >\n        {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n        {type === \"text\" && textLabel && (\n          <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n            {getTextLabel()}\n          </ic-typography>\n        )}\n        {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/{p-6fae7e1f.entry.js → p-91d235c0.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,H as i}from"./p-6b5e91e2.js";const o='/*! 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{position:fixed;left:0;bottom:0;width:100%;height:var(--ic-space-lg);z-index:var(--ic-z-index-classification-banner)}:host(.inline){position:static;left:auto;bottom:auto}.classification-banner{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:var(--ic-space-xxxs) var(--ic-space-md)}.default{background-color:var(--ic-classification-not-set);color:var(--ic-classification-not-set-foreground)}.official,.official-sensitive{background-color:var(--ic-classification-official);color:var(--ic-classification-official-foreground)}.secret{background-color:var(--ic-classification-secret);color:var(--ic-classification-secret-foreground)}.top-secret{background-color:var(--ic-classification-top-secret);color:var(--ic-classification-top-secret-foreground)}.offscreen{position:absolute;left:-9999px;background-color:#fff;color:#000;text-transform:none}@media (forced-colors: active){.classification-banner{border:var(--ic-hc-border)}}';const n={default:"protective marking not set",official:"official","official-sensitive":"official sensitive",secret:"secret","top-secret":"top secret"};const a=class{constructor(t){e(this,t);this.additionalSelectors="";this.classification="default";this.country="uk";this.inline=false;this.upTo=false}render(){const{inline:e,upTo:o}=this;let{country:a,additionalSelectors:s,classification:r}=this;if(!a)a="";if(!s)s="";if(!r||r&&!n[r])r="default";return t(i,{class:{["inline"]:e}},t("banner",{"aria-label":"Protective marking",class:{["classification-banner"]:true,[`${r}`]:r}},r!=="default"?t("span",{class:"offscreen"},"The protective marking of this page is:"," "):null,t("ic-typography",{variant:"caption-uppercase"},r==="default"?n[r]:`${o?"up to":""} \n               ${a} \n               ${n[r]} \n               ${s}`)))}};a.style=o;export{a as ic_classification_banner};
-//# sourceMappingURL=p-6fae7e1f.entry.js.map
+import{r as e,h as t,H as i}from"./p-6b5e91e2.js";const o='/*! 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{position:fixed;left:0;bottom:0;width:100%;height:var(--ic-space-lg);z-index:var(--ic-z-index-classification-banner)}:host(.inline){position:static;left:auto;bottom:auto}.classification-banner{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:var(--ic-space-xxxs) var(--ic-space-md)}.default{background-color:var(--ic-classification-not-set);color:var(--ic-classification-not-set-foreground)}.official,.official-sensitive{background-color:var(--ic-classification-official);color:var(--ic-classification-official-foreground)}.secret{background-color:var(--ic-classification-secret);color:var(--ic-classification-secret-foreground)}.top-secret{background-color:var(--ic-classification-top-secret);color:var(--ic-classification-top-secret-foreground)}.offscreen{position:absolute;left:-9999px;background-color:#fff;color:#000;text-transform:none}.offscreen:dir(rtl){right:-9999px}@media (forced-colors: active){.classification-banner{border:var(--ic-hc-border)}}';const n={default:"protective marking not set",official:"official","official-sensitive":"official-sensitive",secret:"secret","top-secret":"top secret"};const a=class{constructor(t){e(this,t);this.additionalSelectors="";this.classification="default";this.country="uk";this.inline=false;this.upTo=false}render(){const{inline:e,upTo:o}=this;let{country:a,additionalSelectors:r,classification:s}=this;if(!a)a="";if(!r)r="";if(!s||s&&!n[s])s="default";return t(i,{class:{["inline"]:e}},t("banner",{"aria-label":"Protective marking",class:{["classification-banner"]:true,[`${s}`]:s}},s!=="default"?t("span",{class:"offscreen"},"The protective marking of this page is:"," "):null,t("ic-typography",{variant:"caption-uppercase"},s==="default"?n[s]:`${o?"up to":""} \n               ${a} \n               ${n[s]} \n               ${r}`)))}};a.style=o;export{a as ic_classification_banner};
+//# sourceMappingURL=p-91d235c0.entry.js.map

package/dist/core/p-91d235c0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["icClassificationBannerCss","classificationText","default","official","secret","ClassificationBanner","render","inline","upTo","this","country","additionalSelectors","classification","h","Host","class","variant"],"sources":["src/components/ic-classification-banner/ic-classification-banner.css?tag=ic-classification-banner&encapsulation=shadow","src/components/ic-classification-banner/ic-classification-banner.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-classification-banner: z-index of classification banner\n */\n\n:host {\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: var(--ic-space-lg);\n  z-index: var(--ic-z-index-classification-banner);\n}\n\n:host(.inline) {\n  position: static;\n  left: auto;\n  bottom: auto;\n}\n\n.classification-banner {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: var(--ic-space-xxxs) var(--ic-space-md);\n}\n\n.default {\n  background-color: var(--ic-classification-not-set);\n  color: var(--ic-classification-not-set-foreground);\n}\n\n.official,\n.official-sensitive {\n  background-color: var(--ic-classification-official);\n  color: var(--ic-classification-official-foreground);\n}\n\n.secret {\n  background-color: var(--ic-classification-secret);\n  color: var(--ic-classification-secret-foreground);\n}\n\n.top-secret {\n  background-color: var(--ic-classification-top-secret);\n  color: var(--ic-classification-top-secret-foreground);\n}\n\n.offscreen {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n\n.offscreen:dir(rtl) {\n  right: -9999px;\n}\n\n@media (forced-colors: active) {\n  .classification-banner {\n    border: var(--ic-hc-border);\n  }\n}\n","import { Component, Prop, h, Host } from \"@stencil/core\";\nimport { IcProtectiveMarkings } from \"./ic-classification-banner.types\";\n\nconst classificationText = {\n  default: \"protective marking not set\",\n  official: \"official\",\n  \"official-sensitive\": \"official-sensitive\",\n  secret: \"secret\",\n  \"top-secret\": \"top secret\",\n};\n\n@Component({\n  tag: \"ic-classification-banner\",\n  styleUrl: \"ic-classification-banner.css\",\n  shadow: true,\n})\nexport class ClassificationBanner {\n  /**\n   * The additional information that will be displayed after the classification.\n   */\n  @Prop() additionalSelectors?: string = \"\";\n  /**\n   * The classification level to be displayed - also determines the banner and text colour.\n   */\n  @Prop() classification?: IcProtectiveMarkings = \"default\";\n  /**\n   * The optional text that will be displayed before classification to specify relevant country/countries.\n   */\n  @Prop() country?: string = \"uk\";\n  /**\n   * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\n   */\n  @Prop() inline?: boolean = false;\n  /**\n   * If `true`, \"Up to\" will be displayed before the classification and country.\n   */\n  @Prop() upTo?: boolean = false;\n\n  render() {\n    const { inline, upTo } = this;\n\n    // In case of unrecognized props, fallback to default\n    let { country, additionalSelectors, classification } = this;\n    if (!country) country = \"\";\n    if (!additionalSelectors) additionalSelectors = \"\";\n    if (\n      !classification ||\n      (classification && !classificationText[classification])\n    )\n      classification = \"default\";\n\n    return (\n      <Host class={{ [\"inline\"]: inline }}>\n        <banner\n          aria-label=\"Protective marking\"\n          class={{\n            [\"classification-banner\"]: true,\n            [`${classification}`]: classification,\n          }}\n        >\n          {classification !== \"default\" ? (\n            <span class=\"offscreen\">\n              The protective marking of this page is:{\" \"}\n            </span>\n          ) : null}\n          <ic-typography variant=\"caption-uppercase\">\n            {classification === \"default\"\n              ? classificationText[classification]\n              : `${upTo ? \"up to\" : \"\"} \n               ${country} \n               ${classificationText[classification]} \n               ${additionalSelectors}`}\n          </ic-typography>\n        </banner>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAA4B,w0GCGlC,MAAMC,EAAqB,CACzBC,QAAS,6BACTC,SAAU,WACV,qBAAsB,qBACtBC,OAAQ,SACR,aAAc,c,MAQHC,EAAoB,M,kDAIQ,G,oBAIS,U,aAIrB,K,YAIA,M,UAIF,K,CAEzB,MAAAC,GACE,MAAMC,OAAEA,EAAMC,KAAEA,GAASC,KAGzB,IAAIC,QAAEA,EAAOC,oBAAEA,EAAmBC,eAAEA,GAAmBH,KACvD,IAAKC,EAASA,EAAU,GACxB,IAAKC,EAAqBA,EAAsB,GAChD,IACGC,GACAA,IAAmBX,EAAmBW,GAEvCA,EAAiB,UAEnB,OACEC,EAACC,EAAI,CAACC,MAAO,CAAE,CAAC,UAAWR,IACzBM,EAAA,uBACa,qBACXE,MAAO,CACL,CAAC,yBAA0B,KAC3B,CAAC,GAAGH,KAAmBA,IAGxBA,IAAmB,UAClBC,EAAA,QAAME,MAAM,aAAW,0CACmB,KAExC,KACJF,EAAA,iBAAeG,QAAQ,qBACpBJ,IAAmB,UAChBX,EAAmBW,GACnB,GAAGJ,EAAO,QAAU,uBACnBE,sBACAT,EAAmBW,uBACnBD,M"}

package/dist/core/p-9d41ba2d.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as s,g as i}from"./p-6b5e91e2.js";import{C as c}from"./p-c2e091d7.js";import{e as a}from"./p-fd85797a.js";import"./p-26b7b18f.js";const r=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M7.99935 4.32666L13.0193 13H2.97935L7.99935 4.32666ZM7.99935 1.66666L0.666016 14.3333H15.3327L7.99935 1.66666ZM8.66602 11H7.33268V12.3333H8.66602V11ZM8.66602 6.99999H7.33268V9.66666H8.66602V6.99999Z" fill="currentColor"/>\n</svg>`;const o=":host{display:flex;flex:auto}.step{display:flex;flex:1 1 0}.step-icon{display:flex;justify-content:center}.step-title,.step-subtitle,.step-status,.next-step{white-space:pre-line}.visually-hidden{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.visually-hidden:dir(rtl){right:-9999px}:host(.compact){-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm);--compact-step-inner-color:var(--ic-status-info);--compact-step-circular-line-width:var(--ic-space-xxs)}:host(.compact.light){--compact-step-inner-color:var(--ic-status-info-contrast);--compact-step-outer-color:var(--ic-architectural-600)}:host(.compact) .step{-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm)}:host(.compact) .step:not(.current){display:none;opacity:0;visibility:hidden}.compact-step-progress-indicator{margin:var(--ic-space-xs) 0 0}:host ic-loading-indicator::part(ic-loading-container){border-radius:50%}:host(:not(.light)) ic-loading-indicator::part(ic-loading-container){background-color:var(--ic-architectural-white)}:host(.compact) .step-title-area{display:flex;flex-direction:column;width:14.25rem}:host(.compact.light) .disabled .step-title-area{color:var(--ic-architectural-400)}.info-line{display:flex;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs)}.step-status{display:flex;color:var(--ic-color-secondary-text);-moz-column-gap:var(--ic-space-xxxs);column-gap:var(--ic-space-xxxs)}.compact-step-completed .step-status{color:var(--ic-status-success)}:host(.light) .compact-step-completed .step-status{color:var(--ic-status-success-contrast)}.compact-step-disabled :is(.step-title,.step-status){color:var(--ic-color-tertiary-text)}:host(.light) .compact-step-disabled :is(.step-status){color:var(--ic-architectural-white)}.step-num{color:var(--ic-color-secondary-text);white-space:nowrap}:host(.light) .step-num{color:var(--ic-architectural-white)}:host(.compact) .step-icon{margin:var(--ic-space-xxxs)}:host(.compact) .step-icon svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.default) .step{flex-direction:column}:host(.default.last-step){flex-grow:initial}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:2.5rem}:host(.default) .step-icon{border-radius:50%}:host(.default:not(.light)) .step-icon{background-color:var(--ic-architectural-white)}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%}:host(.default) .current{color:var(--ic-status-info)}:host(.default.light) .current,:host(.default.light) .current .step-title-area{color:var(--ic-status-info-contrast)}:host(.default) .step-title-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs);width:100%}:host(.light) .step-title-area{color:var(--ic-architectural-200)}:host(.compact.light) .step-title-area{color:var(--ic-architectural-white)}:host(.default) .step-title,.step-subtitle{width:-moz-fit-content;width:fit-content}.step-subtitle{color:var(--ic-color-tertiary-text)}:host(.light) .step-subtitle{color:var(--ic-architectural-white)}.current .step-subtitle{color:var(--ic-color-primary-text)}:host(.default) .completed{color:var(--ic-status-success)}:host(.default.light) .completed,:host(.default.light) .completed .step-title-area{color:var(--ic-status-success-contrast)}.active .step-icon-inner{box-shadow:inset var(--ic-architectural-200) 0 0 0 0.125rem}:host(.light) .active .step-icon-inner{color:var(--ic-architectural-white)}.current .step-icon-inner{background-color:var(--ic-status-info);color:white}:host(.light) .current .step-icon-inner{background-color:var(--ic-status-info-contrast)}.disabled{color:var(--ic-architectural-200)}:host(.default.light) .disabled,:host(.default.light) .disabled .step-title-area{color:var(--ic-architectural-400)}.disabled .step-icon-inner{border:var(--ic-border-width) dashed var(--ic-architectural-200);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs))}:host(.light) .disabled .step-icon-inner{border:var(--ic-border-width) dashed var(--ic-architectural-400)}.disabled .step-title-area,:host(.default.light) .disabled .step-subtitle{color:var(--ic-color-tertiary-text)}.completed .step-icon-inner{background:var(--ic-status-success);box-shadow:inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);border-radius:100%}:host(.light) .completed .step-icon-inner{background:var(--ic-status-success-contrast);box-shadow:inset var(--ic-status-success-contrast) 0 0 0 var(--ic-space-xxxs)}:host(.default) .current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-status-info);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));}:host(.default.light) .current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-status-info-contrast)}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-architectural-200);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}:host(.light) .step-connect{background-color:var(--ic-architectural-600)}.aligned-full-width.step-connect{min-width:6.25rem;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:0.125rem dashed var(--ic-architectural-200);border-radius:0}:host(.light) .disabled .step-connect{border-top:0.125rem dashed var(--ic-architectural-600)}.completed .step-connect{background-color:var(--ic-status-success)}:host(.light) .completed .step-connect{background-color:var(--ic-status-success-contrast)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-status-info)}:host(.light) .step-connect-inner{background-color:var(--ic-status-info-contrast)}.step-icon-inner .check-icon{padding-top:var(--ic-space-xxs)}.step-icon-inner .check-icon svg{width:var(--ic-space-md);height:auto}.step-icon-inner .check-icon>svg>path{fill:var(--ic-color-white-text)}@media (forced-colors: active){.compact-step-disabled :is(.step-title,.step-status){color:GrayText}.step-connect:not(.disabled .step-connect){border:var(--ic-hc-border)}.active .step-icon-inner,.completed .step-icon-inner,.current .step-icon-inner{forced-color-adjust:none;box-shadow:inset canvastext 0 0 0 0.125rem;background-color:transparent;color:canvastext}:host(.default) .current .step-icon{padding:0;border:none}.disabled,.disabled .step-title-area{color:GrayText}.step-connect-inner,.completed .step-connect{background-color:canvastext}.step-icon-inner .check-icon>svg>path{fill:canvastext}}";const l=class{constructor(e){t(this,e);this.compactStepStyling=undefined;this.current=false;this.lastStep=undefined;this.lastStepNum=undefined;this.nextStepTitle=undefined;this.progress=undefined;this.stepNum=undefined;this.stepStatus=undefined;this.stepSubtitle=undefined;this.stepTitle=undefined;this.variant=undefined;this.stepType="active"}stepTypeChangeHandler(){if(this.variant==="compact"&&this.stepType==="current"){this.current=true}else{this.current=false}}render(){var t;let i="";if(this.stepType==="completed"){i=". Completed step"}else if(this.stepType==="disabled"){i=". Non-required step"}else if(this.stepStatus==="required"){i=". Required step"}else if(this.stepStatus==="optional"){i=". Optional step"}let o;if(a(this.stepStatus)){o=this.stepStatus[0].toUpperCase()+this.stepStatus.slice(1)}let l;if(this.stepType==="disabled"||this.compactStepStyling==="disabled"){l="Not required"}else if(this.compactStepStyling==="completed"){l="Completed"}let n;if(this.stepType==="completed"||this.compactStepStyling==="completed"){n=e("span",{class:"check-icon step-icon","aria-hidden":"true",innerHTML:c})}else if(this.stepType==="disabled"||this.compactStepStyling==="disabled"){n=e("span",{class:"warning-icon step-icon","aria-hidden":"true",innerHTML:r})}const p=e("div",{class:{["step"]:true,["current"]:this.current,[`compact-step-${this.compactStepStyling}`]:!!this.compactStepStyling}},e("ic-loading-indicator",{class:{"compact-step-progress-indicator":true,"not-required":this.stepType==="disabled"||this.compactStepStyling==="disabled"},"aria-hidden":"true",size:"small","inner-label":this.stepNum,progress:this.progress}),e("div",{class:"step-title-area"},e("ic-typography",{variant:"h4",class:"step-title"},this.stepTitle),e("div",{class:"info-line"},e("ic-typography",{variant:"caption",class:"step-num"},`${this.stepNum} of ${this.lastStepNum}`,e("span",{class:"visually-hidden"}," steps")),(this.stepSubtitle||this.stepType==="completed"||this.stepType==="disabled"||this.variant==="compact"&&!!this.compactStepStyling&&this.compactStepStyling!=="active"||!!this.stepStatus)&&e("div",{class:"step-status"},n!==undefined&&n,(this.stepSubtitle||l)&&e("ic-typography",{variant:"caption"},this.stepSubtitle!==null&&a(this.stepSubtitle)?this.stepSubtitle:this.stepType==="disabled"||this.variant==="compact"&&this.compactStepStyling==="disabled"||this.stepType==="completed"||this.variant==="compact"&&this.compactStepStyling==="completed"?l:this.stepStatus&&o))),this.lastStep?e("ic-typography",{variant:"subtitle-small",class:"next-step"},"Last step"):a(this.nextStepTitle)&&e("ic-typography",{variant:"subtitle-small",class:"next-step"},"Next",e("span",{class:"visually-hidden"}," step is"),":"," ",this.nextStepTitle)));let d;if(this.stepType!=="completed"){d=e("ic-typography",{variant:"subtitle-small"},e("span",{class:"step-icon-inner","aria-hidden":"true"},this.stepNum))}else{d=e("div",{class:"step-icon-inner","aria-hidden":"true"},e("span",{class:"check-icon",innerHTML:c}))}const h=this.stepType==="current"&&e("div",{class:"step-connect-inner"});const u=!this.lastStep&&e("div",{class:{["step-connect"]:true,["aligned-full-width"]:this.el.parentElement.classList.contains("default")&&!this.el.parentElement.classList.contains("aligned-left")}},h);const v=e("div",{class:{["step"]:true,[`${this.stepType}`]:true}},e("div",{class:"step-top"},e("div",{class:"step-icon"},d),u),(this.stepTitle||this.stepSubtitle||this.stepStatus)&&e("div",{class:"step-title-area"},this.stepTitle&&e("ic-typography",{variant:"subtitle-large",class:"step-title"},this.stepTitle),this.stepTitle&&(this.stepSubtitle||this.stepStatus)&&e("ic-typography",{variant:"caption",class:"step-subtitle"},this.stepSubtitle!==null&&a(this.stepSubtitle)?this.stepSubtitle:o)));return e(s,{role:"listitem","aria-label":`Step ${this.stepNum}${i}`,"aria-current":(this.current||this.stepType==="current")&&"step",class:{["aligned-full-width"]:this.el.parentElement.classList.contains("default")&&!this.el.parentElement.classList.contains("aligned-left"),[`${this.variant}`]:true,["light"]:((t=this.el.parentElement)===null||t===void 0?void 0:t.appearance)==="light"}},this.variant==="compact"?p:v)}get el(){return i(this)}static get watchers(){return{stepType:["stepTypeChangeHandler"]}}};l.style=o;export{l as ic_step};
+//# sourceMappingURL=p-9d41ba2d.entry.js.map

package/dist/core/p-9d41ba2d.entry.js.map

@@ -0,0 +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: -9999px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n.visually-hidden:dir(rtl) {\n  right: -9999px;\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-d06c9130.entry.js → p-9d9f56b6.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,H as o,g as s}from"./p-6b5e91e2.js";import{w as n,e as a}from"./p-fd85797a.js";import{c as r}from"./p-68a5aaff.js";import"./p-26b7b18f.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){:host .opening-from-parent{animation:slide-in var(--ic-transition-duration-slow) ease-in-out}:host .opening-from-child{animation:slide-out var(--ic-transition-duration-slow) ease-in-out}}:host{border-radius:var(--ic-border-radius);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-popover);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);display:none}:host(.on-dialog){inset:auto !important}:host(.on-dialog-fix-translate){transform:translate(0, var(--ic-space-xs)) !important}:host(.on-dialog-translate-y){transform:translate(0, calc(-1 * var(--translate-y))) !important}.menu{border:var(--ic-border-default);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;height:0}.button{text-decoration:none;list-style-type:none}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu:focus-visible{outline:none}:host(.open){display:block;min-width:calc(20rem - var(--ic-space-xl));width:var(--popover-width, 20rem);max-width:calc(100vw - var(--ic-space-xl))}:host(.open) .menu{visibility:visible;height:-moz-fit-content;height:fit-content;max-height:var(--max-height, -moz-fit-content);max-height:var(--max-height, fit-content);overflow-y:auto;overflow-x:hidden}.parent-label{color:var(--ic-color-tertiary-text);margin:var(--ic-space-xs) var(--ic-space-xs) 0}@keyframes slide-in{from{opacity:0;transform:translateX(10rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out{from{opacity:0;transform:translateX(-10rem)}to{opacity:1;transform:translateX(0)}}';const h=class{constructor(i){t(this,i);this.icPopoverClosed=e(this,"icPopoverClosed",7);this.ARIA_LABEL="aria-label";this.popoverMenuEls=[];this.setButtonFocus=()=>{var t;(t=this.popoverMenuEls[this.currentFocus])===null||t===void 0?void 0:t.focus()};this.findAnchorEl=t=>{let e=null;if(!t){this.submenuId===undefined&&console.error("No anchor specified for popover component")}else{e=document.querySelector(t.indexOf("#")===0?t:"#"+t);if(e===null){console.error(`Popover anchor element '${t}' not found`)}}return e};this.isNotPopoverMenuEl=t=>{const{id:e,tagName:i}=t.target;return e!==this.anchor&&i!=="IC-MENU-ITEM"&&i!=="IC-MENU-GROUP"&&i!=="IC-POPOVER-MENU"};this.getNextItemToSelect=(t,e)=>{const i=this.popoverMenuEls.length-1;if(t<1){t=0}let o=e?t+1:t-1;if(o<0){o=i}else if(o>i){o=0}return o};this.addMenuItems=t=>{for(let e=0;e<t.length;e++){const i=t[e];if(i.tagName==="IC-MENU-ITEM"){this.popoverMenuEls.push(i)}else if(i.tagName==="IC-MENU-GROUP"){const t=i.shadowRoot.querySelector(".menu-items-wrapper");const e=n(t);this.addMenuItems(e)}}};this.getMenuAriaLabel=()=>{const t=this.el.getAttribute(this.ARIA_LABEL);if(a(this.submenuId)){return`${t}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`}else{return t}};this.handleBackButtonClick=()=>{this.parentPopover.openFromChild();this.open=false};this.initPopperJS=()=>{this.popperInstance=r(this.anchorEl,this.el,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start","top-end","bottom-end"],rootBoundary:"viewport"}}]})};this.openingFromChild=false;this.openingFromParent=false;this.anchor=undefined;this.parentLabel=undefined;this.parentPopover=undefined;this.submenuId=undefined;this.submenuLevel=1;this.open=undefined}watchOpenHandler(){if(this.open){if(this.parentPopover!==undefined&&!this.popoverMenuEls.some((t=>t.id.includes("ic-popover-submenu-back-button")))){this.popoverMenuEls.unshift(this.backButton)}this.currentFocus=0;setTimeout(this.setButtonFocus,50)}else if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}componentDidLoad(){const t=this.el.shadowRoot.querySelector("ul.button");const e=n(t);if(e!==null){this.addMenuItems(e)}if(this.submenuId===undefined&&this.el.getAttribute(this.ARIA_LABEL)===null){console.error(`No aria-label specified for popover menu component - aria-label required`)}}componentWillRender(){this.anchorEl=this.findAnchorEl(this.anchor)}componentDidRender(){if(this.open&&!this.popperInstance){this.initPopperJS()}}handleMenuItemClick(t){if(!t.detail.submenuTriggerFor&&t.detail.label!=="Back"){this.closeMenu(false,t.detail)}}handleSubmenuChange(t){const e=t.target;this.open=false;const i=document.querySelector(`ic-popover-menu[submenu-id=${e.submenuTriggerFor}]`);i.parentPopover=this.el;i.anchor=this.anchor;i.ariaLabel=this.el.getAttribute(this.ARIA_LABEL);i.openFromParent();i.submenuLevel=this.submenuLevel+1;i.parentLabel=e.label}handleClick(t){if(this.open&&this.isNotPopoverMenuEl(t)){this.closeMenu()}}handleKeyDown(t){switch(t.key){case"ArrowDown":case"ArrowUp":t.preventDefault();this.currentFocus=this.getNextItemToSelect(this.currentFocus,t.key==="ArrowDown");this.setButtonFocus();break;case"Home":this.currentFocus=0;this.setButtonFocus();break;case"End":this.currentFocus=this.popoverMenuEls.length-1;this.setButtonFocus();break;case"Escape":case"Tab":t.preventDefault();if(this.open){this.closeMenu(true);this.el.blur()}break}}async openFromChild(){this.open=true;this.openingFromChild=true;setTimeout((()=>this.openingFromChild=false),1e3)}async openFromParent(){this.open=true;this.openingFromParent=true;setTimeout((()=>this.openingFromParent=false),1e3)}async closeMenu(t=false,e){var i;this.open=false;if(this.parentPopover){this.parentPopover.closeMenu(t,e)}else{if(t){(i=this.anchorEl)===null||i===void 0?void 0:i.focus()}this.icPopoverClosed.emit(e)}}render(){return i(o,{class:{open:this.open}},i("div",{id:this.parentPopover===undefined?`ic-popover-submenu-${this.submenuId}`:"",class:{menu:true},tabindex:open?"0":"-1"},i("span",{class:{"opening-from-parent":this.openingFromParent,"opening-from-child":this.openingFromChild}},a(this.submenuId)&&i("span",null,i("span",{role:"menu"},i("ic-menu-item",{class:"ic-popover-submenu-back-button",ref:t=>this.backButton=t,label:"Back",onClick:this.handleBackButtonClick,id:`ic-popover-submenu-back-button-${this.submenuLevel}`},i("svg",{slot:"icon",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"submenu-back-icon"},i("path",{d:"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z",fill:"currentColor"})))),i("ic-typography",{variant:"subtitle-small",class:"parent-label"},this.parentLabel)),i("ul",{class:"button","aria-label":this.getMenuAriaLabel(),role:"menu"},i("slot",null)))))}static get delegatesFocus(){return true}get el(){return s(this)}static get watchers(){return{open:["watchOpenHandler"]}}};h.style=l;export{h as ic_popover_menu};
-//# sourceMappingURL=p-d06c9130.entry.js.map
+import{r as t,c as e,h as i,H as o,g as s}from"./p-6b5e91e2.js";import{w as n,e as a}from"./p-fd85797a.js";import{c as r}from"./p-68a5aaff.js";import"./p-26b7b18f.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){:host .opening-from-parent{animation:slide-in var(--ic-transition-duration-slow) ease-in-out}:host .opening-from-child{animation:slide-out var(--ic-transition-duration-slow) ease-in-out}}:host{border-radius:var(--ic-border-radius);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-popover);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);display:none}:host(.on-dialog){inset:auto !important}:host(.on-dialog-fix-translate){transform:translate(0, var(--ic-space-xs)) !important}:host(.on-dialog-translate-y){transform:translate(0, calc(-1 * var(--translate-y))) !important}.menu{border:var(--ic-border-default);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;height:0}.button{text-decoration:none;list-style-type:none}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu:focus-visible{outline:none}:host(.open){display:block;min-width:calc(20rem - var(--ic-space-xl));width:var(--popover-width, 20rem);max-width:calc(100vw - var(--ic-space-xl))}:host(.open) .menu{visibility:visible;height:-moz-fit-content;height:fit-content;max-height:var(--max-height, -moz-fit-content);max-height:var(--max-height, fit-content);overflow-y:auto;overflow-x:hidden}.parent-label{color:var(--ic-color-tertiary-text);margin:var(--ic-space-xs) var(--ic-space-xs) 0}@keyframes slide-in{from{opacity:0;transform:translateX(10rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out{from{opacity:0;transform:translateX(-10rem)}to{opacity:1;transform:translateX(0)}}';const h=class{constructor(i){t(this,i);this.icPopoverClosed=e(this,"icPopoverClosed",7);this.ARIA_LABEL="aria-label";this.popoverMenuEls=[];this.setButtonFocus=()=>{var t;(t=this.popoverMenuEls[this.currentFocus])===null||t===void 0?void 0:t.focus()};this.findAnchorEl=t=>{let e=null;if(!t){this.submenuId===undefined&&console.error("No anchor specified for popover component")}else{e=document.querySelector(t.indexOf("#")===0?t:"#"+t);if(e===null){console.error(`Popover anchor element '${t}' not found`)}}return e};this.isNotPopoverMenuEl=t=>{const{id:e,tagName:i}=t.target;return e!==this.anchor&&i!=="IC-MENU-ITEM"&&i!=="IC-MENU-GROUP"&&i!=="IC-POPOVER-MENU"};this.getNextItemToSelect=(t,e)=>{const i=this.popoverMenuEls.length-1;if(t<1){t=0}let o=e?t+1:t-1;if(o<0){o=i}else if(o>i){o=0}return o};this.addMenuItems=t=>{for(let e=0;e<t.length;e++){const i=t[e];if(i.tagName==="IC-MENU-ITEM"){this.popoverMenuEls.push(i)}else if(i.tagName==="IC-MENU-GROUP"){const t=i.shadowRoot.querySelector(".menu-items-wrapper");const e=n(t);this.addMenuItems(e)}}};this.getMenuAriaLabel=()=>{const t=this.el.getAttribute(this.ARIA_LABEL);if(a(this.submenuId)){return`${t}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`}else{return t}};this.handleBackButtonClick=()=>{this.parentPopover.openFromChild();this.open=false};this.initPopperJS=()=>{this.popperInstance=r(this.anchorEl,this.el,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start","top-end","bottom-end"],rootBoundary:"viewport"}}]})};this.openingFromChild=false;this.openingFromParent=false;this.anchor=undefined;this.parentLabel=undefined;this.parentPopover=undefined;this.submenuId=undefined;this.submenuLevel=1;this.open=undefined}watchOpenHandler(){if(this.open){if(this.parentPopover!==undefined&&!this.popoverMenuEls.some((t=>t.id.includes("ic-popover-submenu-back-button")))){this.popoverMenuEls.unshift(this.backButton)}this.currentFocus=0;setTimeout(this.setButtonFocus,50)}else if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}componentDidLoad(){const t=this.el.shadowRoot.querySelector("ul.button");const e=n(t);if(e!==null){this.addMenuItems(e)}if(this.submenuId===undefined&&this.el.getAttribute(this.ARIA_LABEL)===null){console.error(`No aria-label specified for popover menu component - aria-label required`)}this.watchOpenHandler()}componentWillRender(){this.anchorEl=this.findAnchorEl(this.anchor)}componentDidRender(){if(this.open&&!this.popperInstance){this.initPopperJS()}}handleMenuItemClick(t){if(!t.detail.submenuTriggerFor&&t.detail.label!=="Back"){this.closeMenu(false,t.detail)}}handleSubmenuChange(t){const e=t.target;this.open=false;const i=document.querySelector(`ic-popover-menu[submenu-id=${e.submenuTriggerFor}]`);i.parentPopover=this.el;i.anchor=this.anchor;i.ariaLabel=this.el.getAttribute(this.ARIA_LABEL);i.openFromParent();i.submenuLevel=this.submenuLevel+1;i.parentLabel=e.label}handleClick(t){if(this.open&&this.isNotPopoverMenuEl(t)){this.closeMenu()}}handleKeyDown(t){switch(t.key){case"ArrowDown":case"ArrowUp":t.preventDefault();this.currentFocus=this.getNextItemToSelect(this.currentFocus,t.key==="ArrowDown");this.setButtonFocus();break;case"Home":this.currentFocus=0;this.setButtonFocus();break;case"End":this.currentFocus=this.popoverMenuEls.length-1;this.setButtonFocus();break;case"Escape":case"Tab":t.preventDefault();if(this.open){this.closeMenu(true);this.el.blur()}break}}async openFromChild(){this.open=true;this.openingFromChild=true;setTimeout((()=>this.openingFromChild=false),1e3)}async openFromParent(){this.open=true;this.openingFromParent=true;setTimeout((()=>this.openingFromParent=false),1e3)}async closeMenu(t=false,e){var i;this.open=false;if(this.parentPopover){this.parentPopover.closeMenu(t,e)}else{if(t){(i=this.anchorEl)===null||i===void 0?void 0:i.focus()}this.icPopoverClosed.emit(e)}}render(){return i(o,{class:{open:this.open}},i("div",{id:this.parentPopover===undefined?`ic-popover-submenu-${this.submenuId}`:"",class:{menu:true},tabindex:open?"0":"-1"},i("span",{class:{"opening-from-parent":this.openingFromParent,"opening-from-child":this.openingFromChild}},a(this.submenuId)&&i("span",null,i("span",{role:"menu"},i("ic-menu-item",{class:"ic-popover-submenu-back-button",ref:t=>this.backButton=t,label:"Back",onClick:this.handleBackButtonClick,id:`ic-popover-submenu-back-button-${this.submenuLevel}`},i("svg",{slot:"icon",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"submenu-back-icon"},i("path",{d:"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z",fill:"currentColor"})))),i("ic-typography",{variant:"subtitle-small",class:"parent-label"},this.parentLabel)),i("ul",{class:"button","aria-label":this.getMenuAriaLabel(),role:"menu"},i("slot",null)))))}static get delegatesFocus(){return true}get el(){return s(this)}static get watchers(){return{open:["watchOpenHandler"]}}};h.style=l;export{h as ic_popover_menu};
+//# sourceMappingURL=p-9d9f56b6.entry.js.map

package/dist/core/p-9d9f56b6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["icPopoverMenuCss","PopoverMenu","this","ARIA_LABEL","popoverMenuEls","setButtonFocus","_a","currentFocus","focus","findAnchorEl","anchor","anchorElement","submenuId","undefined","console","error","document","querySelector","indexOf","isNotPopoverMenuEl","ev","id","tagName","target","getNextItemToSelect","currentItem","movingDown","numButtons","length","nextItem","addMenuItems","elements","i","el","push","groupSlotWrapper","shadowRoot","menuGroupElements","getSlotElements","getMenuAriaLabel","ariaLabel","getAttribute","isPropDefined","submenuLevel","parentLabel","handleBackButtonClick","parentPopover","openFromChild","open","initPopperJS","popperInstance","createPopper","anchorEl","placement","modifiers","name","options","offset","fallbackPlacements","rootBoundary","watchOpenHandler","some","menuItem","includes","unshift","backButton","setTimeout","destroy","disconnectedCallback","componentDidLoad","slotWrapper","popoverMenuElements","componentWillRender","componentDidRender","handleMenuItemClick","detail","submenuTriggerFor","label","closeMenu","handleSubmenuChange","childEl","openFromParent","handleClick","handleKeyDown","key","preventDefault","blur","openingFromChild","openingFromParent","setFocusToAnchor","menuElement","icPopoverClosed","emit","render","h","Host","class","menu","tabindex","role","ref","onClick","slot","viewBox","fill","xmlns","d","variant"],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n*/\n\n@media (prefers-reduced-motion: no-preference) {\n  :host .opening-from-parent {\n    animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n  }\n\n  :host .opening-from-child {\n    animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n  }\n}\n\n:host {\n  border-radius: var(--ic-border-radius);\n  color: var(--ic-color-primary-text);\n  background-color: var(--ic-architectural-white);\n  position: relative;\n  z-index: var(--ic-z-index-popover);\n  box-sizing: border-box;\n  box-shadow: var(--ic-elevation-overlay);\n  display: none;\n}\n\n:host(.on-dialog) {\n  inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n  transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n  transform: translate(0, calc(-1 * var(--translate-y))) !important;\n}\n\n.menu {\n  border: var(--ic-border-default);\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-architectural-white);\n  visibility: hidden;\n  height: 0;\n}\n\n.button {\n  text-decoration: none;\n  list-style-type: none;\n}\n\n:host(:focus-within) {\n  box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n  outline: none;\n}\n\n:host(.open) {\n  display: block;\n  min-width: calc(20rem - var(--ic-space-xl));\n  width: var(--popover-width, 20rem);\n  max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.open) .menu {\n  visibility: visible;\n  height: fit-content;\n  max-height: var(--max-height, fit-content);\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.parent-label {\n  color: var(--ic-color-tertiary-text);\n  margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n  from {\n    opacity: 0;\n    transform: translateX(10rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes slide-out {\n  from {\n    opacity: 0;\n    transform: translateX(-10rem);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Watch,\n  State,\n  Method,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\n@Component({\n  tag: \"ic-popover-menu\",\n  styleUrl: \"ic-popover-menu.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class PopoverMenu {\n  private anchorEl: HTMLElement;\n  private ARIA_LABEL: string = \"aria-label\";\n  private backButton: HTMLIcMenuItemElement;\n  private currentFocus: number;\n  private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n  private popperInstance: PopperInstance;\n\n  @Element() el: HTMLIcPopoverMenuElement;\n\n  @State() openingFromChild: boolean = false;\n  @State() openingFromParent: boolean = false;\n\n  /**\n   * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n   */\n  @Prop() anchor: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentLabel?: string;\n\n  /**\n   * @internal The parent popover menu of a child popover menu.\n   */\n  @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n  /**\n   * The unique identifier for a popover submenu.\n   */\n  @Prop() submenuId?: string;\n\n  /**\n   * @internal The level of menu being displayed.\n   */\n  @Prop() submenuLevel: number = 1;\n\n  /**\n   * If `true`, the popover menu will be displayed.\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n  @Watch(\"open\")\n  watchOpenHandler(): void {\n    if (this.open) {\n      if (\n        this.parentPopover !== undefined &&\n        !this.popoverMenuEls.some((menuItem) =>\n          menuItem.id.includes(\"ic-popover-submenu-back-button\")\n        )\n      ) {\n        this.popoverMenuEls.unshift(this.backButton);\n      }\n\n      this.currentFocus = 0;\n      // Needed so that anchorEl isn't always focused\n      setTimeout(this.setButtonFocus, 50);\n    } else if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  /**\n   * Emitted when the popover menu is closed.\n   */\n  @Event() icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;\n\n  disconnectedCallback(): void {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  componentDidLoad(): void {\n    const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n    const popoverMenuElements = getSlotElements(slotWrapper);\n\n    if (popoverMenuElements !== null) {\n      this.addMenuItems(popoverMenuElements);\n    }\n\n    if (\n      this.submenuId === undefined &&\n      this.el.getAttribute(this.ARIA_LABEL) === null\n    ) {\n      console.error(\n        `No aria-label specified for popover menu component - aria-label required`\n      );\n    }\n\n    this.watchOpenHandler();\n  }\n\n  componentWillRender(): void {\n    this.anchorEl = this.findAnchorEl(this.anchor);\n  }\n\n  componentDidRender(): void {\n    if (this.open && !this.popperInstance) {\n      this.initPopperJS();\n    }\n  }\n\n  @Listen(\"handleMenuItemClick\")\n  handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void {\n    if (!ev.detail.submenuTriggerFor && ev.detail.label !== \"Back\") {\n      this.closeMenu(false, ev.detail);\n    }\n  }\n\n  // This is listening for the event emitted when a menu item is acting as a trigger button\n  @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n  handleSubmenuChange(ev: Event): void {\n    // Finds the trigger menu item that has emitted the event\n    const target = ev.target as HTMLIcMenuItemElement;\n    this.open = false;\n\n    // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n    const childEl = document.querySelector(\n      `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n    ) as HTMLIcPopoverMenuElement;\n    // Set the parent popover menu of the submenu and open the submenu\n    childEl.parentPopover = this.el;\n    childEl.anchor = this.anchor;\n    childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n    childEl.openFromParent();\n    childEl.submenuLevel = this.submenuLevel + 1;\n    // Set the label in the submenu using the label of the menu item that has emitted the event\n    childEl.parentLabel = target.label;\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleClick(ev: Event): void {\n    if (this.open && this.isNotPopoverMenuEl(ev)) {\n      // If menu is open and the next click on the document is not a popover El, close the popover\n      this.closeMenu();\n    }\n  }\n\n  // Manages the keyboard navigation in the popover menu\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.currentFocus = this.getNextItemToSelect(\n          this.currentFocus,\n          ev.key === \"ArrowDown\"\n        );\n        this.setButtonFocus();\n        break;\n      case \"Home\":\n        //Sets home focus as first element, or back button\n        this.currentFocus = 0;\n        this.setButtonFocus();\n        break;\n      case \"End\":\n        //Sets end focus as last element\n        this.currentFocus = this.popoverMenuEls.length - 1;\n        this.setButtonFocus();\n        break;\n      case \"Escape\":\n      case \"Tab\":\n        ev.preventDefault();\n        if (this.open) {\n          this.closeMenu(true);\n          this.el.blur();\n        }\n        break;\n    }\n  }\n\n  /**\n   * @internal Opens the menu from the child menu.\n   */\n  @Method()\n  async openFromChild(): Promise<void> {\n    this.open = true;\n    this.openingFromChild = true;\n\n    setTimeout(() => (this.openingFromChild = false), 1000);\n  }\n\n  /**\n   * @internal Opens the menu from the parent menu.\n   */\n  @Method()\n  async openFromParent(): Promise<void> {\n    this.open = true;\n    this.openingFromParent = true;\n\n    setTimeout(() => (this.openingFromParent = false), 1000);\n  }\n\n  private setButtonFocus = () => {\n    this.popoverMenuEls[this.currentFocus]?.focus();\n  };\n\n  // Checks that the popover menu has an anchor\n  private findAnchorEl = (anchor: string): HTMLElement => {\n    let anchorElement: HTMLElement = null;\n    if (!anchor) {\n      this.submenuId === undefined &&\n        console.error(\"No anchor specified for popover component\");\n    } else {\n      anchorElement = document.querySelector(\n        anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n      );\n      if (anchorElement === null) {\n        console.error(`Popover anchor element '${anchor}' not found`);\n      }\n    }\n    return anchorElement;\n  };\n\n  private isNotPopoverMenuEl = (ev: Event) => {\n    const { id, tagName } = ev.target as HTMLElement;\n    return (\n      id !== this.anchor &&\n      tagName !== \"IC-MENU-ITEM\" &&\n      tagName !== \"IC-MENU-GROUP\" &&\n      tagName !== \"IC-POPOVER-MENU\"\n    );\n  };\n\n  /**\n   * @internal Close the menu, emit icPopoverClosed of the root popover\n   * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n   */\n  @Method()\n  async closeMenu(\n    setFocusToAnchor = false,\n    menuElement?: HTMLIcMenuItemElement\n  ): Promise<void> {\n    this.open = false;\n    if (this.parentPopover) {\n      this.parentPopover.closeMenu(setFocusToAnchor, menuElement);\n    } else {\n      if (setFocusToAnchor) {\n        this.anchorEl?.focus();\n      }\n      this.icPopoverClosed.emit(menuElement);\n    }\n  }\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const numButtons = this.popoverMenuEls.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n    // Check if wrap around necessary\n    if (nextItem < 0) {\n      nextItem = numButtons;\n    } else if (nextItem > numButtons) {\n      nextItem = 0;\n    }\n\n    return nextItem;\n  };\n\n  private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n    for (let i = 0; i < elements.length; i++) {\n      const el = elements[i] as HTMLIcMenuItemElement;\n\n      if (el.tagName === \"IC-MENU-ITEM\") {\n        this.popoverMenuEls.push(el);\n      } else if (el.tagName === \"IC-MENU-GROUP\") {\n        const groupSlotWrapper = el.shadowRoot.querySelector(\n          \".menu-items-wrapper\"\n        );\n        const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n        this.addMenuItems(menuGroupElements);\n      }\n    }\n  };\n\n  private getMenuAriaLabel = (): string => {\n    const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n    if (isPropDefined(this.submenuId)) {\n      return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  private handleBackButtonClick = (): void => {\n    this.parentPopover.openFromChild();\n    this.open = false;\n  };\n\n  private initPopperJS = () => {\n    this.popperInstance = createPopper(this.anchorEl, this.el, {\n      placement: \"bottom-start\",\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 4],\n          },\n        },\n        {\n          name: \"flip\",\n          options: {\n            fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n            rootBoundary: \"viewport\",\n          },\n        },\n      ],\n    });\n  };\n\n  render() {\n    return (\n      <Host class={{ open: this.open }}>\n        <div\n          id={\n            this.parentPopover === undefined\n              ? `ic-popover-submenu-${this.submenuId}`\n              : \"\"\n          }\n          class={{\n            menu: true,\n          }}\n          tabindex={open ? \"0\" : \"-1\"}\n        >\n          <span\n            class={{\n              \"opening-from-parent\": this.openingFromParent,\n              \"opening-from-child\": this.openingFromChild,\n            }}\n          >\n            {isPropDefined(this.submenuId) && (\n              <span>\n                <span role=\"menu\">\n                  <ic-menu-item\n                    class=\"ic-popover-submenu-back-button\"\n                    ref={(el) => (this.backButton = el)}\n                    label=\"Back\"\n                    onClick={this.handleBackButtonClick}\n                    id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n                  >\n                    <svg\n                      slot=\"icon\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      class=\"submenu-back-icon\"\n                    >\n                      <path\n                        d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n                        fill=\"currentColor\"\n                      />\n                    </svg>\n                  </ic-menu-item>\n                </span>\n                <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n                  {this.parentLabel}\n                </ic-typography>\n              </span>\n            )}\n            <ul class=\"button\" aria-label={this.getMenuAriaLabel()} role=\"menu\">\n              <slot></slot>\n            </ul>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/core/{p-34e2d5f8.entry.js → p-9fc8f5e3.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,H as i,g as a}from"./p-6b5e91e2.js";import{i as s,f as n,D as o,j as r}from"./p-fd85797a.js";import"./p-26b7b18f.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;z-index:var(--ic-z-index-page-header)}:host(.sticky){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay);z-index:var(--ic-z-index-sticky-page-header)}header{background-color:var(--ic-architectural-40)}header.border-bottom{border-bottom:var(--ic-border-default)}header.tabs{padding-top:var(--ic-space-md)}.breadcrumb-area{margin-bottom:var(--ic-space-md)}.main-content{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"title-area action-area"\n    "input-area action-area";-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md);justify-content:space-between;width:100%}.title-area{display:flex;flex-direction:column;flex:1;min-width:19rem;grid-area:title-area}.header-content{display:flex;align-items:center;width:100%;flex-wrap:wrap;-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md)}.heading{display:inline-block;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.subheading-content{margin-top:var(--ic-space-xs)}.subheading-content.small{margin-top:var(--ic-space-md)}.action-area{display:flex;gap:var(--ic-space-md);flex-flow:row wrap;justify-self:end;justify-content:flex-end;height:-moz-fit-content;height:fit-content;grid-area:action-area}.input-area,.navigation-area{margin-top:var(--ic-space-md);width:100%}.tabs-slot{display:flex;overflow-x:auto;padding:0.5rem;margin:-0.5rem}.tabs-slot::-webkit-scrollbar{display:none}.input-area{grid-area:input-area}@media screen and (max-width: 576px){::slotted(ic-text-field){--input-width:100%;max-width:20rem}.main-content{grid-template-areas:"title-area"\n      "action-area"\n      "input-area";justify-content:flex-start}.title-area{min-width:0}.action-area{min-width:100%;margin-top:var(--ic-space-md);justify-content:start}}@media screen and (min-width: 992px){:host(.sticky-desktop){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay);z-index:var(--ic-z-index-sticky-page-header)}}';const d=class{constructor(e){t(this,e);this.resizeObserver=null;this.resizeObserverCallback=()=>{if(this.reverseOrder&&s(this.el,"actions")){this.applyReverseOrder()}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.el)};this.applyReverseOrder=()=>{const t=n();if(t!==this.deviceSize){this.deviceSize=t}const e=this.el.shadowRoot.querySelector("div.action-area");const i=[];for(let t=0;t<this.actionContent.length;t++){const e=this.actionContent[t];let a=e.offsetHeight;if(a===undefined){a=0}i.push(a)}const a=Math.max(...i);let s=e.offsetHeight;if(s===undefined){s=0}const r=()=>{this.actionContent=this.actionContent.reverse();this.actionContent.forEach((t=>{this.el.append(t)}));this.areButtonsReversed=!this.areButtonsReversed};if(this.deviceSize>o.S&&s<=a&&!this.areButtonsReversed||(this.deviceSize>o.S&&s>a||this.deviceSize<=o.S)&&this.areButtonsReversed){r()}};this.actionContent=undefined;this.areButtonsReversed=false;this.deviceSize=o.XL;this.aligned="left";this.border=true;this.heading=undefined;this.reverseOrder=false;this.size="default";this.small=false;this.sticky=false;this.stickyDesktopOnly=false;this.subheading=undefined}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}componentWillLoad(){this.actionContent=Array.from(this.el.querySelectorAll(`[slot="actions"]`))}componentDidLoad(){r(this.runResizeObserver)}render(){const{small:t,size:a,border:n,heading:o,subheading:r,aligned:l,sticky:d,stickyDesktopOnly:c}=this;const p=o?`${o} page sections`:"navigation-landmark-page-header";return e(i,{class:{["sticky"]:d,["sticky-desktop"]:!d&&c},"aria-label":this.el.ariaLabel||"page header"},e("header",{class:{["border-bottom"]:n,["tabs"]:s(this.el,"tabs")},role:"presentation"},e("ic-section-container",{aligned:l,fullHeight:s(this.el,"tabs")},s(this.el,"breadcrumbs")&&e("div",{class:"breadcrumb-area"},e("slot",{name:"breadcrumbs"})),e("div",{class:"main-content"},e("div",{class:"title-area"},e("div",{class:"header-content"},e("slot",{name:"heading"},e("ic-typography",{variant:t||a==="small"?"h4":"h2",class:"heading"},e("h2",null,o))),e("slot",{name:"heading-adornment"})),e("div",{class:{["subheading-content"]:!!r||s(this.el,"subheading"),["small"]:t||a==="small"}},e("slot",{name:"subheading"},e("ic-typography",{variant:"body"},r)))),s(this.el,"actions")&&e("div",{class:"action-area"},e("slot",{name:"actions"})),s(this.el,"input")&&e("div",{class:"input-area"},e("slot",{name:"input"}))),(s(this.el,"stepper")||s(this.el,"tabs"))&&e("div",{class:"navigation-area"},s(this.el,"stepper")&&!s(this.el,"tabs")&&e("slot",{name:"stepper"}),s(this.el,"tabs")&&e("nav",{"aria-label":p},e("ic-horizontal-scroll",null,e("ul",{class:"tabs-slot"},e("slot",{name:"tabs"}))))))))}get el(){return a(this)}};d.style=l;export{d as ic_page_header};
-//# sourceMappingURL=p-34e2d5f8.entry.js.map
+import{r as t,h as e,H as i,g as a}from"./p-6b5e91e2.js";import{i as s,f as n,D as o,j as r}from"./p-fd85797a.js";import"./p-26b7b18f.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;z-index:var(--ic-z-index-page-header)}:host(.sticky){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay);z-index:var(--ic-z-index-sticky-page-header)}header{background-color:var(--ic-architectural-40)}header.border-bottom{border-bottom:var(--ic-border-default)}header.tabs{padding-top:var(--ic-space-md)}.breadcrumb-area{margin-bottom:var(--ic-space-md)}.main-content{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"title-area action-area"\n    "input-area action-area";-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md);justify-content:space-between;width:100%}.title-area{display:flex;flex-direction:column;flex:1;min-width:19rem;grid-area:title-area}.header-content{display:flex;align-items:center;width:100%;flex-wrap:wrap;-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md)}.heading{display:inline-block;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.subheading-content{margin-top:var(--ic-space-xs)}.subheading-content.small{margin-top:var(--ic-space-md)}.action-area{display:flex;gap:var(--ic-space-md);flex-flow:row wrap;justify-self:end;justify-content:flex-end;height:-moz-fit-content;height:fit-content;grid-area:action-area}.input-area,.navigation-area{margin-top:var(--ic-space-md);width:100%}.tabs-slot{display:flex;overflow-x:auto;padding:0.5rem;margin:-0.5rem}.tabs-slot::-webkit-scrollbar{display:none}.input-area{grid-area:input-area}@media screen and (max-width: 576px){::slotted(ic-text-field){--input-width:100%;max-width:20rem}.main-content{grid-template-areas:"title-area"\n      "action-area"\n      "input-area";justify-content:flex-start}.title-area{min-width:0}.action-area{min-width:100%;margin-top:var(--ic-space-md);justify-content:start}}@media screen and (min-width: 992px){:host(.sticky-desktop){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay);z-index:var(--ic-z-index-sticky-page-header)}}';const d=class{constructor(e){t(this,e);this.resizeObserver=null;this.resizeObserverCallback=()=>{if(this.reverseOrder&&s(this.el,"actions")){this.applyReverseOrder()}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.el)};this.applyReverseOrder=()=>{const t=n();if(t!==this.deviceSize){this.deviceSize=t}const e=this.el.shadowRoot.querySelector("div.action-area");const i=[];for(let t=0;t<this.actionContent.length;t++){const e=this.actionContent[t];let a=e.offsetHeight;if(a===undefined){a=0}i.push(a)}const a=Math.max(...i);let s=e.offsetHeight;if(s===undefined){s=0}const r=()=>{this.actionContent=this.actionContent.reverse();this.actionContent.forEach((t=>{this.el.append(t)}));this.areButtonsReversed=!this.areButtonsReversed};if(this.deviceSize>o.S&&s<=a&&!this.areButtonsReversed||(this.deviceSize>o.S&&s>a||this.deviceSize<=o.S)&&this.areButtonsReversed){r()}};this.actionContent=undefined;this.areButtonsReversed=false;this.deviceSize=o.XL;this.aligned="left";this.border=true;this.heading=undefined;this.reverseOrder=false;this.size="default";this.small=false;this.sticky=false;this.stickyDesktopOnly=false;this.subheading=undefined}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}componentWillLoad(){this.actionContent=Array.from(this.el.querySelectorAll(`[slot="actions"]`))}componentDidLoad(){r(this.runResizeObserver)}render(){const{small:t,size:a,border:n,heading:o,subheading:r,aligned:l,sticky:d,stickyDesktopOnly:c}=this;const h=`${s(this.el,"heading")?this.el.querySelector('[slot="heading"]').textContent:o!==null&&o!==void 0?o:""} page sections`;return e(i,{class:{["sticky"]:d,["sticky-desktop"]:!d&&c},"aria-label":this.el.ariaLabel||"page header"},e("header",{class:{["border-bottom"]:n,["tabs"]:s(this.el,"tabs")},role:"presentation"},e("ic-section-container",{aligned:l,fullHeight:s(this.el,"tabs")},s(this.el,"breadcrumbs")&&e("div",{class:"breadcrumb-area"},e("slot",{name:"breadcrumbs"})),e("div",{class:"main-content"},e("div",{class:"title-area"},e("div",{class:"header-content"},e("slot",{name:"heading"},e("ic-typography",{variant:t||a==="small"?"h4":"h2",class:"heading"},e("h2",null,o))),e("slot",{name:"heading-adornment"})),e("div",{class:{["subheading-content"]:!!r||s(this.el,"subheading"),["small"]:t||a==="small"}},e("slot",{name:"subheading"},e("ic-typography",{variant:"body"},r)))),s(this.el,"actions")&&e("div",{class:"action-area"},e("slot",{name:"actions"})),s(this.el,"input")&&e("div",{class:"input-area"},e("slot",{name:"input"}))),(s(this.el,"stepper")||s(this.el,"tabs"))&&e("div",{class:"navigation-area"},s(this.el,"stepper")&&!s(this.el,"tabs")&&e("slot",{name:"stepper"}),s(this.el,"tabs")&&e("nav",{"aria-label":h},e("ic-horizontal-scroll",null,e("ul",{class:"tabs-slot"},e("slot",{name:"tabs"}))))))))}get el(){return a(this)}};d.style=l;export{d as ic_page_header};
+//# sourceMappingURL=p-9fc8f5e3.entry.js.map