@siemens/ix 1.5.0 → 1.6.1

package/dist/siemens-ix/p-a6e443df.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,H as s,g as n,f as o}from"./p-57a5d3d0.js";import{m as a,h as r,i as m}from"./p-529d7530.js";import{a as h}from"./p-21aa3602.js";import{s as l}from"./p-1572aab3.js";import{t as c}from"./p-323d5529.js";import"./p-9ee41861.js";const u="ix-menu{display:flex;flex-direction:row;position:absolute;height:100%;min-height:22.75rem;z-index:var(--theme-z-index-sticky);width:auto}ix-menu .menu{display:flex;flex-direction:column;position:relative;width:4rem;height:100%;-webkit-padding-after:1rem;padding-block-end:1rem;overflow:hidden;background-color:var(--theme-nav--background);transition:width var(--animate-duration)}ix-menu .menu.expanded{box-shadow:var(--theme-navigation--box-shadow)}ix-menu .menu .burger-menu{margin:0.75rem 0 1rem 0.75rem}ix-menu .menu-overlay{display:block;position:absolute;width:calc(100vw - 4rem);height:100%;left:4rem;z-index:-1;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--theme-sidebar-overlay-blur);transition:all 300ms ease-out}ix-menu .menu-overlay-invisible{display:none}ix-menu .menu.expanded{width:16rem}ix-menu .menu-overlay.expanded{width:calc(100vw - 16rem);left:16rem}ix-menu #avatar-tab-placeholder{max-height:3rem}ix-menu .avatar{margin-bottom:2rem}ix-menu #cui-imprint .cui-imprint-product-name{margin-bottom:1rem}ix-menu #cui-imprint .cui-imprint-product-description{margin-bottom:2rem}ix-menu #cui-imprint .cui-imprint-link-container{display:flex;align-items:center}ix-menu .bottom-tab-divider{margin-top:auto}ix-menu.mode-mobile .menu:not(.expanded){width:0}ix-menu.mode-mobile .menu{padding-top:2rem}ix-menu.mode-mobile .menu .burger-menu{display:none}ix-menu.mode-mobile .menu-overlay{left:0px;width:100vw}a[href]:has(>ix-menu-item){text-decoration:none}";const d=class{constructor(i){t(this,i);this.expandChange=e(this,"expandChange",7);this.mapExpandChange=e(this,"mapExpandChange",7);this.domObserver=new MutationObserver(this.onDomChange.bind(this));this.isVisible=t=>{var e,i;return t.style.display!=="none"&&((i=(e=t.parentElement)===null||e===void 0?void 0:e.parentElement)===null||i===void 0?void 0:i.style.display)!=="none"};this.showSettings=false;this.showAbout=false;this.enableToggleTheme=false;this.enableSettings=true;this.enableMapExpand=false;this.applicationName=undefined;this.applicationDescription="";this.maxVisibleMenuItems=9;this.i18nLegal="About & legal information";this.i18nSettings="Settings";this.i18nToggleTheme="Toggle theme";this.i18nExpand=" Expand";this.i18nCollapse="Collapse";this.i18nMore="More…";this.expand=false;this.showMoreItems=false;this.visibleMenuItems=0;this.countMoreNotifications=0;this.mapExpand=true;this.activeTab=undefined;this.isMoreTabEmpty=false;this.mode="desktop"}onWindowResize(){this.visibleMenuItems=this.getMaxTabCount()}handleNodeMutation(t){if(!(t instanceof HTMLElement)){return}if(t.matches(".tab")){this.onWindowResize()}if(t.matches("ix-menu-about")&&this.menu.contains(t)){this.appendAbout()}if(t.matches("ix-menu-settings")&&this.menu.contains(t)){this.appendSettings()}}onDomChange(t){t.forEach((t=>{t.addedNodes.forEach(this.handleNodeMutation.bind(this));t.removedNodes.forEach(this.handleNodeMutation.bind(this))}))}get popoverArea(){return this.hostElement.querySelector("#popover-area")}get overlayContainer(){return this.hostElement.querySelector(".menu-overlay")}get invisibleContainer(){return this.hostElement.querySelector(".menu-overlay-invisible")}get menu(){return this.hostElement.querySelector(".menu")}get menuItems(){return Array.from(this.hostElement.querySelectorAll('ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot="bottom"])')).filter(this.isVisible)}get menuBottomItems(){return Array.from(this.hostElement.querySelectorAll("ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)")).filter(this.isVisible)}get homeTab(){return this.hostElement.querySelector("ix-menu-item.home-tab")}get moreItemsDropdown(){return this.hostElement.querySelector(".internal-tab ix-dropdown")}get isMoreItemsDropdownEmpty(){return this.hostElement.querySelectorAll(".internal-tab ix-dropdown .appended").length===0}get moreItemsDropdownItems(){return this.hostElement.querySelectorAll(".internal-tab ix-dropdown ix-menu-item")}get activeMoreTabContainer(){return this.hostElement.querySelector(".active-more-tab")}get activeMoreTab(){return this.hostElement.querySelector(".active-more-tab ix-menu-item")}get aboutPopoverContainer(){return this.hostElement.querySelector(".about-news")}get aboutPopover(){return document.querySelector("ix-menu-about-news")}get aboutTab(){return this.hostElement.querySelector("#aboutAndLegal")}get about(){return this.hostElement.querySelector("ix-menu-about")}get settings(){return this.hostElement.querySelector("ix-menu-settings")}get isSettingsEmpty(){return Array.from(this.hostElement.querySelectorAll("ix-menu-settings-item")).length===0}get avatarItem(){return this.hostElement.querySelector("ix-menu-avatar")}get tabsContainer(){return this.hostElement.querySelector("#menu-tabs")}showTab(t){return t+1<=this.visibleMenuItems}componentDidLoad(){var t,e,i,s;(t=this.settings)===null||t===void 0?void 0:t.addEventListener("close",(()=>{this.showSettings=false;this.settings.show=this.showSettings}));(e=this.settings)===null||e===void 0?void 0:e.addEventListener("animationend",(()=>{if(!this.showSettings){this.settings.classList.add("d-none");this.overlayContainer.classList.add("d-none")}}));(i=this.about)===null||i===void 0?void 0:i.addEventListener("close",(()=>{this.showAbout=false;this.about.show=this.showAbout}));(s=this.about)===null||s===void 0?void 0:s.addEventListener("animationend",(()=>{if(!this.showAbout){this.about.classList.add("d-none");this.overlayContainer.classList.add("d-none")}}));this.overlayContainer.classList.add("d-none");this.onWindowResize();this.domObserver.observe(this.hostElement,{attributes:false,childList:true,subtree:true})}componentWillLoad(){a.register(this.hostElement);const t=r("ix-basic-navigation",this.hostElement);if(m(t)&&t.hideHeader===false){l.onChange.on((t=>this.mode=t));this.mode=l.mode}}componentWillRender(){this.appendTabs()}componentDidRender(){this.visibleMenuItems=this.getMaxTabCount();this.appendFragments()}appendFragments(){this.appendAvatar();this.appendAbout();this.appendSettings();this.appendAboutNewsPopover();this.isMoreTabEmpty=this.isMoreItemsDropdownEmpty;this.countMoreNotifications=this.getMoreNotificationsCount()}resetActiveTab(){this.activeTab=null}isMenuItemActive(t){return t.active||t.classList.contains("active")}appendTabs(){this.activeTab=null;if(this.homeTab){this.hostElement.querySelector(".tabs-top").appendChild(this.homeTab);this.homeTab.addEventListener("click",this.resetOverlay.bind(this))}this.menuItems.forEach(((t,e)=>{var i;if(this.showTab(e)){t.classList.remove("d-none")}else{t.classList.add("d-none");if(this.isMenuItemActive(t)){this.activeTab=t}}(i=this.homeTab)===null||i===void 0?void 0:i.classList.remove("d-none");t.addEventListener("click",this.resetOverlay.bind(this))}))}appendAvatar(){var t;const e=this.avatarItem;if(e){e.style.marginBottom="1rem";(t=this.hostElement.querySelector("#avatar-tab-placeholder"))===null||t===void 0?void 0:t.appendChild(e)}}getAboutPopoverVerticalPosition(){const t=12;const e=6;const i=this.aboutTab.getBoundingClientRect();const s=window.innerHeight-(i.bottom-i.height/2+t/2+e);return h(s)}appendAboutNewsPopover(){var t;if(!this.aboutPopover){return}this.aboutPopover.style.bottom=this.getAboutPopoverVerticalPosition();if(!((t=this.popoverArea)===null||t===void 0?void 0:t.contains(this.aboutPopover))){const t=()=>{var t;if((t=this.aboutPopover)===null||t===void 0?void 0:t.aboutItemLabel){this.about.activeTabLabel=this.aboutPopover.aboutItemLabel;this.toggleAbout(true)}};this.aboutPopover.addEventListener("showMore",t.bind(this));document.body.appendChild(this.aboutPopover)}}appendSettings(){if(this.settings){this.overlayContainer.appendChild(this.settings)}}appendAbout(){if(this.about){this.overlayContainer.appendChild(this.about)}}getMoreNotificationsCount(){var t;const e=(t=this.moreItemsDropdown)===null||t===void 0?void 0:t.querySelectorAll(".appended");let i=0;e===null||e===void 0?void 0:e.forEach((t=>{if(t["notifications"]){i+=t["notifications"]}}));return i}getAvailableHeight(){const t=60;const e=72;const i=56;const s=36;let n=this.hostElement.clientHeight;n-=t;if(this.avatarItem){n-=i}if(this.homeTab){n-=e}if(this.showAbout){n-=s}if(this.showSettings){n-=s}if(this.menuBottomItems.length){n-=this.menuBottomItems.length*s}if(this.enableMapExpand){n-=s}n-=2*s;n-=16;return n}getMaxTabCount(){const t=48;const e=this.getAvailableHeight();const i=Math.floor(e/t);const s=this.menuItems.length;if(s===1){return 1}if(s<this.maxVisibleMenuItems){if(i>s){return s}return Math.min(i-2,s)}if(s===this.maxVisibleMenuItems){if(i<this.maxVisibleMenuItems){return i-2}if(i===this.maxVisibleMenuItems){return this.maxVisibleMenuItems-2}return Math.min(i,this.maxVisibleMenuItems)}if(i===this.maxVisibleMenuItems){return this.maxVisibleMenuItems-2}if(i>=this.maxVisibleMenuItems){return this.maxVisibleMenuItems-1}return Math.min(i-2,this.maxVisibleMenuItems)}async toggleMapExpand(t){this.skipAllOverlayAnimations();if(t!==undefined){this.mapExpand=t}else{this.mapExpand=!this.mapExpand}}skipAllOverlayAnimations(){if(this.about){this.skipOverlayAnimationFor(this.about)}if(this.settings){this.skipOverlayAnimationFor(this.settings)}}skipOverlayAnimationFor(t){const e="animate__animated";t===null||t===void 0?void 0:t.classList.remove(e);setTimeout((()=>{t===null||t===void 0?void 0:t.classList.add(e)}),300)}async toggleMenu(t){this.skipAllOverlayAnimations();if(t!==undefined){this.expand=t}else{this.expand=!this.expand}if(this.aboutPopover){this.aboutPopover.expanded=this.expand}this.expandChange.emit(this.expand)}async toggleSettings(t){var e;if(this.showAbout){this.skipAllOverlayAnimations()}else{this.skipOverlayAnimationFor(this.about)}(e=this.about)===null||e===void 0?void 0:e.classList.add("d-none");this.resetOverlay();this.showSettings=t;this.settings.show=this.showSettings;this.settings.classList.remove("d-none");this.overlayContainer.classList.remove("d-none")}async toggleAbout(t){var e;if(this.showSettings){this.skipAllOverlayAnimations()}else{this.skipOverlayAnimationFor(this.settings)}(e=this.settings)===null||e===void 0?void 0:e.classList.add("d-none");this.resetOverlay();this.showAbout=t;this.about.show=this.showAbout;this.about.classList.remove("d-none");this.overlayContainer.classList.remove("d-none")}resetOverlay(){this.showSettings=false;this.showAbout=false;if(this.settings){this.settings.show=this.showSettings}if(this.about){this.about.show=this.showAbout}this.toggleMenu(false)}showMoreButton(){const t=this.menuItems.length;if(t===1){return false}if(t<this.maxVisibleMenuItems){return this.visibleMenuItems<t}if(t>this.maxVisibleMenuItems){return this.visibleMenuItems<this.maxVisibleMenuItems}return this.visibleMenuItems<=this.maxVisibleMenuItems-2}getCollapseText(){return this.mapExpand?this.i18nCollapse:this.i18nExpand}getCollapseIcon(){return this.mapExpand?"double-chevron-left":"double-chevron-right"}isMenuItemClicked(t){const e=t.composedPath();const i=e.filter((t=>t.id!=="ix-menu-more-tab")).filter((t=>t.tagName==="IX-MENU-ITEM"));return i.some((t=>this.tabsContainer.contains(t)))}render(){return i(s,{class:{expanded:this.expand,[`mode-${this.mode}`]:true}},i("div",{class:{menu:true,expanded:this.expand},onClick:()=>{this.resetActiveTab()}},i("ix-burger-menu",{onClick:async()=>this.toggleMenu(),expanded:this.expand,class:{"burger-menu":true}}),i("div",{id:"avatar-tab-placeholder"}),i("div",{id:"menu-tabs",style:{display:"contents"},onClick:t=>{if(this.isMenuItemClicked(t)){this.resetOverlay()}}},i("div",{class:"tabs-top"}),i("slot",null),i("div",{class:"active-more-tab"},this.activeTab?i("ix-menu-item",{class:"internal-tab",active:true,tabIcon:this.activeTab.tabIcon},this.activeTab.innerText):null),i("ix-menu-item",{id:"ix-menu-more-tab",tabIcon:"more-menu",class:{"internal-tab":true},style:{display:this.showMoreButton()?"block":"none"},title:"Show more",notifications:this.countMoreNotifications},this.i18nMore,i("ix-dropdown",{trigger:"ix-menu-more-tab",positioningStrategy:"fixed",placement:"right-start"},this.menuItems.filter(((t,e)=>!this.showTab(e)&&!this.isMenuItemActive(t)&&this.isVisible(t))).map((t=>i("ix-menu-item",{tabIcon:t.tabIcon,active:t.active,class:"internal-tab appended",onClick:()=>{this.resetOverlay();t.dispatchEvent(new CustomEvent("click"))}},t.innerText)))))),i("div",{class:"bottom-tab-divider"}),this.enableSettings&&!this.isSettingsEmpty?i("ix-menu-item",{id:"settings",class:{"internal-tab":true,"bottom-tab":true,active:this.showSettings},tabIcon:"cogwheel",onClick:async()=>this.toggleSettings(!this.showSettings)},this.i18nSettings):null,i("slot",{name:"bottom"}),i("div",{id:"popover-area"}),this.about?i("ix-menu-item",{id:"aboutAndLegal",class:{"internal-tab":true,"bottom-tab":true,active:this.showAbout},tabIcon:"info",onClick:async()=>this.toggleAbout(!this.showAbout)},this.i18nLegal):null,this.enableToggleTheme?i("ix-menu-item",{id:"toggleTheme",onClick:()=>c.toggleMode(),class:"internal-tab bottom-tab",tabIcon:"bulb"},this.i18nToggleTheme):null,this.enableMapExpand?i("ix-menu-item",{id:"menu-collapse",onClick:()=>this.mapExpandChange.emit(this.mapExpand),class:"internal-tab bottom-tab",tabIcon:`${this.getCollapseIcon()}`},this.getCollapseText()):null),i("div",{class:{"menu-overlay":true,expanded:this.expand,"d-block":this.showAbout||this.showSettings},style:{opacity:this.showAbout||this.showSettings?"1":"0"}}),i("div",{class:"menu-overlay-invisible"}))}get hostElement(){return n(this)}};d.style=u;const b=".text-xs.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a.sc-ix-menu-about{color:var(--theme-color-primary)}.sc-ix-menu-about-h{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}.sc-ix-menu-about-h .about-header.sc-ix-menu-about{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}.sc-ix-menu-about-h .about-header.sc-ix-menu-about h2.sc-ix-menu-about{color:var(--theme-nav-overlay-header--color);margin-bottom:0}.sc-ix-menu-about-h .about-tabs.sc-ix-menu-about{margin-bottom:1.5rem}.sc-ix-menu-about-h ix-menu-about-item.sc-ix-menu-about{display:none}";const x=class{constructor(i){t(this,i);this.close=e(this,"close",7);this.activeTabLabel=undefined;this.label="About & legal information";this.show=false;this.labels=[]}get aboutItems(){return Array.from(this.el.querySelectorAll("ix-menu-about-item"))}setTab(t){this.activeTabLabel=t;this.aboutItems.forEach((t=>{t.style.display="none";if(t.label===this.activeTabLabel){t.style.display="block"}}))}componentWillLoad(){if(this.aboutItems.length){this.setTab(this.activeTabLabel||this.aboutItems[0].label)}}componentDidLoad(){o(this.el)}componentWillRender(){this.updateLabels()}updateLabels(){this.labels=this.aboutItems.map((t=>t.label))}watchActiveTabLabel(t){setTimeout((()=>this.setTab(t)))}getSelectedTabIndex(t){const e=this.aboutItems.find((e=>e.label===t));return this.aboutItems.indexOf(e)}getTabItems(){return this.aboutItems.map((({label:t})=>i("ix-tab-item",{class:{active:t===this.activeTabLabel},onClick:()=>this.setTab(t)},t)))}render(){return i(s,{class:{animate__animated:true,animate__fadeInLeft:this.show,animate__fadeOutLeft:!this.show}},i("div",{class:"about-header"},i("h2",{class:"text-h2"},this.label),i("ix-icon-button",{ghost:true,size:"24",icon:"close",onClick:t=>this.close.emit(t)})),i("ix-tabs",{selected:this.getSelectedTabIndex(this.activeTabLabel),class:"about-tabs"},this.getTabItems()),i("div",{class:"about-items"},i("slot",null)))}get el(){return n(this)}static get watchers(){return{activeTabLabel:["watchActiveTabLabel"]}}};x.style=b;const g=".sc-ix-menu-about-item-h{display:block}";const f=class{constructor(e){t(this,e);this.label=undefined}render(){return i(s,null,i("slot",null))}};f.style=g;const v=".sc-ix-menu-about-news-h{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-1);border:var(--theme-weak-bdr-1);border-radius:0.25rem;padding:1rem;left:4rem;z-index:10000;transition:left var(--animate-duration);margin-left:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}.expanded.sc-ix-menu-about-news-h{left:calc(4rem + 12rem)}.show.sc-ix-menu-about-news-h{display:none}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news{position:absolute;top:0.0625rem;left:1rem}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news svg.sc-ix-menu-about-news{position:absolute;height:3.625rem;width:3rem}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news svg.sc-ix-menu-about-news polygon.sc-ix-menu-about-news{fill:var(--theme-color-primary)}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news ix-icon.sc-ix-menu-about-news{margin:0.5rem;position:absolute;z-index:1}.sc-ix-menu-about-news-h .cui-popover-news-header.sc-ix-menu-about-news{margin-bottom:2rem;margin-left:4rem;margin-top:-0.25rem}.sc-ix-menu-about-news-h .popover-body.sc-ix-menu-about-news{color:var(--theme-color-std-text)}.sc-ix-menu-about-news-h .cui-popover-news-footer.sc-ix-menu-about-news{display:flex;justify-content:flex-end;margin-top:1rem}.sc-ix-menu-about-news-h ix-icon-button.sc-ix-menu-about-news{top:0.5rem;right:0.5rem;position:absolute}.sc-ix-menu-about-news-h #arrow.sc-ix-menu-about-news{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-1);border-left:var(--theme-weak-bdr-1);border-bottom:var(--theme-weak-bdr-1);transform:translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg)}";const p=class{constructor(i){t(this,i);this.showMore=e(this,"showMore",7);this.closePopover=e(this,"closePopover",7);this.show=false;this.label=undefined;this.i18nShowMore="Show more";this.aboutItemLabel=undefined;this.offsetBottom=0;this.expanded=false}render(){return i(s,{class:{expanded:this.expanded,show:!this.show}},i("div",{class:"banner-container"},i("ix-icon",{color:"color-inv-contrast-text",name:"shout",size:"32"}),i("svg",{viewBox:"0 0 48 56",xmlns:"http://www.w3.org/2000/svg"},i("polygon",{points:"0 0 48 0 48 56 24 48 0 56"}))),i("div",{class:"cui-popover-news-header"},i("span",{class:"text-l-title"},this.label)),i("ix-icon-button",{size:"24",icon:"close-small",ghost:true,onClick:()=>{this.show=false;this.closePopover.emit()}}),i("slot",null),this.aboutItemLabel?i("div",{class:"cui-popover-news-footer"},i("button",{class:"btn btn-primary",onClick:t=>{this.show=false;this.showMore.emit(t)}},this.i18nShowMore)):null,i("div",{id:"arrow"}))}};p.style=v;const w=".sc-ix-menu-avatar-h{display:block;position:relative;margin-bottom:0.5rem}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar{display:flex;align-items:center;height:2.5rem;max-height:2.5rem;padding-left:0.25rem;margin-left:0.75rem;margin-right:0.75rem;transition:0.15s;border-radius:1.25rem}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar>.avatar-image.sc-ix-menu-avatar{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar>.avatar-initials.sc-ix-menu-avatar{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-color-component-3)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar #avatar-path-background.sc-ix-menu-avatar{fill:var(--theme-avatar--background)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar #avatar-path-person.sc-ix-menu-avatar{fill:var(--theme-color-4)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar .avatar-name.sc-ix-menu-avatar{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar .avatar-name.sc-ix-menu-avatar .text-default-single.sc-ix-menu-avatar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-avatar-btn--background--hover);color:var(--theme-avatar-btn--color--hover)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled):active{background-color:var(--theme-avatar-btn--background--active);color:var(--theme-avatar-btn--color--active)}";function y(t){const{initials:e}=t;if(e){return i("div",{class:"avatar-initials"},e)}return i("svg",{class:"avatar-image",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32"},i("g",{fill:"none","fill-rule":"evenodd"},i("path",{id:"avatar-path-background",d:"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z"}),i("path",{id:"avatar-path-person",d:"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z"})))}const k=class{constructor(i){t(this,i);this.logoutClick=e(this,"logoutClick",7);this.avatarElementId="ix-menu-avatar-id";this.top=undefined;this.bottom=undefined;this.image=undefined;this.initials=undefined;this.i18nLogout="Logout"}render(){return i(s,null,i("li",{class:"nav-item top-item avatar no-hover",title:this.top,id:this.avatarElementId},this.image?i("img",{src:this.image,class:"avatar-image"}):i(y,{initials:this.initials}),i("div",{class:"avatar-name"},i("span",{class:"text-default-single",title:this.top},this.top),i("span",{class:"text-default-single",title:this.bottom},this.bottom))),i("ix-dropdown",{trigger:this.avatarElementId,placement:"right-start",offset:{mainAxis:12}},i("slot",null),i("ix-menu-avatar-item",{label:this.i18nLogout,icon:"log-out",onClick:t=>{this.logoutClick.emit(t)}})))}get hostElement(){return n(this)}};k.style=w;const z=".sc-ix-menu-avatar-item-h{display:block}";const S=class{constructor(i){t(this,i);this.itemClick=e(this,"itemClick",7);this.icon=undefined;this.label=undefined}render(){return i("ix-dropdown-item",{icon:this.icon,label:this.label,onClick:t=>this.itemClick.emit(t)})}get hostElement(){return n(this)}};S.style=z;const C='.sc-ix-menu-item-h{position:relative;display:block;cursor:pointer}.sc-ix-menu-item-h:not(.disabled):not(:disabled).hover,.sc-ix-menu-item-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}.sc-ix-menu-item-h:not(.disabled):not(:disabled).active,.sc-ix-menu-item-h:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}.sc-ix-menu-item-h .tab.sc-ix-menu-item{display:flex;position:relative;align-items:center;height:3rem;z-index:500;padding-left:1.25rem}.sc-ix-menu-item-h i.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color);position:relative}.sc-ix-menu-item-h .tab.sc-ix-menu-item:focus-visible{outline:none}.sc-ix-menu-item-h:focus-visible{outline:none}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(:last-child){margin-bottom:0.5rem}.sc-ix-menu-item-h .notification.sc-ix-menu-item{display:inline-flex;position:absolute;top:-0.5rem;right:-50%}.sc-ix-menu-item-h .notification.sc-ix-menu-item .pill.sc-ix-menu-item{display:inline-flex;justify-content:center;align-items:center;height:1rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-primary--background--selected)}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item::before{content:"";background-color:var(--theme-nav-item-primary--border-color--selected);height:3rem;width:0.25rem;left:0;position:absolute}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color--selected)}.disabled.sc-ix-menu-item-h{color:var(--theme-color-weak-text);pointer-events:none;cursor:default}.disabled.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-color-weak-text)}.disabled.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{color:var(--theme-color-weak-text)}.home-tab.sc-ix-menu-item-h,[slot=home].sc-ix-menu-item-h{margin-bottom:1.5rem}.bottom-tab.sc-ix-menu-item-h,[slot=bottom].sc-ix-menu-item-h{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item::before{height:2.25rem;background-color:transparent}.bottom-tab.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.bottom-tab.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].active.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-secondary--background--selected)}.bottom-tab.active.sc-ix-menu-item-h:hover,.bottom-tab.selected.sc-ix-menu-item-h:hover,[slot=bottom].active.sc-ix-menu-item-h:hover,[slot=bottom].selected.sc-ix-menu-item-h:hover{background-color:var(--theme-nav-item-secondary--background--selected)}.bottom-tab.active.sc-ix-menu-item-h:active,.bottom-tab.selected.sc-ix-menu-item-h:active,[slot=bottom].active.sc-ix-menu-item-h:active,[slot=bottom].selected.sc-ix-menu-item-h:active{background-color:var(--theme-nav-item-secondary--background--selected)}';const _=class{constructor(e){t(this,e);this.home=false;this.bottom=false;this.tabIcon="document";this.notifications=undefined;this.active=undefined;this.disabled=undefined;this.title=undefined}get tabLabel(){return this.hostElement.querySelector(".tab-text")}componentDidRender(){const t=this.tabLabel;const e=t.innerHTML.replace("&amp;","&");if(this.title!==e){this.title=e}}render(){return i(s,{class:{disabled:this.disabled,"home-tab":this.home,"bottom-tab":this.bottom,active:this.active}},i("li",{class:"tab",title:this.title},i("i",{class:`glyph glyph-${this.tabIcon}`},i("div",{class:"notification"},this.notifications?i("div",{class:"pill"},this.notifications):null)),i("span",{class:"tab-text text-default"},i("slot",null))))}get hostElement(){return n(this)}};_.style=C;const A=".text-xs.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a.sc-ix-menu-settings{color:var(--theme-color-primary)}.sc-ix-menu-settings-h{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}.sc-ix-menu-settings-h .settings-header.sc-ix-menu-settings{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}.sc-ix-menu-settings-h .settings-header.sc-ix-menu-settings h2.sc-ix-menu-settings{color:var(--theme-nav-overlay-header--color);margin-bottom:0}.sc-ix-menu-settings-h .settings-tabs.sc-ix-menu-settings{margin-bottom:1.5rem}";const I=class{constructor(i){t(this,i);this.close=e(this,"close",7);this.activeTabLabel=undefined;this.label="Settings";this.show=false}get settingsItems(){return Array.from(this.el.querySelectorAll("ix-menu-settings-item"))}setTab(t){this.activeTabLabel=t;this.settingsItems.forEach((t=>{t.style.display="none";if(t.label===this.activeTabLabel){t.style.display="block"}}))}componentWillLoad(){if(this.settingsItems.length){this.setTab(this.activeTabLabel||this.settingsItems[0].label)}}componentDidLoad(){o(this.el)}watchActiveTabLabel(t){this.setTab(t)}getTabItems(){return this.settingsItems.map((({label:t})=>i("ix-tab-item",{class:{active:t===this.activeTabLabel},onClick:()=>this.setTab(t)},t)))}render(){return i(s,{class:{animate__animated:true,animate__fadeInLeft:this.show,animate__fadeOutLeft:!this.show}},i("div",{class:"settings-header"},i("h2",{class:"text-h2"},this.label),i("ix-icon-button",{ghost:true,size:"24",icon:"close",onClick:t=>this.close.emit(t)})),i("ix-tabs",null,this.getTabItems()),i("slot",null))}get el(){return n(this)}static get watchers(){return{activeTabLabel:["watchActiveTabLabel"]}}};I.style=A;const T=".sc-ix-menu-settings-item-h{display:block}";const M=class{constructor(e){t(this,e);this.label=undefined}render(){return i(s,null,i("slot",null))}};M.style=T;export{d as ix_menu,x as ix_menu_about,f as ix_menu_about_item,p as ix_menu_about_news,k as ix_menu_avatar,S as ix_menu_avatar_item,_ as ix_menu_item,I as ix_menu_settings,M as ix_menu_settings_item};
-//# sourceMappingURL=p-a6e443df.entry.js.map

package/dist/siemens-ix/p-a6e443df.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["menuCss","Menu","this","domObserver","MutationObserver","onDomChange","bind","isVisible","elm","style","display","_b","_a","parentElement","onWindowResize","visibleMenuItems","getMaxTabCount","handleNodeMutation","node","HTMLElement","matches","menu","contains","appendAbout","appendSettings","mutations","forEach","mutationRecord","addedNodes","removedNodes","popoverArea","hostElement","querySelector","overlayContainer","invisibleContainer","menuItems","Array","from","querySelectorAll","filter","menuBottomItems","homeTab","moreItemsDropdown","isMoreItemsDropdownEmpty","length","moreItemsDropdownItems","activeMoreTabContainer","activeMoreTab","aboutPopoverContainer","aboutPopover","document","aboutTab","about","settings","isSettingsEmpty","avatarItem","tabsContainer","showTab","index","componentDidLoad","addEventListener","showSettings","show","classList","add","_c","showAbout","_d","observe","attributes","childList","subtree","componentWillLoad","menuController","register","layout","hostContext","isBasicNavigationLayout","hideHeader","screenMode","onChange","on","mode","componentWillRender","appendTabs","componentDidRender","appendFragments","appendAvatar","appendAboutNewsPopover","isMoreTabEmpty","countMoreNotifications","getMoreNotificationsCount","resetActiveTab","activeTab","isMenuItemActive","item","active","appendChild","resetOverlay","remove","avatar","marginBottom","getAboutPopoverVerticalPosition","heightArrow","offsetArrow","rectAbout","getBoundingClientRect","offset","window","innerHeight","bottom","height","convertToRemString","showMore","aboutItemLabel","activeTabLabel","toggleAbout","body","moreTabs","count","tab","getAvailableHeight","heightBurgerMenu","heightHome","heightAvatar","heightBottomTab","availableHeight","clientHeight","enableMapExpand","heightTab","visibleCount","Math","floor","menuItemCount","maxVisibleMenuItems","min","async","skipAllOverlayAnimations","undefined","mapExpand","skipOverlayAnimationFor","element","animateClass","setTimeout","expand","expanded","expandChange","emit","toggleMenu","showMoreButton","getCollapseText","i18nCollapse","i18nExpand","getCollapseIcon","isMenuItemClicked","event","path","composedPath","id","tagName","some","render","h","Host","class","onClick","tabIcon","innerText","title","notifications","i18nMore","trigger","positioningStrategy","placement","map","e","dispatchEvent","CustomEvent","enableSettings","toggleSettings","i18nSettings","name","i18nLegal","enableToggleTheme","themeSwitcher","toggleMode","i18nToggleTheme","mapExpandChange","opacity","menuAboutCss","MenuAbout","aboutItems","el","setTab","label","i","forceUpdate","updateLabels","labels","watchActiveTabLabel","value","getSelectedTabIndex","selectedItem","find","indexOf","getTabItems","animate__animated","animate__fadeInLeft","animate__fadeOutLeft","ghost","size","icon","close","selected","menuAboutItemCss","MenuAboutItem","menuAboutNewsCss","MenuAboutNews","color","viewBox","xmlns","points","closePopover","i18nShowMore","menuAvatarCss","DefaultAvatar","props","initials","width","fill","d","MenuAvatar","avatarElementId","top","image","src","mainAxis","i18nLogout","logoutClick","menuAvatarItemCss","MenuAvatarItem","itemClick","menuItemCss","MenuItem","tabLabel","spanElement","newTitle","innerHTML","replace","disabled","home","menuSettingsCss","settingsItems","menuSettingsItemCss","MenuSettingsItem"],"sources":["./src/components/menu/menu.scss?tag=ix-menu","./src/components/menu/menu.tsx","./src/components/menu-about/menu-about.scss?tag=ix-menu-about&encapsulation=scoped","./src/components/menu-about/menu-about.tsx","./src/components/menu-about-item/menu-about-item.css?tag=ix-menu-about-item&encapsulation=scoped","./src/components/menu-about-item/menu-about-item.tsx","./src/components/menu-about-news/menu-about-news.scss?tag=ix-menu-about-news&encapsulation=scoped","./src/components/menu-about-news/menu-about-news.tsx","./src/components/menu-avatar/menu-avatar.scss?tag=ix-menu-avatar&encapsulation=scoped","./src/components/menu-avatar/menu-avatar.tsx","./src/components/menu-avatar-item/menu-avatar-item.css?tag=ix-menu-avatar-item&encapsulation=scoped","./src/components/menu-avatar-item/menu-avatar-item.tsx","./src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=scoped","./src/components/menu-item/menu-item.tsx","./src/components/menu-settings/menu-settings.scss?tag=ix-menu-settings&encapsulation=scoped","./src/components/menu-settings/menu-settings.tsx","./src/components/menu-settings-item/menu-settings-item.css?tag=ix-menu-settings-item&encapsulation=scoped","./src/components/menu-settings-item/menu-settings-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n\nix-menu {\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  height: 100%;\n  min-height: 22.75rem;\n  z-index: var(--theme-z-index-sticky);\n  width: auto;\n\n  .menu {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 4rem;\n    height: 100%;\n    padding-block-end: 1rem;\n    overflow: hidden;\n\n    &.expanded {\n      box-shadow: var(--theme-navigation--box-shadow);\n    }\n\n    background-color: var(--theme-nav--background);\n    transition: width var(--animate-duration);\n\n    .burger-menu {\n      margin: 0.75rem 0 1rem 0.75rem;\n    }\n  }\n\n  .menu-overlay {\n    display: block;\n    position: absolute;\n    width: calc(100vw - 4rem);\n    height: 100%;\n    left: 4rem;\n    z-index: -1;\n    backdrop-filter: blur(1rem);\n    background-color: var(--theme-sidebar-overlay-blur);\n    transition: all $medium-time ease-out;\n  }\n\n  .menu-overlay-invisible {\n    display: none;\n  }\n\n  .menu.expanded {\n    width: 16rem;\n  }\n\n  .menu-overlay.expanded {\n    width: calc(100vw - 16rem);\n    left: 16rem;\n  }\n\n  #avatar-tab-placeholder {\n    max-height: 3rem;\n  }\n\n  .avatar {\n    margin-bottom: 2rem;\n  }\n\n  #cui-imprint {\n    .cui-imprint-product-name {\n      margin-bottom: $default-space;\n    }\n\n    .cui-imprint-product-description {\n      margin-bottom: $x-large-space;\n    }\n\n    .cui-imprint-link-container {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .bottom-tab-divider {\n    margin-top: auto;\n  }\n}\n\nix-menu.mode-mobile {\n  .menu:not(.expanded) {\n    width: 0;\n  }\n\n  .menu {\n    padding-top: 2rem;\n  }\n\n  .menu .burger-menu {\n    display: none;\n  }\n\n  .menu-overlay {\n    left: 0px;\n    width: calc(100vw);\n  }\n}\n\n// Remove text-decoration if a tag is used inside ix-menu\na[href]:has(> ix-menu-item) {\n  text-decoration: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { hostContext, isBasicNavigationLayout } from '../utils/screen/context';\nimport { Mode } from '../utils/screen/mode';\nimport { screenMode } from '../utils/screen/service';\nimport { themeSwitcher } from '../utils/theme-switcher';\n\n@Component({\n  tag: 'ix-menu',\n  styleUrl: 'menu.scss',\n  scoped: false,\n})\nexport class Menu {\n  @Element() hostElement!: HTMLIxMenuElement;\n\n  /**\n   * Is settings tab visible\n   */\n  @Prop({ mutable: true }) showSettings = false;\n\n  /**\n   * Is about tab visible\n   */\n  @Prop({ mutable: true }) showAbout = false;\n\n  /**\n   * Show toggle between light and dark variant. Only if the provided theme have implemented both!\n   */\n  @Prop() enableToggleTheme = false;\n\n  /**\n   * Is settings tab is visible\n   */\n  @Prop() enableSettings = true;\n\n  /**\n   * Internal\n   */\n  @Prop() enableMapExpand = false;\n\n  /**\n   * Should only be set if you use ix-menu standalone\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Should only be set if you use ix-menu standalone\n   */\n  @Prop() applicationDescription = '';\n\n  /**\n   * Maximum number of menu items to show in case enough vertical space is available.\n   * Extra menu items will be collapsed to 'show more' menu item.\n   */\n  @Prop() maxVisibleMenuItems = 9;\n\n  /**\n   */\n  @Prop() i18nLegal = 'About & legal information';\n\n  /**\n   */\n  @Prop() i18nSettings = 'Settings';\n\n  /**\n   */\n  @Prop() i18nToggleTheme = 'Toggle theme';\n\n  /**\n   */\n  @Prop() i18nExpand = ' Expand';\n\n  /**\n   */\n  @Prop() i18nCollapse = 'Collapse';\n\n  /**\n   */\n  @Prop() i18nMore = 'More…';\n\n  /**\n   * Expand menu\n   */\n  @Prop({ mutable: true, reflect: true }) expand = false;\n\n  /**\n   * Menu expanded\n   */\n  @Event() expandChange: EventEmitter<boolean>;\n\n  /**\n   * Map Sidebar expanded\n   */\n  @Event() mapExpandChange: EventEmitter<boolean>;\n  @State() showMoreItems = false;\n  @State() visibleMenuItems = 0;\n  @State() countMoreNotifications = 0;\n  @State() mapExpand = true;\n  @State() activeTab: HTMLIxMenuItemElement;\n  @State() isMoreTabEmpty = false;\n  @State() mode: Mode = 'desktop';\n\n  private readonly domObserver = new MutationObserver(\n    this.onDomChange.bind(this)\n  );\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.visibleMenuItems = this.getMaxTabCount();\n  }\n\n  private handleNodeMutation(node: Node) {\n    if (!(node instanceof HTMLElement)) {\n      return;\n    }\n\n    if (node.matches('.tab')) {\n      this.onWindowResize();\n    }\n\n    if (node.matches('ix-menu-about') && this.menu.contains(node)) {\n      this.appendAbout();\n    }\n\n    if (node.matches('ix-menu-settings') && this.menu.contains(node)) {\n      this.appendSettings();\n    }\n  }\n\n  private onDomChange(mutations: MutationRecord[]) {\n    mutations.forEach((mutationRecord) => {\n      mutationRecord.addedNodes.forEach(this.handleNodeMutation.bind(this));\n      mutationRecord.removedNodes.forEach(this.handleNodeMutation.bind(this));\n    });\n  }\n\n  // FBC IAM workaround #488\n  private readonly isVisible = (elm: HTMLElement) => {\n    return (\n      elm.style.display !== 'none' &&\n      elm.parentElement?.parentElement?.style.display !== 'none'\n    );\n  };\n\n  get popoverArea() {\n    return this.hostElement.querySelector('#popover-area');\n  }\n\n  get overlayContainer() {\n    return this.hostElement.querySelector('.menu-overlay');\n  }\n\n  get invisibleContainer() {\n    return this.hostElement.querySelector('.menu-overlay-invisible');\n  }\n\n  get menu() {\n    return this.hostElement.querySelector('.menu');\n  }\n\n  get menuItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(\n        'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot=\"bottom\"])'\n      )\n    ).filter(this.isVisible);\n  }\n\n  get menuBottomItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(\n        'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'\n      )\n    ).filter(this.isVisible);\n  }\n\n  get homeTab() {\n    return this.hostElement.querySelector('ix-menu-item.home-tab');\n  }\n\n  get moreItemsDropdown(): HTMLElement {\n    return this.hostElement.querySelector('.internal-tab ix-dropdown');\n  }\n\n  get isMoreItemsDropdownEmpty(): boolean {\n    return (\n      this.hostElement.querySelectorAll('.internal-tab ix-dropdown .appended')\n        .length === 0\n    );\n  }\n\n  get moreItemsDropdownItems() {\n    return this.hostElement.querySelectorAll(\n      '.internal-tab ix-dropdown ix-menu-item'\n    );\n  }\n\n  get activeMoreTabContainer() {\n    return this.hostElement.querySelector('.active-more-tab');\n  }\n\n  get activeMoreTab() {\n    return this.hostElement.querySelector('.active-more-tab ix-menu-item');\n  }\n\n  get aboutPopoverContainer(): HTMLElement {\n    return this.hostElement.querySelector('.about-news');\n  }\n\n  get aboutPopover(): HTMLIxMenuAboutNewsElement {\n    return document.querySelector('ix-menu-about-news');\n  }\n\n  get aboutTab(): HTMLElement {\n    return this.hostElement.querySelector('#aboutAndLegal');\n  }\n\n  get about(): HTMLIxMenuAboutElement {\n    return this.hostElement.querySelector('ix-menu-about');\n  }\n\n  get settings(): HTMLIxMenuSettingsElement {\n    return this.hostElement.querySelector('ix-menu-settings');\n  }\n\n  get isSettingsEmpty(): boolean {\n    return (\n      Array.from(this.hostElement.querySelectorAll('ix-menu-settings-item'))\n        .length === 0\n    );\n  }\n\n  get avatarItem(): HTMLIxMenuAvatarElement {\n    return this.hostElement.querySelector('ix-menu-avatar');\n  }\n\n  get tabsContainer(): HTMLDivElement {\n    return this.hostElement.querySelector('#menu-tabs');\n  }\n\n  private showTab(index: number) {\n    return index + 1 <= this.visibleMenuItems;\n  }\n\n  componentDidLoad() {\n    this.settings?.addEventListener('close', () => {\n      this.showSettings = false;\n      this.settings.show = this.showSettings;\n    });\n\n    this.settings?.addEventListener('animationend', () => {\n      if (!this.showSettings) {\n        this.settings.classList.add('d-none');\n        this.overlayContainer.classList.add('d-none');\n      }\n    });\n\n    this.about?.addEventListener('close', () => {\n      this.showAbout = false;\n      this.about.show = this.showAbout;\n    });\n\n    this.about?.addEventListener('animationend', () => {\n      if (!this.showAbout) {\n        this.about.classList.add('d-none');\n        this.overlayContainer.classList.add('d-none');\n      }\n    });\n\n    this.overlayContainer.classList.add('d-none');\n\n    this.onWindowResize();\n\n    this.domObserver.observe(this.hostElement, {\n      attributes: false,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentWillLoad() {\n    menuController.register(this.hostElement);\n    const layout = hostContext('ix-basic-navigation', this.hostElement);\n    if (isBasicNavigationLayout(layout) && layout.hideHeader === false) {\n      screenMode.onChange.on((mode) => (this.mode = mode));\n      this.mode = screenMode.mode;\n    }\n  }\n\n  componentWillRender() {\n    this.appendTabs();\n  }\n\n  componentDidRender() {\n    this.visibleMenuItems = this.getMaxTabCount();\n    this.appendFragments();\n  }\n\n  private appendFragments() {\n    this.appendAvatar();\n    this.appendAbout();\n    this.appendSettings();\n    this.appendAboutNewsPopover();\n\n    // This lead to none infinite-loops and other bugs.\n    this.isMoreTabEmpty = this.isMoreItemsDropdownEmpty;\n\n    this.countMoreNotifications = this.getMoreNotificationsCount();\n  }\n\n  private resetActiveTab() {\n    this.activeTab = null;\n  }\n\n  private isMenuItemActive(item: HTMLIxMenuItemElement) {\n    return item.active || item.classList.contains('active');\n  }\n\n  private appendTabs() {\n    this.activeTab = null;\n\n    if (this.homeTab) {\n      this.hostElement.querySelector('.tabs-top').appendChild(this.homeTab);\n      this.homeTab.addEventListener('click', this.resetOverlay.bind(this));\n    }\n\n    this.menuItems.forEach((item: HTMLIxMenuItemElement, index) => {\n      if (this.showTab(index)) {\n        item.classList.remove('d-none');\n      } else {\n        item.classList.add('d-none');\n\n        if (this.isMenuItemActive(item)) {\n          this.activeTab = item;\n        }\n      }\n\n      // TODO: Find better solution to handle home tab\n      this.homeTab?.classList.remove('d-none');\n\n      item.addEventListener('click', this.resetOverlay.bind(this));\n    });\n  }\n\n  private appendAvatar() {\n    const avatar = this.avatarItem;\n    if (avatar) {\n      avatar.style.marginBottom = '1rem';\n      this.hostElement\n        .querySelector('#avatar-tab-placeholder')\n        ?.appendChild(avatar);\n    }\n  }\n\n  private getAboutPopoverVerticalPosition() {\n    const heightArrow = 12;\n    const offsetArrow = 6;\n    const rectAbout = this.aboutTab.getBoundingClientRect();\n    const offset =\n      window.innerHeight -\n      (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);\n    return convertToRemString(offset);\n  }\n\n  private appendAboutNewsPopover() {\n    if (!this.aboutPopover) {\n      return;\n    }\n\n    this.aboutPopover.style.bottom = this.getAboutPopoverVerticalPosition();\n\n    if (!this.popoverArea?.contains(this.aboutPopover)) {\n      const showMore = () => {\n        if (this.aboutPopover?.aboutItemLabel) {\n          this.about.activeTabLabel = this.aboutPopover.aboutItemLabel;\n          this.toggleAbout(true);\n        }\n      };\n\n      this.aboutPopover.addEventListener('showMore', showMore.bind(this));\n      document.body.appendChild(this.aboutPopover);\n    }\n  }\n\n  private appendSettings() {\n    if (this.settings) {\n      this.overlayContainer.appendChild(this.settings);\n    }\n  }\n\n  private appendAbout() {\n    if (this.about) {\n      this.overlayContainer.appendChild(this.about);\n    }\n  }\n\n  private getMoreNotificationsCount(): number {\n    const moreTabs = this.moreItemsDropdown?.querySelectorAll('.appended');\n    let count = 0;\n    moreTabs?.forEach((tab) => {\n      if (tab['notifications']) {\n        count += tab['notifications'];\n      }\n    });\n\n    return count;\n  }\n\n  private getAvailableHeight() {\n    const heightBurgerMenu = 60;\n    const heightHome = 72;\n    const heightAvatar = 56;\n    const heightBottomTab = 36;\n\n    let availableHeight = this.hostElement.clientHeight;\n\n    availableHeight -= heightBurgerMenu;\n\n    if (this.avatarItem) {\n      availableHeight -= heightAvatar;\n    }\n\n    if (this.homeTab) {\n      availableHeight -= heightHome;\n    }\n\n    if (this.showAbout) {\n      availableHeight -= heightBottomTab;\n    }\n\n    if (this.showSettings) {\n      availableHeight -= heightBottomTab;\n    }\n\n    if (this.menuBottomItems.length) {\n      availableHeight -= this.menuBottomItems.length * heightBottomTab;\n    }\n\n    if (this.enableMapExpand) {\n      availableHeight -= heightBottomTab;\n    }\n\n    // Subtract height of imprint and theme toggle tabs\n    availableHeight -= 2 * heightBottomTab;\n\n    // Subtract bottom margin of bottom tabs\n    availableHeight -= 16;\n\n    return availableHeight;\n  }\n\n  private getMaxTabCount() {\n    const heightTab = 48;\n    const availableHeight = this.getAvailableHeight();\n    const visibleCount = Math.floor(availableHeight / heightTab);\n    const menuItemCount = this.menuItems.length;\n\n    if (menuItemCount === 1) {\n      return 1;\n    }\n\n    if (menuItemCount < this.maxVisibleMenuItems) {\n      if (visibleCount > menuItemCount) {\n        return menuItemCount;\n      }\n\n      return Math.min(visibleCount - 2, menuItemCount);\n    }\n\n    if (menuItemCount === this.maxVisibleMenuItems) {\n      if (visibleCount < this.maxVisibleMenuItems) {\n        return visibleCount - 2;\n      }\n\n      if (visibleCount === this.maxVisibleMenuItems) {\n        return this.maxVisibleMenuItems - 2;\n      }\n\n      return Math.min(visibleCount, this.maxVisibleMenuItems);\n    }\n\n    if (visibleCount === this.maxVisibleMenuItems) {\n      return this.maxVisibleMenuItems - 2;\n    }\n    if (visibleCount >= this.maxVisibleMenuItems) {\n      return this.maxVisibleMenuItems - 1;\n    }\n\n    return Math.min(visibleCount - 2, this.maxVisibleMenuItems);\n  }\n\n  /**\n   * Toggle map sidebar expand\n   * @param show\n   */\n  @Method()\n  async toggleMapExpand(show?: boolean) {\n    this.skipAllOverlayAnimations();\n\n    if (show !== undefined) {\n      this.mapExpand = show;\n    } else {\n      this.mapExpand = !this.mapExpand;\n    }\n  }\n\n  private skipAllOverlayAnimations() {\n    if (this.about) {\n      this.skipOverlayAnimationFor(this.about);\n    }\n    if (this.settings) {\n      this.skipOverlayAnimationFor(this.settings);\n    }\n  }\n\n  private skipOverlayAnimationFor(element: HTMLElement) {\n    const animateClass = 'animate__animated';\n\n    element?.classList.remove(animateClass);\n\n    setTimeout(() => {\n      element?.classList.add(animateClass);\n    }, 300);\n  }\n\n  /**\n   * Toggle menu\n   * @param show\n   */\n  @Method()\n  async toggleMenu(show?: boolean) {\n    this.skipAllOverlayAnimations();\n\n    if (show !== undefined) {\n      this.expand = show;\n    } else {\n      this.expand = !this.expand;\n    }\n\n    if (this.aboutPopover) {\n      this.aboutPopover.expanded = this.expand;\n    }\n\n    this.expandChange.emit(this.expand);\n  }\n\n  /**\n   * Toggle Settings tabs\n   * @param show\n   */\n  @Method()\n  async toggleSettings(show: boolean) {\n    if (this.showAbout) {\n      this.skipAllOverlayAnimations();\n    } else {\n      this.skipOverlayAnimationFor(this.about);\n    }\n\n    this.about?.classList.add('d-none');\n\n    this.resetOverlay();\n    this.showSettings = show;\n    this.settings.show = this.showSettings;\n    this.settings.classList.remove('d-none');\n    this.overlayContainer.classList.remove('d-none');\n  }\n\n  /**\n   * Toggle About tabs\n   * @param show\n   */\n  @Method()\n  async toggleAbout(show: boolean) {\n    if (this.showSettings) {\n      this.skipAllOverlayAnimations();\n    } else {\n      this.skipOverlayAnimationFor(this.settings);\n    }\n\n    this.settings?.classList.add('d-none');\n\n    this.resetOverlay();\n    this.showAbout = show;\n    this.about.show = this.showAbout;\n    this.about.classList.remove('d-none');\n    this.overlayContainer.classList.remove('d-none');\n  }\n\n  private resetOverlay() {\n    this.showSettings = false;\n    this.showAbout = false;\n\n    if (this.settings) {\n      this.settings.show = this.showSettings;\n    }\n\n    if (this.about) {\n      this.about.show = this.showAbout;\n    }\n\n    this.toggleMenu(false);\n  }\n\n  private showMoreButton() {\n    const menuItemCount = this.menuItems.length;\n\n    if (menuItemCount === 1) {\n      return false;\n    }\n\n    if (menuItemCount < this.maxVisibleMenuItems) {\n      return this.visibleMenuItems < menuItemCount;\n    }\n\n    if (menuItemCount > this.maxVisibleMenuItems) {\n      return this.visibleMenuItems < this.maxVisibleMenuItems;\n    }\n\n    return this.visibleMenuItems <= this.maxVisibleMenuItems - 2;\n  }\n\n  private getCollapseText() {\n    return this.mapExpand ? this.i18nCollapse : this.i18nExpand;\n  }\n\n  private getCollapseIcon() {\n    return this.mapExpand ? 'double-chevron-left' : 'double-chevron-right';\n  }\n\n  private isMenuItemClicked(event: MouseEvent) {\n    const path = event.composedPath();\n    const menuItems = (path as HTMLElement[])\n      .filter((element) => element.id !== 'ix-menu-more-tab')\n      .filter((element) => {\n        return element.tagName === 'IX-MENU-ITEM';\n      });\n\n    return menuItems.some((menu) => this.tabsContainer.contains(menu));\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expand,\n          [`mode-${this.mode}`]: true,\n        }}\n      >\n        <div\n          class={{\n            menu: true,\n            expanded: this.expand,\n          }}\n          onClick={() => {\n            this.resetActiveTab();\n          }}\n        >\n          <ix-burger-menu\n            onClick={async () => this.toggleMenu()}\n            expanded={this.expand}\n            class={{\n              'burger-menu': true,\n            }}\n          ></ix-burger-menu>\n          <div id=\"avatar-tab-placeholder\"></div>\n          <div\n            id=\"menu-tabs\"\n            style={{\n              display: 'contents',\n            }}\n            onClick={(event) => {\n              if (this.isMenuItemClicked(event)) {\n                this.resetOverlay();\n              }\n            }}\n          >\n            <div class=\"tabs-top\"></div>\n            <slot></slot>\n            <div class=\"active-more-tab\">\n              {this.activeTab ? (\n                <ix-menu-item\n                  class=\"internal-tab\"\n                  active={true}\n                  tabIcon={this.activeTab.tabIcon}\n                >\n                  {this.activeTab.innerText}\n                </ix-menu-item>\n              ) : null}\n            </div>\n            <ix-menu-item\n              id=\"ix-menu-more-tab\"\n              tabIcon=\"more-menu\"\n              class={{\n                'internal-tab': true,\n              }}\n              style={{\n                display: this.showMoreButton() ? 'block' : 'none',\n              }}\n              title=\"Show more\"\n              notifications={this.countMoreNotifications}\n            >\n              {this.i18nMore}\n              <ix-dropdown\n                trigger={'ix-menu-more-tab'}\n                positioningStrategy={'fixed'}\n                placement={'right-start'}\n              >\n                {this.menuItems\n                  .filter(\n                    (elm: HTMLIxMenuItemElement, index) =>\n                      !this.showTab(index) &&\n                      !this.isMenuItemActive(elm) &&\n                      this.isVisible(elm)\n                  )\n                  .map((e: HTMLIxMenuItemElement) => {\n                    return (\n                      <ix-menu-item\n                        tabIcon={e.tabIcon}\n                        active={e.active}\n                        class=\"internal-tab appended\"\n                        onClick={() => {\n                          this.resetOverlay();\n                          e.dispatchEvent(new CustomEvent('click'));\n                        }}\n                      >\n                        {e.innerText}\n                      </ix-menu-item>\n                    );\n                  })}\n              </ix-dropdown>\n            </ix-menu-item>\n          </div>\n          <div class=\"bottom-tab-divider\"></div>\n          {this.enableSettings && !this.isSettingsEmpty ? (\n            <ix-menu-item\n              id=\"settings\"\n              class={{\n                'internal-tab': true,\n                'bottom-tab': true,\n                active: this.showSettings,\n              }}\n              tabIcon=\"cogwheel\"\n              onClick={async () => this.toggleSettings(!this.showSettings)}\n            >\n              {this.i18nSettings}\n            </ix-menu-item>\n          ) : null}\n          <slot name=\"bottom\"></slot>\n          <div id=\"popover-area\"></div>\n          {this.about ? (\n            <ix-menu-item\n              id=\"aboutAndLegal\"\n              class={{\n                'internal-tab': true,\n                'bottom-tab': true,\n                active: this.showAbout,\n              }}\n              tabIcon=\"info\"\n              onClick={async () => this.toggleAbout(!this.showAbout)}\n            >\n              {this.i18nLegal}\n            </ix-menu-item>\n          ) : null}\n          {this.enableToggleTheme ? (\n            <ix-menu-item\n              id=\"toggleTheme\"\n              onClick={() => themeSwitcher.toggleMode()}\n              class=\"internal-tab bottom-tab\"\n              tabIcon=\"bulb\"\n            >\n              {this.i18nToggleTheme}\n            </ix-menu-item>\n          ) : null}\n          {this.enableMapExpand ? (\n            <ix-menu-item\n              id=\"menu-collapse\"\n              onClick={() => this.mapExpandChange.emit(this.mapExpand)}\n              class=\"internal-tab bottom-tab\"\n              tabIcon={`${this.getCollapseIcon()}`}\n            >\n              {this.getCollapseText()}\n            </ix-menu-item>\n          ) : null}\n        </div>\n        <div\n          class={{\n            'menu-overlay': true,\n            expanded: this.expand,\n            'd-block': this.showAbout || this.showSettings,\n          }}\n          style={{\n            opacity: this.showAbout || this.showSettings ? '1' : '0',\n          }}\n        ></div>\n        <div class=\"menu-overlay-invisible\"></div>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'fonts';\n\n:host {\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .about-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 0;\n    }\n  }\n\n  .about-tabs {\n    margin-bottom: $large-space;\n  }\n\n  ix-menu-about-item {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about',\n  styleUrl: 'menu-about.scss',\n  scoped: true,\n})\nexport class MenuAbout {\n  /**\n   * Active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'About & legal information';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuAboutElement;\n\n  /**\n   * About and Legal closed\n   */\n  @Event() close: EventEmitter<MouseEvent>;\n\n  @State() labels: string[] = [];\n\n  get aboutItems(): HTMLIxMenuAboutItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-about-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.aboutItems.forEach((i) => {\n      i.style.display = 'none';\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.aboutItems.length) {\n      this.setTab(this.activeTabLabel || this.aboutItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  componentWillRender() {\n    this.updateLabels();\n  }\n\n  private updateLabels() {\n    this.labels = this.aboutItems.map((i) => i.label);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    // Wait a DOM render cycle to get changed labels\n    setTimeout(() => this.setTab(value));\n  }\n\n  private getSelectedTabIndex(label: string) {\n    const selectedItem = this.aboutItems.find((item) => item.label === label);\n    return this.aboutItems.indexOf(selectedItem);\n  }\n\n  private getTabItems() {\n    return this.aboutItems.map(({ label }) => {\n      return (\n        <ix-tab-item\n          class={{\n            active: label === this.activeTabLabel,\n          }}\n          onClick={() => this.setTab(label)}\n        >\n          {label}\n        </ix-tab-item>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          animate__animated: true,\n          animate__fadeInLeft: this.show,\n          animate__fadeOutLeft: !this.show,\n        }}\n      >\n        <div class=\"about-header\">\n          <h2 class=\"text-h2\">{this.label}</h2>\n          <ix-icon-button\n            ghost\n            size=\"24\"\n            icon=\"close\"\n            onClick={(e) => this.close.emit(e)}\n          ></ix-icon-button>\n        </div>\n        <ix-tabs\n          selected={this.getSelectedTabIndex(this.activeTabLabel)}\n          class=\"about-tabs\"\n        >\n          {this.getTabItems()}\n        </ix-tabs>\n        <div class=\"about-items\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about-item',\n  styleUrl: 'menu-about-item.css',\n  scoped: true,\n})\nexport class MenuAboutItem {\n  /**\n   * About Item label\n   */\n  @Prop({ reflect: true }) label: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadows';\n\n:host {\n  --margin: 0.5rem;\n\n  $left: 4rem;\n  display: block;\n  position: fixed;\n  width: 20rem;\n  height: auto;\n  background-color: var(--theme-color-1);\n  border: var(--theme-weak-bdr-1);\n  border-radius: $default-border-radius;\n  padding: 1rem;\n  left: $left;\n  z-index: 10000;\n  transition: left var(--animate-duration);\n\n  margin-left: var(--margin) !important;\n\n  @include box-shadow(4);\n\n  &.expanded {\n    left: calc(#{$left} + 12rem);\n  }\n\n  &.show {\n    display: none;\n  }\n\n  .banner-container {\n    position: absolute;\n    top: 0.0625rem;\n    left: $default-space;\n\n    svg {\n      position: absolute;\n      height: 3.625rem;\n      width: 3rem;\n\n      polygon {\n        fill: var(--theme-color-primary);\n      }\n    }\n\n    ix-icon {\n      margin: $small-space;\n      position: absolute;\n      z-index: 1;\n    }\n  }\n\n  .cui-popover-news-header {\n    margin-bottom: 2rem;\n    margin-left: 4rem;\n    margin-top: -$tiny-space;\n  }\n\n  .popover-body {\n    color: var(--theme-color-std-text);\n  }\n\n  .cui-popover-news-footer {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 1rem;\n  }\n\n  ix-icon-button {\n    top: $small-space;\n    right: $small-space;\n    position: absolute;\n  }\n\n  #arrow {\n    position: absolute;\n    width: 0.5rem;\n    height: 0.5rem;\n    background-color: var(--theme-color-1);\n    border-left: var(--theme-weak-bdr-1);\n    border-bottom: var(--theme-weak-bdr-1);\n    transform: translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about-news',\n  styleUrl: 'menu-about-news.scss',\n  scoped: true,\n})\nexport class MenuAboutNews {\n  /**\n   * Show about news\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Title of the about news\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() i18nShowMore = 'Show more';\n\n  /**\n   * Subtitle of the about news\n   */\n  @Prop() aboutItemLabel: string;\n\n  /**\n   * Bottom offset\n   */\n  @Prop() offsetBottom = 0;\n\n  /**\n   * Show More button is pressed\n   */\n  @Event() showMore: EventEmitter<MouseEvent>;\n\n  /**\n   * Popover closed\n   */\n  @Event() closePopover: EventEmitter<void>;\n\n  /**\n   * Internal\n   */\n  @Prop() expanded = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          show: !this.show,\n        }}\n      >\n        <div class=\"banner-container\">\n          <ix-icon\n            color=\"color-inv-contrast-text\"\n            name=\"shout\"\n            size=\"32\"\n          ></ix-icon>\n          <svg viewBox=\"0 0 48 56\" xmlns=\"http://www.w3.org/2000/svg\">\n            <polygon points=\"0 0 48 0 48 56 24 48 0 56\" />\n          </svg>\n        </div>\n\n        <div class=\"cui-popover-news-header\">\n          <span class=\"text-l-title\">{this.label}</span>\n        </div>\n\n        <ix-icon-button\n          size=\"24\"\n          icon=\"close-small\"\n          ghost\n          onClick={() => {\n            this.show = false;\n            this.closePopover.emit();\n          }}\n        ></ix-icon-button>\n        <slot></slot>\n        {this.aboutItemLabel ? (\n          <div class=\"cui-popover-news-footer\">\n            <button\n              class=\"btn btn-primary\"\n              onClick={(e) => {\n                this.show = false;\n                this.showMore.emit(e);\n              }}\n            >\n              {this.i18nShowMore}\n            </button>\n          </div>\n        ) : null}\n        <div id=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n\n:host {\n  display: block;\n  position: relative;\n  margin-bottom: 0.5rem;\n\n  .avatar {\n    display: flex;\n    align-items: center;\n    height: 2.5rem;\n    max-height: 2.5rem;\n    padding-left: 0.25rem;\n    margin-left: 0.75rem;\n    margin-right: 0.75rem;\n    transition: 0.15s;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-color-component-3);\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill: var(--theme-color-4);\n    }\n\n    .avatar-name {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      white-space: nowrap;\n      margin-left: $default-space;\n      line-height: 1.14;\n\n      .text-default-single {\n        @include ellipsis;\n      }\n    }\n\n    border-radius: 1.25rem;\n\n    @include hover {\n      background-color: var(--theme-avatar-btn--background--hover);\n      color: var(--theme-avatar-btn--color--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-avatar-btn--background--active);\n      color: var(--theme-avatar-btn--color--active);\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nfunction DefaultAvatar(props: { initials?: string }) {\n  const { initials } = props;\n\n  if (initials) {\n    return <div class={'avatar-initials'}>{initials}</div>;\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-avatar',\n  styleUrl: 'menu-avatar.scss',\n  scoped: true,\n})\nexport class MenuAvatar {\n  @Element() hostElement: HTMLIxMenuAvatarElement;\n\n  /**\n   * First line of text\n   */\n  @Prop() top: string;\n\n  /**\n   * Second line of text\n   */\n  @Prop() bottom: string;\n\n  /**\n   * Display a avatar image\n   *\n   * @since 1.4.0\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   * @since 1.4.0\n   */\n  @Prop() initials: string;\n\n  /**\n   * Use for translation\n   */\n  @Prop() i18nLogout = 'Logout';\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  render() {\n    return (\n      <Host>\n        <li\n          class=\"nav-item top-item avatar no-hover\"\n          title={this.top}\n          id={this.avatarElementId}\n        >\n          {this.image ? (\n            <img src={this.image} class=\"avatar-image\"></img>\n          ) : (\n            <DefaultAvatar initials={this.initials} />\n          )}\n          <div class=\"avatar-name\">\n            <span class=\"text-default-single\" title={this.top}>\n              {this.top}\n            </span>\n            <span class=\"text-default-single\" title={this.bottom}>\n              {this.bottom}\n            </span>\n          </div>\n        </li>\n        <ix-dropdown\n          trigger={this.avatarElementId}\n          placement={'right-start'}\n          offset={{\n            mainAxis: 12,\n          }}\n        >\n          <slot></slot>\n          <ix-menu-avatar-item\n            label={this.i18nLogout}\n            icon=\"log-out\"\n            onClick={(e) => {\n              this.logoutClick.emit(e);\n            }}\n          ></ix-menu-avatar-item>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-avatar-item',\n  styleUrl: 'menu-avatar-item.css',\n  scoped: true,\n})\nexport class MenuAvatarItem {\n  /**\n   * Avatar dropdown icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Avatar dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Avatar dropdown item clicked\n   */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n  render() {\n    return (\n      <ix-dropdown-item\n        icon={this.icon}\n        label={this.label}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  position: relative;\n  display: block;\n  cursor: pointer;\n  @include ghost-hover-pressed;\n\n  .tab {\n    display: flex;\n    position: relative;\n    align-items: center;\n    height: 3rem;\n    z-index: 500;\n    padding-left: 1.25rem;\n  }\n\n  i.glyph {\n    color: var(--theme-nav-item-primary-icon--color);\n    position: relative;\n  }\n\n  .tab:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  .tab:not(:last-child) {\n    margin-bottom: $small-space;\n  }\n\n  .notification {\n    display: inline-flex;\n    position: absolute;\n    top: -$small-space;\n    right: -50%;\n\n    .pill {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 1rem;\n      min-width: 1rem;\n      position: relative;\n      border-radius: 6.25rem;\n      background-color: var(--theme-color-primary);\n      border-radius: 6.25rem;\n      font-size: 0.75rem;\n      font-weight: bold;\n      line-height: 1;\n      font-family: Siemens Sans, Arial, sans-serif;\n      color: var(--theme-color-primary--contrast);\n      padding: $tiny-space;\n    }\n  }\n\n  .tab-text {\n    @include ellipsis;\n    color: var(--theme-nav-item-primary--color);\n    margin: 0 1.25rem;\n    user-select: none;\n  }\n\n  &.active,\n  &.selected {\n    .tab {\n      background-color: var(--theme-nav-item-primary--background--selected);\n    }\n\n    .tab::before {\n      content: '';\n      background-color: var(--theme-nav-item-primary--border-color--selected);\n      height: 3rem;\n      width: 0.25rem;\n      left: 0;\n      position: absolute;\n    }\n\n    .tab > .glyph {\n      color: var(--theme-nav-item-primary-icon--color--selected);\n    }\n  }\n\n  &.disabled {\n    color: var(--theme-color-weak-text);\n    pointer-events: none;\n    cursor: default;\n\n    .tab > .glyph {\n      color: var(--theme-color-weak-text);\n    }\n\n    .tab-text {\n      color: var(--theme-color-weak-text);\n    }\n  }\n\n  &.home-tab,\n  &[slot='home'] {\n    margin-bottom: 1.5rem;\n  }\n\n  &.bottom-tab,\n  &[slot='bottom'] {\n    $bottom-height: 2.25rem;\n\n    height: $bottom-height;\n\n    .tab {\n      height: $bottom-height;\n    }\n\n    .tab::before {\n      height: $bottom-height;\n      background-color: transparent;\n    }\n\n    &.active,\n    &.selected {\n      .tab {\n        background-color: var(--theme-nav-item-secondary--background--selected);\n      }\n\n      &:hover {\n        background-color: var(--theme-nav-item-secondary--background--selected);\n      }\n\n      &:active {\n        background-color: var(--theme-nav-item-secondary--background--selected);\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-item',\n  styleUrl: 'menu-item.scss',\n  scoped: true,\n})\nexport class MenuItem {\n  /**\n   * Move the Tab to a top position.\n   */\n  @Prop() home = false;\n\n  /**\n   * Caution: this is no longer working. Please use slot=\"bottom\" instead.\n   *\n   * Place tab on bottom\n   *\n   * @deprecated Will be removed in 2.0.0. Replaced by slot based implementation\n   */\n  @Prop() bottom = false;\n\n  /**\n   * Icon name from @siemens/ix-icons\n   */\n  @Prop() tabIcon = 'document';\n\n  /**\n   * Show notification cound on tab\n   */\n  @Prop() notifications: number;\n\n  /**\n   * State to display active\n   */\n  @Prop() active: boolean;\n\n  /**\n   * Disable tab and remove event handlers\n   */\n  @Prop() disabled: boolean;\n\n  @Element() hostElement: HTMLIxMenuItemElement;\n\n  @State() title: string;\n\n  get tabLabel() {\n    return this.hostElement.querySelector('.tab-text');\n  }\n\n  componentDidRender() {\n    const spanElement = this.tabLabel;\n    const newTitle = spanElement.innerHTML.replace('&amp;', '&');\n    if (this.title !== newTitle) {\n      this.title = newTitle;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          'home-tab': this.home,\n          'bottom-tab': this.bottom,\n          active: this.active,\n        }}\n      >\n        <li class=\"tab\" title={this.title}>\n          <i class={`glyph glyph-${this.tabIcon}`}>\n            <div class=\"notification\">\n              {this.notifications ? (\n                <div class=\"pill\">{this.notifications}</div>\n              ) : null}\n            </div>\n          </i>\n          <span class=\"tab-text text-default\">\n            <slot></slot>\n          </span>\n        </li>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'fonts';\n\n:host {\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .settings-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 0;\n    }\n  }\n\n  .settings-tabs {\n    margin-bottom: $large-space;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  scoped: true,\n})\nexport class MenuAbout {\n  /**\n   * active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label\n   */\n  @Prop() label = 'Settings';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Popover closed\n   */\n  @Event() close: EventEmitter<MouseEvent>;\n\n  get settingsItems(): HTMLIxMenuSettingsItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-settings-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.settingsItems.forEach((i) => {\n      i.style.display = 'none';\n\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.settingsItems.length) {\n      this.setTab(this.activeTabLabel || this.settingsItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    this.setTab(value);\n  }\n\n  private getTabItems() {\n    return this.settingsItems.map(({ label }) => {\n      return (\n        <ix-tab-item\n          class={{\n            active: label === this.activeTabLabel,\n          }}\n          onClick={() => this.setTab(label)}\n        >\n          {label}\n        </ix-tab-item>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          animate__animated: true,\n          animate__fadeInLeft: this.show,\n          animate__fadeOutLeft: !this.show,\n        }}\n      >\n        <div class=\"settings-header\">\n          <h2 class=\"text-h2\">{this.label}</h2>\n          <ix-icon-button\n            ghost\n            size=\"24\"\n            icon=\"close\"\n            onClick={(e) => this.close.emit(e)}\n          ></ix-icon-button>\n        </div>\n        <ix-tabs>{this.getTabItems()}</ix-tabs>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings-item',\n  styleUrl: 'menu-settings-item.css',\n  scoped: true,\n})\nexport class MenuSettingsItem {\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-af533e73.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as d,H as n,g as l}from"./p-57a5d3d0.js";import{a as t}from"./p-810b5232.js";const s=i=>i?"true":"false";const r=".sc-ix-blind-h{display:flex;flex-direction:column;background-color:var(--theme-blind-base--background);border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-radius:var(--theme-blind--border-radius);overflow:hidden}.sc-ix-blind-h .blind-header.sc-ix-blind{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:0.5rem;transition:border-radius 150ms;cursor:pointer;z-index:1;color:var(--theme-blind-header-closed--color);background-color:var(--theme-blind-header-closed--background)}.sc-ix-blind-h .blind-header.sc-ix-blind .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color);padding:0.25rem 0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind,.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;flex-grow:1;height:100%}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title.sc-ix-blind .blind-header-title-default.sc-ix-blind,.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind .blind-header-title-default.sc-ix-blind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;flex-grow:1}.sc-ix-blind-h .blind-header.sc-ix-blind .blind-header-title-basic.sc-ix-blind ix-icon.sc-ix-blind{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--hover)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-open--color--active)}.sc-ix-blind-h .blind-header.sc-ix-blind:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}.sc-ix-blind-h .blind-header.closed.sc-ix-blind{border-radius:var(--theme-blind--border-radius)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover{background-color:var(--theme-blind-header-open--background--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):hover .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--hover)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active{background-color:var(--theme-blind-header-open--background--active)}.sc-ix-blind-h .blind-header.closed.sc-ix-blind:not(.disabled):not(:disabled):active .glyph.sc-ix-blind{color:var(--theme-blind-header-icon-closed--color--active)}.sc-ix-blind-h .blind-content.sc-ix-blind{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}.sc-ix-blind-h .blind-content.hide.sc-ix-blind{max-height:0;padding-top:0px;padding-bottom:0px}";let a=0;const o=class{constructor(d){i(this,d);this.collapsedChange=e(this,"collapsedChange",7);this.id=++a;this.collapsed=false;this.label=undefined;this.icon=undefined}onHeaderClick(i){if(i.target.closest(".header-actions")){return}i.preventDefault();i.stopImmediatePropagation();this.collapsed=!this.collapsed;this.collapsedChange.emit(this.collapsed)}componentDidLoad(){this.animateCollapse(this.collapsed)}get content(){return this.hostElement.querySelector(".blind-content")}animation(i){this.animateCollapse(i)}animateCollapse(i){if(i){this.rotateChevronRight()}else{this.rotateChevronDown()}}rotateChevronDown(){t({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:90});t({targets:this.content,duration:150,easing:"easeInOutSine",opacity:1})}rotateChevronRight(){t({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:0});t({targets:this.content,duration:150,easing:"easeInOutSine",opacity:0})}render(){return d(n,null,d("button",{class:{"blind-header":true,closed:this.collapsed},type:"button","aria-labelledby":`ix-blind-header-title-${this.id}`,"aria-controls":`ix-blind-content-section-${this.id}`,"aria-expanded":s(!this.collapsed),onClick:i=>this.onHeaderClick(i)},d("span",{class:{glyph:true,"glyph-chevron-right-small":true},ref:i=>this.chevronRef=i}),d("div",{class:"blind-header-title",id:`ix-blind-header-title-${this.id}`},this.label!==undefined?d("span",{class:"blind-header-title-basic"},this.icon!==undefined?d("ix-icon",{name:this.icon}):"",d("span",{class:"blind-header-title-default"},this.label),d("span",{class:"header-actions"},d("slot",{name:"header-actions"}))):d("slot",{name:"custom-header"}))),d("section",{id:`ix-blind-content-section-${this.id}`,"aria-labelledby":`ix-blind-header-title-${this.id}`},d("div",{class:{"blind-content":true,hide:this.collapsed}},d("slot",null))))}get hostElement(){return l(this)}static get watchers(){return{collapsed:["animation"]}}};o.style=r;export{o as ix_blind};
-//# sourceMappingURL=p-af533e73.entry.js.map

package/dist/siemens-ix/p-af533e73.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["a11yBoolean","value","blindCss","sequentialInstanceId","Blind","constructor","hostRef","this","id","onHeaderClick","e","target","closest","preventDefault","stopImmediatePropagation","collapsed","collapsedChange","emit","componentDidLoad","animateCollapse","content","hostElement","querySelector","animation","isCollapsed","rotateChevronRight","rotateChevronDown","anime","targets","chevronRef","duration","easing","rotateZ","opacity","render","h","Host","class","closed","type","onClick","glyph","ref","label","undefined","icon","name","hide"],"sources":["./src/components/utils/a11y.ts","./src/components/blind/blind.scss?tag=ix-blind&encapsulation=scoped","./src/components/blind/blind.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport const a11yBoolean = (value: boolean) => (value ? 'true' : 'false');\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--theme-blind-base--background);\n  border: solid var(--theme-blind--border-thickness)\n    var(--theme-blind-base--border-color);\n  border-radius: var(--theme-blind--border-radius);\n  overflow: hidden;\n\n  .blind-header {\n    all: unset;\n    @include ellipsis;\n\n    display: flex;\n    align-items: center;\n    min-height: 3rem;\n    height: 3rem;\n    border: solid var(--theme-blind--border-thickness) transparent;\n    border-radius: var(--theme-blind--border-radius)\n      var(--theme-blind--border-radius) 0 0;\n    padding-right: $small-space;\n    transition: border-radius $default-time;\n    cursor: pointer;\n\n    z-index: 1;\n\n    color: var(--theme-blind-header-closed--color);\n    background-color: var(--theme-blind-header-closed--background);\n\n    .glyph {\n      color: var(--theme-blind-header-icon-closed--color);\n      padding: $tiny-space $small-space;\n    }\n\n    .blind-header-title,\n    .blind-header-title-basic {\n      @include ellipsis;\n      display: flex;\n      align-items: center;\n      flex-grow: 1;\n      height: 100%;\n\n      .blind-header-title-default {\n        @include ellipsis;\n        @include text-l-title;\n        margin-inline-end: $small-space;\n        flex-grow: 1;\n      }\n    }\n\n    .blind-header-title-basic ix-icon {\n      margin-inline-end: $small-space;\n    }\n\n    @include hover {\n      background-color: var(--theme-blind-header-open--background--hover);\n\n      .glyph {\n        color: var(--theme-blind-header-icon-open--color--hover);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-blind-header-open--background--active);\n\n      .glyph {\n        color: var(--theme-blind-header-icon-open--color--active);\n      }\n    }\n\n    @include focus-visible {\n      border-color: var(--theme-color-focus-bdr);\n      outline: none;\n    }\n\n    &.closed {\n      border-radius: var(--theme-blind--border-radius);\n\n      @include hover {\n        background-color: var(--theme-blind-header-open--background--hover);\n\n        .glyph {\n          color: var(--theme-blind-header-icon-closed--color--hover);\n        }\n      }\n\n      @include active {\n        background-color: var(--theme-blind-header-open--background--active);\n\n        .glyph {\n          color: var(--theme-blind-header-icon-closed--color--active);\n        }\n      }\n    }\n  }\n\n  .blind-content {\n    display: block;\n    padding: 1rem;\n    transition-property: padding;\n    transition-duration: $default-time;\n    transition-timing-function: ease-in;\n\n    &.hide {\n      max-height: 0;\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\n\nlet sequentialInstanceId = 0;\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  scoped: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private id = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick(e: Event) {\n    if ((e.target as Element).closest('.header-actions')) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={{\n            'blind-header': true,\n            closed: this.collapsed,\n          }}\n          type=\"button\"\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n          aria-controls={`ix-blind-content-section-${this.id}`}\n          aria-expanded={a11yBoolean(!this.collapsed)}\n          onClick={(e) => this.onHeaderClick(e)}\n        >\n          <span\n            class={{\n              glyph: true,\n              'glyph-chevron-right-small': true,\n            }}\n            ref={(ref) => (this.chevronRef = ref)}\n          ></span>\n          <div\n            class=\"blind-header-title\"\n            id={`ix-blind-header-title-${this.id}`}\n          >\n            {this.label !== undefined ? (\n              <span class=\"blind-header-title-basic\">\n                {this.icon !== undefined ? (\n                  <ix-icon name={this.icon}></ix-icon>\n                ) : (\n                  ''\n                )}\n                <span class=\"blind-header-title-default\">{this.label}</span>\n                <span class=\"header-actions\">\n                  <slot name=\"header-actions\"></slot>\n                </span>\n              </span>\n            ) : (\n              <slot name=\"custom-header\"></slot>\n            )}\n          </div>\n        </button>\n        <section\n          id={`ix-blind-content-section-${this.id}`}\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAQO,MAAMA,EAAeC,GAAoBA,EAAQ,OAAS,QCRjE,MAAMC,EAAW,k1HCsBjB,IAAIC,EAAuB,E,MAMdC,EAAK,MA2BhBC,YAAAC,G,2DAFQC,KAAAC,KAAOL,E,eArBqC,M,yCAyB5CM,cAAcC,GACpB,GAAKA,EAAEC,OAAmBC,QAAQ,mBAAoB,CACpD,M,CAGFF,EAAEG,iBACFH,EAAEI,2BAEFP,KAAKQ,WAAaR,KAAKQ,UACvBR,KAAKS,gBAAgBC,KAAKV,KAAKQ,U,CAGjCG,mBACEX,KAAKY,gBAAgBZ,KAAKQ,U,CAGxBK,cACF,OAAOb,KAAKc,YAAYC,cAAc,iB,CAIxCC,UAAUC,GACRjB,KAAKY,gBAAgBK,E,CAGfL,gBAAgBK,GACtB,GAAIA,EAAa,CACfjB,KAAKkB,oB,KACA,CACLlB,KAAKmB,mB,EAIDA,oBACNC,EAAM,CACJC,QAASrB,KAAKsB,WACdC,SAAU,IACVC,OAAQ,gBACRC,QAAS,KAEXL,EAAM,CACJC,QAASrB,KAAKa,QACdU,SAAU,IACVC,OAAQ,gBACRE,QAAS,G,CAILR,qBACNE,EAAM,CACJC,QAASrB,KAAKsB,WACdC,SAAU,IACVC,OAAQ,gBACRC,QAAS,IAEXL,EAAM,CACJC,QAASrB,KAAKa,QACdU,SAAU,IACVC,OAAQ,gBACRE,QAAS,G,CAIbC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,UACEE,MAAO,CACL,eAAgB,KAChBC,OAAQ/B,KAAKQ,WAEfwB,KAAK,SAAQ,kBACI,yBAAyBhC,KAAKC,KAAI,gBACpC,4BAA4BD,KAAKC,KAAI,gBACrCR,GAAaO,KAAKQ,WACjCyB,QAAU9B,GAAMH,KAAKE,cAAcC,IAEnCyB,EAAA,QACEE,MAAO,CACLI,MAAO,KACP,4BAA6B,MAE/BC,IAAMA,GAASnC,KAAKsB,WAAaa,IAEnCP,EAAA,OACEE,MAAM,qBACN7B,GAAI,yBAAyBD,KAAKC,MAEjCD,KAAKoC,QAAUC,UACdT,EAAA,QAAME,MAAM,4BACT9B,KAAKsC,OAASD,UACbT,EAAA,WAASW,KAAMvC,KAAKsC,OAAgB,GAItCV,EAAA,QAAME,MAAM,8BAA8B9B,KAAKoC,OAC/CR,EAAA,QAAME,MAAM,kBACVF,EAAA,QAAMW,KAAK,qBAIfX,EAAA,QAAMW,KAAK,oBAIjBX,EAAA,WACE3B,GAAI,4BAA4BD,KAAKC,KAAI,kBACxB,yBAAyBD,KAAKC,MAE/C2B,EAAA,OACEE,MAAO,CACL,gBAAiB,KACjBU,KAAMxC,KAAKQ,YAGboB,EAAA,e"}

package/dist/siemens-ix/p-b46713aa.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s,H as i}from"./p-57a5d3d0.js";import{g as h}from"./p-5b39e04e.js";const e=".sc-ix-button-h{display:inline-block;width:auto;height:2rem}.disabled.sc-ix-button-h{pointer-events:none}.sc-ix-button-h .btn.sc-ix-button{width:100%;height:100%}";const o=class{constructor(s){t(this,s);this.variant="Primary";this.outline=false;this.invisible=false;this.ghost=false;this.selected=false;this.disabled=false;this.type="button"}render(){return s(i,{class:{disabled:this.disabled}},s("button",{type:this.type,class:h(this.variant,this.outline,this.ghost||this.invisible,false,false,this.selected,this.disabled)},s("slot",null)))}};o.style=e;export{o as ix_button};
-//# sourceMappingURL=p-b46713aa.entry.js.map

