@siemens/ix 2.3.0 → 2.4.1

package/dist/siemens-ix/{p-b7fa2c5a.entry.js → p-c33cee36.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,H as s,g as h}from"./p-ac552df3.js";import{a as o}from"./p-71206084.js";import{A as a}from"./p-46a6cd9d.js";import{a as r}from"./p-702f9349.js";import{m as n}from"./p-68a274e7.js";import"./p-c4749812.js";const l=":host{background-color:var(--theme-color-2);display:flex;position:relative;overflow:hidden;box-sizing:border-box}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host aside{width:100%;height:100%}:host .title-text{display:flex;align-items:center;gap:var(--theme-space-1);overflow:hidden}:host .title-text .title-text-overflow{width:100%;height:100%;display:contents}:host .title-text .title-text-overflow *{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .header-gap{gap:var(--theme-space-1)}:host .top-bottom-pane{display:flex;flex-direction:column;flex-grow:1}:host .top-bottom-pane .title{display:flex;flex-direction:row;align-items:center;margin:var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2)}:host .top-bottom-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .top-bottom-pane .title-expanded{display:flex;flex-direction:row}:host .top-bottom-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane{display:flex;flex-grow:1}:host .left-right-pane .title{display:flex;flex-direction:column;align-items:center;margin:var(--theme-space-2) var(--theme-space--1) var(--theme-space-2) var(--theme-space--1)}:host .left-right-pane .title .title-text{flex-direction:row-reverse;justify-content:start;flex-direction:row}:host .left-right-pane .title .rotate{writing-mode:vertical-lr;text-orientation:mixed;transform:rotate(180deg);flex-direction:row-reverse}:host .left-right-pane .title .rotate ix-icon{transform:rotate(90deg)}:host .left-right-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane .title-expanded{display:flex;flex-direction:row}:host .left-right-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane.expanded{flex-direction:column}:host .mobile-pane{display:flex;flex-direction:column;flex-grow:1}:host .mobile-pane .title-mobile{display:flex;flex-direction:row-reverse;justify-content:space-between;margin:var(--theme-space-1) var(--theme-space-2)}:host .side-pane-content{padding:var(--theme-space-1) var(--theme-space-2);overflow:auto;height:100%;width:100%}:host(.not-visible){display:none}:host(.inline-color){background-color:var(--theme-color-1)}:host(.box-shadow){box-shadow:0 0 1rem black}:host(.nav-left-border){border-left:var(--theme-app-header--border-width) solid var(--theme-color-weak-bdr)}:host(.left-pane-border){border-right:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.right-pane-border){border-left:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.top-pane-border){border-bottom:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.bottom-pane-border){border-top:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.mobile-overlay){width:100%;position:absolute;z-index:100 !important}:host(.mobile-overlay) .side-pane-content{height:calc(100% - 2.5rem)}:host(.mobile-border-top){border-bottom:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.mobile-border-bottom){border-top:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.top-expanded){top:0}:host(.bottom-expanded){bottom:0}:host(.left-right-pane){height:100%}:host(.top-bottom-pane){width:100%}";const d=l;const p=class{constructor(i){t(this,i);this.expandedChanged=e(this,"expandedChanged",7);this.variantChanged=e(this,"variantChanged",7);this.borderlessChanged=e(this,"borderlessChanged",7);this.hideOnCollapseChanged=e(this,"hideOnCollapseChanged",7);this.slotChanged=e(this,"slotChanged",7);this.validPositions=["top","left","bottom","right"];this.collapsedPane="40px";this.collapsedPaneMobile="48px";this.animations=new Map;this.animationCounter=0;this.heading=undefined;this.variant="inline";this.hideOnCollapse=false;this.size="240px";this.borderless=false;this.expanded=false;this.composition="top";this.icon=undefined;this.ignoreLayoutSettings=false;this.isMobile=false;this.expandIcon="";this.showContent=false;this.minimizeIcon="";this.floating=false;this.parentWidthPx=0;this.parentHeightPx=0}get currentSlot(){return this.hostElement.getAttribute("slot")}get isBottomTopPane(){return this.composition==="bottom"||this.composition==="top"}get isLeftRightPane(){return this.composition==="left"||this.composition==="right"}get isMobileTop(){return this.composition==="top"||this.composition==="left"}componentWillLoad(){this.setIcons();this.floating=this.variant==="floating";if(this.expanded){this.onParentSizeChange()}this.isMobile=n("sm");r.onChange.on((()=>{this.isMobile=n("sm")}));this.setPosition(this.currentSlot);this.mutationObserver=new MutationObserver((t=>{t.forEach((t=>{if(t.type==="attributes"&&t.attributeName==="slot"){const e=this.currentSlot;const i=t.oldValue;if(e!==i){this.slotChanged.emit({slot:i,newSlot:e});this.setPosition(e)}}}))}));this.mutationObserver.observe(this.hostElement,{attributes:true,attributeOldValue:true});const t=this.hostElement.parentElement;this.resizeObserver=new ResizeObserver((t=>{this.parentWidthPx=t[0].borderBoxSize[0].inlineSize;this.parentHeightPx=t[0].borderBoxSize[0].blockSize}));if(t)this.resizeObserver.observe(t)}disconnectedCallback(){var t,e;(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}setPosition(t){if(this.validPositions.includes(t)){this.composition=t}}getExpandPaneSize(){let t;if(this.isBottomTopPane){if(this.size.includes("px")){const e=Math.round(this.parentHeightPx/2);const i=Number(this.size.replace("px",""));if(e&&e<i){t=`${e}px`}else{t=`${i}px`}}else{if(this.size==="50%"){t=`${Math.round(this.parentHeightPx/2)}px`}else{t=`${Math.round(this.parentHeightPx/3)}px`}}}else{if(this.size.includes("px")){const e=Math.round(this.parentWidthPx/2);const i=Number(this.size.replace("px",""));if(e&&e<i){t=`${e}px`}else{t=`${i}px`}}else{if(this.size==="50%"){t=`${Math.round(this.parentWidthPx/2)}px`}else{t=`${Math.round(this.parentWidthPx/3)}px`}}}return t}setIcons(){const{expandIcon:t,minimizeIcon:e}=this.getIconNames();this.expandIcon=t;this.minimizeIcon=e}getIconNames(){let t="";let e="";switch(this.composition){case"left":t=this.isMobile?"double-chevron-up":"double-chevron-left";e=this.isMobile?"double-chevron-down":"double-chevron-right";break;case"right":t=this.isMobile?"double-chevron-down":"double-chevron-right";e=this.isMobile?"double-chevron-up":"double-chevron-left";break;case"bottom":t="double-chevron-down";e="double-chevron-up";break;case"top":t="double-chevron-up";e="double-chevron-down";break}return{expandIcon:t,minimizeIcon:e}}getKey(){return(this.animationCounter++).toString()}animateVerticalFadeIn(t){let e=this.getKey();let i=o({targets:this.hostElement,duration:a.mediumTime,width:t,easing:"easeInOutSine",delay:0,begin:()=>{if(!this.expanded){this.showContent=false;this.animateVerticalPadding("0px")}else{this.animateVerticalPadding("8px")}},complete:()=>{if(this.expanded){this.showContent=true}this.animations.delete(e)}});this.animations.set(e,i)}animateHorizontalFadeIn(t){let e=this.getKey();let i=o({targets:this.hostElement,duration:a.mediumTime,height:t,easing:"easeInOutSine",delay:0,begin:()=>{if(!this.expanded){this.showContent=false;if(!this.isMobile)this.animateHorizontalPadding("0px")}else{if(!this.isMobile)this.animateHorizontalPadding("8px")}},complete:()=>{if(this.expanded){this.showContent=true}this.animations.delete(e)}});this.animations.set(e,i)}removePadding(){o({targets:this.hostElement.shadowRoot.querySelector("#title-div"),duration:0,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:0,delay:0})}animateHorizontalPadding(t,e=a.mediumTime){let i=this.getKey();let s=o({targets:this.hostElement.shadowRoot.querySelector("#title-div"),duration:e,paddingTop:t,paddingBottom:t,easing:"easeInOutSine",delay:0,complete:()=>{this.animations.delete(i)}});this.animations.set(i,s)}animateVerticalPadding(t,e=a.mediumTime){let i=this.getKey();let s=o({targets:this.hostElement.shadowRoot.querySelector("#title-div"),duration:e,paddingLeft:t,paddingRight:t,easing:"easeInOutSine",delay:0,complete:()=>{this.animations.delete(i)}});this.animations.set(i,s)}clearAnimations(){this.animations.forEach((t=>t.pause()));this.animations.clear();this.animationCounter=0}onMobileChange(){this.setIcons();this.hostElement.style.removeProperty("width");this.hostElement.style.removeProperty("height");this.hostElement.style.removeProperty("min-height");this.onParentSizeChange()}onPositionChange(){this.setIcons();this.hostElement.style.removeProperty("width");this.hostElement.style.removeProperty("height");this.onParentSizeChange()}onHideOnCollapseChange(t){this.onParentSizeChange();this.hideOnCollapseChanged.emit({slot:this.currentSlot,hideOnCollapse:t})}onVariantChange(t){this.floating=t==="floating";this.variantChanged.emit({slot:this.currentSlot,variant:t})}onBorderlessChange(t){this.borderlessChanged.emit({slot:this.currentSlot,borderless:t})}onExpandedChange(){this.onSizeChange();this.expandedChanged.emit({slot:this.currentSlot,expanded:this.expanded})}onParentSizeChange(){this.clearAnimations();this.removePadding();if(this.expanded){if(this.isMobile){this.hostElement.style.height="100%"}else{const t=this.getExpandPaneSize();if(this.isBottomTopPane){this.hostElement.style.height=t;this.animateHorizontalPadding("8px",0)}else{this.hostElement.style.width=t;this.animateVerticalPadding("8px",0)}}this.showContent=true}else{this.showContent=false;if(this.isMobile){this.hostElement.style.height=this.hideOnCollapse?"0":this.collapsedPaneMobile}else{if(this.isBottomTopPane){this.hostElement.style.height=this.hideOnCollapse?"0":this.collapsedPane}else{this.hostElement.style.width=this.hideOnCollapse?"0":this.collapsedPane}}}}onSizeChange(){if(this.expanded){if(this.isMobile){this.hostElement.style.minHeight=this.hideOnCollapse?"0":this.collapsedPaneMobile;this.animateHorizontalFadeIn("100%")}else{const t=this.getExpandPaneSize();if(this.isBottomTopPane){this.hostElement.style.height=this.hideOnCollapse?"0":this.collapsedPane;this.animateHorizontalFadeIn(t)}else{this.hostElement.style.width=this.hideOnCollapse?"0":this.collapsedPane;this.animateVerticalFadeIn(t)}}}else{this.showContent=false;if(this.isMobile){this.hostElement.style.height=this.collapsedPaneMobile}else{if(this.isBottomTopPane){this.animateHorizontalFadeIn(this.collapsedPane)}else{this.animateVerticalFadeIn(this.collapsedPane)}}}}render(){return i(s,{key:"64708a95cd9ab661211a6ea1ed696eafe2904627",class:{"inline-color":!this.floating,"mobile-overlay":this.expanded&&this.isMobile,"top-expanded":this.expanded&&this.isMobileTop&&this.isMobile,"bottom-expanded":this.expanded&&!this.isMobileTop&&this.isMobile,"top-bottom-pane":this.isBottomTopPane&&!this.isMobile,"left-right-pane":this.isLeftRightPane&&!this.isMobile,[`${this.composition}-pane-border`]:!this.borderless&&!this.isMobile&&!this.floating,"nav-left-border":!this.borderless&&!this.isMobile&&this.composition!=="right"&&this.floating,"mobile-border-top":!this.borderless&&this.isMobileTop&&this.isMobile&&!this.expanded&&!this.floating,"mobile-border-bottom":!this.borderless&&!this.isMobileTop&&this.isMobile&&!this.expanded&&!this.floating,"box-shadow":this.floating,"aria-expanded":this.expanded,"not-visible":this.hideOnCollapse&&!this.expanded}},i("aside",{key:"6985605b745db5acedace6039bf709c586474d3a",class:{"top-bottom-pane":this.isBottomTopPane&&!this.isMobile,"left-right-pane":this.isLeftRightPane&&!this.isMobile,"mobile-pane":this.isMobile,expanded:this.expanded}},i("div",{key:"6c4fe6cf539de045dc22abb27693fdc94dc25fbf",id:"title-div",class:{title:!this.isMobile&&!this.hideOnCollapse&&!this.showContent,"title-finished":!this.isMobile&&!this.hideOnCollapse&&this.showContent,"title-expanded":!this.isMobile&&!this.hideOnCollapse&&this.expanded,"title-hide-on-collapse":!this.isMobile&&this.hideOnCollapse,"title-mobile":this.isMobile,"header-gap":!this.isMobile&&!this.hideOnCollapse}},i("ix-icon-button",{key:"e9e308ae81e48e90e2636f050112c757b58bc16d",class:"title-icon",size:"24",icon:this.expanded?this.isMobile||this.hideOnCollapse?"close":this.expandIcon:this.minimizeIcon,ghost:true,onClick:()=>{this.expanded=!this.expanded},"aria-controls":this.composition+"ToggleButton"}),i("span",{key:"7c4c9a086e6e9c1434ded33ac11b6ed9033c4def",class:{"title-text":true,rotate:!this.expanded&&!this.isMobile&&this.isLeftRightPane}},this.icon?i("ix-icon",{size:"24",name:this.icon}):null,i("div",{key:"fb0aea90f3af3e436712dcd540247925b8ad96b0",class:"title-text-overflow"},i("ix-typography",{key:"f1c18efa4e71b8387d83c357cf88f9ab89aea10a",format:"h4"},this.heading)))),i("div",{key:"dec09cef0a083a2ac6b3cefc2bf1f771e1351b3b",class:"side-pane-content",hidden:!this.showContent},i("slot",{key:"367170c015420dd84e75cad3f4cfa31fcad58d57"}))))}get hostElement(){return h(this)}static get watchers(){return{isMobile:["onMobileChange"],composition:["onPositionChange"],hideOnCollapse:["onHideOnCollapseChange"],variant:["onVariantChange"],borderless:["onBorderlessChange"],expanded:["onExpandedChange"],parentHeightPx:["onParentSizeChange"],parentWidthPx:["onParentSizeChange"],size:["onSizeChange"]}}};p.style=d;export{p as ix_pane};
-//# sourceMappingURL=p-b7fa2c5a.entry.js.map
+import{r as t,c as e,h as i,H as s,g as h}from"./p-f87cd962.js";import{a as o}from"./p-71206084.js";import{A as a}from"./p-46a6cd9d.js";import{a as r}from"./p-fbe017b7.js";import{m as n}from"./p-68a274e7.js";import"./p-c4749812.js";const l=":host{background-color:var(--theme-color-2);display:flex;position:relative;overflow:hidden;box-sizing:border-box}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host aside{width:100%;height:100%}:host .title-text{display:flex;align-items:center;gap:var(--theme-space-1);overflow:hidden}:host .title-text .title-text-overflow{width:100%;height:100%;display:contents}:host .title-text .title-text-overflow *{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .header-gap{gap:var(--theme-space-1)}:host .top-bottom-pane{display:flex;flex-direction:column;flex-grow:1}:host .top-bottom-pane .title{display:flex;flex-direction:row;align-items:center;margin:var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2)}:host .top-bottom-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .top-bottom-pane .title-expanded{display:flex;flex-direction:row}:host .top-bottom-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane{display:flex;flex-grow:1}:host .left-right-pane .title{display:flex;flex-direction:column;align-items:center;margin:var(--theme-space-2) var(--theme-space--1) var(--theme-space-2) var(--theme-space--1)}:host .left-right-pane .title .title-text{flex-direction:row-reverse;justify-content:start;flex-direction:row}:host .left-right-pane .title .rotate{writing-mode:vertical-lr;text-orientation:mixed;transform:rotate(180deg);flex-direction:row-reverse}:host .left-right-pane .title .rotate ix-icon{transform:rotate(90deg)}:host .left-right-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane .title-expanded{display:flex;flex-direction:row}:host .left-right-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane.expanded{flex-direction:column}:host .mobile-pane{display:flex;flex-direction:column;flex-grow:1}:host .mobile-pane .title-mobile{display:flex;flex-direction:row-reverse;justify-content:space-between;margin:var(--theme-space-1) var(--theme-space-2)}:host .side-pane-content{padding:var(--theme-space-1) var(--theme-space-2);overflow:auto;height:100%;width:100%}:host(.not-visible){display:none}:host(.inline-color){background-color:var(--theme-color-1)}:host(.box-shadow){box-shadow:0 0 1rem black}:host(.nav-left-border){border-left:var(--theme-app-header--border-width) solid var(--theme-color-weak-bdr)}:host(.left-pane-border){border-right:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.right-pane-border){border-left:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.top-pane-border){border-bottom:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.bottom-pane-border){border-top:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.mobile-overlay){width:100%;position:absolute;z-index:100 !important}:host(.mobile-overlay) .side-pane-content{height:calc(100% - 2.5rem)}:host(.mobile-border-top){border-bottom:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.mobile-border-bottom){border-top:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.top-expanded){top:0}:host(.bottom-expanded){bottom:0}:host(.left-right-pane){height:100%}:host(.top-bottom-pane){width:100%}";const d=l;const p=class{constructor(i){t(this,i);this.expandedChanged=e(this,"expandedChanged",7);this.variantChanged=e(this,"variantChanged",7);this.borderlessChanged=e(this,"borderlessChanged",7);this.hideOnCollapseChanged=e(this,"hideOnCollapseChanged",7);this.slotChanged=e(this,"slotChanged",7);this.validPositions=["top","left","bottom","right"];this.collapsedPane="40px";this.collapsedPaneMobile="48px";this.animations=new Map;this.animationCounter=0;this.heading=undefined;this.variant="inline";this.hideOnCollapse=false;this.size="240px";this.borderless=false;this.expanded=false;this.composition="top";this.icon=undefined;this.ignoreLayoutSettings=false;this.isMobile=false;this.expandIcon="";this.showContent=false;this.minimizeIcon="";this.floating=false;this.parentWidthPx=0;this.parentHeightPx=0}get currentSlot(){return this.hostElement.getAttribute("slot")}get isBottomTopPane(){return this.composition==="bottom"||this.composition==="top"}get isLeftRightPane(){return this.composition==="left"||this.composition==="right"}get isMobileTop(){return this.composition==="top"||this.composition==="left"}componentWillLoad(){this.setIcons();this.floating=this.variant==="floating";if(this.expanded){this.onParentSizeChange()}this.isMobile=n("sm");r.onChange.on((()=>{this.isMobile=n("sm")}));this.setPosition(this.currentSlot);this.mutationObserver=new MutationObserver((t=>{t.forEach((t=>{if(t.type==="attributes"&&t.attributeName==="slot"){const e=this.currentSlot;const i=t.oldValue;if(e!==i){this.slotChanged.emit({slot:i,newSlot:e});this.setPosition(e)}}}))}));this.mutationObserver.observe(this.hostElement,{attributes:true,attributeOldValue:true});const t=this.hostElement.parentElement;this.resizeObserver=new ResizeObserver((t=>{this.parentWidthPx=t[0].borderBoxSize[0].inlineSize;this.parentHeightPx=t[0].borderBoxSize[0].blockSize}));if(t)this.resizeObserver.observe(t)}disconnectedCallback(){var t,e;(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}setPosition(t){if(this.validPositions.includes(t)){this.composition=t}}getExpandPaneSize(){let t;if(this.isBottomTopPane){if(this.size.includes("px")){const e=Math.round(this.parentHeightPx/2);const i=Number(this.size.replace("px",""));if(e&&e<i){t=`${e}px`}else{t=`${i}px`}}else{if(this.size==="50%"){t=`${Math.round(this.parentHeightPx/2)}px`}else{t=`${Math.round(this.parentHeightPx/3)}px`}}}else{if(this.size.includes("px")){const e=Math.round(this.parentWidthPx/2);const i=Number(this.size.replace("px",""));if(e&&e<i){t=`${e}px`}else{t=`${i}px`}}else{if(this.size==="50%"){t=`${Math.round(this.parentWidthPx/2)}px`}else{t=`${Math.round(this.parentWidthPx/3)}px`}}}return t}setIcons(){const{expandIcon:t,minimizeIcon:e}=this.getIconNames();this.expandIcon=t;this.minimizeIcon=e}getIconNames(){let t="";let e="";switch(this.composition){case"left":t=this.isMobile?"double-chevron-up":"double-chevron-left";e=this.isMobile?"double-chevron-down":"double-chevron-right";break;case"right":t=this.isMobile?"double-chevron-down":"double-chevron-right";e=this.isMobile?"double-chevron-up":"double-chevron-left";break;case"bottom":t="double-chevron-down";e="double-chevron-up";break;case"top":t="double-chevron-up";e="double-chevron-down";break}return{expandIcon:t,minimizeIcon:e}}getKey(){return(this.animationCounter++).toString()}animateVerticalFadeIn(t){let e=this.getKey();let i=o({targets:this.hostElement,duration:a.mediumTime,width:t,easing:"easeInOutSine",delay:0,begin:()=>{if(!this.expanded){this.showContent=false;this.animateVerticalPadding("0px")}else{this.animateVerticalPadding("8px")}},complete:()=>{if(this.expanded){this.showContent=true}this.animations.delete(e)}});this.animations.set(e,i)}animateHorizontalFadeIn(t){let e=this.getKey();let i=o({targets:this.hostElement,duration:a.mediumTime,height:t,easing:"easeInOutSine",delay:0,begin:()=>{if(!this.expanded){this.showContent=false;if(!this.isMobile)this.animateHorizontalPadding("0px")}else{if(!this.isMobile)this.animateHorizontalPadding("8px")}},complete:()=>{if(this.expanded){this.showContent=true}this.animations.delete(e)}});this.animations.set(e,i)}removePadding(){o({targets:this.hostElement.shadowRoot.querySelector("#title-div"),duration:0,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:0,delay:0})}animateHorizontalPadding(t,e=a.mediumTime){let i=this.getKey();let s=o({targets:this.hostElement.shadowRoot.querySelector("#title-div"),duration:e,paddingTop:t,paddingBottom:t,easing:"easeInOutSine",delay:0,complete:()=>{this.animations.delete(i)}});this.animations.set(i,s)}animateVerticalPadding(t,e=a.mediumTime){let i=this.getKey();let s=o({targets:this.hostElement.shadowRoot.querySelector("#title-div"),duration:e,paddingLeft:t,paddingRight:t,easing:"easeInOutSine",delay:0,complete:()=>{this.animations.delete(i)}});this.animations.set(i,s)}clearAnimations(){this.animations.forEach((t=>t.pause()));this.animations.clear();this.animationCounter=0}onMobileChange(){this.setIcons();this.hostElement.style.removeProperty("width");this.hostElement.style.removeProperty("height");this.hostElement.style.removeProperty("min-height");this.onParentSizeChange()}onPositionChange(){this.setIcons();this.hostElement.style.removeProperty("width");this.hostElement.style.removeProperty("height");this.onParentSizeChange()}onHideOnCollapseChange(t){this.onParentSizeChange();this.hideOnCollapseChanged.emit({slot:this.currentSlot,hideOnCollapse:t})}onVariantChange(t){this.floating=t==="floating";this.variantChanged.emit({slot:this.currentSlot,variant:t})}onBorderlessChange(t){this.borderlessChanged.emit({slot:this.currentSlot,borderless:t})}onExpandedChange(){this.onSizeChange();this.expandedChanged.emit({slot:this.currentSlot,expanded:this.expanded})}onParentSizeChange(){this.clearAnimations();this.removePadding();if(this.expanded){if(this.isMobile){this.hostElement.style.height="100%"}else{const t=this.getExpandPaneSize();if(this.isBottomTopPane){this.hostElement.style.height=t;this.animateHorizontalPadding("8px",0)}else{this.hostElement.style.width=t;this.animateVerticalPadding("8px",0)}}this.showContent=true}else{this.showContent=false;if(this.isMobile){this.hostElement.style.height=this.hideOnCollapse?"0":this.collapsedPaneMobile}else{if(this.isBottomTopPane){this.hostElement.style.height=this.hideOnCollapse?"0":this.collapsedPane}else{this.hostElement.style.width=this.hideOnCollapse?"0":this.collapsedPane}}}}onSizeChange(){if(this.expanded){if(this.isMobile){this.hostElement.style.minHeight=this.hideOnCollapse?"0":this.collapsedPaneMobile;this.animateHorizontalFadeIn("100%")}else{const t=this.getExpandPaneSize();if(this.isBottomTopPane){this.hostElement.style.height=this.hideOnCollapse?"0":this.collapsedPane;this.animateHorizontalFadeIn(t)}else{this.hostElement.style.width=this.hideOnCollapse?"0":this.collapsedPane;this.animateVerticalFadeIn(t)}}}else{this.showContent=false;if(this.isMobile){this.hostElement.style.height=this.collapsedPaneMobile}else{if(this.isBottomTopPane){this.animateHorizontalFadeIn(this.collapsedPane)}else{this.animateVerticalFadeIn(this.collapsedPane)}}}}render(){return i(s,{key:"10c2543fa3814a44f4a696b768070da6a0b2ce83",class:{"inline-color":!this.floating,"mobile-overlay":this.expanded&&this.isMobile,"top-expanded":this.expanded&&this.isMobileTop&&this.isMobile,"bottom-expanded":this.expanded&&!this.isMobileTop&&this.isMobile,"top-bottom-pane":this.isBottomTopPane&&!this.isMobile,"left-right-pane":this.isLeftRightPane&&!this.isMobile,[`${this.composition}-pane-border`]:!this.borderless&&!this.isMobile&&!this.floating,"nav-left-border":!this.borderless&&!this.isMobile&&this.composition!=="right"&&this.floating,"mobile-border-top":!this.borderless&&this.isMobileTop&&this.isMobile&&!this.expanded&&!this.floating,"mobile-border-bottom":!this.borderless&&!this.isMobileTop&&this.isMobile&&!this.expanded&&!this.floating,"box-shadow":this.floating,"aria-expanded":this.expanded,"not-visible":this.hideOnCollapse&&!this.expanded}},i("aside",{key:"4bea08d18307f21ca3d71874117152c10acd9ce9",class:{"top-bottom-pane":this.isBottomTopPane&&!this.isMobile,"left-right-pane":this.isLeftRightPane&&!this.isMobile,"mobile-pane":this.isMobile,expanded:this.expanded}},i("div",{key:"b86bd206f53643fb15f411528dd9e41e1d060ef8",id:"title-div",class:{title:!this.isMobile&&!this.hideOnCollapse&&!this.showContent,"title-finished":!this.isMobile&&!this.hideOnCollapse&&this.showContent,"title-expanded":!this.isMobile&&!this.hideOnCollapse&&this.expanded,"title-hide-on-collapse":!this.isMobile&&this.hideOnCollapse,"title-mobile":this.isMobile,"header-gap":!this.isMobile&&!this.hideOnCollapse}},i("ix-icon-button",{key:"4f58db9432c7685521d7a60257fff08118bc3c76",class:"title-icon",size:"24",icon:this.expanded?this.isMobile||this.hideOnCollapse?"close":this.expandIcon:this.minimizeIcon,ghost:true,onClick:()=>{this.expanded=!this.expanded},"aria-controls":this.composition+"ToggleButton"}),i("span",{key:"bd88452cdede62871391416c736ff80ae29f14a0",class:{"title-text":true,rotate:!this.expanded&&!this.isMobile&&this.isLeftRightPane}},this.icon?i("ix-icon",{size:"24",name:this.icon}):null,i("div",{key:"6e49c2b280c258209dd43aa03658ab4bbcb9b883",class:"title-text-overflow"},i("ix-typography",{key:"65fa43f3fec84b63d24d14b38434eea186aa0910",format:"h4"},this.heading)))),i("div",{key:"11a5da6825a09b85f4957854179264c43ccd8a6f",class:"side-pane-content",hidden:!this.showContent},i("slot",{key:"3c986fb71f77e5481ffd6449445b4247429ff07e"}))))}get hostElement(){return h(this)}static get watchers(){return{isMobile:["onMobileChange"],composition:["onPositionChange"],hideOnCollapse:["onHideOnCollapseChange"],variant:["onVariantChange"],borderless:["onBorderlessChange"],expanded:["onExpandedChange"],parentHeightPx:["onParentSizeChange"],parentWidthPx:["onParentSizeChange"],size:["onSizeChange"]}}};p.style=d;export{p as ix_pane};
+//# sourceMappingURL=p-c33cee36.entry.js.map

package/dist/siemens-ix/{p-bc49e7ff.entry.js → p-d03df401.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as o,H as t,g as r}from"./p-ac552df3.js";const a="label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover,input:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus,input:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover,textarea:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus,textarea:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}:host{display:contents}";const n=a;const i=class{constructor(o){e(this,o);this.label=undefined}get inputElement(){return this.hostElement.querySelector("input")}componentWillLoad(){}render(){return o(t,{key:"e1313ac6762c322974a1a69f030c18e91c63d958"},this.label?o("label",{htmlFor:this.inputElement.id},this.label):null,o("slot",{key:"fbbe9a9eefffdce4b888d3dfb3ec80b1e6c8111d"}))}get hostElement(){return r(this)}};i.style=n;export{i as ix_form_field};
-//# sourceMappingURL=p-bc49e7ff.entry.js.map
+import{r as e,h as o,H as t,g as r}from"./p-f87cd962.js";const a="label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover,input:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus,input:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover,textarea:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus,textarea:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}:host{display:contents}";const n=a;const i=class{constructor(o){e(this,o);this.label=undefined}get inputElement(){return this.hostElement.querySelector("input")}componentWillLoad(){}render(){return o(t,{key:"34305cf7e6ee023ae323d2c1b13248bb08f50001"},this.label?o("label",{htmlFor:this.inputElement.id},this.label):null,o("slot",{key:"7d9937b61fd5f5aa4711a7551c0665a1f048bb47"}))}get hostElement(){return r(this)}};i.style=n;export{i as ix_form_field};
+//# sourceMappingURL=p-d03df401.entry.js.map

package/dist/siemens-ix/{p-dddd4a76.entry.js → p-d14024d3.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as a,H as s}from"./p-ac552df3.js";const i=":host{display:flex;flex-direction:row;align-items:flex-start;padding:0px}:host .titleGroup{display:flex;flex-direction:column;flex:1 1 0%}:host .subtitle{margin-top:0.5rem}:host .backButton{margin-right:0.5rem}:host .buttons{flex:0 0 auto}";const c=i;const o=class{constructor(a){t(this,a);this.backButtonClick=e(this,"backButtonClick",7);this.variant="primary";this.headerTitle=undefined;this.headerSubtitle=undefined;this.hasBackButton=false}render(){return a(s,{key:"eae27014039b16c023892b60cc904609e55b89ad"},this.hasBackButton?a("ix-icon-button",{class:"backButton",variant:"primary",icon:"arrow-left",ghost:true,onClick:()=>this.backButtonClick.emit()}):null,a("div",{key:"397be2503715bb15d260bcfada2260a8eb72e33b",class:"titleGroup"},a("ix-typography",{key:"5d08e001eb5178aaf4b089a4faa15bc759a43b6b",variant:this.variant==="secondary"?"large-single":"h2"},this.headerTitle),this.headerSubtitle!==undefined?a("ix-typography",{variant:"caption",color:"soft",class:"subtitle"},this.headerSubtitle):null),a("div",{key:"6c6cc165c96307a6ee2c2bec59a80d6cd62a02cf",class:"buttons"},a("slot",{key:"0ac3730bb5ec852b127554e8dbdd73970204e275"})))}};o.style=c;export{o as ix_content_header};
-//# sourceMappingURL=p-dddd4a76.entry.js.map
+import{r as t,c as e,h as a,H as s}from"./p-f87cd962.js";const i=":host{display:flex;flex-direction:row;align-items:flex-start;padding:0px}:host .titleGroup{display:flex;flex-direction:column;flex:1 1 0%}:host .subtitle{margin-top:0.5rem}:host .backButton{margin-right:0.5rem}:host .buttons{flex:0 0 auto}";const c=i;const o=class{constructor(a){t(this,a);this.backButtonClick=e(this,"backButtonClick",7);this.variant="primary";this.headerTitle=undefined;this.headerSubtitle=undefined;this.hasBackButton=false}render(){return a(s,{key:"eae27014039b16c023892b60cc904609e55b89ad"},this.hasBackButton?a("ix-icon-button",{class:"backButton",variant:"primary",icon:"arrow-left",ghost:true,onClick:()=>this.backButtonClick.emit()}):null,a("div",{key:"397be2503715bb15d260bcfada2260a8eb72e33b",class:"titleGroup"},a("ix-typography",{key:"5d08e001eb5178aaf4b089a4faa15bc759a43b6b",variant:this.variant==="secondary"?"large-single":"h2"},this.headerTitle),this.headerSubtitle!==undefined?a("ix-typography",{variant:"caption",color:"soft",class:"subtitle"},this.headerSubtitle):null),a("div",{key:"6c6cc165c96307a6ee2c2bec59a80d6cd62a02cf",class:"buttons"},a("slot",{key:"0ac3730bb5ec852b127554e8dbdd73970204e275"})))}};o.style=c;export{o as ix_content_header};
+//# sourceMappingURL=p-d14024d3.entry.js.map

package/dist/siemens-ix/{p-822fcb6c.entry.js → p-d1f49940.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as o,H as r,g as e}from"./p-ac552df3.js";const i=":host{display:inline-block;position:relative;height:2rem;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto;min-width:0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-button .dropdown-icon{margin-right:0.25rem}:host .triangle{position:absolute;margin-inline-start:1.5625rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary.ghost{color:var(--theme-btn-invisible-primary--color)}:host .triangle.primary.outline{color:var(--theme-btn-outline-primary--color)}:host .triangle.primary.ghost.disabled{color:var(--theme-btn-invisible-primary--color--disabled)}:host .triangle.primary.outline.disabled{color:var(--theme-btn-outline-primary--color--disabled)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.ghost{color:var(--theme-btn-invisible-secondary--color)}:host .triangle.secondary.outline{color:var(--theme-btn-outline-secondary--color)}:host .triangle.secondary.ghost.disabled{color:var(--theme-btn-invisible-secondary--color--disabled)}:host .triangle.secondary.outline.disabled{color:var(--theme-btn-outline-secondary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .content{display:flex;align-items:center}:host(.disabled){pointer-events:none}";const s=i;const a=class{constructor(o){t(this,o);this.variant="primary";this.outline=false;this.ghost=false;this.disabled=false;this.label=undefined;this.icon=undefined;this.closeBehavior="both";this.placement=undefined;this.dropdownAnchor=undefined}getTriangle(){return o("div",{class:{triangle:true,hide:this.label!=="",primary:this.variant==="primary",secondary:this.variant==="secondary",ghost:this.ghost,outline:this.outline,disabled:this.disabled}})}render(){return o(r,{key:"a5b2f4263b3f7431414302dc9a2e387f902c0558",class:{disabled:this.disabled},ref:t=>{this.dropdownAnchor=t}},o("div",{key:"ee2c7e56e653437c11ddb0100be4fbbd87a768e3",class:"dropdown-button"},this.label?o("ix-button",{variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled,alignment:"start"},o("div",{class:"content"},this.icon?o("ix-icon",{name:this.icon,size:"24",class:"dropdown-icon"}):null,o("div",{class:"button-label"},this.label),o("ix-icon",{name:"chevron-down-small",size:"24"}))):o("div",null,o("ix-icon-button",{icon:this.icon,variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled}),this.getTriangle())),o("ix-dropdown",{key:"49de3d2d4cc2c4cea66247daa99c6d6c81f34962",class:"dropdown",trigger:this.dropdownAnchor,placement:this.placement,closeBehavior:this.closeBehavior},o("slot",{key:"6d5420cff93937a002dd17cbe31cf68d39002a3e"})))}get hostElement(){return e(this)}};a.style=s;export{a as ix_dropdown_button};
-//# sourceMappingURL=p-822fcb6c.entry.js.map
+import{r as t,h as o,H as r,g as e}from"./p-f87cd962.js";const i=":host{display:inline-block;position:relative;height:2rem;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto;min-width:0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-button .dropdown-icon{margin-right:0.25rem}:host .triangle{position:absolute;margin-inline-start:1.5625rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary.ghost{color:var(--theme-btn-invisible-primary--color)}:host .triangle.primary.outline{color:var(--theme-btn-outline-primary--color)}:host .triangle.primary.ghost.disabled{color:var(--theme-btn-invisible-primary--color--disabled)}:host .triangle.primary.outline.disabled{color:var(--theme-btn-outline-primary--color--disabled)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.ghost{color:var(--theme-btn-invisible-secondary--color)}:host .triangle.secondary.outline{color:var(--theme-btn-outline-secondary--color)}:host .triangle.secondary.ghost.disabled{color:var(--theme-btn-invisible-secondary--color--disabled)}:host .triangle.secondary.outline.disabled{color:var(--theme-btn-outline-secondary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .content{display:flex;align-items:center}:host(.disabled){pointer-events:none}";const s=i;const a=class{constructor(o){t(this,o);this.variant="primary";this.outline=false;this.ghost=false;this.disabled=false;this.label=undefined;this.icon=undefined;this.closeBehavior="both";this.placement=undefined;this.dropdownAnchor=undefined}getTriangle(){return o("div",{class:{triangle:true,hide:this.label!=="",primary:this.variant==="primary",secondary:this.variant==="secondary",ghost:this.ghost,outline:this.outline,disabled:this.disabled}})}render(){return o(r,{key:"8669f7d302b6009aa9ab9cadb3c86e4bbcc6330f",class:{disabled:this.disabled},ref:t=>{this.dropdownAnchor=t}},o("div",{key:"5561196cfa6584097b0395ca1d4bf61db522b5a8",class:"dropdown-button"},this.label?o("ix-button",{variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled,alignment:"start"},o("div",{class:"content"},this.icon?o("ix-icon",{name:this.icon,size:"24",class:"dropdown-icon"}):null,o("div",{class:"button-label"},this.label),o("ix-icon",{name:"chevron-down-small",size:"24"}))):o("div",null,o("ix-icon-button",{icon:this.icon,variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled}),this.getTriangle())),o("ix-dropdown",{key:"4b738dfff8c84360e1d561560c3b29ba21684de6",class:"dropdown",trigger:this.dropdownAnchor,placement:this.placement,closeBehavior:this.closeBehavior},o("slot",{key:"ad15df81aad664b12a3183b45e443b110d2b4393"})))}get hostElement(){return e(this)}};a.style=s;export{a as ix_dropdown_button};
+//# sourceMappingURL=p-d1f49940.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as o,H as r,g as i}from"./p-f87cd962.js";import{c as d}from"./p-e898862b.js";import{h as s}from"./p-712e0ee0.js";const a=":host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;max-width:19.75rem;border-color:var(--theme-group-item--border-color)}:host .group-header{height:4rem;min-height:4rem;max-height:4rem;border-radius:var(--theme-group--border-radius) var(--theme-group--border-radius) 0 0;display:flex;background-color:var(--theme-group-item--background);color:var(--theme-group-header--color);cursor:pointer}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover)}:host .group-header:not(.disabled):not(:disabled):hover.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):active,:host .group-header:not(.disabled):not(:disabled).active{background-color:var(--theme-group-item--background--active)}:host .group-header:not(.disabled):not(:disabled):active.selected,:host .group-header:not(.disabled):not(:disabled).active.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled):focus-visible{border:1px solid var(--theme-color-focus-bdr);border-radius:var(--theme-default-border-radius) var(--theme-default-border-radius) 0px 0px;outline:none}:host .group-header.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header.selected .group-header-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header .group-header-selection-indicator{background-color:var(--theme-color-input--focus)}:host .group-header .group-header-selection-indicator.group-header-selection-indicator-item-selected{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header-clickable{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}:host .group-header-selection-indicator{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}:host .group-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;flex-basis:0;padding:0.5rem;padding-left:0}:host .group-header-content .group-header-props-container{width:100%}:host .group-header-content .group-header-title{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}:host .group-header-content .group-header-title>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;padding-right:0}:host .group-header-content .group-subheader{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}:host .expand-icon{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}:host .btn-expand-header{margin:0.5rem;margin-inline-end:0.25rem;min-width:1.5rem}:host .group-content{display:flex;flex-direction:column;gap:1px;margin-top:1px}:host .footer{visibility:collapse;height:auto;min-height:0}:host .footer-visible{visibility:visible}:host .hidden{display:none}";const h=a;const n=class{constructor(o){e(this,o);this.selectGroup=t(this,"selectGroup",7);this.selectItem=t(this,"selectItem",7);this.collapsedChanged=t(this,"collapsedChanged",7);this.observer=null;this.suppressHeaderSelection=false;this.header=undefined;this.subHeader=undefined;this.collapsed=true;this.selected=false;this.index=undefined;this.expandOnHeaderClick=false;this.itemSelected=false;this.slotSize=this.groupItems.length;this.footerVisible=false;this.showExpandCollapsedIcon=false}get dropdownItems(){return Array.from(this.hostElement.querySelectorAll("ix-group-dropdown-item"))}get groupItems(){return Array.from(this.hostElement.querySelectorAll("ix-group-item:not(.footer)"))}get groupContent(){var e;return(e=this.hostElement.shadowRoot)===null||e===void 0?void 0:e.querySelector(".group-content")}onExpandClick(e){this.collapsed=!this.collapsed;this.collapsedChanged.emit(this.collapsed);e.stopPropagation()}onHeaderClick(e){this.setGroupSelection(!this.selected);if(this.suppressHeaderSelection){this.onExpandClick(e)}}onItemClick(e){const t=e===this.index?undefined:e;this.selectItem.emit(t);this.index=t;if(this.index!==undefined&&this.index>=0){this.itemSelected=true}else this.itemSelected=false;this.setGroupSelection(false)}setGroupSelection(e){if(!this.suppressHeaderSelection){this.selected=e;this.selectGroup.emit(this.selected)}}onSlotChange(){var e;const t=(e=this.hostElement.shadowRoot)===null||e===void 0?void 0:e.querySelector('slot[name="footer"]');if(t){this.footerVisible=s(t)}}componentWillRender(){this.groupItems.forEach(((e,t)=>{if(this.selected===true){e.selected=false;this.index=undefined;this.itemSelected=false;return}e.selected=t===this.index;e.index=t}))}componentDidLoad(){var e;this.observer=d((()=>{this.slotSize=this.groupItems.length}));if(!this.groupContent){return}this.observer.observe(this.groupContent,{childList:true});(e=this.groupContent)===null||e===void 0?void 0:e.addEventListener("selectedChanged",(e=>{if(e.detail.suppressSelection){e.stopPropagation();return}this.onItemClick(e.detail.index)}))}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){return o(r,{key:"8153fe3f0c5fd78f733287dacb9fb5cfd23e624c"},o("div",{key:"109139ea65795878ffd08e539ef5a59ade8c05ba",class:{"group-header":true,expand:!this.collapsed,selected:this.selected},tabindex:"0"},o("div",{key:"262c00872bbfb8958de008e6a5d9f847a6121777",class:"group-header-clickable",onClick:e=>this.onHeaderClick(e)},o("div",{key:"c64dc6333e5b8cd876d5dac4ed294885fa9d97db",class:{"group-header-selection-indicator":true,"group-header-selection-indicator-item-selected":this.itemSelected}}),o("div",{key:"b295acc0552867f1d97803cf7ffa2fcdafe30931",class:"btn-expand-header"},o("ix-icon",{key:"d0b798aa02a970d77d1636ff38677f2b5777dc0b","data-testid":"expand-collapsed-icon",class:{hidden:!this.showExpandCollapsedIcon},name:this.collapsed?"chevron-right-small":"chevron-down-small",onClick:e=>this.onExpandClick(e)})),o("div",{key:"fa7a41f9e379ec4972d1c3db364f0ab82e57a0b5",class:"group-header-content"},this.header?o("div",{class:"group-header-props-container"},o("div",{class:"group-header-title"},o("span",{title:this.header},this.header)),o("div",{class:"group-subheader",title:this.subHeader},this.subHeader)):null,o("slot",{key:"4caba82a4558a06a999723d52dd05ed1c19c772b",name:"header"}))),o("ix-group-context-menu",{key:"ca29c2ff305e9a0ba11299771cdb27c509cf887c"},o("slot",{key:"dfd21416520cac904b790be7fceb0f02f8ef630d",name:"dropdown"}))),o("div",{key:"07470786706f46bd197ea7ff9ce6b0b97d8b114a",class:{"group-content":true}},o("div",{key:"f9ec75f57035ff5583dd728d34907139f7d787f5",style:{display:this.collapsed?"none":"contents"}},o("slot",{key:"bc86c0d2b2cc896e350c61aeb98896979ffb3647",onSlotchange:()=>{var e;const t=(e=this.hostElement.shadowRoot)===null||e===void 0?void 0:e.querySelector("slot:not([name])");this.showExpandCollapsedIcon=s(t)}}),o("ix-group-item",{key:"ad82143a05418d19517e06205452ed1db0367258",suppressSelection:true,focusable:false,class:{footer:true,"footer-visible":this.footerVisible}},o("slot",{key:"e4aec4e664f7f4479e9be7d90bec9ea19c1b8677",name:"footer",onSlotchange:()=>this.onSlotChange()})))))}get hostElement(){return i(this)}};n.style=h;export{n as ix_group};
+//# sourceMappingURL=p-d331216f.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["groupCss","IxGroupStyle0","Group","this","observer","groupItems","length","dropdownItems","Array","from","hostElement","querySelectorAll","groupContent","_a","shadowRoot","querySelector","onExpandClick","event","collapsed","collapsedChanged","emit","stopPropagation","onHeaderClick","setGroupSelection","selected","suppressHeaderSelection","onItemClick","index","newIndex","undefined","selectItem","itemSelected","selection","selectGroup","onSlotChange","slot","footerVisible","hasSlottedElements","componentWillRender","forEach","item","componentDidLoad","createMutationObserver","slotSize","observe","childList","addEventListener","evt","detail","suppressSelection","disconnectedCallback","disconnect","render","h","Host","key","class","expand","tabindex","onClick","e","hidden","showExpandCollapsedIcon","name","header","title","subHeader","style","display","onSlotchange","focusable","footer"],"sources":["src/components/group/group.scss?tag=ix-group&encapsulation=shadow","src/components/group/group.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 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ellipsis;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-width: 19.75rem;\n  border-color: var(--theme-group-item--border-color);\n\n  .group-header {\n    height: 4rem;\n    min-height: 4rem;\n    max-height: 4rem;\n    border-radius: var(--theme-group--border-radius)\n      var(--theme-group--border-radius) 0 0;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    color: var(--theme-group-header--color);\n\n    cursor: pointer;\n\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include focus-visible {\n      border: 1px solid var(--theme-color-focus-bdr);\n      border-radius: var(--theme-default-border-radius)\n        var(--theme-default-border-radius) 0px 0px;\n      outline: none;\n    }\n\n    &.selected {\n      background-color: var(--theme-group-item--background--selected);\n\n      .group-header-selection-indicator {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n\n      &.group-header-selection-indicator-item-selected {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n  }\n\n  .group-header-clickable {\n    @include ellipsis;\n\n    display: flex;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\n    border-top-left-radius: var(--theme-group--border-radius);\n  }\n\n  .group-header-content {\n    @include ellipsis;\n\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 0;\n    flex-grow: 1;\n    flex-basis: 0;\n    padding: 0.5rem;\n    padding-left: 0;\n\n    .group-header-props-container {\n      width: 100%;\n    }\n\n    .group-header-title {\n      display: flex;\n      align-items: center;\n      font-size: 1rem;\n      font-weight: $font-weight-bold;\n      height: 1.5rem;\n\n      & > * {\n        @include ellipsis;\n\n        min-width: 0;\n        padding-right: 0;\n      }\n    }\n\n    .group-subheader {\n      @include ellipsis();\n\n      height: 1.25rem;\n      font-size: 0.875rem;\n      color: var(--theme-group-subheader--color);\n    }\n  }\n\n  .expand-icon {\n    padding: 0.125rem 0.437rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .btn-expand-header {\n    margin: $small-space;\n    margin-inline-end: $tiny-space;\n    min-width: 1.5rem;\n  }\n\n  .group-content {\n    display: flex;\n    flex-direction: column;\n    gap: 1px;\n    margin-top: 1px;\n  }\n\n  .footer {\n    visibility: collapse;\n    height: auto;\n    min-height: 0;\n  }\n\n  .footer-visible {\n    visibility: visible;\n  }\n\n  .hidden {\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  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  shadow: true,\n})\nexport class Group {\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header?: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader?: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index?: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup!: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem!: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged!: EventEmitter<boolean>;\n\n  @State() itemSelected = false;\n  @State() slotSize = this.groupItems.length;\n  @State() footerVisible = false;\n\n  @State() showExpandCollapsedIcon = false;\n\n  private observer: MutationObserver = null!;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.shadowRoot?.querySelector('.group-content');\n  }\n\n  private onExpandClick(event: Event) {\n    this.collapsed = !this.collapsed;\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index?: number) {\n    const newIndex = index === this.index ? undefined : index;\n    this.selectItem.emit(newIndex);\n\n    this.index = newIndex;\n\n    if (this.index !== undefined && this.index >= 0) {\n      this.itemSelected = true;\n    } else this.itemSelected = false;\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  private onSlotChange() {\n    const slot = this.hostElement.shadowRoot?.querySelector(\n      'slot[name=\"footer\"]'\n    );\n\n    if (slot) {\n      this.footerVisible = hasSlottedElements(slot);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      if (this.selected === true) {\n        item.selected = false;\n        this.index = undefined;\n        this.itemSelected = false;\n        return;\n      }\n      item.selected = index === this.index;\n      item.index = index;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n\n    if (!this.groupContent) {\n      return;\n    }\n\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent?.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        if (evt.detail.suppressSelection) {\n          evt.stopPropagation();\n          return;\n        }\n\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                data-testid=\"expand-collapsed-icon\"\n                class={{\n                  hidden: !this.showExpandCollapsedIcon,\n                }}\n                name={\n                  this.collapsed ? 'chevron-right-small' : 'chevron-down-small'\n                }\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n          }}\n        >\n          <div\n            style={{\n              display: this.collapsed ? 'none' : 'contents',\n            }}\n          >\n            <slot\n              onSlotchange={() => {\n                const slot =\n                  this.hostElement.shadowRoot?.querySelector(\n                    'slot:not([name])'\n                  );\n                this.showExpandCollapsedIcon = hasSlottedElements(slot);\n              }}\n            ></slot>\n            <ix-group-item\n              suppressSelection={true}\n              focusable={false}\n              class={{\n                footer: true,\n                'footer-visible': this.footerVisible,\n              }}\n            >\n              <slot\n                name=\"footer\"\n                onSlotchange={() => this.onSlotChange()}\n              ></slot>\n            </ix-group-item>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as i,g as s}from"./p-f87cd962.js";import{c as o,s as r,o as n,b as a,f as c,a as l}from"./p-b3f35666.js";import{O as h}from"./p-0c8a98cd.js";class d{constructor(){this.overlays=new Set}connected(t){this.overlays.add(t)}disconnected(t){this.overlays.delete(t)}present(t){if(t.willPresent&&!t.willPresent()){return}this.dismissOthers(t);t.present()}dismiss(t){if(t.willDismiss&&!t.willDismiss()){return}t.dismiss()}dismissOthers(t){this.overlays.forEach((e=>{if(e!==t){this.dismiss(e)}}))}}class f extends d{}const u=new f;const p=':host{display:inline-block;position:fixed;left:0px;top:0px;z-index:var(--theme-z-index-tooltip);max-width:18.25rem;opacity:0;visibility:collapse !important;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible !important}:host(.visible) .arrow,:host(.visible) .arrow::before{position:absolute;width:12px;height:12px;background:inherit}:host(.visible) .arrow{visibility:hidden}:host(.visible) .arrow::before{visibility:visible;content:"";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}';const m=p;var b=undefined&&undefined.__decorate||function(t,e,i,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,i):s,n;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)if(n=t[a])r=(o<3?n(r):o>3?n(e,i,r):n(e,i))||r;return o>3&&r&&Object.defineProperty(e,i,r),r};const y=t=>t!=null?`${t}px`:"";const v=class{constructor(e){t(this,e);this.for=undefined;this.titleContent=undefined;this.interactive=false;this.placement="top";this.showDelay=0;this.hideDelay=50;this.animationFrame=false;this.visible=false}get arrowElement(){return this.hostElement.shadowRoot.querySelector(".arrow")}destroyAutoUpdate(){if(this.disposeAutoUpdate!==undefined){this.disposeAutoUpdate()}}async showTooltip(t){clearTimeout(this.hideTooltipTimeout);await this.applyTooltipPosition(t);this.showTooltipTimeout=setTimeout((()=>{u.present(this);this.applyTooltipPosition(t)}),this.showDelay)}async hideTooltip(){clearTimeout(this.showTooltipTimeout);let t=50;if(this.interactive&&this.hideDelay===t){t=150}this.hideTooltipTimeout=setTimeout((()=>{u.dismiss(this)}),t);this.destroyAutoUpdate()}computeArrowPosition({placement:t,middlewareData:e}){let{x:i,y:s}=e.arrow;if(t.startsWith("top")){return{left:y(i),top:y(s)}}if(t.startsWith("right")){return{left:y(-6),top:y(s)}}if(t.startsWith("bottom")){return{left:y(i),top:y(-6)}}if(t.startsWith("left")){return{right:y(-6),top:y(s)}}}async computeTooltipPosition(t){return o(t,this.hostElement,{strategy:"fixed",placement:this.placement,middleware:[r(),n(12),a({element:this.arrowElement}),c({fallbackStrategy:"initialPlacement",padding:10})]})}applyTooltipArrowPosition(t){const e=this.computeArrowPosition(t);Object.assign(this.arrowElement.style,e)}async applyTooltipPosition(t){if(!t){return}return new Promise((e=>{this.destroyAutoUpdate();this.disposeAutoUpdate=l(t,this.hostElement,(async()=>{setTimeout((async()=>{const i=await this.computeTooltipPosition(t);if(i.middlewareData.arrow){this.applyTooltipArrowPosition(i)}const{x:s,y:o}=i;Object.assign(this.hostElement.style,{left:s!==null?`${s}px`:"",top:o!==null?`${o}px`:""});e(i)}))}),{ancestorResize:true,ancestorScroll:true,elementResize:true,animationFrame:this.animationFrame})}))}clearHideTimeout(){if(this.interactive){clearTimeout(this.hideTooltipTimeout)}}async queryAnchorElements(){if(typeof this.for==="string"){return Promise.resolve(Array.from(document.querySelectorAll(this.for)))}if(this.for instanceof HTMLElement){return Promise.resolve([this.for])}if(this.for instanceof Promise){const t=await this.for;return[t]}}async registerTriggerListener(){const t=await this.queryAnchorElements();if(this.disposeListener){this.disposeListener()}if(!t){return}t.forEach((t=>{const e=()=>{this.showTooltip(t)};const i=()=>{this.hideTooltip()};const s=()=>{if(this.showTooltipTimeout!==undefined){clearTimeout(this.showTooltipTimeout)}e()};const o=()=>{this.hideTooltip()};t.addEventListener("mouseenter",e);t.addEventListener("mouseleave",i);t.addEventListener("focusin",s);t.addEventListener("focusout",o);this.disposeListener=()=>{t.removeEventListener("mouseenter",e);t.removeEventListener("mouseleave",i);t.removeEventListener("focusin",s);t.removeEventListener("focusout",o)}}))}registerTooltipListener(){const{hostElement:t}=this;t.addEventListener("mouseenter",(()=>this.clearHideTimeout()));t.addEventListener("focusin",(()=>this.clearHideTimeout()));t.addEventListener("mouseleave",(()=>this.hideTooltip()));t.addEventListener("focusout",(()=>this.hideTooltip()))}async onKeydown(t){if(t.code==="Escape"){this.hideTooltip()}}componentWillLoad(){this.registerTriggerListener()}componentDidLoad(){this.observer=new MutationObserver((()=>{this.registerTriggerListener()}));this.observer.observe(document.body,{attributes:true,attributeFilter:["data-ix-tooltip"],childList:true,subtree:true});this.registerTooltipListener()}connectedCallback(){u.connected(this)}disconnectedCallback(){var t;(t=this.observer)===null||t===void 0?void 0:t.disconnect();this.destroyAutoUpdate();u.disconnected(this)}isPresent(){return this.visible}present(){this.visible=true}dismiss(){this.visible=false}render(){return e(i,{key:"5d57bd50e4b54e59eef7e0ec463cf9cadba6ddc4",class:{visible:this.visible},role:"tooltip"},e("div",{key:"004a422b325b2c26639e479f3bc6a832277c38db",class:"tooltip-title"},e("slot",{key:"dfb6ebe4022d3835b11d7237438358e8dd27191d",name:"title-icon"}),e("ix-typography",{key:"e4230c3e9c28f53d217e8653fd972749af995dde",variant:"default-title"},this.titleContent,e("slot",{key:"bfd75a3ae808f03a552271a9f10c896de28072e2",name:"title-content"}))),e("div",{key:"b8c20ae1bb16343dca997ecb2ef744d8b18b6ede",class:"tooltip-content"},e("slot",{key:"cb15413ddd0b35a6ceb5dd95beebc855131fb998"})),e("div",{key:"91e9df64725d3ce40f280640374f0e95f89cf67b",class:"arrow"}))}get hostElement(){return s(this)}};b([h("keydown",(t=>t.visible))],v.prototype,"onKeydown",null);v.style=m;export{v as ix_tooltip};
+//# sourceMappingURL=p-d8790ff5.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["OverlayController","constructor","this","overlays","Set","connected","instance","add","disconnected","delete","present","willPresent","dismissOthers","dismiss","willDismiss","forEach","overlay","TooltipController","tooltipController","tooltipCss","IxTooltipStyle0","numberToPixel","value","Tooltip","arrowElement","hostElement","shadowRoot","querySelector","destroyAutoUpdate","disposeAutoUpdate","undefined","showTooltip","anchorElement","clearTimeout","hideTooltipTimeout","applyTooltipPosition","showTooltipTimeout","setTimeout","showDelay","hideTooltip","hideDelay","interactive","computeArrowPosition","placement","middlewareData","x","y","arrow","startsWith","left","top","right","computeTooltipPosition","target","computePosition","strategy","middleware","shift","offset","element","flip","fallbackStrategy","padding","applyTooltipArrowPosition","computeResponse","arrowPosition","Object","assign","style","Promise","resolve","autoUpdate","async","ancestorResize","ancestorScroll","elementResize","animationFrame","clearHideTimeout","queryAnchorElements","for","Array","from","document","querySelectorAll","HTMLElement","registerTriggerListener","triggerElementList","disposeListener","onMouseEnter","onMouseLeave","onFocusIn","onFocusOut","addEventListener","removeEventListener","registerTooltipListener","onKeydown","event","code","componentWillLoad","componentDidLoad","observer","MutationObserver","observe","body","attributes","attributeFilter","childList","subtree","connectedCallback","disconnectedCallback","_a","disconnect","isPresent","visible","render","h","Host","key","class","role","name","variant","titleContent","__decorate","OnListener","self"],"sources":["src/components/utils/overlay.ts","src/components/tooltip/tooltip-controller.ts","src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 */\nimport { IxComponent } from '../utils/internal';\n\nexport interface IxOverlayComponent extends IxComponent {\n  isPresent(): boolean;\n\n  willPresent?(): boolean;\n  willDismiss?(): boolean;\n\n  present(): void;\n  dismiss(): void;\n}\n\nexport class OverlayController {\n  overlays: Set<IxOverlayComponent> = new Set();\n\n  connected(instance: IxOverlayComponent): void {\n    this.overlays.add(instance);\n  }\n\n  disconnected(instance: IxOverlayComponent): void {\n    this.overlays.delete(instance);\n  }\n\n  present(instance: IxOverlayComponent): void {\n    if (instance.willPresent && !instance.willPresent()) {\n      return;\n    }\n    this.dismissOthers(instance);\n    instance.present();\n  }\n\n  dismiss(instance: IxOverlayComponent): void {\n    if (instance.willDismiss && !instance.willDismiss()) {\n      return;\n    }\n    instance.dismiss();\n  }\n\n  private dismissOthers(instance: IxOverlayComponent): void {\n    this.overlays.forEach((overlay) => {\n      if (overlay !== instance) {\n        this.dismiss(overlay);\n      }\n    });\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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 { OverlayController } from '../utils/overlay';\n\nclass TooltipController extends OverlayController {}\n\nexport const tooltipController = new TooltipController();\n",":host {\n  display: inline-block;\n  position: fixed;\n  left: 0px;\n  top: 0px;\n  z-index: var(--theme-z-index-tooltip);\n\n  max-width: 18.25rem;\n\n  opacity: 0;\n  visibility: collapse !important;\n  overflow-wrap: break-word;\n\n  border-radius: 0.25rem;\n  background-color: var(--theme-tootlip--background);\n  padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n  box-shadow: var(--theme-shadow-4);\n\n  .tooltip-title {\n    display: flex;\n    align-items: center;\n\n    ::slotted(ix-icon) {\n      margin-right: 0.35rem;\n    }\n  }\n}\n\n:host(.visible) {\n  opacity: 1;\n  visibility: visible !important;\n}\n\n:host(.visible) {\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 12px;\n    height: 12px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n    background-color: var(--theme-tootlip--background);\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 */\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { OnListener } from '../utils/listener';\nimport { tooltipController } from './tooltip-controller';\nimport { IxOverlayComponent } from '../utils/overlay';\n\ntype ArrowPosition = {\n  top?: string;\n  left?: string;\n  right?: string;\n};\n\nconst numberToPixel = (value: number) => (value != null ? `${value}px` : '');\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip implements IxOverlayComponent {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for?: string | HTMLElement | Promise<HTMLElement>;\n\n  /**\n   * Title of the tooltip\n   */\n  @Prop() titleContent?: string;\n\n  /**\n   * Define if the user can access the tooltip via mouse.\n   */\n  @Prop() interactive = false;\n\n  /**\n   * Initial placement of the tooltip. If the placement don\"t have enough space,\n   * the tooltip will placed on another location.\n   *\n   * @since 1.5.0\n   */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n  /** @internal */\n  @Prop() showDelay = 0;\n\n  /** @internal */\n  @Prop() hideDelay = 50;\n\n  /** @internal */\n  @Prop() animationFrame = false;\n\n  @State() visible = false;\n\n  @Element() hostElement!: HTMLIxTooltipElement;\n\n  private observer?: MutationObserver;\n  private hideTooltipTimeout?: NodeJS.Timeout;\n  private showTooltipTimeout?: NodeJS.Timeout;\n  private disposeAutoUpdate?: () => void;\n  private disposeListener?: () => void;\n\n  private get arrowElement(): HTMLElement {\n    return this.hostElement.shadowRoot.querySelector('.arrow');\n  }\n\n  private destroyAutoUpdate() {\n    if (this.disposeAutoUpdate !== undefined) {\n      this.disposeAutoUpdate();\n    }\n  }\n\n  /** @internal */\n  @Method()\n  async showTooltip(anchorElement: Element) {\n    clearTimeout(this.hideTooltipTimeout);\n    await this.applyTooltipPosition(anchorElement);\n\n    this.showTooltipTimeout = setTimeout(() => {\n      tooltipController.present(this);\n      // Need to compute and apply tooltip position after initial render,\n      // because arrow has no valid bounding rect before that\n      this.applyTooltipPosition(anchorElement);\n    }, this.showDelay);\n  }\n\n  /** @internal */\n  @Method()\n  async hideTooltip() {\n    clearTimeout(this.showTooltipTimeout);\n    let hideDelay = 50;\n\n    if (this.interactive && this.hideDelay === hideDelay) {\n      hideDelay = 150;\n    }\n\n    this.hideTooltipTimeout = setTimeout(() => {\n      tooltipController.dismiss(this);\n    }, hideDelay);\n    this.destroyAutoUpdate();\n  }\n\n  private computeArrowPosition({\n    placement,\n    middlewareData,\n  }: ComputePositionReturn): ArrowPosition {\n    let { x, y } = middlewareData.arrow;\n\n    if (placement.startsWith('top')) {\n      return {\n        left: numberToPixel(x),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('right')) {\n      return {\n        left: numberToPixel(-6),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('bottom')) {\n      return {\n        left: numberToPixel(x),\n        top: numberToPixel(-6),\n      };\n    }\n\n    if (placement.startsWith('left')) {\n      return {\n        right: numberToPixel(-6),\n        top: numberToPixel(y),\n      };\n    }\n  }\n\n  private async computeTooltipPosition(target: Element) {\n    return computePosition(target, this.hostElement, {\n      strategy: 'fixed',\n      placement: this.placement,\n      middleware: [\n        shift(),\n        offset(12),\n        arrow({\n          element: this.arrowElement,\n        }),\n        flip({\n          fallbackStrategy: 'initialPlacement',\n          padding: 10,\n        }),\n      ],\n    });\n  }\n\n  private applyTooltipArrowPosition(computeResponse: ComputePositionReturn) {\n    const arrowPosition = this.computeArrowPosition(computeResponse);\n    Object.assign(this.arrowElement.style, arrowPosition);\n  }\n\n  private async applyTooltipPosition(target: Element) {\n    if (!target) {\n      return;\n    }\n\n    return new Promise<ComputePositionReturn>((resolve) => {\n      this.destroyAutoUpdate();\n      this.disposeAutoUpdate = autoUpdate(\n        target,\n        this.hostElement,\n        async () => {\n          setTimeout(async () => {\n            const computeResponse = await this.computeTooltipPosition(target);\n\n            if (computeResponse.middlewareData.arrow) {\n              this.applyTooltipArrowPosition(computeResponse);\n            }\n\n            const { x, y } = computeResponse;\n            Object.assign(this.hostElement.style, {\n              left: x !== null ? `${x}px` : '',\n              top: y !== null ? `${y}px` : '',\n            });\n\n            resolve(computeResponse);\n          });\n        },\n        {\n          ancestorResize: true,\n          ancestorScroll: true,\n          elementResize: true,\n          animationFrame: this.animationFrame,\n        }\n      );\n    });\n  }\n\n  private clearHideTimeout() {\n    if (this.interactive) {\n      clearTimeout(this.hideTooltipTimeout);\n    }\n  }\n\n  private async queryAnchorElements(): Promise<Array<HTMLElement> | undefined> {\n    if (typeof this.for === 'string') {\n      return Promise.resolve(Array.from(document.querySelectorAll(this.for)));\n    }\n\n    if (this.for instanceof HTMLElement) {\n      return Promise.resolve([this.for]);\n    }\n\n    if (this.for instanceof Promise) {\n      const element = await this.for;\n      return [element];\n    }\n  }\n\n  private async registerTriggerListener() {\n    const triggerElementList = await this.queryAnchorElements();\n\n    if (this.disposeListener) {\n      this.disposeListener();\n    }\n\n    if (!triggerElementList) {\n      return;\n    }\n\n    triggerElementList.forEach((element) => {\n      const onMouseEnter = () => {\n        this.showTooltip(element);\n      };\n\n      const onMouseLeave = () => {\n        this.hideTooltip();\n      };\n\n      const onFocusIn = () => {\n        if (this.showTooltipTimeout !== undefined) {\n          clearTimeout(this.showTooltipTimeout);\n        }\n\n        onMouseEnter();\n      };\n\n      const onFocusOut = () => {\n        this.hideTooltip();\n      };\n\n      element.addEventListener('mouseenter', onMouseEnter);\n      element.addEventListener('mouseleave', onMouseLeave);\n      element.addEventListener('focusin', onFocusIn);\n      element.addEventListener('focusout', onFocusOut);\n\n      this.disposeListener = () => {\n        element.removeEventListener('mouseenter', onMouseEnter);\n        element.removeEventListener('mouseleave', onMouseLeave);\n        element.removeEventListener('focusin', onFocusIn);\n        element.removeEventListener('focusout', onFocusOut);\n      };\n    });\n  }\n\n  private registerTooltipListener() {\n    const { hostElement } = this;\n    hostElement.addEventListener('mouseenter', () => this.clearHideTimeout());\n    hostElement.addEventListener('focusin', () => this.clearHideTimeout());\n\n    hostElement.addEventListener('mouseleave', () => this.hideTooltip());\n    hostElement.addEventListener('focusout', () => this.hideTooltip());\n  }\n\n  @OnListener<Tooltip>('keydown', (self) => self.visible)\n  async onKeydown(event: KeyboardEvent) {\n    if (event.code === 'Escape') {\n      this.hideTooltip();\n    }\n  }\n\n  componentWillLoad() {\n    this.registerTriggerListener();\n  }\n\n  componentDidLoad() {\n    this.observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    this.observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.registerTooltipListener();\n  }\n\n  connectedCallback() {\n    tooltipController.connected(this);\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.destroyAutoUpdate();\n    tooltipController.disconnected(this);\n  }\n\n  isPresent(): boolean {\n    return this.visible;\n  }\n\n  present(): void {\n    this.visible = true;\n  }\n\n  dismiss(): void {\n    this.visible = false;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.visible,\n        }}\n        role=\"tooltip\"\n      >\n        <div class={'tooltip-title'}>\n          <slot name=\"title-icon\"></slot>\n          <ix-typography variant=\"default-title\">\n            {this.titleContent}\n            <slot name=\"title-content\"></slot>\n          </ix-typography>\n        </div>\n        <div class={'tooltip-content'}>\n          <slot></slot>\n        </div>\n        <div class=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as r,H as a,g as o}from"./p-f87cd962.js";import{b as i}from"./p-4f8ac3bf.js";import{O as s}from"./p-0c8a98cd.js";const n=':host{display:flex;flex-direction:column;min-height:2rem;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-color-8);--trace-color:var(--theme-color-dynamic);--tick-color:var(--theme-color-8);--tick-color--active:var(--theme-color-dynamic);--track-color:var(--theme-color-component-4);}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1rem;margin:0}:host input[type=range].trace::before{content:"";position:absolute;display:block;z-index:-1;width:calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));left:calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%)}:host input[type=range].trace:not(.hide-trace-reference)::after{content:"";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host .ticks{display:flex;position:relative;top:50%;transform:translateY(-50%)}:host .ticks .tick{display:block;position:absolute;width:8px;height:8px;background-color:var(--tick-color);border-radius:100px;top:50%;transform:translateY(-50%);left:calc(var(--tick-value) * 100% - 4px)}:host .ticks .tick.tick-active{background-color:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:calc(100% - 1rem);margin-left:0.5rem;top:50%;transform:translateY(-50%);left:0px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;left:0px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host .label-start{margin-left:0.5rem}:host .label-end{margin-right:0.5rem}:host .label-error{margin-left:0.5rem}:host(.error){--trace-color:var(--theme-color-alarm-40);--tick-color--active:var(--theme-color-alarm)}:host(.error) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-alarm)}:host(.error) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-alarm)}:host(.disabled){pointer-events:none;--track-color:var(--theme-color-component-3);--trace-color:var(--theme-color-3);--tick-color:var(--theme-color-7);--tick-color--active:var(--theme-color-7)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-7)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-7)}';const l=n;var c=undefined&&undefined.__decorate||function(t,e,r,a){var o=arguments.length,i=o<3?e:a===null?a=Object.getOwnPropertyDescriptor(e,r):a,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")i=Reflect.decorate(t,e,r,a);else for(var n=t.length-1;n>=0;n--)if(s=t[n])i=(o<3?s(i):o>3?s(e,r,i):s(e,r))||i;return o>3&&i&&Object.defineProperty(e,r,i),i};function h(t,e,r){if(e<t){return t}else if(e>r){return r}else{return e}}const d=class{constructor(r){t(this,r);this.valueChange=e(this,"valueChange",7);this.step=1;this.min=0;this.max=100;this.value=0;this.marker=undefined;this.trace=false;this.traceReference=0;this.disabled=false;this.error=undefined;this.rangeInput=0;this.rangeMin=0;this.rangeMax=100;this.rangeTraceReference=0;this.showTooltip=false}get tooltip(){var t;return(t=this.hostElement.shadowRoot)===null||t===void 0?void 0:t.querySelector("ix-tooltip")}get pseudoThumb(){var t;return(t=this.hostElement.shadowRoot)===null||t===void 0?void 0:t.querySelector(".thumb")}get slider(){var t;return(t=this.hostElement.shadowRoot)===null||t===void 0?void 0:t.getElementById("slider")}onShowTooltipChange(){var t,e;if(this.showTooltip){(t=this.tooltip)===null||t===void 0?void 0:t.showTooltip(this.pseudoThumb);return}(e=this.tooltip)===null||e===void 0?void 0:e.hideTooltip()}componentWillLoad(){this.a11yAttributes=i(this.hostElement,["role","aria-valuemin","aria-valuemax","aria-valuenow"]);this.updateRangeVariables()}updateRangeVariables(){this.rangeInput=h(this.min,this.value,this.max);this.rangeTraceReference=h(this.min,this.traceReference,this.max);this.rangeMin=Math.min(this.min,this.max);this.rangeMax=Math.max(this.min,this.max)}onInput(t){t.stopPropagation();const e=parseInt(this.slider.value);if(!isNaN(e)){this.rangeInput=e;this.emitInputEvent()}}emitInputEvent(){this.valueChange.emit(this.rangeInput)}isMarkerActive(t){const e=Math.min(this.traceReference,this.rangeInput);const r=Math.max(this.traceReference,this.rangeInput);const a=t;return a>=e&&a<=r}onPointerUp(){this.showTooltip=false}render(){const t=this.rangeMax-this.rangeMin;let e=(this.rangeTraceReference-this.rangeMin)/t;let o=(this.rangeInput-this.rangeMin)/t;const i=o-e;let s=e;let n=o;if(i<=0){s=o;n=e}return r(a,{key:"c7e6a14875ee17d49fe5e42459b81fb561802ebc",class:{disabled:this.disabled,error:!!this.error},onPointerDown:()=>setTimeout((()=>this.showTooltip=true))},r("div",{key:"bed770beec56a4798df1c0b8546fd78ef6c1f749",class:"slider"},r("div",{key:"b2337e7802806933356cc7930bcb5a0e025796b8",class:"track"},r("div",{key:"d5d40d3e44d50112733e5c9137b807e3a25dcafa",class:"thumb",style:{left:`calc(${o} * 100% - 8px)`}}),r("div",{key:"041f4368d4b80929a03abfbe617d8f5bb15957d0",class:"ticks"},this.marker?this.marker.map((e=>{if(e>this.max||e<this.min){return}let a=(e-this.rangeMin)/t;return r("div",{class:{tick:true,"tick-active":this.isMarkerActive(e)&&this.trace},style:{"--tick-value":`${a}`}})})):null)),r("input",Object.assign({key:"ef61a64f69ebc8816778dfd95dee2402b0ed9144",id:"slider",type:"range",list:this.marker?"markers":undefined,step:this.step,min:this.min,max:this.max,value:this.rangeInput,tabindex:this.disabled?-1:0,onInput:t=>this.onInput(t),style:{"--value":`${o}`,"--trace-reference":`${e}`,"--trace-start":`${s}`,"--trace-end":`${n}`},class:{trace:this.trace&&e!==o,"hide-trace-reference":this.trace&&(this.traceReference<=this.min||this.traceReference>=this.max)},onFocus:()=>{this.showTooltip=true},onBlur:()=>{this.showTooltip=false},role:"slider","aria-valuenow":this.rangeInput,"aria-valuemin":this.min,"aria-valuemax":this.max},this.a11yAttributes)),r("ix-tooltip",{key:"4dfe584376f3df426be2e049703adfb4c2bf39ab",class:{"hide-tooltip":!this.showTooltip},animationFrame:true},this.rangeInput)),r("div",{key:"9c42a9aa11e4c59c2fa9f0b132d6ac3a2b4f8f72",class:"label"},r("div",{key:"22ed6e4412f84449c68109dd5619054a65d8790f",class:"label-start"},r("slot",{key:"676a5d1b03b6a398bda253f01396c06ccb7cdb04",name:"label-start"})),r("div",{key:"7ec74b8f1f5a4a6e0eb4dd2b1bd8c32aa098f47c",class:"label-end"},r("slot",{key:"1a4b99aebbe60d9db5e4ed5c26907aecf2a38568",name:"label-end"}))),this.error?r("ix-typography",{class:"label-error",color:"alarm"},this.error):null)}get hostElement(){return o(this)}static get watchers(){return{showTooltip:["onShowTooltipChange"],value:["updateRangeVariables"],max:["updateRangeVariables"],min:["updateRangeVariables"],traceReference:["updateRangeVariables"]}}};c([s("pointerup",(t=>t.showTooltip))],d.prototype,"onPointerUp",null);d.style=l;export{d as ix_slider};
+//# sourceMappingURL=p-d950c3a8.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["sliderCss","IxSliderStyle0","between","min","value","max","Slider","tooltip","_a","this","hostElement","shadowRoot","querySelector","pseudoThumb","slider","getElementById","onShowTooltipChange","showTooltip","_b","hideTooltip","componentWillLoad","a11yAttributes","a11yHostAttributes","updateRangeVariables","rangeInput","rangeTraceReference","traceReference","rangeMin","Math","rangeMax","onInput","event","stopPropagation","parseInt","isNaN","emitInputEvent","valueChange","emit","isMarkerActive","markerValue","start","end","onPointerUp","render","range","traceReferenceInPercentage","valueInPercentage","distance","traceStart","traceEnd","h","Host","key","class","disabled","error","onPointerDown","setTimeout","style","left","marker","map","tick","trace","Object","assign","id","type","list","undefined","step","tabindex","onFocus","onBlur","role","animationFrame","name","color","__decorate","OnListener","self"],"sources":["src/components/slider/slider.scss?tag=ix-slider&encapsulation=shadow","src/components/slider/slider.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@import 'mixins/shadow-dom/component';\n\n@mixin track {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']::-webkit-slider-runnable-track {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']::-moz-range-track {\n    @content;\n  }\n}\n\n@mixin clear-browser-thumb {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range' i]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-top: -6px;\n  }\n\n  // Firefox\n  input[type='range' i]::-moz-range-thumb {\n    border: none;\n    border-radius: 0;\n  }\n}\n\n@mixin thumb {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-hover {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:hover::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:hover::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-active {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:active::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:active::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-focus {\n  input[type='range']:focus {\n    outline: none;\n  }\n\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:focus-visible::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:focus-visible::-moz-range-thumb {\n    @content;\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  min-height: 2rem;\n  --thumb-size: 1rem;\n  --value: 0;\n  --trace-start: 0;\n  --trace-end: 0;\n  --trace-reference: 0;\n  --trace-reference-color: var(--theme-color-8);\n  --trace-color: var(--theme-color-dynamic);\n  --tick-color: var(--theme-color-8);\n  --tick-color--active: var(--theme-color-dynamic);\n  --track-color: var(--theme-color-component-4);\n\n  input[type='range'] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0;\n    appearance: none;\n    background: transparent;\n    cursor: pointer;\n    width: 100%;\n    height: 1rem;\n    margin: 0;\n  }\n\n  // Trace line\n  input[type='range'].trace::before {\n    content: '';\n    position: absolute;\n    display: block;\n    z-index: -1;\n\n    width: calc(\n      calc(7px + calc(100% * var(--trace-end)) - calc(16px * var(--trace-end))) -\n        calc(\n          7px + calc(100% * var(--trace-start)) -\n            calc(16px * var(--trace-start))\n        )\n    );\n\n    left: calc(\n      7px + calc(100% * var(--trace-start)) - calc(16px * var(--trace-start))\n    );\n\n    height: 4px;\n    background-color: var(--trace-color);\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  // Trace reference\n  input[type='range'].trace:not(.hide-trace-reference)::after {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 2px;\n    height: 16px;\n    background-color: var(--trace-reference-color);\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(\n      7px + calc(100% * var(--trace-reference)) -\n        calc(16px * var(--trace-reference))\n    );\n  }\n\n  @include track() {\n    background: transparent;\n    height: 0.25rem;\n  }\n\n  @include clear-browser-thumb();\n\n  @include thumb() {\n    border-radius: 100px;\n    background-color: var(--theme-color-dynamic);\n    height: var(--thumb-size);\n    width: var(--thumb-size);\n    transition: all var(--theme-default-time) ease-in-out;\n    z-index: 10;\n  }\n\n  @include thumb-hover() {\n    transform: scale(1.2);\n    background-color: var(--theme-color-dynamic);\n  }\n\n  @include thumb-active() {\n    transform: scale(1.2);\n\n    background-color: var(--theme-color-dynamic);\n  }\n\n  @include thumb-focus() {\n    outline: 1px solid var(--theme-color-focus-bdr);\n    outline-offset: 0.125rem;\n  }\n\n  /* style datalist */\n  .ticks {\n    display: flex;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .ticks .tick {\n    display: block;\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background-color: var(--tick-color);\n    border-radius: 100px;\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(var(--tick-value) * 100% - 4px);\n  }\n\n  .ticks .tick.tick-active {\n    background-color: var(--tick-color--active);\n  }\n\n  .slider {\n    position: relative;\n    display: block;\n    width: 100%;\n    height: 1.5rem;\n  }\n\n  .track {\n    position: absolute;\n    background-color: var(--track-color);\n    height: 4px;\n    width: calc(100% - 1rem);\n    margin-left: 0.5rem;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0px;\n  }\n\n  .thumb {\n    display: block;\n    position: absolute;\n    background-color: transparent;\n    height: 1rem;\n    width: 1rem;\n    border-radius: 100px;\n    left: 0px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .hide-tooltip {\n    display: none;\n  }\n\n  .label {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    margin-top: 0.5rem;\n\n    min-height: 0px;\n  }\n\n  .label-start {\n    margin-left: 0.5rem;\n  }\n\n  .label-end {\n    margin-right: 0.5rem;\n  }\n\n  .label-error {\n    margin-left: 0.5rem;\n  }\n}\n\n:host(.error) {\n  --trace-color: var(--theme-color-alarm-40);\n  --tick-color--active: var(--theme-color-alarm);\n\n  @include thumb() {\n    background-color: var(--theme-color-alarm);\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  --track-color: var(--theme-color-component-3);\n  --trace-color: var(--theme-color-3);\n  --tick-color: var(--theme-color-7);\n  --tick-color--active: var(--theme-color-7);\n\n  @include thumb() {\n    background-color: var(--theme-color-7);\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  Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { OnListener } from '../utils/listener';\n\nexport type SliderMarker = Array<number>;\n\nfunction between(min: number, value: number, max: number) {\n  if (value < min) {\n    return min;\n  } else if (value > max) {\n    return max;\n  } else {\n    return value;\n  }\n}\n\n/**\n * @since 2.0.0\n *\n * @slot label-start - Element will be displayed at the start of the slider\n * @slot label-end - Element will be displayed at the end of the slider\n */\n@Component({\n  tag: 'ix-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class Slider {\n  @Element() hostElement!: HTMLIxSliderElement;\n\n  /**\n   * Legal number intervals\n   *\n   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * Minimum slider value\n   */\n  @Prop() min = 0;\n\n  /**\n   * Maximum slider value\n   */\n  @Prop() max = 100;\n\n  /**\n   * Current value of the slider\n   */\n  @Prop() value = 0;\n\n  /**\n   * Define tick marker on the slider. Marker has to be within slider min/max\n   */\n  @Prop() marker?: SliderMarker;\n\n  /**\n   * Show a trace line\n   */\n  @Prop() trace = false;\n\n  /**\n   * Define the start point of the trace line\n   */\n  @Prop() traceReference = 0;\n\n  /**\n   * Show control as disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Show error state and message\n   */\n  @Prop() error?: boolean | string;\n\n  /**\n   *\n   */\n  @Event() valueChange!: EventEmitter<number>;\n\n  @State() rangeInput = 0;\n  @State() rangeMin = 0;\n  @State() rangeMax = 100;\n  @State() rangeTraceReference = 0;\n  @State() showTooltip = false;\n\n  private a11yAttributes?: A11yAttributes;\n\n  get tooltip() {\n    return this.hostElement.shadowRoot?.querySelector('ix-tooltip');\n  }\n\n  get pseudoThumb() {\n    return this.hostElement.shadowRoot?.querySelector('.thumb') as HTMLElement;\n  }\n\n  get slider() {\n    return this.hostElement.shadowRoot?.getElementById(\n      'slider'\n    ) as HTMLInputElement;\n  }\n\n  @Watch('showTooltip')\n  onShowTooltipChange() {\n    if (this.showTooltip) {\n      this.tooltip?.showTooltip(this.pseudoThumb);\n      return;\n    }\n\n    this.tooltip?.hideTooltip();\n  }\n\n  componentWillLoad() {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement, [\n      'role',\n      'aria-valuemin',\n      'aria-valuemax',\n      'aria-valuenow',\n    ]);\n    this.updateRangeVariables();\n  }\n\n  @Watch('value')\n  @Watch('max')\n  @Watch('min')\n  @Watch('traceReference')\n  private updateRangeVariables() {\n    this.rangeInput = between(this.min, this.value, this.max);\n    this.rangeTraceReference = between(this.min, this.traceReference, this.max);\n    this.rangeMin = Math.min(this.min, this.max);\n    this.rangeMax = Math.max(this.min, this.max);\n  }\n\n  private onInput(event: InputEvent) {\n    event.stopPropagation();\n    const value = parseInt(this.slider.value);\n\n    if (!isNaN(value)) {\n      this.rangeInput = value;\n      this.emitInputEvent();\n    }\n  }\n\n  private emitInputEvent() {\n    this.valueChange.emit(this.rangeInput);\n  }\n\n  private isMarkerActive(markerValue: number) {\n    const start = Math.min(this.traceReference, this.rangeInput);\n    const end = Math.max(this.traceReference, this.rangeInput);\n    const value = markerValue;\n\n    return value >= start && value <= end;\n  }\n\n  // Listen globally on window because sometimes the event listener\n  // of the DOM element input itself is not called if the release\n  // click is not inside the element anymore\n  @OnListener<Slider>('pointerup', (self) => self.showTooltip)\n  onPointerUp() {\n    this.showTooltip = false;\n  }\n\n  render() {\n    const range = this.rangeMax - this.rangeMin;\n\n    let traceReferenceInPercentage =\n      (this.rangeTraceReference - this.rangeMin) / range;\n\n    let valueInPercentage = (this.rangeInput - this.rangeMin) / range;\n\n    const distance = valueInPercentage - traceReferenceInPercentage;\n\n    let traceStart = traceReferenceInPercentage;\n    let traceEnd = valueInPercentage;\n\n    if (distance <= 0) {\n      traceStart = valueInPercentage;\n      traceEnd = traceReferenceInPercentage;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          error: !!this.error,\n        }}\n        onPointerDown={() => setTimeout(() => (this.showTooltip = true))}\n      >\n        <div class=\"slider\">\n          <div class=\"track\">\n            <div\n              class=\"thumb\"\n              style={{\n                left: `calc(${valueInPercentage} * 100% - 8px)`,\n              }}\n            ></div>\n            <div class=\"ticks\">\n              {this.marker\n                ? this.marker.map((markerValue) => {\n                    if (markerValue > this.max || markerValue < this.min) {\n                      return;\n                    }\n\n                    let left = (markerValue - this.rangeMin) / range;\n\n                    return (\n                      <div\n                        class={{\n                          tick: true,\n                          'tick-active':\n                            this.isMarkerActive(markerValue) && this.trace,\n                        }}\n                        style={{\n                          '--tick-value': `${left}`,\n                        }}\n                      ></div>\n                    );\n                  })\n                : null}\n            </div>\n          </div>\n\n          <input\n            id=\"slider\"\n            type=\"range\"\n            list={this.marker ? 'markers' : undefined}\n            step={this.step}\n            min={this.min}\n            max={this.max}\n            value={this.rangeInput}\n            tabindex={this.disabled ? -1 : 0}\n            onInput={(event) => this.onInput(event)}\n            style={{\n              '--value': `${valueInPercentage}`,\n              '--trace-reference': `${traceReferenceInPercentage}`,\n              '--trace-start': `${traceStart}`,\n              '--trace-end': `${traceEnd}`,\n            }}\n            class={{\n              trace:\n                this.trace && traceReferenceInPercentage !== valueInPercentage,\n              'hide-trace-reference':\n                this.trace &&\n                (this.traceReference <= this.min ||\n                  this.traceReference >= this.max),\n            }}\n            onFocus={() => {\n              this.showTooltip = true;\n            }}\n            onBlur={() => {\n              this.showTooltip = false;\n            }}\n            role=\"slider\"\n            aria-valuenow={this.rangeInput}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n            {...this.a11yAttributes}\n          />\n\n          <ix-tooltip\n            class={{\n              'hide-tooltip': !this.showTooltip,\n            }}\n            animationFrame={true}\n          >\n            {this.rangeInput}\n          </ix-tooltip>\n        </div>\n        <div class=\"label\">\n          <div class=\"label-start\">\n            <slot name=\"label-start\"></slot>\n          </div>\n          <div class=\"label-end\">\n            <slot name=\"label-end\"></slot>\n          </div>\n        </div>\n        {this.error ? (\n          <ix-typography class={'label-error'} color=\"alarm\">\n            {this.error}\n          </ix-typography>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/{p-06cba04a.entry.js → p-d95cbd1f.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as o,h as e,H as s,g as a}from"./p-ac552df3.js";const r=":host{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}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .toast-body{display:flex;position:relative;min-height:3.5rem;width:100%;flex-grow:1;padding:0.75rem}:host .toast-body .toast-icon{display:flex;align-items:flex-start;margin-right:1rem}:host .toast-body .toast-content{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%}:host .toast-body .toast-content .toast-title{-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);margin:0.25rem 0px}:host .toast-body .toast-content .toast-message{min-width:0;-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)}:host .toast-body .toast-icon+.toast-content{max-width:10.25rem}:host .toast-close{display:flex;position:relative;pointer-events:all;margin-left:auto;margin-right:0px}:host .toast-progress-bar{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}:host .toast-progress-bar--animated{animation:trackProgress linear 1 forwards}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";const i=r;const n=class{constructor(e){t(this,e);this.closeToast=o(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.touched=false}getIcon(){if(this.icon){return e("ix-icon",{"data-testid":"toast-icon",name:this.icon,color:this.iconColor,size:"24"})}switch(this.type){case"info":return e("ix-icon",{"data-testid":"toast-icon",name:"info",size:"24",color:"color-std-text"});case"error":return e("ix-icon",{"data-testid":"toast-icon",name:"error",size:"24",color:"color-alarm"});case"success":return e("ix-icon",{"data-testid":"toast-icon",name:"success",size:"24",color:"color-success"});case"warning":return e("ix-icon",{"data-testid":"toast-icon",name:"warning",size:"24",color:"color-warning"});default:return""}}close(){if(this.hostElement){this.hostElement.classList.add("animate__fadeOut")}setTimeout((()=>{this.closeToast.emit()}),250)}render(){let t={};const o=["toast-progress-bar"];t={animationDuration:`${this.autoCloseDelay}ms`,animationPlayState:this.touched?"paused":"running"};o.push("toast-progress-bar--animated");return e(s,{key:"8af2933e92ceaae263f3cc38ad519c6fc8865b3e",class:"animate__animated animate__fadeIn"},e("div",{key:"7a09d06a2d6643be19660ad2dc8b226208a7b478",class:"toast-body",onPointerLeave:()=>{this.touched=false},onPointerEnter:()=>{this.touched=true}},this.type||this.icon?e("div",{class:"toast-icon"},this.getIcon()):null,e("div",{key:"b19932c2f9e60287f53302f8d273df2f0a087375",class:"toast-content"},this.toastTitle?e("div",{class:"toast-title"},this.toastTitle):null,e("div",{key:"b10ee8ffae9b69060c74b405c41a5533ceff5806",class:"toast-message"},e("slot",{key:"8e7931e442b82ef3760f4b13c08f2fb29cb3dbe5"}))),e("div",{key:"bd7de69a43138138f60e9938a07e0f3d58262cf7",class:"toast-close"},e("ix-icon-button",{key:"93137526cf1606c0f72b55f722495c4bb659c1c3",icon:"close",size:"24",ghost:true,onClick:()=>this.closeToast.emit()}))),this.autoClose?e("div",{class:o.join(" "),style:t,onAnimationEnd:()=>{this.close()},onTransitionEnd:()=>{if(this.progress===0){this.close()}}}):null)}get hostElement(){return a(this)}};n.style=i;export{n as ix_toast};
-//# sourceMappingURL=p-06cba04a.entry.js.map
+import{r as t,c as o,h as e,H as s,g as a}from"./p-f87cd962.js";const r=":host{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}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .toast-body{display:flex;position:relative;min-height:3.5rem;width:100%;flex-grow:1;padding:0.75rem}:host .toast-body .toast-icon{display:flex;align-items:flex-start;margin-right:1rem}:host .toast-body .toast-content{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%}:host .toast-body .toast-content .toast-title{-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);margin:0.25rem 0px}:host .toast-body .toast-content .toast-message{min-width:0;-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)}:host .toast-body .toast-icon+.toast-content{max-width:10.25rem}:host .toast-close{display:flex;position:relative;pointer-events:all;margin-left:auto;margin-right:0px}:host .toast-progress-bar{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}:host .toast-progress-bar--animated{animation:trackProgress linear 1 forwards}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";const i=r;const n=class{constructor(e){t(this,e);this.closeToast=o(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.touched=false}getIcon(){if(this.icon){return e("ix-icon",{"data-testid":"toast-icon",name:this.icon,color:this.iconColor,size:"24"})}switch(this.type){case"info":return e("ix-icon",{"data-testid":"toast-icon",name:"info",size:"24",color:"color-std-text"});case"error":return e("ix-icon",{"data-testid":"toast-icon",name:"error",size:"24",color:"color-alarm"});case"success":return e("ix-icon",{"data-testid":"toast-icon",name:"success",size:"24",color:"color-success"});case"warning":return e("ix-icon",{"data-testid":"toast-icon",name:"warning",size:"24",color:"color-warning"});default:return""}}close(){if(this.hostElement){this.hostElement.classList.add("animate__fadeOut")}setTimeout((()=>{this.closeToast.emit()}),250)}render(){let t={};const o=["toast-progress-bar"];t={animationDuration:`${this.autoCloseDelay}ms`,animationPlayState:this.touched?"paused":"running"};o.push("toast-progress-bar--animated");return e(s,{key:"165e8ce47907c08afaef29ec7741efaddaf59d0f",class:"animate__animated animate__fadeIn"},e("div",{key:"fff7c4afb35bf57eead0fa4b484e0843dcf6c163",class:"toast-body",onPointerLeave:()=>{this.touched=false},onPointerEnter:()=>{this.touched=true}},this.type||this.icon?e("div",{class:"toast-icon"},this.getIcon()):null,e("div",{key:"cd9db0e7591fc8cc069608cff6c3824b4063b1df",class:"toast-content"},this.toastTitle?e("div",{class:"toast-title"},this.toastTitle):null,e("div",{key:"5c850aab1090ec83bfbb2ed4be68d665efaa403f",class:"toast-message"},e("slot",{key:"0f857c156d576f8bc62cca7f2ab50df00fe3e794"}))),e("div",{key:"47db8f9094de72a16be06466bd694923d86492ff",class:"toast-close"},e("ix-icon-button",{key:"db141553999f04175cb135c9b89b7655a5eae216",icon:"close",size:"24",ghost:true,onClick:()=>this.closeToast.emit()}))),this.autoClose?e("div",{class:o.join(" "),style:t,onAnimationEnd:()=>{this.close()},onTransitionEnd:()=>{if(this.progress===0){this.close()}}}):null)}get hostElement(){return a(this)}};n.style=i;export{n as ix_toast};
+//# sourceMappingURL=p-d95cbd1f.entry.js.map

package/dist/siemens-ix/{p-127f6463.entry.js → p-d998415f.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,H as o,g as s}from"./p-ac552df3.js";import{a}from"./p-71206084.js";import{b as l,a as r}from"./p-4f8ac3bf.js";import{A as n}from"./p-46a6cd9d.js";import{O as d}from"./p-d6cef0ad.js";function h(t,e,i=3e3){return new Promise(((o,s)=>{const a=Date.now();const l=()=>{const r=e.querySelector(t);if(r){o(r)}else{if(Date.now()-a<i){setTimeout(l)}else{s()}}};l()}))}const c="::backdrop{--ix-dialog-backdrop:var(--theme-color-lightbox, #0000008c)}:focus-visible{outline:none !important}:host{display:none}:host dialog{margin:0;padding:1rem;left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:flex;flex-direction:column;position:relative;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{left:0 !important;top:0 !important;transform:none !important;width:calc(100% - 28px);min-width:calc(100% - 28px);max-width:calc(100% - 28px);height:calc(100% - 28px);min-height:calc(100% - 28px);max-height:calc(100% - 28px)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.visible){display:block}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:2.5rem}";const f=c;var m=undefined&&undefined.__decorate||function(t,e,i,o){var s=arguments.length,a=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,l;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)if(l=t[r])a=(s<3?l(a):s>3?l(e,i,a):l(e,i))||a;return s>3&&a&&Object.defineProperty(e,i,a),a};const p=class{constructor(i){t(this,i);this.dialogClose=e(this,"dialogClose",7);this.dialogDismiss=e(this,"dialogDismiss",7);this.ariaAttributes={};this.size="360";this.animation=true;this.backdrop=true;this.closeOnBackdropClick=false;this.beforeDismiss=undefined;this.centered=false;this.keyboard=true;this.closeOnEscape=true;this.modalVisible=false}onKey(t){if(t.key==="Escape"){t.preventDefault()}}get dialog(){return this.hostElement.shadowRoot.querySelector("dialog")}slideInModal(){const t=this.animation?n.mediumTime:0;let e=this.centered?"-50%":40;a({targets:this.dialog,duration:t,opacity:[0,1],translateY:[0,e],translateX:["-50%","-50%"],easing:"easeOutSine"})}slideOutModal(t){const e=this.animation?n.mediumTime:0;let i=this.centered?"-50%":40;a({targets:this.dialog,duration:e,opacity:[1,0],translateY:[i,0],translateX:["-50%","-50%"],easing:"easeInSine",complete:()=>{if(t){t()}}})}onModalClick(t){if(t.target!==this.dialog){return}const e=this.dialog.getBoundingClientRect();const i=e.top<=t.clientY&&t.clientY<=e.top+e.height&&e.left<=t.clientX&&t.clientX<=e.left+e.width;if(!i&&this.closeOnBackdropClick){this.dismissModal()}}async showModal(){try{const t=await h("dialog",this.hostElement.shadowRoot);this.modalVisible=true;t.showModal()}catch(t){console.error("HTMLDialogElement not existing")}}async dismissModal(t){let e=true;if(this.beforeDismiss!==undefined){e=await this.beforeDismiss(t)}if(!e){return}this.slideOutModal((()=>{this.modalVisible=false;this.dialog.close(JSON.stringify({type:"dismiss",reason:t},null,2));this.dialogDismiss.emit(t)}))}async closeModal(t){this.slideOutModal((()=>{this.dialog.close(JSON.stringify({type:"close",reason:t},null,2));this.dialogClose.emit(t)}))}componentDidLoad(){this.slideInModal()}componentWillLoad(){this.ariaAttributes=l(this.hostElement)}render(){return i(o,{key:"567694260986bea7c1ba8b63f00f5035b03b8961",class:{visible:this.modalVisible,"no-backdrop":this.backdrop===false,"align-center":this.centered}},i("div",{key:"8a6149cbd64c7007e0492df375242d6fc8e54f0b",class:"dialog-backdrop"},i("dialog",{key:"4ef88c174fc5066d2075929aa770fe17f68a5bec","aria-modal":r(true),"aria-describedby":this.ariaAttributes["aria-describedby"],"aria-labelledby":this.ariaAttributes["aria-labelledby"],class:{modal:true,[`modal-size-${this.size}`]:true},onClose:()=>this.dismissModal(),onClick:t=>this.onModalClick(t),onCancel:t=>{t.preventDefault();this.dismissModal()}},i("slot",{key:"08d753b7ec1679b13fa4052a302d873efbdf381c"}))))}get hostElement(){return s(this)}};m([d("keydown",(t=>!t.closeOnEscape||!t.keyboard))],p.prototype,"onKey",null);p.style=f;export{p as ix_modal};
-//# sourceMappingURL=p-127f6463.entry.js.map
+import{r as t,c as e,h as i,H as o,g as s}from"./p-f87cd962.js";import{a}from"./p-71206084.js";import{b as l,a as r}from"./p-4f8ac3bf.js";import{A as n}from"./p-46a6cd9d.js";import{O as d}from"./p-0c8a98cd.js";function h(t,e,i=3e3){return new Promise(((o,s)=>{const a=Date.now();const l=()=>{const r=e.querySelector(t);if(r){o(r)}else{if(Date.now()-a<i){setTimeout(l)}else{s()}}};l()}))}const c="::backdrop{--ix-dialog-backdrop:var(--theme-color-lightbox, #0000008c)}:focus-visible{outline:none !important}:host{display:none}:host dialog{margin:0;padding:1rem;left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:flex;flex-direction:column;position:relative;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{left:0 !important;top:0 !important;transform:none !important;width:calc(100% - 28px);min-width:calc(100% - 28px);max-width:calc(100% - 28px);height:calc(100% - 28px);min-height:calc(100% - 28px);max-height:calc(100% - 28px)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.visible){display:block}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:2.5rem}";const m=c;var f=undefined&&undefined.__decorate||function(t,e,i,o){var s=arguments.length,a=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,l;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)if(l=t[r])a=(s<3?l(a):s>3?l(e,i,a):l(e,i))||a;return s>3&&a&&Object.defineProperty(e,i,a),a};const p=class{constructor(i){t(this,i);this.dialogClose=e(this,"dialogClose",7);this.dialogDismiss=e(this,"dialogDismiss",7);this.ariaAttributes={};this.size="360";this.animation=true;this.backdrop=true;this.closeOnBackdropClick=false;this.beforeDismiss=undefined;this.centered=false;this.keyboard=true;this.closeOnEscape=true;this.modalVisible=false}onKey(t){if(t.key==="Escape"){t.preventDefault()}}get dialog(){return this.hostElement.shadowRoot.querySelector("dialog")}slideInModal(){const t=this.animation?n.mediumTime:0;let e=this.centered?"-50%":40;a({targets:this.dialog,duration:t,opacity:[0,1],translateY:[0,e],translateX:["-50%","-50%"],easing:"easeOutSine"})}slideOutModal(t){const e=this.animation?n.mediumTime:0;let i=this.centered?"-50%":40;a({targets:this.dialog,duration:e,opacity:[1,0],translateY:[i,0],translateX:["-50%","-50%"],easing:"easeInSine",complete:()=>{if(t){t()}}})}onModalClick(t){if(t.target!==this.dialog){return}const e=this.dialog.getBoundingClientRect();const i=e.top<=t.clientY&&t.clientY<=e.top+e.height&&e.left<=t.clientX&&t.clientX<=e.left+e.width;if(!i&&this.closeOnBackdropClick){this.dismissModal()}}async showModal(){try{const t=await h("dialog",this.hostElement.shadowRoot);this.modalVisible=true;t.showModal()}catch(t){console.error("HTMLDialogElement not existing")}}async dismissModal(t){let e=true;if(this.beforeDismiss!==undefined){e=await this.beforeDismiss(t)}if(!e){return}this.slideOutModal((()=>{this.modalVisible=false;this.dialog.close(JSON.stringify({type:"dismiss",reason:t},null,2));this.dialogDismiss.emit(t)}))}async closeModal(t){this.slideOutModal((()=>{this.dialog.close(JSON.stringify({type:"close",reason:t},null,2));this.dialogClose.emit(t)}))}componentDidLoad(){this.slideInModal()}componentWillLoad(){this.ariaAttributes=l(this.hostElement)}render(){return i(o,{key:"e7e27615541ea127c4d9608a71f447f169cde5d3",class:{visible:this.modalVisible,"no-backdrop":this.backdrop===false,"align-center":this.centered}},i("div",{key:"3a4e1950295bec70cfdf1a332a9e9e4ab3186472",class:"dialog-backdrop"},i("dialog",{key:"4455ba17c66dc4d03a792a9aeea11d1380c31674","aria-modal":r(true),"aria-describedby":this.ariaAttributes["aria-describedby"],"aria-labelledby":this.ariaAttributes["aria-labelledby"],class:{modal:true,[`modal-size-${this.size}`]:true},onClose:()=>this.dismissModal(),onClick:t=>this.onModalClick(t),onCancel:t=>{t.preventDefault();this.dismissModal()}},i("slot",{key:"383eae1fa01e4159ca2d512f477532f51c56664a"}))))}get hostElement(){return s(this)}};f([d("keydown",(t=>!t.closeOnEscape||!t.keyboard))],p.prototype,"onKey",null);p.style=m;export{p as ix_modal};
+//# sourceMappingURL=p-d998415f.entry.js.map

package/dist/siemens-ix/{p-d4fdbc68.entry.js → p-dbe8f5e6.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as r,H as o,g as a}from"./p-ac552df3.js";const i='@charset "UTF-8";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host::after{content:"";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host .text span,:host .text span::before{pointer-events:none}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}';const s=i;const c=class{constructor(r){t(this,r);this.tabClick=e(this,"tabClick",7);this.selected=false;this.disabled=false;this.small=false;this.icon=false;this.rounded=false;this.counter=undefined;this.layout="auto";this.placement="bottom"}tabItemClasses(t){return{selected:t.selected,disabled:t.disabled,"small-tab":t.small,icon:t.small,stretched:t.layout==="stretched",bottom:t.placement==="bottom",top:t.placement==="top",circle:t.circle}}render(){return r(o,{key:"77688f6b83f53ba0de891d2ed529c7b82941930a",class:this.tabItemClasses({selected:this.selected,disabled:this.disabled,small:this.small,icon:this.icon,layout:this.layout,placement:this.placement,circle:this.rounded}),tabIndex:0,onClick:t=>{const e=this.tabClick.emit({nativeEvent:t});if(e.defaultPrevented){t.stopPropagation()}}},r("div",{key:"d1790baee81972038f8a09c0e7a0ee3124e828a6",class:{circle:this.rounded,text:!this.rounded,selected:this.selected,disabled:this.disabled}},r("slot",{key:"7dcd5bcd496e9955b45f00b570fb935a0e9a8969"})),r("div",{key:"435deec3155b879b5f8a397124bf9a198283c2bd",class:{counter:true,selected:this.selected,hidden:!(this.rounded&&this.counter!==undefined),disabled:this.disabled}},this.counter))}};c.style=s;const l=t=>{if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(t)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(t)}return setTimeout(t)};const n=":host{width:auto;display:flex;align-items:center;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}:host .tab-items .items-content{display:flex;align-items:center}:host .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}:host .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}:host .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}";const h=n;const d=class{constructor(r){t(this,r);this.selectedChange=e(this,"selectedChange",7);this.windowStartSize=window.innerWidth;this.clickAction={timeout:null,isClick:true};this.small=false;this.rounded=false;this.selected=0;this.layout="auto";this.placement="bottom";this.totalItems=0;this.currentScrollAmount=0;this.scrollAmount=100;this.scrollActionAmount=0}get arrowLeftElement(){return this.hostElement.shadowRoot.querySelector("[data-arrow-left]")}get arrowRightElement(){return this.hostElement.shadowRoot.querySelector("[data-arrow-right]")}onWindowResize(){this.totalItems=0;this.totalItems=this.getTabs().length;if(this.windowStartSize===0)return this.windowStartSize=window.innerWidth;this.move(this.windowStartSize-window.innerWidth);this.windowStartSize=window.innerWidth}getTabs(){return Array.from(this.hostElement.querySelectorAll("ix-tab-item"))}getTab(t){return this.getTabs()[t]}getTabsWrapper(){return this.hostElement.shadowRoot.querySelector(".items-content")}showArrows(){try{const t=this.getTabsWrapper();return t.scrollWidth>Math.ceil(t.getBoundingClientRect().width)&&this.layout==="auto"}catch(t){return false}}showPreviousArrow(){try{return this.showArrows()&&this.scrollActionAmount<0}catch(t){return false}}showNextArrow(){try{const t=this.getTabsWrapper();const e=t.getBoundingClientRect();return this.showArrows()&&this.scrollActionAmount>(t.scrollWidth-e.width)*-1}catch(t){return false}}getArrowStyle(t){return{opacity:t?"1":"0",zIndex:t?"1":"-1"}}move(t,e=false){const r=this.getTabsWrapper();const o=(r.scrollWidth-r.getBoundingClientRect().width)*-1;t=this.currentScrollAmount+t;t=t>0?0:t<o?o:t;const a=[`transform: translateX(${t}px);`,e?"transition: all ease-in-out 400ms;":""].join("");r.setAttribute("style",a);if(e)this.currentScrollAmount=this.scrollActionAmount=t;else this.scrollActionAmount=t}moveTabToView(t){if(!this.showArrows())return;const e=this.getTab(t).getBoundingClientRect();const r=e.x*-1;this.move(r,true)}setSelected(t){this.selected=t}clickTab(t){if(this.dragStop()){return}const{defaultPrevented:e}=this.selectedChange.emit(t);if(e){return}this.setSelected(t);this.moveTabToView(t)}dragStart(t,e){if(!this.showArrows())return;if(e.button>0)return;this.clickAction.timeout=this.clickAction.timeout===null?setTimeout((()=>this.clickAction.isClick=false),300):null;const r=parseFloat(window.getComputedStyle(t).left);const o=e.clientX;const a=t=>this.dragMove(t,r,o);window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",a,false);this.dragStop()}));window.addEventListener("mousemove",a,false)}dragMove(t,e,r){this.move(t.clientX+e-r)}dragStop(){clearTimeout(this.clickAction.timeout);this.clickAction.timeout=null;if(this.clickAction.isClick)return false;this.currentScrollAmount=this.scrollActionAmount;this.clickAction.isClick=true;return true}componentWillLoad(){const t=this.getTabs();t.map(((t,e)=>{if(this.small)t.setAttribute("small","true");if(this.rounded)t.setAttribute("rounded","true");t.setAttribute("layout",this.layout);t.setAttribute("selected",e===this.selected?"true":"false");t.setAttribute("placement",this.placement)}))}componentDidRender(){const t=this.getTabs();this.totalItems=t.length;t.map(((t,e)=>{t.setAttribute("selected",e===this.selected?"true":"false")}))}componentWillRender(){l((()=>{const t=this.showNextArrow();const e=this.showPreviousArrow();Object.assign(this.arrowLeftElement.style,this.getArrowStyle(e));Object.assign(this.arrowRightElement.style,this.getArrowStyle(t))}))}componentDidLoad(){const t=this.getTabs();t.forEach((t=>{t.addEventListener("mousedown",(e=>this.dragStart(t,e)))}))}onTabClick(t){if(t.defaultPrevented){return}const e=t.target;const r=this.getTabs();r.forEach(((t,r)=>{if(!t.disabled&&t===e){this.clickTab(r)}}))}render(){return r(o,{key:"d78a0e8848762853905f0a00ad0e29eb8010f058"},r("div",{key:"81f8018608a4ead1b07a2c8dbc275f3e6b1a4f9f",class:"arrow","data-arrow-left":true,onClick:()=>this.move(this.scrollAmount,true)},r("ix-icon",{key:"74ac11767dded217d438e58f3d9af659b5f7913c",name:"chevron-left-small"})),r("div",{key:"22172b312ee82c63c590780030766262d5655be3",class:{"tab-items":true,"overflow-shadow":true,"shadow-left":this.showPreviousArrow(),"shadow-right":this.showNextArrow(),"shadow-both":this.showNextArrow()&&this.showPreviousArrow()}},r("div",{key:"31a8df74124a12d6abc6e3af8c45e2f59c9e8e7f",class:"items-content"},r("slot",{key:"0a37dea0573b5123c6de66831c028401d1da86b4"}))),r("div",{key:"cd946069a8dbb2708bc90923c2bb8a897eeaf3b5",class:"arrow right","data-arrow-right":true,onClick:()=>this.move(-this.scrollAmount,true)},r("ix-icon",{key:"3542fc3e7cba8477f2367492620dc16cdaecbad8",name:"chevron-right-small"})))}get hostElement(){return a(this)}};d.style=h;export{c as ix_tab_item,d as ix_tabs};
-//# sourceMappingURL=p-d4fdbc68.entry.js.map
+import{r as t,c as e,h as r,H as o,g as a}from"./p-f87cd962.js";const i='@charset "UTF-8";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host::after{content:"";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host .text span,:host .text span::before{pointer-events:none}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}';const s=i;const c=class{constructor(r){t(this,r);this.tabClick=e(this,"tabClick",7);this.selected=false;this.disabled=false;this.small=false;this.icon=false;this.rounded=false;this.counter=undefined;this.layout="auto";this.placement="bottom"}tabItemClasses(t){return{selected:t.selected,disabled:t.disabled,"small-tab":t.small,icon:t.small,stretched:t.layout==="stretched",bottom:t.placement==="bottom",top:t.placement==="top",circle:t.circle}}render(){return r(o,{key:"d066fe09ebb7ac33ef162eafed96189de7215022",class:this.tabItemClasses({selected:this.selected,disabled:this.disabled,small:this.small,icon:this.icon,layout:this.layout,placement:this.placement,circle:this.rounded}),tabIndex:0,onClick:t=>{const e=this.tabClick.emit({nativeEvent:t});if(e.defaultPrevented){t.stopPropagation()}}},r("div",{key:"944c3beb003abae7f64ed18c3d77fa8d3a576be3",class:{circle:this.rounded,text:!this.rounded,selected:this.selected,disabled:this.disabled}},r("slot",{key:"ff6b883c8b1ec2e53fe9faa705bbcdb0345ef27b"})),r("div",{key:"292419b01ae7e18db509ad09a83ffa5bbc6480a5",class:{counter:true,selected:this.selected,hidden:!(this.rounded&&this.counter!==undefined),disabled:this.disabled}},this.counter))}};c.style=s;const l=t=>{if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(t)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(t)}return setTimeout(t)};const n=":host{width:auto;display:flex;align-items:center;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}:host .tab-items .items-content{display:flex;align-items:center}:host .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}:host .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}:host .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}";const h=n;const d=class{constructor(r){t(this,r);this.selectedChange=e(this,"selectedChange",7);this.windowStartSize=window.innerWidth;this.clickAction={timeout:null,isClick:true};this.small=false;this.rounded=false;this.selected=0;this.layout="auto";this.placement="bottom";this.totalItems=0;this.currentScrollAmount=0;this.scrollAmount=100;this.scrollActionAmount=0;this.showArrowPrevious=false;this.showArrowNext=false}onWindowResize(){this.totalItems=0;this.totalItems=this.getTabs().length;if(this.windowStartSize===0)return this.windowStartSize=window.innerWidth;this.move(this.windowStartSize-window.innerWidth);this.windowStartSize=window.innerWidth}getTabs(){return Array.from(this.hostElement.querySelectorAll("ix-tab-item"))}getTab(t){return this.getTabs()[t]}getTabsWrapper(){var t;return(t=this.hostElement.shadowRoot)===null||t===void 0?void 0:t.querySelector(".items-content")}initResizeObserver(){const t=this.hostElement.parentElement;if(!t)return;this.resizeObserver=new ResizeObserver((()=>{this.renderArrows()}));this.resizeObserver.observe(t)}showArrows(){try{const t=this.getTabsWrapper();return t&&t.scrollWidth>Math.ceil(t.getBoundingClientRect().width)&&this.layout==="auto"}catch(t){return false}}showPreviousArrow(){try{return this.showArrows()===true&&this.scrollActionAmount<0}catch(t){return false}}showNextArrow(){try{const t=this.getTabsWrapper();if(!t){return false}const e=t.getBoundingClientRect();return this.showArrows()===true&&this.scrollActionAmount>(t.scrollWidth-e.width)*-1}catch(t){return false}}move(t,e=false){const r=this.getTabsWrapper();if(!r){return}const o=r.getBoundingClientRect().width;const a=-this.currentScrollAmount+o-r.scrollWidth;t=t<a?a:t;t+=this.currentScrollAmount;t=Math.min(t,0);const i=[`transform: translateX(${t}px);`,e?"transition: all ease-in-out 400ms;":""].join("");r.setAttribute("style",i);if(e)this.currentScrollAmount=this.scrollActionAmount=t;else this.scrollActionAmount=t}onSelectedChange(t){var e;if(!this.showArrows())return;const r=this.getTab(t).getBoundingClientRect();const o=(e=this.getTabsWrapper())===null||e===void 0?void 0:e.clientWidth;const a=32;if(r.left<a){this.move(-r.left+a,true)}else if(o&&r.right>o-a){this.move(o-r.right-a,true)}}setSelected(t){this.selected=t}clickTab(t){if(!this.clickAction.isClick||this.dragStop()){return}const{defaultPrevented:e}=this.selectedChange.emit(t);if(e){return}this.setSelected(t)}dragStart(t,e){if(!this.showArrows())return;if(e.button>0)return;this.clickAction.timeout=this.clickAction.timeout===null?setTimeout((()=>this.clickAction.isClick=false),300):null;const r=parseFloat(window.getComputedStyle(t).left);const o=e.clientX;const a=t=>this.dragMove(t,r,o);const i=()=>{window.removeEventListener("mousemove",a,false);window.removeEventListener("click",i,false);this.dragStop()};window.addEventListener("click",i);window.addEventListener("mousemove",a,false)}dragMove(t,e,r){this.move(t.clientX+e-r)}dragStop(){if(this.clickAction.timeout){clearTimeout(this.clickAction.timeout);this.clickAction.timeout=null}if(this.clickAction.isClick)return false;this.currentScrollAmount=this.scrollActionAmount;this.clickAction.isClick=true;return true}componentWillLoad(){const t=this.getTabs();t.map(((t,e)=>{if(this.small)t.setAttribute("small","true");if(this.rounded)t.setAttribute("rounded","true");t.setAttribute("layout",this.layout);t.setAttribute("selected",e===this.selected?"true":"false");t.setAttribute("placement",this.placement)}));this.initResizeObserver()}componentDidRender(){const t=this.getTabs();this.totalItems=t.length;t.map(((t,e)=>{t.setAttribute("selected",e===this.selected?"true":"false")}))}componentWillRender(){this.renderArrows()}renderArrows(){l((()=>{this.showArrowNext=this.showNextArrow();this.showArrowPrevious=this.showPreviousArrow()}))}componentDidLoad(){const t=this.getTabs();t.forEach((t=>{t.addEventListener("mousedown",(e=>this.dragStart(t,e)))}))}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}onTabClick(t){if(t.defaultPrevented){return}const e=t.target;const r=this.getTabs();r.forEach(((t,r)=>{if(!t.disabled&&t===e){this.clickTab(r)}}))}render(){return r(o,{key:"014b3afcc4165f3c3aa0800ea6f12c15d138b48b"},this.showArrowPrevious&&r("div",{key:"6c98e2c2957c96970d42d5abdf959f325e1c05b8",class:"arrow",onClick:()=>this.move(this.scrollAmount,true)},r("ix-icon",{key:"55f46b38e62a863415fa5d51da48a1be19303b78",name:"chevron-left-small"})),r("div",{key:"c0528e9e703746cc1acc63c1b68c4d9ee3a01a04",class:{"tab-items":true,"overflow-shadow":true,"shadow-left":this.showArrowPrevious,"shadow-right":this.showArrowNext,"shadow-both":this.showArrowNext&&this.showArrowPrevious}},r("div",{key:"bb6174f8e9a9543ee928a70de23500edbedaeb04",class:"items-content"},r("slot",{key:"ba881f7c4784685ebdb1f0a2581c4691f2a8f1b9"}))),this.showArrowNext&&r("div",{key:"743123a5b14ed6a473c21b742f54cbf4ae4405da",class:"arrow right",onClick:()=>this.move(-this.scrollAmount,true)},r("ix-icon",{key:"d67ab90bf1b620791ca9e84f7ace8b7a04a7a772",name:"chevron-right-small"})))}get hostElement(){return a(this)}static get watchers(){return{selected:["onSelectedChange"]}}};d.style=h;export{c as ix_tab_item,d as ix_tabs};
+//# sourceMappingURL=p-dbe8f5e6.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tabItemCss","IxTabItemStyle0","TabItem","tabItemClasses","props","selected","disabled","small","icon","stretched","layout","bottom","placement","top","circle","render","h","Host","key","class","this","rounded","tabIndex","onClick","event","clientEvent","tabClick","emit","nativeEvent","defaultPrevented","stopPropagation","text","counter","hidden","undefined","requestAnimationFrameNoNgZone","callback","__zone_symbol__requestAnimationFrame","requestAnimationFrame","setTimeout","tabsCss","IxTabsStyle0","Tabs","windowStartSize","window","innerWidth","clickAction","timeout","isClick","onWindowResize","totalItems","getTabs","length","move","Array","from","hostElement","querySelectorAll","getTab","getTabsWrapper","_a","shadowRoot","querySelector","initResizeObserver","parentElement","resizeObserver","ResizeObserver","renderArrows","observe","showArrows","tabWrapper","scrollWidth","Math","ceil","getBoundingClientRect","width","error","showPreviousArrow","scrollActionAmount","showNextArrow","tabWrapperRect","amount","click","tabsWrapper","tabsWrapperVisibleWidth","maxScrollWidth","currentScrollAmount","min","styles","join","setAttribute","onSelectedChange","newValue","tabRect","wrapperWidth","clientWidth","arrowWidth","left","right","setSelected","index","clickTab","dragStop","selectedChange","dragStart","element","button","tabPositionX","parseFloat","getComputedStyle","mousedownPositionX","clientX","dragMove","windowClick","removeEventListener","addEventListener","tabX","mousedownX","clearTimeout","componentWillLoad","tabs","map","componentDidRender","componentWillRender","showArrowNext","showArrowPrevious","componentDidLoad","forEach","disconnectedCallback","disconnect","onTabClick","target","tab","scrollAmount","name"],"sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx","src/components/utils/requestAnimationFrame.ts","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.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/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px $large-space;\n  line-height: 20px;\n  font-size: 14px;\n  font-weight: bold;\n  background-color: var(--theme-tab--background);\n  color: var(--theme-tab--color);\n\n  &::after {\n    content: '';\n    position: absolute;\n    background-color: var(--theme-tab-indicator--background);\n    width: 100%;\n    height: var(--theme-tab-indicator--height);\n    left: 0;\n  }\n\n  .text {\n    @include ellipsis;\n\n    span,\n    span::before {\n      pointer-events: none;\n    }\n\n    vertical-align: middle;\n  }\n\n  .circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 3rem;\n    width: 3rem;\n    background-color: var(--theme-animated-tab-indicator--background);\n    border-radius: 50%;\n    border: 2px solid var(--theme-animated-tab-circle--border-color);\n    color: var(--theme-an…icon--color);\n    cursor: pointer;\n\n    &.selected:not(.disabled) {\n      background-color: var(--theme-animated-tab-circle--background--selected);\n      color: var(--theme-animated-tab-icon--color--selected);\n      border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n      &:hover {\n        background-color: var(\n          --theme-animated-tab-circle--background--selected\n        );\n      }\n    }\n\n    &:hover {\n      background-color: var(--theme-animated-tab-circle--background--hover);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &.disabled {\n      background-color: var(--theme-animated-tab-circle--background--disabled);\n      border-color: var(--theme-animated-tab-circle--border-color--disabled);\n    }\n  }\n\n  .counter {\n    position: absolute;\n    z-index: 1;\n    height: 16px;\n    width: auto;\n    background-color: var(--theme-pill-outline--background);\n    border: 1px solid var(--theme-tab-pill--border-color);\n    border-radius: 100px;\n    bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-left: $tiny-space;\n    padding-right: $tiny-space;\n    font-size: 12px;\n    line-height: 14px;\n    color: var(--theme-pill-outline--color);\n    cursor: pointer;\n\n    &.selected {\n      border-color: var(--theme-tab-pill--border-color--selected);\n    }\n\n    &.disabled {\n      border-color: var(--theme-tab-pill--border-color--disabled);\n    }\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n\n:host(.circle) {\n  height: 72px;\n}\n\n:host(.top) {\n  &::after {\n    top: 0;\n  }\n}\n\n:host(.bottom) {\n  &::after {\n    bottom: 0;\n  }\n}\n\n:host(.stretched) {\n  flex-basis: 100%;\n  width: 100%;\n  @include ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n  background-color: var(--theme-tab--background--hover);\n  color: var(--theme-tab-color-hover);\n  cursor: pointer;\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--hover);\n  }\n}\n\n:host(:active:not(.circle)) {\n  background-color: var(--theme-tab--background--active);\n  color: var(--theme-tab-color--active);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--active);\n  }\n}\n\n:host(:focus-visible) {\n  outline: 0px solid var(--focus--border-color);\n\n  .circle {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(:focus-visible:not(.circle)) {\n  outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n  pointer-events: none;\n  color: var(--theme-tab--color--disabled);\n  background-color: var(--theme-tab--background--disabled);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--disabled);\n  }\n}\n\n:host(.selected:not(.disabled)) {\n  background-color: var(--theme-tab--background--selected);\n  color: var(--theme-tab--color--selected);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--selected);\n  }\n}\n\n:host(.icon) {\n  padding: $large-space $small-space;\n}\n\n:host(.small-tab) {\n  height: 32px;\n  padding: $default-space;\n}\n\n:host(.small-tab.icon) {\n  padding: $default-space $tiny-space;\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\nexport type TabClickDetail = {\n  nativeEvent: MouseEvent;\n};\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  shadow: true,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter?: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * Emitted when the tab is clicked.\n   *\n   * @since 2.0.0\n   */\n  @Event() tabClick!: EventEmitter<TabClickDetail>;\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n        onClick={(event: MouseEvent) => {\n          const clientEvent = this.tabClick.emit({\n            nativeEvent: event,\n          });\n\n          if (clientEvent.defaultPrevented) {\n            event.stopPropagation();\n          }\n        }}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\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\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Prevents angular from change detection when requesting an animation frame\n *\n * Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n */\nexport const requestAnimationFrameNoNgZone = (\n  callback: (...args: any[]) => void\n) => {\n  if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n    return __zone_symbol__requestAnimationFrame(callback);\n  }\n  if (typeof requestAnimationFrame === 'function') {\n    return requestAnimationFrame(callback);\n  }\n  return setTimeout(callback);\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/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  width: auto;\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  .tab-items {\n    overflow: hidden;\n    scroll-behavior: smooth;\n    width: 100%;\n\n    .items-content {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .arrow {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto 0;\n    border-radius: 4px;\n    color: var(--theme-btn-invisible-primary--color);\n    background-color: var(--theme-btn-invisible-primary--background);\n    z-index: 2;\n\n    &:hover {\n      color: var(--theme-btn-invisible-primary--color--hover);\n      background-color: var(--theme-btn-invisible-primary--background--hover);\n    }\n\n    &:active {\n      color: var(--theme-btn-invisible-primary--color--active);\n      background-color: var(--theme-btn-invisible-primary--background--active);\n    }\n\n    &.right {\n      left: auto;\n      right: 0;\n    }\n  }\n\n  .overflow-shadow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n\n    &.shadow-left {\n      mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n    }\n\n    &.shadow-right {\n      mask-image: linear-gradient(\n        90deg,\n        black calc(100% - 45px),\n        transparent 100%\n      );\n    }\n\n    &.shadow-both {\n      mask-image: linear-gradient(\n        90deg,\n        transparent 0px,\n        black 45px,\n        black calc(100% - 45px),\n        transparent 100%\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\n\n@Component({\n  tag: 'ix-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true,\n})\nexport class Tabs {\n  @Element() hostElement!: HTMLIxTabsElement;\n\n  /**\n   * Set tab items to small size\n   */\n  @Prop() small = false;\n\n  /**\n   * Set rounded tabs\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set default selected tab by index\n   */\n  @Prop({ mutable: true }) selected = 0;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set placement style\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * `selected` property changed\n   *\n   * @since 2.0.0\n   */\n  @Event() selectedChange!: EventEmitter<number>;\n\n  @State() totalItems = 0;\n  @State() currentScrollAmount = 0;\n  @State() scrollAmount = 100;\n  @State() scrollActionAmount = 0;\n  @State() showArrowPrevious = false;\n  @State() showArrowNext = false;\n\n  private windowStartSize = window.innerWidth;\n  private resizeObserver?: ResizeObserver;\n\n  private clickAction: {\n    timeout: NodeJS.Timeout | null;\n    isClick: boolean;\n  } = {\n    timeout: null,\n    isClick: true,\n  };\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.totalItems = 0;\n    this.totalItems = this.getTabs().length;\n\n    if (this.windowStartSize === 0)\n      return (this.windowStartSize = window.innerWidth);\n    this.move(this.windowStartSize - window.innerWidth);\n    this.windowStartSize = window.innerWidth;\n  }\n\n  private getTabs() {\n    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n  }\n\n  private getTab(tabIndex: number) {\n    return this.getTabs()[tabIndex];\n  }\n\n  private getTabsWrapper() {\n    return this.hostElement.shadowRoot?.querySelector('.items-content');\n  }\n\n  private initResizeObserver() {\n    const parentElement = this.hostElement.parentElement;\n    if (!parentElement) return;\n    this.resizeObserver = new ResizeObserver(() => {\n      this.renderArrows();\n    });\n    this.resizeObserver.observe(parentElement);\n  }\n\n  private showArrows() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      return (\n        tabWrapper &&\n        tabWrapper.scrollWidth >\n          Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n        this.layout === 'auto'\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showPreviousArrow() {\n    try {\n      return this.showArrows() === true && this.scrollActionAmount < 0;\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showNextArrow() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n\n      if (!tabWrapper) {\n        return false;\n      }\n\n      const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n      return (\n        this.showArrows() === true &&\n        this.scrollActionAmount >\n          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private move(amount: number, click = false) {\n    const tabsWrapper = this.getTabsWrapper();\n\n    if (!tabsWrapper) {\n      return;\n    }\n\n    const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n    const maxScrollWidth =\n      -this.currentScrollAmount +\n      tabsWrapperVisibleWidth -\n      tabsWrapper.scrollWidth;\n\n    amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n    amount += this.currentScrollAmount;\n    amount = Math.min(amount, 0);\n\n    const styles = [\n      `transform: translateX(${amount}px);`,\n      click ? 'transition: all ease-in-out 400ms;' : '',\n    ].join('');\n\n    tabsWrapper.setAttribute('style', styles);\n\n    if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n    else this.scrollActionAmount = amount;\n  }\n\n  @Watch('selected')\n  onSelectedChange(newValue: number) {\n    if (!this.showArrows()) return;\n\n    const tabRect = this.getTab(newValue).getBoundingClientRect();\n    const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n    const arrowWidth = 32;\n\n    if (tabRect.left < arrowWidth) {\n      this.move(-tabRect.left + arrowWidth, true);\n    } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n      this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n    }\n  }\n\n  private setSelected(index: number) {\n    this.selected = index;\n  }\n\n  private clickTab(index: number) {\n    if (!this.clickAction.isClick || this.dragStop()) {\n      return;\n    }\n\n    const { defaultPrevented } = this.selectedChange.emit(index);\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.setSelected(index);\n  }\n\n  private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n    if (!this.showArrows()) return;\n    if (event.button > 0) return;\n\n    this.clickAction.timeout =\n      this.clickAction.timeout === null\n        ? setTimeout(() => (this.clickAction.isClick = false), 300)\n        : null;\n\n    const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n    const mousedownPositionX = event.clientX;\n    const move = (event: MouseEvent) =>\n      this.dragMove(event, tabPositionX, mousedownPositionX);\n    const windowClick = () => {\n      window.removeEventListener('mousemove', move, false);\n      window.removeEventListener('click', windowClick, false);\n      this.dragStop();\n    };\n    window.addEventListener('click', windowClick);\n    window.addEventListener('mousemove', move, false);\n  }\n\n  private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n    this.move(event.clientX + tabX - mousedownX);\n  }\n\n  private dragStop() {\n    if (this.clickAction.timeout) {\n      clearTimeout(this.clickAction.timeout);\n      this.clickAction.timeout = null;\n    }\n\n    if (this.clickAction.isClick) return false;\n\n    this.currentScrollAmount = this.scrollActionAmount;\n    this.clickAction.isClick = true;\n\n    return true;\n  }\n\n  componentWillLoad() {\n    const tabs = this.getTabs();\n\n    tabs.map((element, index) => {\n      if (this.small) element.setAttribute('small', 'true');\n\n      if (this.rounded) element.setAttribute('rounded', 'true');\n\n      element.setAttribute('layout', this.layout);\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n\n      element.setAttribute('placement', this.placement);\n    });\n\n    this.initResizeObserver();\n  }\n\n  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.map((element, index) => {\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n    });\n  }\n\n  componentWillRender() {\n    this.renderArrows();\n  }\n\n  private renderArrows() {\n    requestAnimationFrameNoNgZone(() => {\n      this.showArrowNext = this.showNextArrow();\n      this.showArrowPrevious = this.showPreviousArrow();\n    });\n  }\n\n  componentDidLoad() {\n    const tabs = this.getTabs();\n    tabs.forEach((element) => {\n      element.addEventListener('mousedown', (event) =>\n        this.dragStart(element, event)\n      );\n    });\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  @Listen('tabClick')\n  onTabClick(event: CustomEvent) {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const target = event.target;\n    const tabs = this.getTabs();\n\n    tabs.forEach((tab, index) => {\n      if (!tab.disabled && tab === target) {\n        this.clickTab(index);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.showArrowPrevious && (\n          <div class=\"arrow\" onClick={() => this.move(this.scrollAmount, true)}>\n            <ix-icon name={'chevron-left-small'}></ix-icon>\n          </div>\n        )}\n        <div\n          class={{\n            'tab-items': true,\n            'overflow-shadow': true,\n            'shadow-left': this.showArrowPrevious,\n            'shadow-right': this.showArrowNext,\n            'shadow-both': this.showArrowNext && this.showArrowPrevious,\n          }}\n        >\n          <div class=\"items-content\">\n            <slot></slot>\n          </div>\n        </div>\n        {this.showArrowNext && (\n          <div\n            class=\"arrow right\"\n            onClick={() => this.move(-this.scrollAmount, true)}\n          >\n            <ix-icon name={'chevron-right-small'}></ix-icon>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}