@siemens/ix 1.6.2 → 2.0.0-beta.0

package/dist/siemens-ix/{p-6124d173.entry.js → p-ff17104c.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as a,H as i,c as e,g as s}from"./p-1c64b073.js";import{a as n}from"./p-810b5232.js";import{A as o}from"./p-3b97bb69.js";import{c as r}from"./p-21aa3602.js";const c=".sc-ix-animated-tab-h{display:block;height:100%;width:100%;position:absolute}";const d=class{constructor(a){t(this,a);this.icon=undefined;this.count=undefined}render(){return a(i,null,a("slot",null))}};d.style=c;const b=".sc-ix-animated-tabs-h{--animate-duration:300ms;display:flex;flex-direction:column;align-items:center;height:100%;width:100%;position:relative}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs{display:flex;padding:0;margin:0;position:relative}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs{display:flex;justify-content:center;width:5rem;height:4.5rem;cursor:pointer;padding-top:0.625rem}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.bottom.sc-ix-animated-tabs{padding-top:0.875rem}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs{background:var(--theme-animated-tab-circle--background);border:solid 1px var(--theme-animated-tab-circle--border-color);display:flex;align-items:center;justify-content:center;border-radius:6.25rem;width:3rem;height:3rem;position:relative;transition:150ms}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):hover{background:var(--theme-animated-tab-circle--background--hover);border-color:var(--theme-animated-tab-circle--border-color--hover)}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):hover ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--hover) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):active{background:var(--theme-animated-tab-circle--background--active);border-color:var(--theme-animated-tab-circle--border-color--active)}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):active ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--active) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs{background:var(--theme-animated-tab-circle--background--selected);border-color:var(--theme-animated-tab-circle--border-color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs .count.sc-ix-animated-tabs{border-color:var(--theme-tab-pill--border-color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.disabled.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs,.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:disabled ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--disabled) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs .count.sc-ix-animated-tabs{-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);display:flex;align-items:center;height:1rem;position:absolute;background-color:var(--theme-pill-outline--background);bottom:-0.55rem;border:1px solid var(--theme-tab-pill--border-color);border-radius:6.25rem;color:var(--theme-pill-outline--color);padding:0 0.25rem;background:var(--theme-color-1);transition:150ms}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs .count.bottom.sc-ix-animated-tabs{top:-0.55rem}.sc-ix-animated-tabs-h .content-container.sc-ix-animated-tabs{display:flex;flex-direction:row;height:calc(100% - 4.5rem);width:100%;overflow-y:auto;overflow-x:hidden}.sc-ix-animated-tabs-h .tab-active-underline.sc-ix-animated-tabs{background-color:var(--theme-animated-tab-indicator--background--selected);height:0.125rem;width:5rem;margin-top:-0.125rem;transition:150ms;position:absolute;top:4.5rem}.sc-ix-animated-tabs-h .tab-active-underline.bottom.sc-ix-animated-tabs{top:0;margin-top:0}";const l=class{constructor(a){t(this,a);this.tabClick=e(this,"tabClick",7);this.easing="easeInOutSine";this.firstRender=true;this.tabs=undefined;this.activeIndex=undefined;this.disableAnimations=false;this.selectedIndex=0;this.tabPlacement="top"}onTabSelectionChange(t,a){this.updateTabAnimation(a,t)}onMouseDown(){this.activeIndex=undefined}get animatedTabs(){return Array.from(this.hostElement.querySelectorAll("ix-animated-tab"))}get tabsContainer(){return this.hostElement.querySelector(".tabs-container")}get contentContainer(){return this.hostElement.querySelector(".content-container")}componentWillLoad(){this.tabs=this.animatedTabs}componentDidLoad(){this.onTabSelectionChange(this.selectedIndex,-1);this.observer=new MutationObserver((()=>{this.tabs=this.animatedTabs}));this.observer.observe(this.contentContainer,{childList:true,subtree:true,attributes:true,attributeFilter:["count"]})}disconnectCallback(){var t;(t=this.observer)===null||t===void 0?void 0:t.disconnect()}isSelected(t){return this.tabs.indexOf(t)===this.selectedIndex}showTab(t){if(this.isSelected(t)){t.classList.remove("d-none")}}hideTab(t){if(!this.isSelected(t)){t.classList.add("d-none")}}slideOutLeft(t){if(this.disableAnimations){this.hideTab(t);return}n({targets:t,duration:o.mediumTime,opacity:[1,0],translateX:[0,"-100%"],easing:this.easing,complete:()=>{this.hideTab(t)}})}slideOutRight(t){if(this.disableAnimations){this.hideTab(t);return}n({targets:t,duration:o.mediumTime,opacity:[1,0],translateX:[0,"100%"],easing:this.easing,complete:()=>{this.hideTab(t)}})}slideInLeft(t){if(this.firstRender){t.classList.remove("d-none");this.firstRender=false;return}if(this.disableAnimations){this.showTab(t);return}n({targets:t,duration:o.mediumTime,opacity:[0,1],translateX:["-100%",0],easing:this.easing,begin:()=>{this.showTab(t)}})}slideInRight(t){if(this.firstRender){t.classList.remove("d-none");this.firstRender=false;return}if(this.disableAnimations){this.showTab(t);return}n({targets:t,duration:o.mediumTime,opacity:[0,1],translateX:["100%",0],easing:this.easing,begin:()=>{this.showTab(t)}})}updateTabAnimation(t,a){var i;(i=this.tabs)===null||i===void 0?void 0:i.forEach(((i,e)=>{if(e===t){if(e<a){this.slideOutLeft(i)}else if(e>a){this.slideOutRight(i)}}else if(e===a){if(e<t){this.slideInLeft(i)}else if(e>t){this.slideInRight(i)}}else{i.classList.add("d-none")}}))}onTabClick(t){this.selectedIndex=t;this.tabClick.emit(t)}onTabMouseDown(t){this.activeIndex=t}render(){return a(i,{class:{"flex-column-reverse":this.tabPlacement==="bottom"}},a("ul",{class:"tabs-container"},this.animatedTabs.map(((t,i)=>a("li",{class:{bottom:this.tabPlacement==="bottom"},onClick:()=>this.onTabClick(i),onMouseDown:()=>this.onTabMouseDown(i)},a("div",{class:{"tab-container":true,selected:this.selectedIndex===i}},a("ix-icon",{name:t.icon}),t.count?a("span",{class:{count:true,bottom:this.tabPlacement==="bottom"}},r(t.count)):"")))),a("div",{class:{"tab-active-underline":true,bottom:this.tabPlacement==="bottom"},style:{"margin-left":`calc(${this.selectedIndex} * 5rem)`}})),a("div",{class:"content-container"},a("slot",null)))}get hostElement(){return s(this)}static get watchers(){return{selectedIndex:["onTabSelectionChange"]}}};l.style=b;export{d as ix_animated_tab,l as ix_animated_tabs};
-//# sourceMappingURL=p-6124d173.entry.js.map
+import{r as t,h as a,H as i,c as e,g as s}from"./p-b899b25b.js";import{a as n}from"./p-810b5232.js";import{A as o}from"./p-3b97bb69.js";import{c as r}from"./p-21aa3602.js";const c=".sc-ix-animated-tab-h{display:block;height:100%;width:100%;position:absolute}";const d=class{constructor(a){t(this,a);this.icon=undefined;this.count=undefined}render(){return a(i,null,a("slot",null))}};d.style=c;const b=".sc-ix-animated-tabs-h{--animate-duration:300ms;display:flex;flex-direction:column;align-items:center;height:100%;width:100%;position:relative}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs{display:flex;padding:0;margin:0;position:relative}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs{display:flex;justify-content:center;width:5rem;height:4.5rem;cursor:pointer;padding-top:0.625rem}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.bottom.sc-ix-animated-tabs{padding-top:0.875rem}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs{background:var(--theme-animated-tab-circle--background);border:solid 1px var(--theme-animated-tab-circle--border-color);display:flex;align-items:center;justify-content:center;border-radius:6.25rem;width:3rem;height:3rem;position:relative;transition:150ms}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):hover{background:var(--theme-animated-tab-circle--background--hover);border-color:var(--theme-animated-tab-circle--border-color--hover)}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):hover ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--hover) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):active{background:var(--theme-animated-tab-circle--background--active);border-color:var(--theme-animated-tab-circle--border-color--active)}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):active ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--active) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs{background:var(--theme-animated-tab-circle--background--selected);border-color:var(--theme-animated-tab-circle--border-color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.selected.sc-ix-animated-tabs .count.sc-ix-animated-tabs{border-color:var(--theme-tab-pill--border-color--selected) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.disabled.sc-ix-animated-tabs ix-icon.sc-ix-animated-tabs,.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:disabled ix-icon.sc-ix-animated-tabs{color:var(--theme-animated-tab-icon--color--disabled) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color) !important}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs .count.sc-ix-animated-tabs{-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);display:flex;align-items:center;height:1rem;position:absolute;background-color:var(--theme-pill-outline--background);bottom:-0.55rem;border:1px solid var(--theme-tab-pill--border-color);border-radius:6.25rem;color:var(--theme-pill-outline--color);padding:0 0.25rem;background:var(--theme-color-1);transition:150ms}.sc-ix-animated-tabs-h ul.sc-ix-animated-tabs li.sc-ix-animated-tabs .tab-container.sc-ix-animated-tabs .count.bottom.sc-ix-animated-tabs{top:-0.55rem}.sc-ix-animated-tabs-h .content-container.sc-ix-animated-tabs{display:flex;flex-direction:row;height:calc(100% - 4.5rem);width:100%;overflow-y:auto;overflow-x:hidden}.sc-ix-animated-tabs-h .tab-active-underline.sc-ix-animated-tabs{background-color:var(--theme-animated-tab-indicator--background--selected);height:0.125rem;width:5rem;margin-top:-0.125rem;transition:150ms;position:absolute;top:4.5rem}.sc-ix-animated-tabs-h .tab-active-underline.bottom.sc-ix-animated-tabs{top:0;margin-top:0}";const l=class{constructor(a){t(this,a);this.tabClick=e(this,"tabClick",7);this.easing="easeInOutSine";this.firstRender=true;this.tabs=undefined;this.activeIndex=undefined;this.disableAnimations=false;this.selectedIndex=0;this.tabPlacement="top"}onTabSelectionChange(t,a){this.updateTabAnimation(a,t)}onMouseDown(){this.activeIndex=undefined}get animatedTabs(){return Array.from(this.hostElement.querySelectorAll("ix-animated-tab"))}get tabsContainer(){return this.hostElement.querySelector(".tabs-container")}get contentContainer(){return this.hostElement.querySelector(".content-container")}componentWillLoad(){this.tabs=this.animatedTabs}componentDidLoad(){this.onTabSelectionChange(this.selectedIndex,-1);this.observer=new MutationObserver((()=>{this.tabs=this.animatedTabs}));this.observer.observe(this.contentContainer,{childList:true,subtree:true,attributes:true,attributeFilter:["count"]})}disconnectCallback(){var t;(t=this.observer)===null||t===void 0?void 0:t.disconnect()}isSelected(t){return this.tabs.indexOf(t)===this.selectedIndex}showTab(t){if(this.isSelected(t)){t.classList.remove("d-none")}}hideTab(t){if(!this.isSelected(t)){t.classList.add("d-none")}}slideOutLeft(t){if(this.disableAnimations){this.hideTab(t);return}n({targets:t,duration:o.mediumTime,opacity:[1,0],translateX:[0,"-100%"],easing:this.easing,complete:()=>{this.hideTab(t)}})}slideOutRight(t){if(this.disableAnimations){this.hideTab(t);return}n({targets:t,duration:o.mediumTime,opacity:[1,0],translateX:[0,"100%"],easing:this.easing,complete:()=>{this.hideTab(t)}})}slideInLeft(t){if(this.firstRender){t.classList.remove("d-none");this.firstRender=false;return}if(this.disableAnimations){this.showTab(t);return}n({targets:t,duration:o.mediumTime,opacity:[0,1],translateX:["-100%",0],easing:this.easing,begin:()=>{this.showTab(t)}})}slideInRight(t){if(this.firstRender){t.classList.remove("d-none");this.firstRender=false;return}if(this.disableAnimations){this.showTab(t);return}n({targets:t,duration:o.mediumTime,opacity:[0,1],translateX:["100%",0],easing:this.easing,begin:()=>{this.showTab(t)}})}updateTabAnimation(t,a){var i;(i=this.tabs)===null||i===void 0?void 0:i.forEach(((i,e)=>{if(e===t){if(e<a){this.slideOutLeft(i)}else if(e>a){this.slideOutRight(i)}}else if(e===a){if(e<t){this.slideInLeft(i)}else if(e>t){this.slideInRight(i)}}else{i.classList.add("d-none")}}))}onTabClick(t){this.selectedIndex=t;this.tabClick.emit(t)}onTabMouseDown(t){this.activeIndex=t}render(){return a(i,{class:{"flex-column-reverse":this.tabPlacement==="bottom"}},a("ul",{class:"tabs-container"},this.animatedTabs.map(((t,i)=>a("li",{class:{bottom:this.tabPlacement==="bottom"},onClick:()=>this.onTabClick(i),onMouseDown:()=>this.onTabMouseDown(i)},a("div",{class:{"tab-container":true,selected:this.selectedIndex===i}},a("ix-icon",{name:t.icon}),t.count?a("span",{class:{count:true,bottom:this.tabPlacement==="bottom"}},r(t.count)):"")))),a("div",{class:{"tab-active-underline":true,bottom:this.tabPlacement==="bottom"},style:{"margin-left":`calc(${this.selectedIndex} * 5rem)`}})),a("div",{class:"content-container"},a("slot",null)))}get hostElement(){return s(this)}static get watchers(){return{selectedIndex:["onTabSelectionChange"]}}};l.style=b;export{d as ix_animated_tab,l as ix_animated_tabs};
+//# sourceMappingURL=p-ff17104c.entry.js.map