package/dist/siemens-ix/p-b46713aa.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["buttonCss","Button","render","h","Host","class","disabled","this","type","getButtonClasses","variant","outline","ghost","invisible","selected"],"sources":["./src/components/button/button.scss?tag=ix-button&encapsulation=scoped","./src/components/button/button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: inline-block;\n  width: auto;\n  height: 2rem;\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  .btn {\n    width: 100%;\n    height: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from './base-button';\n\nexport type ButtonVariant = 'Primary' | 'Secondary';\n\n@Component({\n  tag: 'ix-button',\n  scoped: true,\n  styleUrl: './button.scss',\n})\nexport class Button {\n  /**\n   * Button varaint\n   */\n  @Prop() variant: ButtonVariant = 'Primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Invisible button\n   *\n   * @deprecated use ghost property\n   */\n  @Prop() invisible = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Show button as selected. Should be used with outline or ghost\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          type={this.type}\n          class={getButtonClasses(\n            this.variant,\n            this.outline,\n            this.ghost || this.invisible,\n            false,\n            false,\n            this.selected,\n            this.disabled\n          )}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,qK,MCmBLC,EAAM,M,sCAIgB,U,aAKf,M,eAOE,M,WAKJ,M,cAKG,M,cAKiB,M,UAKA,Q,CAEpCC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,SAAUC,KAAKD,WAGjBH,EAAA,UACEK,KAAMD,KAAKC,KACXH,MAAOI,EACLF,KAAKG,QACLH,KAAKI,QACLJ,KAAKK,OAASL,KAAKM,UACnB,MACA,MACAN,KAAKO,SACLP,KAAKD,WAGPH,EAAA,c"}

