@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048

package/dist/siemens-ix/{p-6bd0ba14.entry.js → p-3be4c628.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as r,H as o,g as a}from"./p-f86a894a.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:"b61de72c11dd4900ec0fd2ca5ebb8beaf98e8709",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:"f348e684d80e233707c6e2a36ba3f4a882c59f7b",class:{circle:this.rounded,text:!this.rounded,selected:this.selected,disabled:this.disabled}},r("slot",{key:"d825fade370f3f9c4fdda4856886fba231d8f410"})),r("div",{key:"8eab5e1d95bd6412eeb840660b3d1f32343f21e6",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:"a9c383f30565690984150c5bb5e144a50a08e422"},r("div",{key:"e505fbd880ce2eef0faf325c12a1352304f62345",class:"arrow","data-arrow-left":true,onClick:()=>this.move(this.scrollAmount,true)},r("ix-icon",{key:"390e636793050dec280c0af33f3f7f55a7955dbf",name:"chevron-left-small"})),r("div",{key:"190636a8f3eb4eedef2f9971285a807e94e84798",class:{"tab-items":true,"overflow-shadow":true,"shadow-left":this.showPreviousArrow(),"shadow-right":this.showNextArrow(),"shadow-both":this.showNextArrow()&&this.showPreviousArrow()}},r("div",{key:"3a93ba0ebc7bf708de196b86bfa640d941a67750",class:"items-content"},r("slot",{key:"504236daba4c544bd0b574e0b50556deaba8c9c8"}))),r("div",{key:"40dd25a8e3fac3840bdb6b8f2b76abccd090aaaa",class:"arrow right","data-arrow-right":true,onClick:()=>this.move(-this.scrollAmount,true)},r("ix-icon",{key:"c163d47af17bf1b9b85890d70ad2d90a1b842b9c",name:"chevron-right-small"})))}get hostElement(){return a(this)}};d.style=h;export{c as ix_tab_item,d as ix_tabs};
-//# sourceMappingURL=p-6bd0ba14.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:"284337753b942d805e3301d47b46f43fd611839e",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:"e53dc7eb7ceee4d3760a74f8e0ad36f70f819eb1",class:{circle:this.rounded,text:!this.rounded,selected:this.selected,disabled:this.disabled}},r("slot",{key:"ef8347c3459c57bc0207d91d1cb7ea9d161ed331"})),r("div",{key:"60e2d9001009e554a137804493a2e5661f31a3f6",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:"7f56f404c30ce0efd9971b1d5a8d98179c8c0e3b"},this.showArrowPrevious&&r("div",{key:"5aab91bd6947e5775cac09c3778cb8610aa4f527",class:"arrow",onClick:()=>this.move(this.scrollAmount,true)},r("ix-icon",{key:"c387a77b0d6c88f288097d33e71b24bacdf5942a",name:"chevron-left-small"})),r("div",{key:"9d3d4b218bb482a97a12ed1d3b60a0c0778e148f",class:{"tab-items":true,"overflow-shadow":true,"shadow-left":this.showArrowPrevious,"shadow-right":this.showArrowNext,"shadow-both":this.showArrowNext&&this.showArrowPrevious}},r("div",{key:"3692d6262fa4c6ec31ee7e87b1fb24e9c5dafd85",class:"items-content"},r("slot",{key:"8c8053f371fcc4b6a2b2a24c8fc45bd5517df874"}))),this.showArrowNext&&r("div",{key:"ffa28714c41cb40cf9accc96a15a2e28542f7ca2",class:"arrow right",onClick:()=>this.move(-this.scrollAmount,true)},r("ix-icon",{key:"f048b24c5704ac92311427ae05f23898d3a08ca4",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-3be4c628.entry.js.map

package/dist/siemens-ix/p-3be4c628.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: 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\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: 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 {\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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"}

package/dist/siemens-ix/p-3e867ef9.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as o,H as r}from"./p-f87cd962.js";const s=":host{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}: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 .tree-node-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}:host .tree-node-container .tree-node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem}:host .icon-toggle-container ix-icon{transition:transform var(--theme-default-time) ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(:disabled):not(.selected).hover),:host(:not(.disabled):not(:disabled):not(.selected):hover){background-color:var(--theme-tree-item--background--hover)}:host(:not(.disabled):not(:disabled):not(.selected).active),:host(:not(.disabled):not(:disabled):not(.selected):active){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}";const a=s;const i=class{constructor(o){e(this,o);this.toggle=t(this,"toggle",7);this.itemClick=t(this,"itemClick",7);this.text=undefined;this.hasChildren=false;this.context=undefined}render(){var e,t,s;return o(r,{key:"af04e0621f45ae100e93ed008f9584fd1bfd8f1c",class:{selected:!!((e=this.context)===null||e===void 0?void 0:e.isSelected)}},o("div",{key:"d2322ceb29667302aa35d60ca231939130981713",class:"icon-toggle-container",onClick:e=>{e.preventDefault();this.toggle.emit()}},this.hasChildren?o("ix-icon",{name:"chevron-right",size:"16",class:{["icon-toggle-down"]:!!((t=this.context)===null||t===void 0?void 0:t.isExpanded)},color:`color-${((s=this.context)===null||s===void 0?void 0:s.isExpanded)?"primary":"std-text"}`}):null),o("div",{key:"3a601aacb532bc20d24a405ed7c898834eb170a1",class:"tree-node-container",onClick:()=>{this.itemClick.emit()}},o("div",{key:"f4d83073948516d65a284ec165506e692e2eccfe",class:"tree-node-text"},this.text),o("slot",{key:"fd4daf32a17bf1b84170049aae1cacf93b0fd586"})))}};i.style=a;export{i as ix_tree_item};
+//# sourceMappingURL=p-3e867ef9.entry.js.map

package/dist/siemens-ix/p-3e867ef9.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["treeItemCss","IxTreeItemStyle0","TreeItem","render","h","Host","key","class","selected","_a","this","context","isSelected","onClick","e","preventDefault","toggle","emit","hasChildren","name","size","_b","isExpanded","color","_c","itemClick","text"],"sources":["src/components/tree-item/tree-item.scss?tag=ix-tree-item&encapsulation=shadow","src/components/tree-item/tree-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: center;\n\n  height: 32px;\n  width: 100%;\n\n  cursor: pointer;\n\n  .tree-node-container {\n    @include ellipsis;\n    display: flex;\n    align-items: center;\n    height: $x-large-space;\n    flex-grow: 1;\n    align-items: center;\n\n    .tree-node-text {\n      @include ellipsis;\n    }\n  }\n\n  .icon-toggle-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    min-width: 2rem;\n\n    ix-icon {\n      transition: transform var(--theme-default-time) ease-in-out;\n\n      &.icon-toggle-down {\n        transform: rotate(90deg);\n      }\n    }\n  }\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).hover),\n:host(:not(.disabled):not(:disabled):not(.selected):hover) {\n  background-color: var(--theme-tree-item--background--hover);\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).active),\n:host(:not(.disabled):not(:disabled):not(.selected):active) {\n  background-color: var(--theme-tree-item--background--active);\n}\n\n:host(.selected) {\n  background-color: var(--theme-tree-item--background--selected);\n}\n\n:host(.selected.hover),\n:host(.selected:hover) {\n  background-color: var(--theme-tree-item--background--selected-hover);\n}\n\n:host(.selected.active),\n:host(.selected:active) {\n  background-color: var(--theme-tree-item--background--selected-active);\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\n\n@Component({\n  tag: 'ix-tree-item',\n  styleUrl: 'tree-item.scss',\n  shadow: true,\n})\nexport class TreeItem {\n  /**\n   * Text\n   */\n  @Prop() text?: string;\n\n  /**\n   * Has tree item children\n   */\n  @Prop() hasChildren = false;\n\n  /**\n   * Context\n   */\n  @Prop() context?: TreeItemContext;\n\n  /**\n   * Expand/Collapsed toggled\n   */\n  @Event() toggle!: EventEmitter<void>;\n\n  /**\n   * Click on item not on the expand/collapse icon\n   */\n  @Event() itemClick!: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: !!this.context?.isSelected,\n        }}\n      >\n        <div\n          class=\"icon-toggle-container\"\n          onClick={(e) => {\n            e.preventDefault();\n            this.toggle.emit();\n          }}\n        >\n          {this.hasChildren ? (\n            <ix-icon\n              name={'chevron-right'}\n              size=\"16\"\n              class={{\n                ['icon-toggle-down']: !!this.context?.isExpanded,\n              }}\n              color={`color-${\n                this.context?.isExpanded ? 'primary' : 'std-text'\n              }`}\n            />\n          ) : null}\n        </div>\n        <div\n          class=\"tree-node-container\"\n          onClick={() => {\n            this.itemClick.emit();\n          }}\n        >\n          <div class=\"tree-node-text\">{this.text}</div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAc,+gEACpB,MAAAC,EAAeD,E,MCgBFE,EAAQ,M,kIASG,M,uBAiBtB,MAAAC,G,UACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,aAAYC,EAAAC,KAAKC,WAAO,MAAAF,SAAA,SAAAA,EAAEG,cAG5BR,EAAA,OAAAE,IAAA,2CACEC,MAAM,wBACNM,QAAUC,IACRA,EAAEC,iBACFL,KAAKM,OAAOC,MAAM,GAGnBP,KAAKQ,YACJd,EAAA,WACEe,KAAM,gBACNC,KAAK,KACLb,MAAO,CACL,CAAC,wBAAuBc,EAAAX,KAAKC,WAAO,MAAAU,SAAA,SAAAA,EAAEC,aAExCC,MAAO,WACLC,EAAAd,KAAKC,WAAO,MAAAa,SAAA,SAAAA,EAAEF,YAAa,UAAY,eAGzC,MAENlB,EAAA,OAAAE,IAAA,2CACEC,MAAM,sBACNM,QAAS,KACPH,KAAKe,UAAUR,MAAM,GAGvBb,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBAAkBG,KAAKgB,MAClCtB,EAAA,QAAAE,IAAA,8C"}