package/dist/siemens-ix/p-bdaae206.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,H as s}from"./p-57a5d3d0.js";import{g as n}from"./p-5b39e04e.js";const e=".disabled.sc-ix-icon-button-h{pointer-events:none}.sc-ix-icon-button-h .icon-button.sc-ix-icon-button{padding:0;overflow:hidden}";const o=class{constructor(i){t(this,i);this.variant="Secondary";this.outline=undefined;this.invisible=undefined;this.ghost=undefined;this.oval=undefined;this.icon=undefined;this.size="24";this.color=undefined;this.selected=false;this.disabled=false;this.type="button"}getIconButtonClasses(){return Object.assign(Object.assign({},n(this.variant,this.outline,this.ghost||this.invisible,true,this.oval,this.selected,this.disabled)),{"icon-button":true,"btn-icon-12":this.size==="12","btn-icon-16":this.size==="16","btn-icon-32":this.size==="32"||this.size==="24"||!this.size})}render(){return i(s,{class:{disabled:this.disabled}},i("button",{class:this.getIconButtonClasses(),type:this.type},i("ix-icon",{size:this.size,name:this.icon,color:this.color}),i("div",{style:{display:"none"}},i("slot",null))))}};o.style=e;export{o as ix_icon_button};
-//# sourceMappingURL=p-bdaae206.entry.js.map

package/dist/siemens-ix/p-bdaae206.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["iconButtonCss","IconButton","getIconButtonClasses","Object","assign","getButtonClasses","this","variant","outline","ghost","invisible","oval","selected","disabled","size","render","h","Host","class","type","name","icon","color","style","display"],"sources":["./src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=scoped","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n:host {\n  &.disabled {\n    pointer-events: none;\n  }\n\n  .icon-button {\n    padding: 0;\n    overflow: hidden;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from '../button/base-button';\nimport { Button, ButtonVariant } from '../button/button';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  scoped: true,\n})\nexport class IconButton implements Button {\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'Secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean;\n\n  /**\n   * Button invisible\n   *\n   * @deprecated Use ghost property\n   */\n  @Prop() invisible: boolean;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() color: string;\n\n  /**\n   * Selected state only working with outline or invisible\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  private getIconButtonClasses() {\n    return {\n      ...getButtonClasses(\n        this.variant,\n        this.outline,\n        this.ghost || this.invisible,\n        true,\n        this.oval,\n        this.selected,\n        this.disabled\n      ),\n      'icon-button': true,\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,\n    };\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <button class={this.getIconButtonClasses()} type={this.type}>\n          <ix-icon size={this.size} name={this.icon} color={this.color} />\n          <div style={{ display: 'none' }}>\n            <slot></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAgB,mI,MCoBTC,EAAU,M,sCAIgB,Y,uHAgCK,K,mCAUvB,M,cAKA,M,UAKiB,Q,CAE5BC,uBACN,OAAAC,OAAAC,OAAAD,OAAAC,OAAA,GACKC,EACDC,KAAKC,QACLD,KAAKE,QACLF,KAAKG,OAASH,KAAKI,UACnB,KACAJ,KAAKK,KACLL,KAAKM,SACLN,KAAKO,WACN,CACD,cAAe,KACf,cAAeP,KAAKQ,OAAS,KAC7B,cAAeR,KAAKQ,OAAS,KAC7B,cAAeR,KAAKQ,OAAS,MAAQR,KAAKQ,OAAS,OAASR,KAAKQ,M,CAIrEC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,CAAEL,SAAUP,KAAKO,WAC5BG,EAAA,UAAQE,MAAOZ,KAAKJ,uBAAwBiB,KAAMb,KAAKa,MACrDH,EAAA,WAASF,KAAMR,KAAKQ,KAAMM,KAAMd,KAAKe,KAAMC,MAAOhB,KAAKgB,QACvDN,EAAA,OAAKO,MAAO,CAAEC,QAAS,SACrBR,EAAA,e"}