package/dist/siemens-ix/p-40f20208.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,H as r,g as e}from"./p-f87cd962.js";import{m as i}from"./p-ce563a48.js";const s=":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 a=s;const n=class{constructor(o){t(this,o);this.dropdownAnchor=i();this.variant="primary";this.outline=false;this.ghost=false;this.disabled=false;this.label=undefined;this.icon=undefined;this.closeBehavior="both";this.placement=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:"de22caabcde75df5653f3a44066a2510d5356b46",class:{disabled:this.disabled},ref:this.dropdownAnchor},o("div",{key:"b704fee9b1f8842fe6468c8f510d880e75117208",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:"d902fac793dc815b6f2aa7259d7f7c3fb8923879",class:"dropdown",trigger:this.dropdownAnchor.waitForCurrent(),placement:this.placement,closeBehavior:this.closeBehavior},o("slot",{key:"173ee7c5e1ded4424fd5693ac802037800b278f9"})))}get hostElement(){return e(this)}};n.style=a;export{n as ix_dropdown_button};
+//# sourceMappingURL=p-40f20208.entry.js.map

package/dist/siemens-ix/p-40f20208.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownButtonCss","IxDropdownButtonStyle0","DropdownButton","this","dropdownAnchor","makeRef","getTriangle","h","class","triangle","hide","label","primary","variant","secondary","ghost","outline","disabled","render","Host","key","ref","alignment","icon","name","size","trigger","waitForCurrent","placement","closeBehavior"],"sources":["src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=shadow","src/components/dropdown-button/dropdown-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n  height: $x-large-space;\n  width: auto;\n\n  .hide {\n    display: none;\n  }\n\n  .dropdown-button {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button > ix-button {\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button .button-label {\n    margin-right: auto;\n    min-width: 0px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .dropdown-button .dropdown-icon {\n    margin-right: 0.25rem;\n  }\n\n  .triangle {\n    position: absolute;\n    margin-inline-start: 1.5625rem;\n    margin-block-start: -0.4375rem;\n    border-right: 0 solid transparent;\n    border-left: 4px solid transparent;\n    border-top: 0 solid transparent;\n    border-bottom: 4px solid;\n    color: var(--theme-btn-primary--color);\n  }\n\n  .triangle.primary {\n    &.ghost {\n      color: var(--theme-btn-invisible-primary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-primary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-primary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-primary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-primary--color--disabled);\n    }\n  }\n\n  .triangle.secondary {\n    &.ghost {\n      color: var(--theme-btn-invisible-secondary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-secondary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-secondary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-secondary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-secondary--color--disabled);\n    }\n  }\n\n  .content {\n    display: flex;\n    align-items: center;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\nimport { makeRef } from '../utils/make-ref';\n\nexport type DropdownButtonVariant = ButtonVariant;\n\n/**\n * @since 1.3.0\n */\n@Component({\n  tag: 'ix-dropdown-button',\n  styleUrl: 'dropdown-button.scss',\n  shadow: true,\n})\nexport class DropdownButton {\n  @Element() hostElement!: HTMLIxDropdownButtonElement;\n\n  /**\n   * Button variant\n   */\n  @Prop() variant: DropdownButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   * @since 2.1.0\n   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = 'both';\n\n  /**\n   * Placement of the dropdown\n   *\n   * @since 2.0.0\n   */\n  @Prop() placement?: AlignedPlacement;\n\n  private readonly dropdownAnchor = makeRef<HTMLElement>();\n\n  private getTriangle() {\n    return (\n      <div\n        class={{\n          triangle: true,\n          hide: this.label !== '',\n          primary: this.variant === 'primary',\n          secondary: this.variant === 'secondary',\n          ghost: this.ghost,\n          outline: this.outline,\n          disabled: this.disabled,\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n        ref={this.dropdownAnchor}\n      >\n        <div class=\"dropdown-button\">\n          {this.label ? (\n            <ix-button\n              variant={this.variant}\n              outline={this.outline}\n              ghost={this.ghost}\n              disabled={this.disabled}\n              alignment=\"start\"\n            >\n              <div class={'content'}>\n                {this.icon ? (\n                  <ix-icon\n                    name={this.icon}\n                    size=\"24\"\n                    class={'dropdown-icon'}\n                  ></ix-icon>\n                ) : null}\n                <div class={'button-label'}>{this.label}</div>\n                <ix-icon name={'chevron-down-small'} size=\"24\"></ix-icon>\n              </div>\n            </ix-button>\n          ) : (\n            <div>\n              <ix-icon-button\n                icon={this.icon}\n                variant={this.variant}\n                outline={this.outline}\n                ghost={this.ghost}\n                disabled={this.disabled}\n              ></ix-icon-button>\n              {this.getTriangle()}\n            </div>\n          )}\n        </div>\n\n        <ix-dropdown\n          class=\"dropdown\"\n          trigger={this.dropdownAnchor.waitForCurrent()}\n          placement={this.placement}\n          closeBehavior={this.closeBehavior}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAoB,41EAC1B,MAAAC,EAAeD,E,MCuBFE,EAAc,M,yBA8CRC,KAAAC,eAAiBC,I,aAxCO,U,aAKvB,M,WAKF,M,cAKG,M,4DAgB8C,O,yBAWzD,WAAAC,GACN,OACEC,EAAA,OACEC,MAAO,CACLC,SAAU,KACVC,KAAMP,KAAKQ,QAAU,GACrBC,QAAST,KAAKU,UAAY,UAC1BC,UAAWX,KAAKU,UAAY,YAC5BE,MAAOZ,KAAKY,MACZC,QAASb,KAAKa,QACdC,SAAUd,KAAKc,W,CAMvB,MAAAC,GACE,OACEX,EAACY,EAAI,CAAAC,IAAA,2CACHZ,MAAO,CACLS,SAAUd,KAAKc,UAEjBI,IAAKlB,KAAKC,gBAEVG,EAAA,OAAAa,IAAA,2CAAKZ,MAAM,mBACRL,KAAKQ,MACJJ,EAAA,aACEM,QAASV,KAAKU,QACdG,QAASb,KAAKa,QACdD,MAAOZ,KAAKY,MACZE,SAAUd,KAAKc,SACfK,UAAU,SAEVf,EAAA,OAAKC,MAAO,WACTL,KAAKoB,KACJhB,EAAA,WACEiB,KAAMrB,KAAKoB,KACXE,KAAK,KACLjB,MAAO,kBAEP,KACJD,EAAA,OAAKC,MAAO,gBAAiBL,KAAKQ,OAClCJ,EAAA,WAASiB,KAAM,qBAAsBC,KAAK,SAI9ClB,EAAA,WACEA,EAAA,kBACEgB,KAAMpB,KAAKoB,KACXV,QAASV,KAAKU,QACdG,QAASb,KAAKa,QACdD,MAAOZ,KAAKY,MACZE,SAAUd,KAAKc,WAEhBd,KAAKG,gBAKZC,EAAA,eAAAa,IAAA,2CACEZ,MAAM,WACNkB,QAASvB,KAAKC,eAAeuB,iBAC7BC,UAAWzB,KAAKyB,UAChBC,cAAe1B,KAAK0B,eAEpBtB,EAAA,QAAAa,IAAA,8C"}

package/dist/siemens-ix/{p-61265df9.entry.js → p-41935530.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as o,h as e,H as s,g as a}from"./p-f86a894a.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:"ca58e7b2c0e4ee3d77bb0ee9be2a7ff86759f52a",class:"animate__animated animate__fadeIn"},e("div",{key:"0d37ab4e3103087f5cb6d8b55c7afe843b2359c3",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:"83e897aa8388de4205c5348f7db698da94f83a19",class:"toast-content"},this.toastTitle?e("div",{class:"toast-title"},this.toastTitle):null,e("div",{key:"306f6cb5055ba4b60823d692bf7154c8364ab0f5",class:"toast-message"},e("slot",{key:"fcea3e5a631e27e9045167fde508e610c964063a"}))),e("div",{key:"706771eeb884647bd84a3895da2e42409971ab2e",class:"toast-close"},e("ix-icon-button",{key:"7e27ce2f29d8d010d216bf6ef3d69feb9ebe51c8",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-61265df9.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:"e00304dc08ce19e66135e61ae24c927d15fb37e5",class:"animate__animated animate__fadeIn"},e("div",{key:"e53eab36e6c27b98be7f8c36f9d03005e510cdf5",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:"91137fd2fd716ced8b18201895f19fffb12debb8",class:"toast-content"},this.toastTitle?e("div",{class:"toast-title"},this.toastTitle):null,e("div",{key:"bf560ba99247ceedde1aed98ffaa9a50ee1eca30",class:"toast-message"},e("slot",{key:"6c39fed29c462a1931c7d4eea06632f7497aa674"}))),e("div",{key:"b62c72ff64b9fc9e0f9944050a3a2482d6d83d85",class:"toast-close"},e("ix-icon-button",{key:"14406229f4b5d7a6ef23317a295b4f5904f2fc03",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-41935530.entry.js.map

package/dist/siemens-ix/{p-61265df9.entry.js.map → p-41935530.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["toastCss","IxToastStyle0","Toast","getIcon","this","icon","h","name","color","iconColor","size","type","close","hostElement","classList","add","setTimeout","closeToast","emit","render","progressBarStyle","progressBarClass","animationDuration","autoCloseDelay","animationPlayState","touched","push","Host","key","class","onPointerLeave","onPointerEnter","toastTitle","ghost","onClick","autoClose","join","style","onAnimationEnd","onTransitionEnd","progress"],"sources":["src/components/toast/toast.scss?tag=ix-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: 17.5rem;\n  max-width: 17.5rem;\n  min-height: 3.5rem;\n\n  pointer-events: all;\n\n  background-color: var(--theme-toast--background);\n  border: var(--theme-toast--border-thickness) solid\n    var(--theme-toast--border-color);\n  border-radius: var(--theme-toast--border-radius);\n  box-shadow: var(--theme-toast--box-shadow);\n\n  --animate-duration: #{$medium-time};\n\n  .toast-body {\n    display: flex;\n    position: relative;\n    min-height: 3.5rem;\n    width: 100%;\n    flex-grow: 1;\n    padding: 0.75rem;\n\n    .toast-icon {\n      display: flex;\n      align-items: flex-start;\n      margin-right: $default-space;\n    }\n\n    .toast-content {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: 0;\n      width: 100%;\n\n      .toast-title {\n        @include text-default-title-single;\n        margin: 0.25rem 0px;\n      }\n\n      .toast-message {\n        min-width: 0;\n\n        @include text-default;\n      }\n    }\n\n    .toast-icon + .toast-content {\n      max-width: 10.25rem;\n    }\n  }\n\n  .toast-close {\n    display: flex;\n    position: relative;\n    pointer-events: all;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .toast-progress-bar {\n    position: absolute;\n    bottom: 0;\n    height: $tiny-space;\n    width: 100%;\n    background-color: var(--theme-toast-timer-value--background);\n    transform-origin: left;\n\n    &--animated {\n      animation: trackProgress linear 1 forwards;\n    }\n  }\n\n  @keyframes trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast',\n  styleUrl: 'toast.scss',\n  shadow: true,\n})\nexport class Toast {\n  /**\n   * Toast type\n   */\n  @Prop() type: ToastType = 'info';\n\n  /**\n   * Toast title\n   */\n  @Prop() toastTitle: string;\n\n  /**\n   * Autoclose title after delay\n   */\n  @Prop() autoCloseDelay = 5000;\n\n  /**\n   * Autoclose behavior\n   */\n  @Prop() autoClose = true;\n\n  /**\n   * Icon of toast\n   */\n  @Prop() icon: string;\n\n  /**\n   * Icon color of toast\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Toast closed\n   */\n  @Event() closeToast: EventEmitter;\n\n  @State() progress = 0;\n  @State() touched = false;\n\n  @Element() hostElement!: HTMLIxToastElement;\n\n  private getIcon() {\n    if (this.icon) {\n      return (\n        <ix-icon\n          data-testid=\"toast-icon\"\n          name={this.icon}\n          color={this.iconColor}\n          size=\"24\"\n        />\n      );\n    }\n\n    switch (this.type) {\n      case 'info':\n        return (\n          <ix-icon\n            data-testid=\"toast-icon\"\n            name={'info'}\n            size=\"24\"\n            color=\"color-std-text\"\n          />\n        );\n\n      case 'error':\n        return (\n          <ix-icon\n            data-testid=\"toast-icon\"\n            name={'error'}\n            size=\"24\"\n            color=\"color-alarm\"\n          />\n        );\n\n      case 'success':\n        return (\n          <ix-icon\n            data-testid=\"toast-icon\"\n            name={'success'}\n            size=\"24\"\n            color=\"color-success\"\n          />\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            data-testid=\"toast-icon\"\n            name={'warning'}\n            size=\"24\"\n            color=\"color-warning\"\n          />\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private close() {\n    if (this.hostElement) {\n      this.hostElement.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    progressBarStyle = {\n      animationDuration: `${this.autoCloseDelay}ms`,\n      animationPlayState: this.touched ? 'paused' : 'running',\n    };\n\n    progressBarClass.push('toast-progress-bar--animated');\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.touched = false;\n          }}\n          onPointerEnter={() => {\n            this.touched = true;\n          }}\n        >\n          {this.type || this.icon ? (\n            <div class=\"toast-icon\">{this.getIcon()}</div>\n          ) : null}\n          <div class=\"toast-content\">\n            {this.toastTitle ? (\n              <div class=\"toast-title\">{this.toastTitle}</div>\n            ) : null}\n            <div class=\"toast-message\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"toast-close\">\n            <ix-icon-button\n              icon={'close'}\n              size=\"24\"\n              ghost\n              onClick={() => this.closeToast.emit()}\n            />\n          </div>\n        </div>\n        {this.autoClose ? (\n          <div\n            class={progressBarClass.join(' ')}\n            style={progressBarStyle}\n            onAnimationEnd={() => {\n              this.close();\n            }}\n            onTransitionEnd={() => {\n              if (this.progress === 0) {\n                this.close();\n              }\n            }}\n          ></div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAW,m3EACjB,MAAAC,EAAeD,E,MCyBFE,EAAK,M,0EAIU,O,8CAUD,I,eAKL,K,2DAiBA,E,aACD,K,CAIX,OAAAC,GACN,GAAIC,KAAKC,KAAM,CACb,OACEC,EAAA,yBACc,aACZC,KAAMH,KAAKC,KACXG,MAAOJ,KAAKK,UACZC,KAAK,M,CAKX,OAAQN,KAAKO,MACX,IAAK,OACH,OACEL,EAAA,yBACc,aACZC,KAAM,OACNG,KAAK,KACLF,MAAM,mBAIZ,IAAK,QACH,OACEF,EAAA,yBACc,aACZC,KAAM,QACNG,KAAK,KACLF,MAAM,gBAIZ,IAAK,UACH,OACEF,EAAA,yBACc,aACZC,KAAM,UACNG,KAAK,KACLF,MAAM,kBAIZ,IAAK,UACH,OACEF,EAAA,yBACc,aACZC,KAAM,UACNG,KAAK,KACLF,MAAM,kBAIZ,QACE,MAAO,G,CAIL,KAAAI,GACN,GAAIR,KAAKS,YAAa,CACpBT,KAAKS,YAAYC,UAAUC,IAAI,mB,CAEjCC,YAAW,KACTZ,KAAKa,WAAWC,MAAM,GACrB,I,CAGL,MAAAC,GACE,IAAIC,EAA2C,GAE/C,MAAMC,EAAmB,CAAC,sBAE1BD,EAAmB,CACjBE,kBAAmB,GAAGlB,KAAKmB,mBAC3BC,mBAAoBpB,KAAKqB,QAAU,SAAW,WAGhDJ,EAAiBK,KAAK,gCAEtB,OACEpB,EAACqB,EAAI,CAAAC,IAAA,2CAACC,MAAM,qCACVvB,EAAA,OAAAsB,IAAA,2CACEC,MAAM,aACNC,eAAgB,KACd1B,KAAKqB,QAAU,KAAK,EAEtBM,eAAgB,KACd3B,KAAKqB,QAAU,IAAI,GAGpBrB,KAAKO,MAAQP,KAAKC,KACjBC,EAAA,OAAKuB,MAAM,cAAczB,KAAKD,WAC5B,KACJG,EAAA,OAAAsB,IAAA,2CAAKC,MAAM,iBACRzB,KAAK4B,WACJ1B,EAAA,OAAKuB,MAAM,eAAezB,KAAK4B,YAC7B,KACJ1B,EAAA,OAAAsB,IAAA,2CAAKC,MAAM,iBACTvB,EAAA,QAAAsB,IAAA,+CAGJtB,EAAA,OAAAsB,IAAA,2CAAKC,MAAM,eACTvB,EAAA,kBAAAsB,IAAA,2CACEvB,KAAM,QACNK,KAAK,KACLuB,MAAK,KACLC,QAAS,IAAM9B,KAAKa,WAAWC,WAIpCd,KAAK+B,UACJ7B,EAAA,OACEuB,MAAOR,EAAiBe,KAAK,KAC7BC,MAAOjB,EACPkB,eAAgB,KACdlC,KAAKQ,OAAO,EAEd2B,gBAAiB,KACf,GAAInC,KAAKoC,WAAa,EAAG,CACvBpC,KAAKQ,O,KAIT,K"}
+{"version":3,"names":["toastCss","IxToastStyle0","Toast","getIcon","this","icon","h","name","color","iconColor","size","type","close","hostElement","classList","add","setTimeout","closeToast","emit","render","progressBarStyle","progressBarClass","animationDuration","autoCloseDelay","animationPlayState","touched","push","Host","key","class","onPointerLeave","onPointerEnter","toastTitle","ghost","onClick","autoClose","join","style","onAnimationEnd","onTransitionEnd","progress"],"sources":["src/components/toast/toast.scss?tag=ix-toast&encapsulation=shadow","src/components/toast/toast.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 */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: 17.5rem;\n  max-width: 17.5rem;\n  min-height: 3.5rem;\n\n  pointer-events: all;\n\n  background-color: var(--theme-toast--background);\n  border: var(--theme-toast--border-thickness) solid\n    var(--theme-toast--border-color);\n  border-radius: var(--theme-toast--border-radius);\n  box-shadow: var(--theme-toast--box-shadow);\n\n  --animate-duration: #{$medium-time};\n\n  .toast-body {\n    display: flex;\n    position: relative;\n    min-height: 3.5rem;\n    width: 100%;\n    flex-grow: 1;\n    padding: 0.75rem;\n\n    .toast-icon {\n      display: flex;\n      align-items: flex-start;\n      margin-right: $default-space;\n    }\n\n    .toast-content {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: 0;\n      width: 100%;\n\n      .toast-title {\n        @include text-default-title-single;\n        margin: 0.25rem 0px;\n      }\n\n      .toast-message {\n        min-width: 0;\n\n        @include text-default;\n      }\n    }\n\n    .toast-icon + .toast-content {\n      max-width: 10.25rem;\n    }\n  }\n\n  .toast-close {\n    display: flex;\n    position: relative;\n    pointer-events: all;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .toast-progress-bar {\n    position: absolute;\n    bottom: 0;\n    height: $tiny-space;\n    width: 100%;\n    background-color: var(--theme-toast-timer-value--background);\n    transform-origin: left;\n\n    &--animated {\n      animation: trackProgress linear 1 forwards;\n    }\n  }\n\n  @keyframes trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast',\n  styleUrl: 'toast.scss',\n  shadow: true,\n})\nexport class Toast {\n  /**\n   * Toast type\n   */\n  @Prop() type: ToastType = 'info';\n\n  /**\n   * Toast title\n   */\n  @Prop() toastTitle: string;\n\n  /**\n   * Autoclose title after delay\n   */\n  @Prop() autoCloseDelay = 5000;\n\n  /**\n   * Autoclose behavior\n   */\n  @Prop() autoClose = true;\n\n  /**\n   * Icon of toast\n   */\n  @Prop() icon: string;\n\n  /**\n   * Icon color of toast\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Toast closed\n   */\n  @Event() closeToast: EventEmitter;\n\n  @State() progress = 0;\n  @State() touched = false;\n\n  @Element() hostElement!: HTMLIxToastElement;\n\n  private getIcon() {\n    if (this.icon) {\n      return (\n        <ix-icon\n          data-testid=\"toast-icon\"\n          name={this.icon}\n          color={this.iconColor}\n          size=\"24\"\n        />\n      );\n    }\n\n    switch (this.type) {\n      case 'info':\n        return (\n          <ix-icon\n            data-testid=\"toast-icon\"\n            name={'info'}\n            size=\"24\"\n            color=\"color-std-text\"\n          />\n        );\n\n      case 'error':\n        return (\n          <ix-icon\n            data-testid=\"toast-icon\"\n            name={'error'}\n            size=\"24\"\n            color=\"color-alarm\"\n          />\n        );\n\n      case 'success':\n        return (\n          <ix-icon\n            data-testid=\"toast-icon\"\n            name={'success'}\n            size=\"24\"\n            color=\"color-success\"\n          />\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            data-testid=\"toast-icon\"\n            name={'warning'}\n            size=\"24\"\n            color=\"color-warning\"\n          />\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private close() {\n    if (this.hostElement) {\n      this.hostElement.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    progressBarStyle = {\n      animationDuration: `${this.autoCloseDelay}ms`,\n      animationPlayState: this.touched ? 'paused' : 'running',\n    };\n\n    progressBarClass.push('toast-progress-bar--animated');\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.touched = false;\n          }}\n          onPointerEnter={() => {\n            this.touched = true;\n          }}\n        >\n          {this.type || this.icon ? (\n            <div class=\"toast-icon\">{this.getIcon()}</div>\n          ) : null}\n          <div class=\"toast-content\">\n            {this.toastTitle ? (\n              <div class=\"toast-title\">{this.toastTitle}</div>\n            ) : null}\n            <div class=\"toast-message\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"toast-close\">\n            <ix-icon-button\n              icon={'close'}\n              size=\"24\"\n              ghost\n              onClick={() => this.closeToast.emit()}\n            />\n          </div>\n        </div>\n        {this.autoClose ? (\n          <div\n            class={progressBarClass.join(' ')}\n            style={progressBarStyle}\n            onAnimationEnd={() => {\n              this.close();\n            }}\n            onTransitionEnd={() => {\n              if (this.progress === 0) {\n                this.close();\n              }\n            }}\n          ></div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAW,m3EACjB,MAAAC,EAAeD,E,MCyBFE,EAAK,M,0EAIU,O,8CAUD,I,eAKL,K,2DAiBA,E,aACD,K,CAIX,OAAAC,GACN,GAAIC,KAAKC,KAAM,CACb,OACEC,EAAA,yBACc,aACZC,KAAMH,KAAKC,KACXG,MAAOJ,KAAKK,UACZC,KAAK,M,CAKX,OAAQN,KAAKO,MACX,IAAK,OACH,OACEL,EAAA,yBACc,aACZC,KAAM,OACNG,KAAK,KACLF,MAAM,mBAIZ,IAAK,QACH,OACEF,EAAA,yBACc,aACZC,KAAM,QACNG,KAAK,KACLF,MAAM,gBAIZ,IAAK,UACH,OACEF,EAAA,yBACc,aACZC,KAAM,UACNG,KAAK,KACLF,MAAM,kBAIZ,IAAK,UACH,OACEF,EAAA,yBACc,aACZC,KAAM,UACNG,KAAK,KACLF,MAAM,kBAIZ,QACE,MAAO,G,CAIL,KAAAI,GACN,GAAIR,KAAKS,YAAa,CACpBT,KAAKS,YAAYC,UAAUC,IAAI,mB,CAEjCC,YAAW,KACTZ,KAAKa,WAAWC,MAAM,GACrB,I,CAGL,MAAAC,GACE,IAAIC,EAA2C,GAE/C,MAAMC,EAAmB,CAAC,sBAE1BD,EAAmB,CACjBE,kBAAmB,GAAGlB,KAAKmB,mBAC3BC,mBAAoBpB,KAAKqB,QAAU,SAAW,WAGhDJ,EAAiBK,KAAK,gCAEtB,OACEpB,EAACqB,EAAI,CAAAC,IAAA,2CAACC,MAAM,qCACVvB,EAAA,OAAAsB,IAAA,2CACEC,MAAM,aACNC,eAAgB,KACd1B,KAAKqB,QAAU,KAAK,EAEtBM,eAAgB,KACd3B,KAAKqB,QAAU,IAAI,GAGpBrB,KAAKO,MAAQP,KAAKC,KACjBC,EAAA,OAAKuB,MAAM,cAAczB,KAAKD,WAC5B,KACJG,EAAA,OAAAsB,IAAA,2CAAKC,MAAM,iBACRzB,KAAK4B,WACJ1B,EAAA,OAAKuB,MAAM,eAAezB,KAAK4B,YAC7B,KACJ1B,EAAA,OAAAsB,IAAA,2CAAKC,MAAM,iBACTvB,EAAA,QAAAsB,IAAA,+CAGJtB,EAAA,OAAAsB,IAAA,2CAAKC,MAAM,eACTvB,EAAA,kBAAAsB,IAAA,2CACEvB,KAAM,QACNK,KAAK,KACLuB,MAAK,KACLC,QAAS,IAAM9B,KAAKa,WAAWC,WAIpCd,KAAK+B,UACJ7B,EAAA,OACEuB,MAAOR,EAAiBe,KAAK,KAC7BC,MAAOjB,EACPkB,eAAgB,KACdlC,KAAKQ,OAAO,EAEd2B,gBAAiB,KACf,GAAInC,KAAKoC,WAAa,EAAG,CACvBpC,KAAKQ,O,KAIT,K"}

package/dist/siemens-ix/{p-293dd6d1.entry.js → p-41d9a2e4.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,f as o,h as i,g as s}from"./p-f86a894a.js";import{s as n,i as a,M as m}from"./p-37ca7ed4.js";const r=".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host .about-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .about-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host ix-menu-about-item{display:none}";const l=r;const f=class{constructor(o){t(this,o);this.close=e(this,"close",7);this.activeTabLabel=undefined;this.label="About & legal information";this.show=false;this.items=undefined}updateTab(t){n(this,t)}componentWillLoad(){a(this)}componentDidLoad(){o(this.el)}render(){return i(m,{key:"5941708ae679dfcdade09d02de399d2c910af7ce",context:this})}get el(){return s(this)}static get watchers(){return{activeTabLabel:["updateTab"]}}};f.style=l;export{f as ix_menu_about};
-//# sourceMappingURL=p-293dd6d1.entry.js.map
+import{r as t,c as e,f as o,h as i,g as s}from"./p-f87cd962.js";import{s as n,i as a,M as m}from"./p-24afab39.js";const r=".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host .about-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .about-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host ix-menu-about-item{display:none}";const l=r;const f=class{constructor(o){t(this,o);this.close=e(this,"close",7);this.activeTabLabel=undefined;this.label="About & legal information";this.show=false;this.items=undefined}updateTab(t){n(this,t)}componentWillLoad(){a(this)}componentDidLoad(){o(this.el)}render(){return i(m,{key:"6c26baf1a9ed356ca49b5cf6f766550cb3887c48",context:this})}get el(){return s(this)}static get watchers(){return{activeTabLabel:["updateTab"]}}};f.style=l;export{f as ix_menu_about};
+//# sourceMappingURL=p-41d9a2e4.entry.js.map

package/dist/siemens-ix/p-476e4a9d.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-157b1b28.js";import{O as s}from"./p-ec037f98.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=parseFloat(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:"e732b8b0abb9c05835a69f329ec09a8d8f4bad10",class:{disabled:this.disabled,error:!!this.error},onPointerDown:()=>setTimeout((()=>this.showTooltip=true))},r("div",{key:"5c74ea1cbb42221d164aa7f6c72d62e1b5d72f52",class:"slider"},r("div",{key:"46ea77e64c537351e5bf4f022ce698477aedbd68",class:"track"},r("div",{key:"0ef73875d92ac8c4cd3b511ab59fdc151ee8d3fb",class:"thumb",style:{left:`calc(${o} * 100% - 8px)`}}),r("div",{key:"b4b697564017c515c3d8238b9f9ac2c4e94da36d",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:"38a8d2c76cfdc4f9057d12d5e78b451a9f0be184",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:"20bffa59d285f462341781b8e0162b534b1ed39a",class:{"hide-tooltip":!this.showTooltip},animationFrame:true},this.rangeInput)),r("div",{key:"dc3e1182b70382953174fe9aaa6b72580399b0a6",class:"label"},r("div",{key:"1de84251ec7dd5b35ebb2dfe992946342cfbff40",class:"label-start"},r("slot",{key:"78e24e0d4a8d921ca1dfd180d784380339e3c289",name:"label-start"})),r("div",{key:"d71be5076dce4fb930e0a450d310fee9a6f2edc3",class:"label-end"},r("slot",{key:"3c66ac4eb4b383e9717da73a527dfa631adcdef7",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-476e4a9d.entry.js.map

package/dist/siemens-ix/p-476e4a9d.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","parseFloat","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 = parseFloat(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-25ee1b62.js → p-4ac31849.js}

@@ -1,2 +1,2 @@
 class t{hasCategory(){return this.category!==undefined}constructor(t,s){this.token=t;this.category=s}}var s;(function(t){t["EQUAL"]="Equal";t["NOT_EQUAL"]="Not equal"})(s||(s={}));export{t as I,s as L};
-//# sourceMappingURL=p-25ee1b62.js.map
+//# sourceMappingURL=p-4ac31849.js.map

package/dist/siemens-ix/{p-25ee1b62.js.map → p-4ac31849.js.map}

@@ -1 +1 @@
-{"version":3,"names":["InputState","hasCategory","this","category","undefined","constructor","token","LogicalFilterOperator"],"sources":["src/components/category-filter/input-state.ts","src/components/category-filter/logical-filter-operator.ts"],"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\nexport class InputState {\n  public token: string;\n  public category: string;\n\n  public hasCategory() {\n    return this.category !== undefined;\n  }\n\n  constructor(token: string, category: string) {\n    this.token = token;\n    this.category = category;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n// eslint-disable-next-line @stencil-community/ban-exported-const-enums\nexport enum LogicalFilterOperator {\n  EQUAL = 'Equal',\n  NOT_EQUAL = 'Not equal',\n}\n"],"mappings":"MASaA,EAIJ,WAAAC,GACL,OAAOC,KAAKC,WAAaC,S,CAG3B,WAAAC,CAAYC,EAAeH,GACzBD,KAAKI,MAAQA,EACbJ,KAAKC,SAAWA,C,MCTRI,GAAZ,SAAYA,GACVA,EAAA,iBACAA,EAAA,wBACD,EAHD,CAAYA,MAAqB,Y"}
+{"version":3,"names":["InputState","hasCategory","this","category","undefined","constructor","token","LogicalFilterOperator"],"sources":["src/components/category-filter/input-state.ts","src/components/category-filter/logical-filter-operator.ts"],"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\nexport class InputState {\n  public token: string;\n  public category: string;\n\n  public hasCategory() {\n    return this.category !== undefined;\n  }\n\n  constructor(token: string, category: string) {\n    this.token = token;\n    this.category = category;\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\n// eslint-disable-next-line @stencil-community/ban-exported-const-enums\nexport enum LogicalFilterOperator {\n  EQUAL = 'Equal',\n  NOT_EQUAL = 'Not equal',\n}\n"],"mappings":"MASaA,EAIJ,WAAAC,GACL,OAAOC,KAAKC,WAAaC,S,CAG3B,WAAAC,CAAYC,EAAeH,GACzBD,KAAKI,MAAQA,EACbJ,KAAKC,SAAWA,C,MCTRI,GAAZ,SAAYA,GACVA,EAAA,iBACAA,EAAA,wBACD,EAHD,CAAYA,MAAqB,Y"}

package/dist/siemens-ix/{p-35690183.entry.js → p-509dba4c.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,H as s,g as r}from"./p-f86a894a.js";import{c as i}from"./p-e898862b.js";import{a as o}from"./p-360b158e.js";import{a}from"./p-71206084.js";const h=":host{display:block;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 ul{list-style:none;padding:0;margin-top:0;margin-bottom:0}:host(.item-size-l){--event-list-item-height:6.5rem;--event-list-item-content-white-space:normal}:host(.compact){--event-list-item-border-radius:0;--event-list-item-margin-bottom:0}";const n=h;const c=class{constructor(e){t(this,e);this.mutationObserver=i(this.onMutation.bind(this));this.itemHeight="S";this.compact=false;this.animated=true;this.chevron=undefined}watchChevron(t){this.handleChevron(t)}componentDidLoad(){if(this.animated){this.triggerFadeIn()}if(!Number.isNaN(Number(this.itemHeight))){const t=o(this.itemHeight);this.hostElement.querySelectorAll("ix-event-list-item").forEach((e=>{this.setCustomHeight(e,t)}))}this.handleChevron(this.chevron);this.mutationObserver.observe(this.hostElement,{childList:true,subtree:true})}onMutation(t){this.triggerFadeOut().then((()=>{if(typeof this.itemHeight==="number"){const e=o(this.itemHeight);t.filter((t=>t.type==="childList")).forEach((t=>t.addedNodes.forEach((t=>{const s=t;this.setCustomHeight(s,e)}))))}this.handleChevron(this.chevron);this.triggerFadeIn()}))}setCustomHeight(t,e){t.style.setProperty("--event-list-item-height",e)}triggerFadeOut(){return new Promise((t=>{if(!this.animated){t()}const e=[{opacity:1,easing:"easeInSine"},{opacity:0}];const s=this.hostElement.shadowRoot.querySelector("ul");a({targets:s,opacity:e,duration:c.fadeOutDuration,complete:()=>{t()}})}))}triggerFadeIn(){if(!this.animated){return}const t=this.hostElement.querySelectorAll("ix-event-list-item");t.forEach(((t,e)=>{const s=e*80;const r=s/(s+c.fadeInDuration);a({targets:t,offset:r,duration:c.fadeInDuration+s,opacity:[0,1],easing:"easeInOutSine",delay:s,autoplay:true})}))}handleChevron(t){const e=this.hostElement.querySelectorAll("ix-event-list-item");e.forEach((e=>{if(t){e.setAttribute("chevron","true")}else if(t!==undefined){e.removeAttribute("chevron")}}))}render(){return e(s,{key:"7e829e5b48c5deec1873bd30986cefd8dd15c93d",class:{"item-size-s":this.itemHeight==="S","item-size-l":this.itemHeight==="L",compact:this.compact}},e("ul",{key:"dfe86ab8adc375f17815688e818f6f105ede0a68"},e("slot",{key:"2801a75b2776c4aca12bde1c59e72b310c823e94"})))}get hostElement(){return r(this)}static get watchers(){return{chevron:["watchChevron"]}}};c.fadeOutDuration=50;c.fadeInDuration=150;c.style=n;export{c as ix_event_list};
-//# sourceMappingURL=p-35690183.entry.js.map
+import{r as t,h as e,H as s,g as r}from"./p-f87cd962.js";import{c as i}from"./p-e898862b.js";import{a as o}from"./p-360b158e.js";import{a}from"./p-71206084.js";const h=":host{display:block;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 ul{list-style:none;padding:0;margin-top:0;margin-bottom:0}:host(.item-size-l){--event-list-item-height:6.5rem;--event-list-item-content-white-space:normal}:host(.compact){--event-list-item-border-radius:0;--event-list-item-margin-bottom:0}";const c=h;const n=class{constructor(e){t(this,e);this.mutationObserver=i(this.onMutation.bind(this));this.itemHeight="S";this.compact=false;this.animated=true;this.chevron=undefined}watchChevron(t){this.handleChevron(t)}componentDidLoad(){if(this.animated){this.triggerFadeIn()}if(!Number.isNaN(Number(this.itemHeight))){const t=o(this.itemHeight);this.hostElement.querySelectorAll("ix-event-list-item").forEach((e=>{this.setCustomHeight(e,t)}))}this.handleChevron(this.chevron);this.mutationObserver.observe(this.hostElement,{childList:true,subtree:true})}onMutation(t){this.triggerFadeOut().then((()=>{if(typeof this.itemHeight==="number"){const e=o(this.itemHeight);t.filter((t=>t.type==="childList")).forEach((t=>t.addedNodes.forEach((t=>{const s=t;this.setCustomHeight(s,e)}))))}this.handleChevron(this.chevron);this.triggerFadeIn()}))}setCustomHeight(t,e){t.style.setProperty("--event-list-item-height",e)}triggerFadeOut(){return new Promise((t=>{if(!this.animated){t()}const e=[{opacity:1,easing:"easeInSine"},{opacity:0}];const s=this.hostElement.shadowRoot.querySelector("ul");a({targets:s,opacity:e,duration:n.fadeOutDuration,complete:()=>{t()}})}))}triggerFadeIn(){if(!this.animated){return}const t=this.hostElement.querySelectorAll("ix-event-list-item");t.forEach(((t,e)=>{const s=e*80;const r=s/(s+n.fadeInDuration);a({targets:t,offset:r,duration:n.fadeInDuration+s,opacity:[0,1],easing:"easeInOutSine",delay:s,autoplay:true})}))}handleChevron(t){const e=this.hostElement.querySelectorAll("ix-event-list-item");e.forEach((e=>{if(t){e.setAttribute("chevron","true")}else if(t!==undefined){e.removeAttribute("chevron")}}))}render(){return e(s,{key:"fa13ba5a87d097ce7edc2ecc0713c303bf555888",class:{"item-size-s":this.itemHeight==="S","item-size-l":this.itemHeight==="L",compact:this.compact}},e("ul",{key:"76184617f53221c9a8c71b267fbdcb50a7bea4a1"},e("slot",{key:"2bc36317ba99a9b4e428b2b4ecc209ee3bc2bf83"})))}get hostElement(){return r(this)}static get watchers(){return{chevron:["watchChevron"]}}};n.fadeOutDuration=50;n.fadeInDuration=150;n.style=c;export{n as ix_event_list};
+//# sourceMappingURL=p-509dba4c.entry.js.map

package/dist/siemens-ix/{p-6ca97a73.entry.js → p-50bcb3f8.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as o,H as a}from"./p-f86a894a.js";import{a as t}from"./p-71206084.js";const s=":host{margin:0.5rem 0.5rem 0rem 0.5rem}: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 .message-container{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .message-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:normal;white-space:normal}:host ix-icon{margin-top:0.25rem}";const i=s;const n=class{constructor(o){e(this,o);this.closedChange=r(this,"closedChange",7);this.type="info";this.dismissible=true;this.icon=undefined;this.color=undefined}componentWillRender(){if(this.type==="danger"){this.icon="error";this.color="color-alarm"}if(this.type==="info"){this.icon="info";this.color="color-info"}if(this.type==="warning"){this.icon="warning";this.color="color-warning"}}closeAlert(e){t({targets:e,duration:n.duration,opacity:[1,0],easing:"easeOutSine",complete:()=>{e.classList.add("d-none")}});this.closedChange.emit()}render(){return o(a,{key:"2e00662ab25672cbb4793193ed877681ffa5cf0c"},o("div",{key:"a4302a37f4d8009896ec563eae1088e7dd087544",class:{"message-container":true,[this.type]:true},role:"alert",ref:e=>this.divElement=e},o("ix-icon",{key:"3145307d2db100a3764c562dd5ad0efcb3790402",color:this.color,name:this.icon}),o("div",{key:"07908baa46ff4cbaef761b8557a96fc1fe3bb810",class:"message-content"},o("slot",{key:"126adbff8050b39a66c1234daac45c15f801089b"})),this.dismissible?o("ix-icon-button",{icon:"close",size:"24",ghost:true,onClick:()=>{this.closeAlert(this.divElement)},"data-testid":"close-btn"}):""))}};n.duration=300;n.style=i;export{n as ix_message_bar};
-//# sourceMappingURL=p-6ca97a73.entry.js.map
+import{r as e,c as r,h as o,H as t}from"./p-f87cd962.js";import{a as s}from"./p-71206084.js";const a=":host{margin:0.5rem 0.5rem 0rem 0.5rem}: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 .message-container{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .message-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:normal;white-space:normal}:host ix-icon{margin-top:0.25rem}";const i=a;const n=class{constructor(o){e(this,o);this.closedChange=r(this,"closedChange",7);this.type="info";this.dismissible=true;this.icon=undefined;this.color=undefined}componentWillRender(){if(this.type==="danger"){this.icon="error";this.color="color-alarm"}if(this.type==="info"){this.icon="info";this.color="color-info"}if(this.type==="warning"){this.icon="warning";this.color="color-warning"}}closeAlert(e){s({targets:e,duration:n.duration,opacity:[1,0],easing:"easeOutSine",complete:()=>{e.classList.add("d-none")}});this.closedChange.emit()}render(){return o(t,{key:"0c05da5a485ee5ed3080c9c1e61ed1dfb329fa36"},o("div",{key:"16694109db2e734ae96b57e4950f972b715a7881",class:{"message-container":true,[this.type]:true},role:"alert",ref:e=>this.divElement=e},o("ix-icon",{key:"190c9f98fe48070d204587987743a88be7429547",color:this.color,name:this.icon}),o("div",{key:"ca0ac01dded8ed064802fa1e04bb724db4ccdecf",class:"message-content"},o("slot",{key:"6ca3875be38102fbd55f12d2df6f2692c5d19a7c"})),this.dismissible?o("ix-icon-button",{icon:"close",size:"24",ghost:true,onClick:()=>{this.closeAlert(this.divElement)},"data-testid":"close-btn"}):""))}};n.duration=300;n.style=i;export{n as ix_message_bar};
+//# sourceMappingURL=p-50bcb3f8.entry.js.map

package/dist/siemens-ix/{p-628f031a.entry.js → p-5232d441.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as e,H as t,g as o}from"./p-f86a894a.js";import{h as a}from"./p-712e0ee0.js";const s=":host{display:flex;flex-direction:column;position:relative;padding:1.5rem 0rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}: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 .content{flex-grow:1;overflow:auto;padding-right:1.5rem}:host .content-header.slotted{margin-bottom:1rem;padding-right:1.5rem}";const c=s;const b=class{constructor(e){r(this,e);this.isContentHeaderSlotted=false}get contentHeaderSlot(){return this.hostElement.shadowRoot.querySelector(".content-header slot")}render(){return e(t,{key:"4dab1c37e7e25e92aae59819e21cdca4f303b917"},e("div",{key:"e1d4436222fbede16fe740f1f8b712c4227b9f26",class:{"content-header":true,slotted:this.isContentHeaderSlotted}},e("slot",{key:"0df5783d73aac22f87b644942b02ac2c1c9a4a66",name:"header",onSlotchange:()=>{this.isContentHeaderSlotted=a(this.contentHeaderSlot)}})),e("div",{key:"94713592851aa18c3b0b030c4a80e278cabbec35",class:"content"},e("slot",{key:"f78d233860cf1a36132a5b725791292524385a84"})))}get hostElement(){return o(this)}};b.style=c;export{b as ix_content};
-//# sourceMappingURL=p-628f031a.entry.js.map
+import{r,h as e,H as t,g as o}from"./p-f87cd962.js";import{h as a}from"./p-345e1c73.js";const s=":host{display:flex;flex-direction:column;position:relative;padding:1.5rem 0rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}: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 .content{flex-grow:1;overflow:auto;padding-right:1.5rem}:host .content-header.slotted{margin-bottom:1rem;padding-right:1.5rem}";const c=s;const b=class{constructor(e){r(this,e);this.isContentHeaderSlotted=false}get contentHeaderSlot(){return this.hostElement.shadowRoot.querySelector(".content-header slot")}render(){return e(t,{key:"dd1c1ab77be1d58c1ea37ff734bf1dc532dcbac8"},e("div",{key:"bc51a3d54ad54ff8b04d849373ff36bc459eb22e",class:{"content-header":true,slotted:this.isContentHeaderSlotted}},e("slot",{key:"2f881064d7a9995312dd550fb0e78b31aa3e4ee2",name:"header",onSlotchange:()=>{this.isContentHeaderSlotted=a(this.contentHeaderSlot)}})),e("div",{key:"ed8feb7afa2345dfbf839e0700eb0c2b52451b9d",class:"content"},e("slot",{key:"77c56517a1f57af5487a86ebb256e8af0a75fcd2"})))}get hostElement(){return o(this)}};b.style=c;export{b as ix_content};
+//# sourceMappingURL=p-5232d441.entry.js.map

package/dist/siemens-ix/{p-b5c4fd55.entry.js → p-619a80d3.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as o,H as r}from"./p-f86a894a.js";const t=":host{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}: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 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .kpi-container{display:flex;height:100%;width:100%;border-block-end:2px solid grey}:host .kpi-container.alarm{border-block-end-color:var(--theme-color-alarm)}:host .kpi-container.warning{border-block-end-color:var(--theme-color-warning)}:host .kpi-container .kpi-label{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}:host .kpi-container .kpi-label ix-icon{margin-inline-end:0.25rem}:host .kpi-container .kpi-value-container{display:flex;align-items:flex-end}:host .kpi-container .kpi-value{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);color:var(--theme-kpi-display-value--color)}:host .kpi-container .kpi-unit{margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{margin-block-start:0.125rem}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):hover{background-color:var(--theme-kpi-display--background--hover)}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):active,:host:not(.disabled):not(:disabled).active{background-color:var(--theme-kpi-display--background--active)}:host:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--focus--border-color)}:host(.stacked){height:3.75rem}:host(.stacked) .kpi-container{justify-content:center;flex-wrap:wrap}:host(.stacked) .kpi-container .kpi-label{width:100%;justify-content:center}";const i=t;const a=class{constructor(o){e(this,o);this.label=undefined;this.value=undefined;this.unit=undefined;this.state="neutral";this.orientation="horizontal"}getStateIcon(){switch(this.state){case"alarm":return o("ix-icon",{color:"kpi-display-icon--color",name:"alarm",size:"16"});case"warning":return o("ix-icon",{color:"kpi-display-icon--color",name:"warning",size:"16"});default:return""}}getTooltipText(){let e=`${this.label}: ${this.value}`;if(this.unit){e=e.concat(` ${this.unit}`)}return e}render(){return o(r,{key:"7f1d8bcbc35516dcde7fda85571fd79082049bfc",title:this.getTooltipText(),tabindex:"1",class:{stacked:this.orientation==="vertical"}},o("div",{key:"e68bde8404bfc305862eb6e5b05d9d091aceaf0a",class:{"kpi-container":true,alarm:this.state==="alarm",warning:this.state==="warning"}},o("span",{key:"c967f529b0810e87818e6b243df6e8e108247a93",class:"kpi-label"},this.getStateIcon(),o("span",{key:"07e375c681b3f784bb4b83b47018557746957bc2",class:"kpi-label-text"},this.label)),o("span",{key:"afa38edb472781931448bb7be0345861766cf5d4",class:"kpi-value-container"},o("span",{key:"93d25eb40e95165ef9a38b79765bea26f850f84b",class:"kpi-value"},this.value),this.unit?o("span",{class:"kpi-unit"},this.unit):"")))}};a.style=i;export{a as ix_kpi};
-//# sourceMappingURL=p-b5c4fd55.entry.js.map
+import{r as e,h as o,H as r}from"./p-f87cd962.js";const t=":host{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}: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 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .kpi-container{display:flex;height:100%;width:100%;border-block-end:2px solid grey}:host .kpi-container.alarm{border-block-end-color:var(--theme-color-alarm)}:host .kpi-container.warning{border-block-end-color:var(--theme-color-warning)}:host .kpi-container .kpi-label{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}:host .kpi-container .kpi-label ix-icon{margin-inline-end:0.25rem}:host .kpi-container .kpi-value-container{display:flex;align-items:flex-end}:host .kpi-container .kpi-value{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);color:var(--theme-kpi-display-value--color)}:host .kpi-container .kpi-unit{margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{margin-block-start:0.125rem}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):hover{background-color:var(--theme-kpi-display--background--hover)}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):active,:host:not(.disabled):not(:disabled).active{background-color:var(--theme-kpi-display--background--active)}:host:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--focus--border-color)}:host(.stacked){height:3.75rem}:host(.stacked) .kpi-container{justify-content:center;flex-wrap:wrap}:host(.stacked) .kpi-container .kpi-label{width:100%;justify-content:center}";const i=t;const a=class{constructor(o){e(this,o);this.label=undefined;this.value=undefined;this.unit=undefined;this.state="neutral";this.orientation="horizontal"}getStateIcon(){switch(this.state){case"alarm":return o("ix-icon",{color:"kpi-display-icon--color",name:"alarm",size:"16"});case"warning":return o("ix-icon",{color:"kpi-display-icon--color",name:"warning",size:"16"});default:return""}}getTooltipText(){let e=`${this.label}: ${this.value}`;if(this.unit){e=e.concat(` ${this.unit}`)}return e}render(){return o(r,{key:"2e404479b21e7a8d6f7db25e7a06c8ebfdc61a44",title:this.getTooltipText(),tabindex:"1",class:{stacked:this.orientation==="vertical"}},o("div",{key:"8dd10d050ad9b9a91a5c3c3bd3af18a8e0b5468a",class:{"kpi-container":true,alarm:this.state==="alarm",warning:this.state==="warning"}},o("span",{key:"6337a0b91beb7544808061427ccc4c372d12c4bb",class:"kpi-label"},this.getStateIcon(),o("span",{key:"920454e463b1b2a8c09896224d3700d9f5570629",class:"kpi-label-text"},this.label)),o("span",{key:"738bdbf96aff8a87eeb4b7bcc50f36d650b37639",class:"kpi-value-container"},o("span",{key:"6e455c869a38d5435dd5196cecd2eef261279b1f",class:"kpi-value"},this.value),this.unit?o("span",{class:"kpi-unit"},this.unit):"")))}};a.style=i;export{a as ix_kpi};
+//# sourceMappingURL=p-619a80d3.entry.js.map

package/dist/siemens-ix/{p-b5c4fd55.entry.js.map → p-619a80d3.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["kpiCss","IxKpiStyle0","Kpi","getStateIcon","this","state","h","color","name","size","getTooltipText","tooltip","label","value","unit","concat","render","Host","key","title","tabindex","class","stacked","orientation","alarm","warning"],"sources":["src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","src/components/kpi/kpi.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(.stacked) {\n  height: 3.75rem;\n\n  .kpi-container {\n    justify-content: center;\n    flex-wrap: wrap;\n\n    .kpi-label {\n      width: 100%;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'alarm'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'warning'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAS,ygFACf,MAAAC,EAAeD,E,MCeFE,EAAG,M,kGAmBmC,U,iBAKA,Y,CAEzC,YAAAC,GACN,OAAQC,KAAKC,OACX,IAAK,QACH,OACEC,EAAA,WACEC,MAAM,0BACNC,KAAM,QACNC,KAAK,OAIX,IAAK,UACH,OACEH,EAAA,WACEC,MAAM,0BACNC,KAAM,UACNC,KAAK,OAIX,QACE,MAAO,G,CAIL,cAAAC,GACN,IAAIC,EAAU,GAAGP,KAAKQ,UAAUR,KAAKS,QAErC,GAAIT,KAAKU,KAAM,CACbH,EAAUA,EAAQI,OAAO,IAAIX,KAAKU,O,CAGpC,OAAOH,C,CAGT,MAAAK,GACE,OACEV,EAACW,EAAI,CAAAC,IAAA,2CACHC,MAAOf,KAAKM,iBACZU,SAAS,IACTC,MAAO,CACLC,QAASlB,KAAKmB,cAAgB,aAGhCjB,EAAA,OAAAY,IAAA,2CACEG,MAAO,CACL,gBAAiB,KACjBG,MAAOpB,KAAKC,QAAU,QACtBoB,QAASrB,KAAKC,QAAU,YAG1BC,EAAA,QAAAY,IAAA,2CAAMG,MAAM,aACTjB,KAAKD,eACNG,EAAA,QAAAY,IAAA,2CAAMG,MAAM,kBAAkBjB,KAAKQ,QAErCN,EAAA,QAAAY,IAAA,2CAAMG,MAAM,uBACVf,EAAA,QAAAY,IAAA,2CAAMG,MAAM,aAAajB,KAAKS,OAC7BT,KAAKU,KAAOR,EAAA,QAAMe,MAAM,YAAYjB,KAAKU,MAAe,K"}
+{"version":3,"names":["kpiCss","IxKpiStyle0","Kpi","getStateIcon","this","state","h","color","name","size","getTooltipText","tooltip","label","value","unit","concat","render","Host","key","title","tabindex","class","stacked","orientation","alarm","warning"],"sources":["src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","src/components/kpi/kpi.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 */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(.stacked) {\n  height: 3.75rem;\n\n  .kpi-container {\n    justify-content: center;\n    flex-wrap: wrap;\n\n    .kpi-label {\n      width: 100%;\n      justify-content: center;\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 { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'alarm'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'warning'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAS,ygFACf,MAAAC,EAAeD,E,MCeFE,EAAG,M,kGAmBmC,U,iBAKA,Y,CAEzC,YAAAC,GACN,OAAQC,KAAKC,OACX,IAAK,QACH,OACEC,EAAA,WACEC,MAAM,0BACNC,KAAM,QACNC,KAAK,OAIX,IAAK,UACH,OACEH,EAAA,WACEC,MAAM,0BACNC,KAAM,UACNC,KAAK,OAIX,QACE,MAAO,G,CAIL,cAAAC,GACN,IAAIC,EAAU,GAAGP,KAAKQ,UAAUR,KAAKS,QAErC,GAAIT,KAAKU,KAAM,CACbH,EAAUA,EAAQI,OAAO,IAAIX,KAAKU,O,CAGpC,OAAOH,C,CAGT,MAAAK,GACE,OACEV,EAACW,EAAI,CAAAC,IAAA,2CACHC,MAAOf,KAAKM,iBACZU,SAAS,IACTC,MAAO,CACLC,QAASlB,KAAKmB,cAAgB,aAGhCjB,EAAA,OAAAY,IAAA,2CACEG,MAAO,CACL,gBAAiB,KACjBG,MAAOpB,KAAKC,QAAU,QACtBoB,QAASrB,KAAKC,QAAU,YAG1BC,EAAA,QAAAY,IAAA,2CAAMG,MAAM,aACTjB,KAAKD,eACNG,EAAA,QAAAY,IAAA,2CAAMG,MAAM,kBAAkBjB,KAAKQ,QAErCN,EAAA,QAAAY,IAAA,2CAAMG,MAAM,uBACVf,EAAA,QAAAY,IAAA,2CAAMG,MAAM,aAAajB,KAAKS,OAC7BT,KAAKU,KAAOR,EAAA,QAAMe,MAAM,YAAYjB,KAAKU,MAAe,K"}

package/dist/siemens-ix/p-633a8884.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as a,H as r,g as i}from"./p-f87cd962.js";import{U as s}from"./p-ef0d5678.js";import{b as o}from"./p-157b1b28.js";const l=":host{display:block;min-height:4rem;height:4rem}: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 .file-upload-area{display:flex;flex-direction:row;align-items:center;justify-content:space-between;overflow:hidden;height:100%;width:100%;padding:1rem;border:1px dashed var(--theme-upload--border-color);border-radius:var(--theme-upload--border-radius);color:var(--theme-upload-text--color)}:host .file-upload-area.multiline{max-height:unset;height:auto}:host .file-upload-area.multiline .glyph{align-self:flex-start;margin-block-start:3px}:host .file-upload-area.multiline>div{align-self:flex-start}:host .file-upload-area:not(.multiline) .state,:host .file-upload-area:not(.multiline) .upload-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .file-upload-area:not(.disabled).file-over{border-color:var(--theme-upload--border-color--dragover);border-style:solid}:host .file-upload-area.checking{color:var(--theme-upload-text--color--checking);border-style:solid}:host .file-upload-area.disabled{border-style:solid;color:var(--theme-upload-text--color--disabled)}:host .file-upload-area ix-button{margin-inline-start:1rem}:host .file-upload-area .upload-browser{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host .file-upload-area .loader{margin:2.187rem auto;font-size:0.937rem;width:1rem;height:1rem;border-radius:50%;position:relative;text-indent:-9999em;animation:optimise-loading 1.1s infinite ease;transform:translateZ(0)}:host .file-upload-area .upload-filename{margin-bottom:1rem}:host .file-upload-area .state{display:flex;align-items:center}:host .file-upload-area .state>ix-spinner{margin-inline-end:0.5rem;height:1.5rem;width:1.5rem}:host .file-upload-area .state>ix-icon{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon.icon-error{color:var(--theme-color-alarm)}:host .file-upload-area .state>ix-icon.icon-success{color:var(--theme-color-success)}:host(.disabled){pointer-events:none}";const n=l;var h=undefined&&undefined.__rest||function(e,t){var a={};for(var r in e)if(Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0)a[r]=e[r];if(e!=null&&typeof Object.getOwnPropertySymbols==="function")for(var i=0,r=Object.getOwnPropertySymbols(e);i<r.length;i++){if(t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i]))a[r[i]]=e[r[i]]}return a};const d=class{get inputElement(){return this.hostElement.shadowRoot.querySelector("#upload-browser")}constructor(a){e(this,a);this.filesChanged=t(this,"filesChanged",7);this.a11y={};this.accept=undefined;this.multiple=false;this.multiline=false;this.disabled=false;this.state=s.SELECT_FILE;this.selectFileText="+ Drag files here or…";this.loadingText="Checking files…";this.uploadFailedText="Upload failed. Please try again.";this.uploadSuccessText="Upload successful";this.i18nUploadFile="Upload file…";this.i18nUploadDisabled="File upload currently not possible.";this.isFileOver=false}componentWillLoad(){this.a11y=o(this.hostElement)}fileDropped(e){e.preventDefault();if(this.disabled){return}if(!e.dataTransfer){return}const t=e.dataTransfer.files;this.isFileOver=false;this.filesToUpload=this.convertToFileArray(t);this.filesChanged.emit(this.filesToUpload)}fileOver(e){if(!e.dataTransfer){return}if(this.state!==s.LOADING){e.preventDefault();e.dataTransfer.dropEffect="move"}if(!this.multiple&&e.dataTransfer.items.length>1){e.preventDefault();e.stopPropagation();e.dataTransfer.effectAllowed="none";e.dataTransfer.dropEffect="none"}else{this.isFileOver=true}}fileLeave(){this.isFileOver=false}fileChangeEvent(e){if(this.disabled){return}if(!e.target){return}this.filesToUpload=this.convertToFileArray(e.target.files);this.filesChanged.emit(this.filesToUpload);this.inputElement.type="";this.inputElement.type="file"}convertToFileArray(e){let t=[];if(!e){return[]}if(e instanceof FileList){t=Array.from(e)}else{t=[e]}return t}renderUploadState(){if(this.disabled){return a("span",{class:"state"},a("span",{class:"upload-text"},this.i18nUploadDisabled))}switch(this.state){case s.SELECT_FILE:return a("span",{class:"state"},a("span",{class:"upload-text"},this.selectFileText));case s.LOADING:return a("span",{class:"state"},a("ix-spinner",{variant:"primary"}),a("span",{class:"upload-text"},this.loadingText));case s.UPLOAD_FAILED:return a("span",{class:"state"},a("ix-icon",{name:"error",class:"icon-error"}),a("span",{class:"upload-text"},this.uploadFailedText));case s.UPLOAD_SUCCESSED:return a("span",{class:"state"},a("ix-icon",{name:"success",class:"icon-success"}),a("span",{class:"upload-text"},this.uploadSuccessText));default:return""}}async setFilesToUpload(e){this.filesToUpload=e}render(){const e=this.disabled||this.state===s.LOADING;const t=this.a11y,{"aria-label":i="Upload files"}=t,o=h(t,["aria-label"]);return a(r,Object.assign({key:"73fdc4ee1171e158f146bc02055dda6a72e053f9"},o,{"aria-disabled":e}),a("div",{key:"18ddb4f5ba298c5616b60d391ed32d42262a3cc9",class:{"file-upload-area":true,"file-over":this.state!==s.LOADING&&this.isFileOver,checking:this.state===s.LOADING,disabled:this.disabled,multiline:this.multiline},onDrop:e=>{if(this.state!==s.LOADING){this.fileDropped(e)}},onDragOver:e=>this.fileOver(e),onDragLeave:()=>this.fileLeave(),draggable:!this.disabled},this.renderUploadState(),a("div",{key:"ce2064678a477854fe8778a95c51bc64b9932ecc"},a("input",{key:"4373caa381cae77ee092cb7b17e4d0248844019a","aria-label":i,"aria-disabled":e,multiple:this.multiple,type:"file",class:"upload-browser",id:"upload-browser",onChange:e=>{this.fileChangeEvent(e)},accept:this.accept,disabled:e}),a("ix-button",{key:"bc6f72dbcf530c66924e0b415a6239b08e3e09cc",tabindex:"-1",outline:true,onClick:()=>this.inputElement.click(),disabled:e},this.i18nUploadFile))))}get hostElement(){return i(this)}};d.style=n;export{d as ix_upload};
+//# sourceMappingURL=p-633a8884.entry.js.map

package/dist/siemens-ix/p-633a8884.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["uploadCss","IxUploadStyle0","Upload","inputElement","this","hostElement","shadowRoot","querySelector","constructor","hostRef","a11y","UploadFileState","SELECT_FILE","componentWillLoad","a11yHostAttributes","fileDropped","evt","preventDefault","disabled","dataTransfer","file","files","isFileOver","filesToUpload","convertToFileArray","filesChanged","emit","fileOver","event","state","LOADING","dropEffect","multiple","items","length","stopPropagation","effectAllowed","fileLeave","fileChangeEvent","target","type","filesFromEvent","FileList","Array","from","renderUploadState","h","class","i18nUploadDisabled","selectFileText","variant","loadingText","UPLOAD_FAILED","name","uploadFailedText","UPLOAD_SUCCESSED","uploadSuccessText","setFilesToUpload","obj","render","_a","ariaLabel","__rest","Host","Object","assign","key","checking","multiline","onDrop","e","onDragOver","onDragLeave","draggable","id","onChange","accept","tabindex","outline","onClick","click","i18nUploadFile"],"sources":["src/components/upload/upload.scss?tag=ix-upload&encapsulation=shadow","src/components/upload/upload.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/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ix-component;\n  display: block;\n  min-height: 4rem;\n  height: 4rem;\n\n  .file-upload-area {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    overflow: hidden;\n\n    height: 100%;\n    width: 100%;\n\n    padding: $default-space;\n\n    border: 1px dashed var(--theme-upload--border-color);\n    border-radius: var(--theme-upload--border-radius);\n    color: var(--theme-upload-text--color);\n\n    &.multiline {\n      max-height: unset;\n      height: auto;\n\n      .glyph {\n        align-self: flex-start;\n        margin-block-start: 3px;\n      }\n\n      > div {\n        align-self: flex-start;\n      }\n    }\n\n    &:not(.multiline) {\n      .state,\n      .upload-text {\n        @include ellipsis;\n      }\n    }\n\n    &:not(.disabled).file-over {\n      border-color: var(--theme-upload--border-color--dragover);\n      border-style: solid;\n    }\n\n    &.checking {\n      color: var(--theme-upload-text--color--checking);\n      border-style: solid;\n    }\n\n    &.disabled {\n      border-style: solid;\n      color: var(--theme-upload-text--color--disabled);\n    }\n\n    ix-button {\n      margin-inline-start: $default-space;\n    }\n\n    .upload-browser {\n      border: 0;\n      clip: rect(0 0 0 0);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      width: 1px;\n    }\n\n    .loader {\n      margin: 2.187rem auto;\n      font-size: 0.937rem;\n      width: $default-space;\n      height: $default-space;\n      border-radius: 50%;\n      position: relative;\n      text-indent: -9999em;\n      animation: optimise-loading 1.1s infinite ease;\n      transform: translateZ(0);\n    }\n\n    .upload-filename {\n      margin-bottom: $default-space;\n    }\n\n    .state {\n      display: flex;\n      align-items: center;\n\n      > ix-spinner {\n        margin-inline-end: $small-space;\n        height: $large-space;\n        width: $large-space;\n      }\n\n      > ix-icon {\n        margin-inline-end: $small-space;\n\n        &.icon-error {\n          color: var(--theme-color-alarm);\n        }\n\n        &.icon-success {\n          color: var(--theme-color-success);\n        }\n      }\n    }\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { UploadFileState } from './upload-file-state';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-upload',\n  styleUrl: 'upload.scss',\n  shadow: true,\n})\nexport class Upload {\n  /**\n   * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).\n   * [accept]{@link \"https://www.w3schools.com/tags/att_input_accept.asp\"}\n   */\n  @Prop() accept?: string;\n\n  /**\n   * If multiple is true the user can drop or select multiple files\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Whether the text should wrap to more than one line\n   */\n  @Prop() multiline = false;\n\n  /**\n   * Disable all input events\n   */\n  @Prop() disabled = false;\n\n  /**\n   * After a file is uploaded you can set the upload component to a defined state\n   */\n  @Prop() state: UploadFileState = UploadFileState.SELECT_FILE;\n\n  /**\n   * Will be used by state = UploadFileState.SELECT_FILE\n   */\n  @Prop() selectFileText = '+ Drag files here or…';\n\n  /**\n   * Will be used by state = UploadFileState.LOADING\n   */\n  @Prop() loadingText = 'Checking files…';\n\n  /**\n   * Will be used by state = UploadFileState.UPLOAD_FAILED\n   */\n  @Prop() uploadFailedText = 'Upload failed. Please try again.';\n\n  /**\n   * Will be used by state = UploadFileState.UPLOAD_SUCCESSED\n   */\n  @Prop() uploadSuccessText = 'Upload successful';\n\n  /**\n   * Label for upload file button\n   */\n  @Prop() i18nUploadFile = 'Upload file…';\n\n  /**\n   * Text for disabled state\n   */\n  @Prop() i18nUploadDisabled = 'File upload currently not possible.';\n\n  /**\n   * You get an array of Files after drop-action or browse action is finished\n   */\n  @Event() filesChanged!: EventEmitter<Array<File>>;\n\n  @Element() hostElement!: HTMLIxUploadElement;\n\n  get inputElement(): HTMLInputElement {\n    return this.hostElement.shadowRoot!.querySelector('#upload-browser')!;\n  }\n\n  @State() isFileOver = false;\n\n  private filesToUpload?: Array<File>;\n\n  private a11y: A11yAttributes = {};\n\n  constructor() {}\n\n  componentWillLoad() {\n    this.a11y = a11yHostAttributes(this.hostElement);\n  }\n\n  private fileDropped(evt: DragEvent) {\n    evt.preventDefault();\n\n    if (this.disabled) {\n      return;\n    }\n\n    if (!evt.dataTransfer) {\n      return;\n    }\n\n    const file: File | FileList = evt.dataTransfer.files;\n    this.isFileOver = false;\n\n    this.filesToUpload = this.convertToFileArray(file);\n    this.filesChanged.emit(this.filesToUpload);\n  }\n\n  private fileOver(event: DragEvent) {\n    if (!event.dataTransfer) {\n      return;\n    }\n\n    if (this.state !== UploadFileState.LOADING) {\n      event.preventDefault();\n      event.dataTransfer.dropEffect = 'move';\n    }\n\n    if (!this.multiple && event.dataTransfer.items.length > 1) {\n      event.preventDefault();\n      event.stopPropagation();\n      event.dataTransfer.effectAllowed = 'none';\n      event.dataTransfer.dropEffect = 'none';\n    } else {\n      this.isFileOver = true;\n    }\n  }\n\n  private fileLeave() {\n    this.isFileOver = false;\n  }\n\n  private fileChangeEvent(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    if (!event.target) {\n      return;\n    }\n\n    this.filesToUpload = this.convertToFileArray(\n      (event.target as HTMLInputElement).files\n    );\n\n    this.filesChanged.emit(this.filesToUpload);\n\n    // Workaround for bug in native input element, that prevents the user from uploading\n    // a file with the same name as the most recent one, but with changed content.\n    this.inputElement.type = '';\n    this.inputElement.type = 'file';\n  }\n\n  private convertToFileArray(filesFromEvent: FileList | File | null): File[] {\n    let files = [];\n\n    if (!filesFromEvent) {\n      return [];\n    }\n\n    if (filesFromEvent instanceof FileList) {\n      files = Array.from(filesFromEvent);\n    } else {\n      files = [filesFromEvent];\n    }\n    return files;\n  }\n\n  private renderUploadState() {\n    if (this.disabled) {\n      return (\n        <span class=\"state\">\n          <span class=\"upload-text\">{this.i18nUploadDisabled}</span>\n        </span>\n      );\n    }\n\n    switch (this.state) {\n      case UploadFileState.SELECT_FILE:\n        return (\n          <span class=\"state\">\n            <span class=\"upload-text\">{this.selectFileText}</span>\n          </span>\n        );\n      case UploadFileState.LOADING:\n        return (\n          <span class=\"state\">\n            <ix-spinner variant=\"primary\"></ix-spinner>\n            <span class=\"upload-text\">{this.loadingText}</span>\n          </span>\n        );\n      case UploadFileState.UPLOAD_FAILED:\n        return (\n          <span class=\"state\">\n            <ix-icon name=\"error\" class=\"icon-error\"></ix-icon>\n            <span class=\"upload-text\">{this.uploadFailedText}</span>\n          </span>\n        );\n      case UploadFileState.UPLOAD_SUCCESSED:\n        return (\n          <span class=\"state\">\n            <ix-icon name=\"success\" class=\"icon-success\"></ix-icon>\n            <span class=\"upload-text\">{this.uploadSuccessText}</span>\n          </span>\n        );\n      default:\n        return '';\n    }\n  }\n\n  /**\n   * Set files\n   * @param obj\n   */\n  @Method()\n  async setFilesToUpload(obj: any) {\n    this.filesToUpload = obj;\n  }\n\n  render() {\n    const disabled = this.disabled || this.state === UploadFileState.LOADING;\n    const { 'aria-label': ariaLabel = 'Upload files', ...a11y } = this.a11y;\n    return (\n      <Host {...a11y} aria-disabled={disabled}>\n        <div\n          class={{\n            'file-upload-area': true,\n            'file-over':\n              this.state !== UploadFileState.LOADING && this.isFileOver,\n            checking: this.state === UploadFileState.LOADING,\n            disabled: this.disabled,\n            multiline: this.multiline,\n          }}\n          onDrop={(e) => {\n            if (this.state !== UploadFileState.LOADING) {\n              this.fileDropped(e);\n            }\n          }}\n          onDragOver={(e) => this.fileOver(e)}\n          onDragLeave={() => this.fileLeave()}\n          draggable={!this.disabled}\n        >\n          {this.renderUploadState()}\n          <div>\n            <input\n              aria-label={ariaLabel}\n              aria-disabled={disabled}\n              multiple={this.multiple}\n              type=\"file\"\n              class=\"upload-browser\"\n              id=\"upload-browser\"\n              onChange={(e) => {\n                this.fileChangeEvent(e);\n              }}\n              accept={this.accept}\n              disabled={disabled}\n            />\n            <ix-button\n              tabindex=\"-1\"\n              outline\n              onClick={() => this.inputElement.click()}\n              disabled={disabled}\n            >\n              {this.i18nUploadFile}\n            </ix-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}