package/dist/siemens-ix/p-c29d31ea.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as t,H as s}from"./p-57a5d3d0.js";const n=".sc-my-component-h{display:block;position:relative;width:100vw;height:100vh}";const r=class{constructor(t){o(this,t)}render(){return t(s,null)}};r.style=n;export{r as my_component};
-//# sourceMappingURL=p-c29d31ea.entry.js.map

package/dist/siemens-ix/p-c29d31ea.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["myComponentCss","MyComponent","render","h","Host"],"sources":["./src/components/my-component/my-component.scss?tag=my-component&encapsulation=scoped","./src/components/my-component/my-component.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n\n:host {\n  display: block;\n  position: relative;\n  width: 100vw;\n  height: 100vh;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n@Component({\n  tag: 'my-component',\n  styleUrl: 'my-component.scss',\n  scoped: true,\n})\nexport class MyComponent {\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,+E,MCeVC,EAAW,M,yBACtBC,SACE,OAAOC,EAACC,EAAI,K"}

package/dist/siemens-ix/p-d57afc21.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as s,H as t}from"./p-57a5d3d0.js";const n=".sc-ix-expanding-search-h{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between}.right-position.sc-ix-expanding-search-h{width:11.5625rem !important}.sc-ix-expanding-search-h .input-container.sc-ix-expanding-search{transition:all 0.3s ease-in-out}.sc-ix-expanding-search-h .disable-pointer.sc-ix-expanding-search{pointer-events:none}.sc-ix-expanding-search-h input.sc-ix-expanding-search{box-shadow:var(--theme-input--box-shadow)}.sc-ix-expanding-search-h .expanded.sc-ix-expanding-search{width:11.5625rem}.sc-ix-expanding-search-h .collapsed.sc-ix-expanding-search{width:1.5rem;border:none}.sc-ix-expanding-search-h .btn-search-icon.sc-ix-expanding-search{align-self:center;margin:auto;position:relative}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all 0.15s ease-in-out;z-index:1;align-items:center;position:relative;border:none}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):hover{border-color:transparent}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):active{border-color:transparent}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):focus-visible{outline:none}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}.sc-ix-expanding-search-h .btn-search.sc-ix-expanding-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}.sc-ix-expanding-search-h .input-container.sc-ix-expanding-search{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}.sc-ix-expanding-search-h .btn-clear.sc-ix-expanding-search{position:absolute;border-radius:var(--theme-input--border-radius);right:0px;margin-right:0.25rem}.sc-ix-expanding-search-h .input.sc-ix-expanding-search{padding-left:2rem !important;padding-right:2.5rem !important}.sc-ix-expanding-search-h .opacity-before.sc-ix-expanding-search{opacity:0}.sc-ix-expanding-search-h .opacity-after.sc-ix-expanding-search{opacity:1}";const a=class{expandInput(){setTimeout(this.focusTextInput,300);this.expanded=true}collapseInput(){if(!this.isFieldChanged&&this.expanded){this.expanded=false}}clearInput(){this.value="";this.isFieldChanged=false}onChange(i){this.value=i.target.value;if(this.isFieldChanged&&this.value===""){this.isFieldChanged=false}else{this.isFieldChanged=true}this.valueChange.emit(this.value)}constructor(s){i(this,s);this.valueChange=e(this,"valueChange",7);this.icon="search";this.placeholder="Enter text here";this.value="";this.isFieldChanged=false;this.expanded=false;this.hasFocus=false;this.focusTextInput=this.focusTextInput.bind(this)}focusTextInput(){var i;(i=this.textInput)===null||i===void 0?void 0:i.focus()}clearClicked(){var i;this.clearInput();(i=this.textInput)===null||i===void 0?void 0:i.focus();this.valueChange.emit(this.value)}render(){return s(t,{class:{expanded:this.expanded,"right-position":this.expanded}},s("button",{class:{btn:true,"btn-invisible-primary":true,"btn-icon":true,"btn-search":true,"disable-pointer":this.expanded},"data-testid":"button",onClick:()=>this.expandInput(),tabindex:this.expanded?-1:0},s("ix-icon",{class:"btn-search-icon",name:this.icon,size:this.expanded?"16":"24",color:this.hasFocus?"input-search-icon--color--focus":undefined})),s("div",{class:{expanded:this.expanded,collapsed:!this.expanded,"disable-pointer":!this.expanded,"input-container":true},"data-testid":"input-wrapper"},s("input",{class:{"form-control":true,input:this.expanded,"disable-pointer":!this.expanded,"opacity-before":!this.expanded,"opacity-after":this.expanded},ref:i=>this.textInput=i,"data-testid":"input",placeholder:this.placeholder,type:"text",value:this.value,onBlur:()=>{this.collapseInput();this.hasFocus=false},onFocus:()=>this.hasFocus=true,onInput:i=>this.onChange(i),tabindex:this.expanded?0:-1}),this.isFieldChanged?s("ix-icon-button",{class:"btn-clear",icon:"clear",ghost:true,size:"16","data-testid":"clear-button",onClick:()=>this.clearClicked()}):null))}};a.style=n;export{a as ix_expanding_search};
-//# sourceMappingURL=p-d57afc21.entry.js.map

package/dist/siemens-ix/p-d57afc21.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["expandingSearchCss","ExpandingSearch","expandInput","setTimeout","this","focusTextInput","expanded","collapseInput","isFieldChanged","clearInput","value","onChange","e","target","valueChange","emit","constructor","hostRef","bind","_a","textInput","focus","clearClicked","render","h","Host","class","btn","onClick","tabindex","name","icon","size","color","hasFocus","undefined","collapsed","input","ref","el","placeholder","type","onBlur","onFocus","onInput","ghost"],"sources":["./src/components/expanding-search/expanding-search.scss?tag=ix-expanding-search&encapsulation=scoped","./src/components/expanding-search/expanding-search.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$container-width: 11.5625rem;\n\n:host {\n  display: inline-flex;\n  width: auto;\n  height: $x-large-space;\n  align-items: center;\n  justify-content: space-between;\n\n  &.right-position {\n    width: $container-width !important;\n  }\n\n  .input-container {\n    transition: all 0.3s ease-in-out;\n  }\n\n  .disable-pointer {\n    pointer-events: none;\n  }\n\n  input {\n    box-shadow: var(--theme-input--box-shadow);\n  }\n\n  .expanded {\n    width: $container-width;\n  }\n\n  .collapsed {\n    width: $large-space;\n    border: none;\n  }\n\n  /*collapsed view*/\n  .btn-search-icon {\n    align-self: center;\n    margin: auto;\n    position: relative;\n  }\n\n  .btn-search {\n    display: flex;\n    max-width: $x-large-space;\n    max-height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    transition: all 0.15s ease-in-out;\n    z-index: 1;\n    align-items: center;\n    position: relative;\n    border: none;\n\n    @include hover {\n      border-color: transparent;\n    }\n\n    @include active {\n      border-color: transparent;\n    }\n\n    @include focus {\n      outline: none;\n    }\n\n    @include focus-visible {\n      outline: var(--focus--border-color);\n      outline-width: 1px;\n      outline-style: solid;\n    }\n  }\n\n  .btn-search:active {\n    width: $x-large-space;\n    height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    border: var(--theme-std-bdr-1) !important;\n  }\n\n  /*expanded view*/\n  .input-container {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    flex-wrap: nowrap;\n  }\n\n  .btn-clear {\n    position: absolute;\n    border-radius: var(--theme-input--border-radius);\n    right: 0px;\n    margin-right: 0.25rem;\n  }\n\n  .input {\n    padding-left: $x-large-space !important;\n    padding-right: 2.5rem !important;\n  }\n\n  .opacity-before {\n    opacity: 0;\n  }\n\n  .opacity-after {\n    opacity: 1;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  scoped: true,\n})\nexport class ExpandingSearch {\n  /**\n   * Search icon\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  @State() isFieldChanged = false;\n\n  @State() expanded = false;\n\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n        }}\n      >\n        <button\n          class={{\n            btn: true,\n            'btn-invisible-primary': true,\n            'btn-icon': true,\n            'btn-search': true,\n            'disable-pointer': this.expanded,\n          }}\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n        >\n          <ix-icon\n            class=\"btn-search-icon\"\n            name={this.icon}\n            size={this.expanded ? '16' : '24'}\n            color={\n              this.hasFocus ? 'input-search-icon--color--focus' : undefined\n            }\n          ></ix-icon>\n        </button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon=\"clear\"\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAqB,g7E,MCwBdC,EAAe,MA2BlBC,cACNC,WAAWC,KAAKC,eAAgB,KAChCD,KAAKE,SAAW,I,CAGVC,gBACN,IAAKH,KAAKI,gBAAkBJ,KAAKE,SAAU,CACzCF,KAAKE,SAAW,K,EAIZG,aACNL,KAAKM,MAAQ,GACbN,KAAKI,eAAiB,K,CAGhBG,SAASC,GACfR,KAAKM,MAASE,EAAEC,OAA4BH,MAC5C,GAAIN,KAAKI,gBAAkBJ,KAAKM,QAAU,GAAI,CAC5CN,KAAKI,eAAiB,K,KACjB,CACLJ,KAAKI,eAAiB,I,CAGxBJ,KAAKU,YAAYC,KAAKX,KAAKM,M,CAK7BM,YAAAC,G,6DApDe,S,iBAKO,kB,WAKW,G,oBAEP,M,cAEN,M,cAEA,MAqClBb,KAAKC,eAAiBD,KAAKC,eAAea,KAAKd,K,CAGzCC,iB,OACNc,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAEE,O,CAGVC,e,MACNlB,KAAKK,cACLU,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAChBjB,KAAKU,YAAYC,KAAKX,KAAKM,M,CAG7Ba,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLpB,SAAUF,KAAKE,SACf,iBAAkBF,KAAKE,WAGzBkB,EAAA,UACEE,MAAO,CACLC,IAAK,KACL,wBAAyB,KACzB,WAAY,KACZ,aAAc,KACd,kBAAmBvB,KAAKE,UACzB,cACW,SACZsB,QAAS,IAAMxB,KAAKF,cACpB2B,SAAUzB,KAAKE,UAAY,EAAI,GAE/BkB,EAAA,WACEE,MAAM,kBACNI,KAAM1B,KAAK2B,KACXC,KAAM5B,KAAKE,SAAW,KAAO,KAC7B2B,MACE7B,KAAK8B,SAAW,kCAAoCC,aAK1DX,EAAA,OACEE,MAAO,CACLpB,SAAUF,KAAKE,SACf8B,WAAYhC,KAAKE,SACjB,mBAAoBF,KAAKE,SACzB,kBAAmB,MACpB,cACW,iBAEZkB,EAAA,SACEE,MAAO,CACL,eAAgB,KAChBW,MAAOjC,KAAKE,SACZ,mBAAoBF,KAAKE,SACzB,kBAAmBF,KAAKE,SACxB,gBAAiBF,KAAKE,UAExBgC,IAAMC,GAAQnC,KAAKgB,UAAYmB,EAAG,cACtB,QACZC,YAAapC,KAAKoC,YAClBC,KAAK,OACL/B,MAAON,KAAKM,MACZgC,OAAQ,KACNtC,KAAKG,gBACLH,KAAK8B,SAAW,KAAK,EAEvBS,QAAS,IAAOvC,KAAK8B,SAAW,KAChCU,QAAUhC,GAAkBR,KAAKO,SAASC,GAC1CiB,SAAUzB,KAAKE,SAAW,GAAK,IAGhCF,KAAKI,eACJgB,EAAA,kBACEE,MAAM,YACNK,KAAK,QACLc,MAAO,KACPb,KAAK,KAAI,cACG,eACZJ,QAAS,IAAMxB,KAAKkB,iBAEpB,M"}

package/dist/siemens-ix/p-f72d10e6.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as o,H as i,g as e}from"./p-57a5d3d0.js";import{T as a}from"./p-9ee41861.js";const n=".sc-ix-toast-h{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius);box-shadow:var(--theme-toast--box-shadow);--animate-duration:300ms}.sc-ix-toast-h .toast-body.sc-ix-toast{display:flex;position:relative;width:100%;flex-grow:1}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-icon.sc-ix-toast{display:flex;align-items:flex-start;margin:1rem}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%;max-width:10.25rem;margin-top:calc(\n        1rem + var(--theme-toast--border-thickness)\n      );margin-bottom:0.75rem}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast .toast-message.sc-ix-toast{min-width:0}.sc-ix-toast-h .toast-close.sc-ix-toast{display:flex;position:relative;margin:0.75rem;pointer-events:all}.sc-ix-toast-h .toast-progress-bar.sc-ix-toast{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}.sc-ix-toast-h .toast-progress-bar--animated.sc-ix-toast{animation:trackProgress linear 1 forwards}.sc-ix-toast-h .toast-progress-bar--touched.sc-ix-toast{transition:transform 1s}.sc-ix-toast-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-toast-h:not(.disabled):not(:disabled):hover .toast-progress-bar.sc-ix-toast{visibility:hidden;transition:none}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";const r=class{constructor(o){t(this,o);this.closeToast=s(this,"closeToast",7);this.type="info";this.toastTitle=undefined;this.autoCloseDelay=5e3;this.autoClose=true;this.icon=undefined;this.iconColor=undefined;this.progress=0;this.isRunning=true;this.touched=false}getIcon(){if(this.icon){return o("ix-icon",{name:this.icon,color:this.iconColor,size:"24"})}switch(this.type){case"info":return o("ix-icon",{name:"info",size:"24",color:"color-std-text"});case"error":return o("ix-icon",{name:"error",size:"24",color:"color-alarm"});case"success":return o("ix-icon",{name:"success",size:"24",color:"color-success"});case"warning":return o("ix-icon",{name:"warning",size:"24",color:"color-warning"});default:return""}}close(){if(this.host){this.host.classList.add("animate__fadeOut")}setTimeout((()=>{this.closeToast.emit()}),250)}render(){let t;let s={};const e=["toast-progress-bar"];if(!this.touched){s={animationDuration:`${this.autoCloseDelay}ms`,animationPlayState:this.isRunning?"running":"paused"};e.push("toast-progress-bar--animated")}else{e.push("toast-progress-bar--touched")}const a=()=>{requestAnimationFrame((()=>{if(t){t.style.transform=`scaleX(${this.progress})`}}))};return o(i,{class:"animate__animated animate__fadeIn"},o("div",{class:"toast-body",onPointerLeave:()=>{this.progress=0;a()},onPointerEnter:()=>{this.isRunning=false;this.touched=true;this.progress=1;a()}},this.type||this.icon?o("div",{class:"toast-icon"},this.getIcon()):null,o("div",{class:"toast-content"},this.toastTitle?o("div",{class:"toast-title text-default-title-single"},this.toastTitle):null,o("div",{class:"toast-message text-default"},o("slot",null))),o("div",{class:"toast-close"},o("ix-icon-button",{icon:"close",size:"24",ghost:true,onClick:()=>this.closeToast.emit()}))),this.autoClose?o("div",{class:e.join(" "),style:s,ref:s=>t=s,onAnimationEnd:()=>{this.close()},onTransitionEnd:()=>{if(this.progress===0){this.close()}}}):null)}get host(){return e(this)}};r.style=n;const c=class{constructor(s){t(this,s);this.PREFIX_POSITION_CLASS="toast-container--";this.containerId="toast-container";this.containerClass="toast-container";this.position="bottom-right"}get hostContainer(){return document.getElementById(this.containerId)}componentDidLoad(){if(!document.getElementById(this.containerId)){const t=document.createElement("div");t.id=this.containerId;t.classList.add(this.containerClass);t.classList.add(`${this.PREFIX_POSITION_CLASS}${this.position}`);document.body.appendChild(t)}}onPositionChange(t,s){const o=document.getElementById(this.containerId);o.classList.remove(`${this.PREFIX_POSITION_CLASS}${s}`);o.classList.add(`${this.PREFIX_POSITION_CLASS}${t}`)}async showToast(t){const s=document.createElement("ix-toast");const o=new a;function i(t){s.remove();o.emit(t)}s.toastTitle=t.title;s.type=t.type;s.autoClose=t.autoClose;s.autoCloseDelay=t.autoCloseDelay;s.icon=t.icon;s.iconColor=t.iconColor;s.addEventListener("closeToast",(t=>{const{detail:s}=t;i(s)}));if(typeof t.message==="string"){s.innerText=t.message}else{s.appendChild(t.message)}this.hostContainer.appendChild(s);return{onClose:o,close:t=>{i(t)}}}render(){return o(i,null)}get host(){return e(this)}static get watchers(){return{position:["onPositionChange"]}}};export{r as ix_toast,c as ix_toast_container};
-//# sourceMappingURL=p-f72d10e6.entry.js.map

package/dist/siemens-ix/p-f72d10e6.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["toastCss","Toast","getIcon","this","icon","h","name","color","iconColor","size","type","close","host","classList","add","setTimeout","closeToast","emit","render","progressBarElement","progressBarStyle","progressBarClass","touched","animationDuration","autoCloseDelay","animationPlayState","isRunning","push","updateProgress","requestAnimationFrame","style","transform","progress","Host","class","onPointerLeave","onPointerEnter","toastTitle","ghost","onClick","autoClose","join","ref","r","onAnimationEnd","onTransitionEnd","ToastContainer","PREFIX_POSITION_CLASS","hostContainer","document","getElementById","containerId","componentDidLoad","toastContainer","createElement","id","containerClass","position","body","appendChild","onPositionChange","newPosition","oldPosition","remove","async","config","toast","onClose","TypedEvent","removeToast","result","title","addEventListener","event","detail","message","innerText"],"sources":["./src/components/toast/toast.scss?tag=ix-toast&encapsulation=scoped","./src/components/toast/toast.tsx","./src/components/toast/toast-container.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: 17.5rem;\n  max-width: 17.5rem;\n  min-height: 3.5rem;\n\n  pointer-events: all;\n\n  background-color: var(--theme-toast--background);\n  border: var(--theme-toast--border-thickness) solid\n    var(--theme-toast--border-color);\n  border-radius: var(--theme-toast--border-radius);\n  box-shadow: var(--theme-toast--box-shadow);\n\n  --animate-duration: #{$medium-time};\n\n  .toast-body {\n    display: flex;\n    position: relative;\n    width: 100%;\n    flex-grow: 1;\n\n    .toast-icon {\n      display: flex;\n      align-items: flex-start;\n      margin: $default-space;\n    }\n\n    .toast-content {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: 0;\n      width: 100%;\n      max-width: 10.25rem;\n      margin-top: calc(\n        #{$default-space} + var(--theme-toast--border-thickness)\n      );\n      margin-bottom: $medium-space;\n\n      .toast-message {\n        min-width: 0;\n      }\n    }\n  }\n\n  .toast-close {\n    display: flex;\n    position: relative;\n    margin: $medium-space;\n    pointer-events: all;\n  }\n\n  .toast-progress-bar {\n    position: absolute;\n    bottom: 0;\n    height: $tiny-space;\n    width: 100%;\n    background-color: var(--theme-toast-timer-value--background);\n    transform-origin: left;\n\n    &--animated {\n      animation: trackProgress linear 1 forwards;\n    }\n\n    &--touched {\n      transition: transform 1s;\n    }\n  }\n\n  @include hover {\n    .toast-progress-bar {\n      visibility: hidden;\n      transition: none;\n    }\n  }\n\n  @keyframes trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast',\n  styleUrl: 'toast.scss',\n  scoped: true,\n})\nexport class Toast {\n  /**\n   * Toast type\n   */\n  @Prop() type: ToastType = 'info';\n\n  /**\n   * Toast title\n   */\n  @Prop() toastTitle: string;\n\n  /**\n   * Autoclose title after delay\n   */\n  @Prop() autoCloseDelay = 5000;\n\n  /**\n   * Autoclose behavior\n   */\n  @Prop() autoClose = true;\n\n  /**\n   * Icon of toast\n   */\n  @Prop() icon: string;\n\n  /**\n   * Icon color of toast\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Toast closed\n   */\n  @Event() closeToast: EventEmitter;\n\n  @State() progress = 0;\n  @State() isRunning = true;\n  @State() touched = false;\n\n  @Element() host!: HTMLIxToastElement;\n\n  private getIcon() {\n    if (this.icon) {\n      return <ix-icon name={this.icon} color={this.iconColor} size=\"24\" />;\n    }\n\n    switch (this.type) {\n      case 'info':\n        return <ix-icon name={'info'} size=\"24\" color=\"color-std-text\" />;\n\n      case 'error':\n        return <ix-icon name={'error'} size=\"24\" color=\"color-alarm\" />;\n\n      case 'success':\n        return <ix-icon name={'success'} size=\"24\" color=\"color-success\" />;\n\n      case 'warning':\n        return <ix-icon name={'warning'} size=\"24\" color=\"color-warning\" />;\n\n      default:\n        return '';\n    }\n  }\n\n  private close() {\n    if (this.host) {\n      this.host.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarElement: HTMLElement;\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    if (!this.touched) {\n      progressBarStyle = {\n        animationDuration: `${this.autoCloseDelay}ms`,\n        animationPlayState: this.isRunning ? 'running' : 'paused',\n      };\n\n      progressBarClass.push('toast-progress-bar--animated');\n    } else {\n      progressBarClass.push('toast-progress-bar--touched');\n    }\n\n    const updateProgress = () => {\n      requestAnimationFrame(() => {\n        if (progressBarElement) {\n          progressBarElement.style.transform = `scaleX(${this.progress})`;\n        }\n      });\n    };\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.progress = 0;\n            updateProgress();\n          }}\n          onPointerEnter={() => {\n            this.isRunning = false;\n            this.touched = true;\n            this.progress = 1;\n            updateProgress();\n          }}\n        >\n          {this.type || this.icon ? (\n            <div class=\"toast-icon\">{this.getIcon()}</div>\n          ) : null}\n          <div class=\"toast-content\">\n            {this.toastTitle ? (\n              <div class=\"toast-title text-default-title-single\">\n                {this.toastTitle}\n              </div>\n            ) : null}\n            <div class=\"toast-message text-default\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"toast-close\">\n            <ix-icon-button\n              icon=\"close\"\n              size=\"24\"\n              ghost\n              onClick={() => this.closeToast.emit()}\n            />\n          </div>\n        </div>\n        {this.autoClose ? (\n          <div\n            class={progressBarClass.join(' ')}\n            style={progressBarStyle}\n            ref={(r) => (progressBarElement = r)}\n            onAnimationEnd={() => {\n              this.close();\n            }}\n            onTransitionEnd={() => {\n              if (this.progress === 0) {\n                this.close();\n              }\n            }}\n          ></div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast-container',\n  scoped: true,\n})\nexport class ToastContainer {\n  @Element() host!: HTMLIxToastContainerElement;\n\n  /**\n   */\n  @Prop() containerId = 'toast-container';\n\n  /**\n   */\n  @Prop() containerClass = 'toast-container';\n\n  /**\n   */\n  @Prop() position: 'bottom-right' | 'top-right' = 'bottom-right';\n\n  private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n  get hostContainer() {\n    return document.getElementById(this.containerId);\n  }\n\n  componentDidLoad() {\n    if (!document.getElementById(this.containerId)) {\n      const toastContainer = document.createElement('div');\n      toastContainer.id = this.containerId;\n      toastContainer.classList.add(this.containerClass);\n      toastContainer.classList.add(\n        `${this.PREFIX_POSITION_CLASS}${this.position}`\n      );\n      document.body.appendChild(toastContainer);\n    }\n  }\n\n  @Watch('position')\n  onPositionChange(newPosition: string, oldPosition: string) {\n    const toastContainer = document.getElementById(this.containerId);\n    toastContainer.classList.remove(\n      `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n    );\n    toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n  }\n\n  /**\n   * Display a toast message\n   * @param config\n   */\n  @Method()\n  async showToast(config: ToastConfig) {\n    const toast = document.createElement('ix-toast');\n\n    const onClose = new TypedEvent<any | undefined>();\n\n    function removeToast(result?: any) {\n      toast.remove();\n      onClose.emit(result);\n    }\n\n    toast.toastTitle = config.title;\n    toast.type = config.type;\n    toast.autoClose = config.autoClose;\n    toast.autoCloseDelay = config.autoCloseDelay;\n    toast.icon = config.icon;\n    toast.iconColor = config.iconColor;\n    toast.addEventListener(\n      'closeToast',\n      (event: CustomEvent<any | undefined>) => {\n        const { detail } = event;\n        removeToast(detail);\n      }\n    );\n\n    if (typeof config.message === 'string') {\n      toast.innerText = config.message;\n    } else {\n      toast.appendChild(config.message);\n    }\n\n    this.hostContainer.appendChild(toast);\n\n    return {\n      onClose,\n      close: (result?: any) => {\n        removeToast(result);\n      },\n    };\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"mappings":"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"}

package/dist/types/components/icon/icon.d.ts

@@ -1,15 +0,0 @@
-export declare class Icon {
-  /**
-   * Size of the icon
-   */
-  size: '12' | '16' | '24' | '32';
-  /**
-   * Color of the icon
-   */
-  color: string;
-  /**
-   * Use one of our defined icon names e.g. `copy`.
-   */
-  name: string;
-  render(): any;
-}