@siemens/ix 0.0.0-pr-1974-20250627115746 → 0.0.0-pr-2015-20250716160704

package/dist/siemens-ix/{p-44be2535.entry.js → p-2d41bd82.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as o,H as s}from"./p-DJsXFBNm.js";import{a}from"./p-Ou74PMQs.js";import{p as t,y as i,b as c,c as l,a as n,z as h,i as b}from"./p-DLTnniMb.js";const m=":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 .alarm{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .critical{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-critical)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .success{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-success)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .neutral{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-neutral)}:host .primary{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-primary)}: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}:host .message-bar-hidden{display:none}";const d=class{constructor(o){e(this,o);this.closedChange=r(this,"closedChange",7);this.closeAnimationCompleted=r(this,"closeAnimationCompleted",7);this.type="info";this.dismissible=true}componentWillRender(){const e=d.messageTypeConfigs[this.type];if(e){this.icon=e.icon;this.color=e.color}}closeAlert(e){const{defaultPrevented:r}=this.closedChange.emit();if(!r){a({targets:e,duration:d.duration,opacity:[1,0],easing:"easeOutSine",complete:()=>{e.classList.add("message-bar-hidden");this.closeAnimationCompleted.emit()}})}}render(){return o(s,{key:"0bd38e554e2187671f52e24dce3a98f2adde2a31"},o("div",{key:"45738b43dd3877625f8933e3ae2d0ef96e9c58f6",class:{"message-container":true,[this.type]:true},role:"alert",ref:e=>this.divElement=e},o("ix-icon",{key:"2355cddb483927e4d8cd046daed919ef0e446eb2",color:this.color,name:this.icon}),o("div",{key:"2238498ee5f6210db085a02048f9057a5b8e04d0",class:"message-content"},o("slot",{key:"b3554201cb4c09d769fa38697e89b784e12c2a71"})),this.dismissible?o("ix-icon-button",{icon:t,size:"24",ghost:true,onClick:()=>{if(this.divElement){this.closeAlert(this.divElement)}},"data-testid":"close-btn"}):""))}};d.duration=300;d.messageTypeConfigs={alarm:{icon:b,color:"color-alarm"},danger:{icon:b,color:"color-alarm"},critical:{icon:h,color:"color-critical"},warning:{icon:n,color:"color-warning"},success:{icon:l,color:"color-success"},info:{icon:c,color:"color-info"},neutral:{icon:i,color:"color-neutral"},primary:{icon:i,color:"color-primary"}};d.style=m;export{d as ix_message_bar};
-//# sourceMappingURL=p-44be2535.entry.js.map
+import{r as e,c as r,h as o,H as s}from"./p-DUcGWByh.js";import{a}from"./p-Ou74PMQs.js";import{p as t,y as c,b as i,c as l,a as n,z as h,i as b}from"./p-BSqRUSbt.js";const d=":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 .alarm{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .critical{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-critical)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .success{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-success)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .neutral{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-neutral)}:host .primary{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-primary)}: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}:host .message-bar-hidden{display:none}";const m=class{constructor(o){e(this,o);this.closedChange=r(this,"closedChange",7);this.closeAnimationCompleted=r(this,"closeAnimationCompleted",7);this.type="info";this.dismissible=true}componentWillRender(){const e=m.messageTypeConfigs[this.type];if(e){this.icon=e.icon;this.color=e.color}}closeAlert(e){const{defaultPrevented:r}=this.closedChange.emit();if(!r){a({targets:e,duration:m.duration,opacity:[1,0],easing:"easeOutSine",complete:()=>{e.classList.add("message-bar-hidden");this.closeAnimationCompleted.emit()}})}}render(){return o(s,{key:"0bd38e554e2187671f52e24dce3a98f2adde2a31"},o("div",{key:"45738b43dd3877625f8933e3ae2d0ef96e9c58f6",class:{"message-container":true,[this.type]:true},role:"alert",ref:e=>this.divElement=e},o("ix-icon",{key:"2355cddb483927e4d8cd046daed919ef0e446eb2",color:this.color,name:this.icon}),o("div",{key:"2238498ee5f6210db085a02048f9057a5b8e04d0",class:"message-content"},o("slot",{key:"b3554201cb4c09d769fa38697e89b784e12c2a71"})),this.dismissible?o("ix-icon-button",{icon:t,size:"24",ghost:true,onClick:()=>{if(this.divElement){this.closeAlert(this.divElement)}},"data-testid":"close-btn"}):""))}};m.duration=300;m.messageTypeConfigs={alarm:{icon:b,color:"color-alarm"},danger:{icon:b,color:"color-alarm"},critical:{icon:h,color:"color-critical"},warning:{icon:n,color:"color-warning"},success:{icon:l,color:"color-success"},info:{icon:i,color:"color-info"},neutral:{icon:c,color:"color-neutral"},primary:{icon:c,color:"color-primary"}};m.style=d;export{m as ix_message_bar};
+//# sourceMappingURL=p-2d41bd82.entry.js.map

package/dist/siemens-ix/{p-07b2da86.entry.js → p-2fd6c84e.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as s,H as e,a as r}from"./p-DJsXFBNm.js";import{f as o,i as h,s as n,o as a,a as d,c as l}from"./p-CAqtPJ4-.js";import{A as c}from"./p-CUWFODSd.js";import{d as u,h as f}from"./p-D3K9vmFp.js";import{f as b}from"./p-CFRrPFxi.js";import{a as m}from"./p-CKoABG1h.js";const v=":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}: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 .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:calc(50vh - 3rem);overflow-y:auto}:host(:not(.show)){display:none}";let w=0;const p=class{constructor(s){t(this,s);this.showChanged=i(this,"showChanged",7);this.suppressAutomaticPlacement=false;this.show=false;this.closeBehavior="both";this.placement="bottom-start";this.positioningStrategy="fixed";this.discoverAllSubmenus=false;this.ignoreRelatedSubmenu=false;this.suppressOverflowBehavior=false;this.localUId=`dropdown-${w++}`;this.assignedSubmenu=[];this.itemObserver=new MutationObserver((()=>{if(this.arrowFocusController){this.arrowFocusController.items=this.dropdownItems}}))}connectedCallback(){u.connected(this);if(this.trigger!=undefined){this.registerListener(this.trigger)}}cacheSubmenuId(t){t.stopImmediatePropagation();t.preventDefault();const{detail:i}=t;if(this.assignedSubmenu.indexOf(i)===-1){this.assignedSubmenu.push(i)}}disconnectedCallback(){var t;u.dismiss(this);u.disconnected(this);if(this.arrowFocusController){(t=this.arrowFocusController)===null||t===void 0?void 0:t.disconnect();this.arrowFocusController=undefined}if(this.itemObserver){this.itemObserver.disconnect();this.itemObserver=undefined}if(this.disposeClickListener){this.disposeClickListener();this.disposeClickListener=undefined}if(this.disposeKeyListener){this.disposeKeyListener();this.disposeKeyListener=undefined}if(this.autoUpdateCleanup){this.autoUpdateCleanup();this.autoUpdateCleanup=undefined}}getAssignedSubmenuIds(){return this.assignedSubmenu}isPresent(){return this.show}present(){this.show=true}dismiss(){this.show=false}getId(){return this.localUId}willDismiss(){const{defaultPrevented:t}=this.showChanged.emit(false);return!t}willPresent(){const{defaultPrevented:t}=this.showChanged.emit(true);return!t}get dropdownItems(){return Array.from(this.hostElement.querySelectorAll("ix-dropdown-item"))}get slotElement(){return this.hostElement.shadowRoot.querySelector("slot")}addEventListenersFor(){var t,i,s;(t=this.disposeClickListener)===null||t===void 0?void 0:t.call(this);(i=this.disposeKeyListener)===null||i===void 0?void 0:i.call(this);const e=()=>{if(!this.isPresent()){u.present(this)}else{u.dismiss(this)}u.dismissOthers(this.getId())};if(!this.triggerElement){return}this.disposeClickListener=m(this.triggerElement,"click",(t=>{if(!t.defaultPrevented){e()}}));(s=this.triggerElement)===null||s===void 0?void 0:s.setAttribute("data-ix-dropdown-trigger",this.localUId)}async discoverSubmenu(){var t;(t=this.triggerElement)===null||t===void 0?void 0:t.dispatchEvent(new CustomEvent("ix-assign-sub-menu",{bubbles:true,composed:true,cancelable:true,detail:this.localUId}))}registerKeyListener(){if(!this.triggerElement){return}this.disposeKeyListener=m(this.triggerElement,"keydown",(t=>{if(t.key!=="ArrowDown"){return}if(document.activeElement!==this.triggerElement){return}u.present(this);setTimeout((()=>{this.focusDropdownItem(0)}))}))}async registerListener(t){this.triggerElement=await this.resolveElement(t);if(this.triggerElement){this.addEventListenersFor();this.discoverSubmenu()}}async resolveElement(t){const i=await b(t);return this.checkForSubmenuAnchor(i)}async checkForSubmenuAnchor(t){if(!t){return undefined}if(f(t)){const i=await t.getDropdownItemElement();i.isSubMenu=true;this.hostElement.style.zIndex=`var(--theme-z-index-dropdown)`}if(t.tagName==="IX-DROPDOWN-ITEM"){t.isSubMenu=true;this.hostElement.style.zIndex=`var(--theme-z-index-dropdown)`}return t}async resolveAnchorElement(){if(this.anchor){this.anchorElement=await this.resolveElement(this.anchor)}else if(this.trigger){this.anchorElement=await this.resolveElement(this.trigger)}}async changedShow(t){var i,s,e,r;if(t){await this.resolveAnchorElement();if(this.anchorElement){this.applyDropdownPosition()}this.arrowFocusController=new c(this.dropdownItems,this.hostElement,(t=>this.focusDropdownItem(t)));(i=this.itemObserver)===null||i===void 0?void 0:i.observe(this.hostElement,{childList:true,subtree:true});this.registerKeyListener()}else{this.destroyAutoUpdate();(s=this.arrowFocusController)===null||s===void 0?void 0:s.disconnect();(e=this.itemObserver)===null||e===void 0?void 0:e.disconnect();(r=this.disposeKeyListener)===null||r===void 0?void 0:r.call(this)}}changedTrigger(t){this.registerListener(t)}destroyAutoUpdate(){if(this.autoUpdateCleanup){this.autoUpdateCleanup();this.autoUpdateCleanup=undefined}}isAnchorSubmenu(){var t;if(!f(this.anchorElement)){return!!((t=this.anchorElement)===null||t===void 0?void 0:t.closest("ix-dropdown-item"))}return true}async applyDropdownPosition(){var t,i;if(!this.show){return}if(!this.anchorElement){return}const s=this.isAnchorSubmenu();let e={strategy:this.positioningStrategy,middleware:[]};if(!this.suppressAutomaticPlacement){(t=e.middleware)===null||t===void 0?void 0:t.push(o({fallbackStrategy:"initialPlacement"}))}e.placement=s?"right-start":this.placement;e.middleware=[...((i=e.middleware)===null||i===void 0?void 0:i.filter(Boolean))||[],h(),n()];if(this.offset){e.middleware.push(a(this.offset))}this.destroyAutoUpdate();if(!this.anchorElement){return}this.autoUpdateCleanup=d(this.anchorElement,this.hostElement,(async()=>{if(this.anchorElement){const t=await l(this.anchorElement,this.hostElement,e);Object.assign(this.hostElement.style,{top:"0",left:"0",transform:`translate(${Math.round(t.x)}px,${Math.round(t.y)}px)`})}if(this.overwriteDropdownStyle){const t=await this.overwriteDropdownStyle({dropdownRef:this.hostElement,triggerRef:this.triggerElement});Object.assign(this.hostElement.style,t)}}),{ancestorResize:true,ancestorScroll:true,elementResize:true})}focusDropdownItem(t){requestAnimationFrame((()=>{var i,s;const e=(s=(i=this.dropdownItems[t])===null||i===void 0?void 0:i.shadowRoot)===null||s===void 0?void 0:s.querySelector("button");if(e){e.focus()}}))}async componentDidLoad(){if(!this.trigger){return}this.changedTrigger(this.trigger)}async componentDidRender(){await this.applyDropdownPosition();await this.resolveAnchorElement()}isTriggerElement(t){const i=!!t.hasAttribute("data-ix-dropdown-trigger");return i}onDropdownClick(t){const i=u.pathIncludesTrigger(t.composedPath());if(i){if(i!==this.triggerElement){t.preventDefault()}if(this.isTriggerElement(i)){if(this.closeBehavior==="outside"){t.preventDefault()}return}}if(!t.defaultPrevented&&(this.closeBehavior==="inside"||this.closeBehavior==="both")){u.dismissAll([this.getId()],this.ignoreRelatedSubmenu);return}u.dismissOthers(this.getId())}async updatePosition(){this.applyDropdownPosition()}render(){return s(e,{key:"2c13027bd2c1d4aaf232c5435166dfd557acebe2","data-ix-dropdown":this.localUId,class:{"dropdown-menu":true,show:this.show,overflow:!this.suppressOverflowBehavior},style:{margin:"0",minWidth:"0px",position:this.positioningStrategy},role:"list",onClick:t=>this.onDropdownClick(t)},s("div",{key:"a367b5ee709b359ee02df11a17ca67b2f2f474e2",style:{display:"contents"}},this.header&&s("div",{key:"ca3be5fb3a3a96eaeb5b64d5f77251d322816804",class:"dropdown-header"},this.header),this.show&&s("slot",{key:"e04e1b59ede94b260e8cf29ec946befd69218b2d"})))}get hostElement(){return r(this)}static get watchers(){return{show:["changedShow"],trigger:["changedTrigger"]}}};p.style=v;export{p as ix_dropdown};
-//# sourceMappingURL=p-07b2da86.entry.js.map
+import{r as t,c as i,h as s,H as e,g as r}from"./p-DUcGWByh.js";import{f as o,i as h,s as n,o as a,a as d,c as l}from"./p-CAqtPJ4-.js";import{A as c}from"./p-CUWFODSd.js";import{d as u,h as f}from"./p-D3K9vmFp.js";import{f as b}from"./p-CFRrPFxi.js";import{a as m}from"./p-CKoABG1h.js";const v=":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}: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 .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:calc(50vh - 3rem);overflow-y:auto}:host(:not(.show)){display:none}";let w=0;const p=class{constructor(s){t(this,s);this.showChanged=i(this,"showChanged",7);this.suppressAutomaticPlacement=false;this.show=false;this.closeBehavior="both";this.placement="bottom-start";this.positioningStrategy="fixed";this.discoverAllSubmenus=false;this.ignoreRelatedSubmenu=false;this.suppressOverflowBehavior=false;this.localUId=`dropdown-${w++}`;this.assignedSubmenu=[];this.itemObserver=new MutationObserver((()=>{if(this.arrowFocusController){this.arrowFocusController.items=this.dropdownItems}}))}connectedCallback(){u.connected(this);if(this.trigger!=undefined){this.registerListener(this.trigger)}}cacheSubmenuId(t){t.stopImmediatePropagation();t.preventDefault();const{detail:i}=t;if(this.assignedSubmenu.indexOf(i)===-1){this.assignedSubmenu.push(i)}}disconnectedCallback(){var t;u.dismiss(this);u.disconnected(this);if(this.arrowFocusController){(t=this.arrowFocusController)===null||t===void 0?void 0:t.disconnect();this.arrowFocusController=undefined}if(this.itemObserver){this.itemObserver.disconnect();this.itemObserver=undefined}if(this.disposeClickListener){this.disposeClickListener();this.disposeClickListener=undefined}if(this.disposeKeyListener){this.disposeKeyListener();this.disposeKeyListener=undefined}if(this.autoUpdateCleanup){this.autoUpdateCleanup();this.autoUpdateCleanup=undefined}}getAssignedSubmenuIds(){return this.assignedSubmenu}isPresent(){return this.show}present(){this.show=true}dismiss(){this.show=false}getId(){return this.localUId}willDismiss(){const{defaultPrevented:t}=this.showChanged.emit(false);return!t}willPresent(){const{defaultPrevented:t}=this.showChanged.emit(true);return!t}get dropdownItems(){return Array.from(this.hostElement.querySelectorAll("ix-dropdown-item"))}get slotElement(){return this.hostElement.shadowRoot.querySelector("slot")}addEventListenersFor(){var t,i,s;(t=this.disposeClickListener)===null||t===void 0?void 0:t.call(this);(i=this.disposeKeyListener)===null||i===void 0?void 0:i.call(this);const e=()=>{if(!this.isPresent()){u.present(this)}else{u.dismiss(this)}u.dismissOthers(this.getId())};if(!this.triggerElement){return}this.disposeClickListener=m(this.triggerElement,"click",(t=>{if(!t.defaultPrevented){e()}}));(s=this.triggerElement)===null||s===void 0?void 0:s.setAttribute("data-ix-dropdown-trigger",this.localUId)}async discoverSubmenu(){var t;(t=this.triggerElement)===null||t===void 0?void 0:t.dispatchEvent(new CustomEvent("ix-assign-sub-menu",{bubbles:true,composed:true,cancelable:true,detail:this.localUId}))}registerKeyListener(){if(!this.triggerElement){return}this.disposeKeyListener=m(this.triggerElement,"keydown",(t=>{if(t.key!=="ArrowDown"){return}if(document.activeElement!==this.triggerElement){return}u.present(this);setTimeout((()=>{this.focusDropdownItem(0)}))}))}async registerListener(t){this.triggerElement=await this.resolveElement(t);if(this.triggerElement){this.addEventListenersFor();this.discoverSubmenu()}}async resolveElement(t){const i=await b(t);return this.checkForSubmenuAnchor(i)}async checkForSubmenuAnchor(t){if(!t){return undefined}if(f(t)){const i=await t.getDropdownItemElement();i.isSubMenu=true;this.hostElement.style.zIndex=`var(--theme-z-index-dropdown)`}if(t.tagName==="IX-DROPDOWN-ITEM"){t.isSubMenu=true;this.hostElement.style.zIndex=`var(--theme-z-index-dropdown)`}return t}async resolveAnchorElement(){if(this.anchor){this.anchorElement=await this.resolveElement(this.anchor)}else if(this.trigger){this.anchorElement=await this.resolveElement(this.trigger)}}async changedShow(t){var i,s,e,r;if(t){await this.resolveAnchorElement();if(this.anchorElement){this.applyDropdownPosition()}this.arrowFocusController=new c(this.dropdownItems,this.hostElement,(t=>this.focusDropdownItem(t)));(i=this.itemObserver)===null||i===void 0?void 0:i.observe(this.hostElement,{childList:true,subtree:true});this.registerKeyListener()}else{this.destroyAutoUpdate();(s=this.arrowFocusController)===null||s===void 0?void 0:s.disconnect();(e=this.itemObserver)===null||e===void 0?void 0:e.disconnect();(r=this.disposeKeyListener)===null||r===void 0?void 0:r.call(this)}}changedTrigger(t){this.registerListener(t)}destroyAutoUpdate(){if(this.autoUpdateCleanup){this.autoUpdateCleanup();this.autoUpdateCleanup=undefined}}isAnchorSubmenu(){var t;if(!f(this.anchorElement)){return!!((t=this.anchorElement)===null||t===void 0?void 0:t.closest("ix-dropdown-item"))}return true}async applyDropdownPosition(){var t,i;if(!this.show){return}if(!this.anchorElement){return}const s=this.isAnchorSubmenu();let e={strategy:this.positioningStrategy,middleware:[]};if(!this.suppressAutomaticPlacement){(t=e.middleware)===null||t===void 0?void 0:t.push(o({fallbackStrategy:"initialPlacement"}))}e.placement=s?"right-start":this.placement;e.middleware=[...((i=e.middleware)===null||i===void 0?void 0:i.filter(Boolean))||[],h(),n()];if(this.offset){e.middleware.push(a(this.offset))}this.destroyAutoUpdate();if(!this.anchorElement){return}this.autoUpdateCleanup=d(this.anchorElement,this.hostElement,(async()=>{if(this.anchorElement){const t=await l(this.anchorElement,this.hostElement,e);Object.assign(this.hostElement.style,{top:"0",left:"0",transform:`translate(${Math.round(t.x)}px,${Math.round(t.y)}px)`})}if(this.overwriteDropdownStyle){const t=await this.overwriteDropdownStyle({dropdownRef:this.hostElement,triggerRef:this.triggerElement});Object.assign(this.hostElement.style,t)}}),{ancestorResize:true,ancestorScroll:true,elementResize:true})}focusDropdownItem(t){requestAnimationFrame((()=>{var i,s;const e=(s=(i=this.dropdownItems[t])===null||i===void 0?void 0:i.shadowRoot)===null||s===void 0?void 0:s.querySelector("button");if(e){e.focus()}}))}async componentDidLoad(){if(!this.trigger){return}this.changedTrigger(this.trigger)}async componentDidRender(){await this.applyDropdownPosition();await this.resolveAnchorElement()}isTriggerElement(t){const i=!!t.hasAttribute("data-ix-dropdown-trigger");return i}onDropdownClick(t){const i=u.pathIncludesTrigger(t.composedPath());if(i){if(i!==this.triggerElement){t.preventDefault()}if(this.isTriggerElement(i)){if(this.closeBehavior==="outside"){t.preventDefault()}return}}if(!t.defaultPrevented&&(this.closeBehavior==="inside"||this.closeBehavior==="both")){u.dismissAll([this.getId()],this.ignoreRelatedSubmenu);return}u.dismissOthers(this.getId())}async updatePosition(){this.applyDropdownPosition()}render(){return s(e,{key:"2c13027bd2c1d4aaf232c5435166dfd557acebe2","data-ix-dropdown":this.localUId,class:{"dropdown-menu":true,show:this.show,overflow:!this.suppressOverflowBehavior},style:{margin:"0",minWidth:"0px",position:this.positioningStrategy},role:"list",onClick:t=>this.onDropdownClick(t)},s("div",{key:"a367b5ee709b359ee02df11a17ca67b2f2f474e2",style:{display:"contents"}},this.header&&s("div",{key:"ca3be5fb3a3a96eaeb5b64d5f77251d322816804",class:"dropdown-header"},this.header),this.show&&s("slot",{key:"e04e1b59ede94b260e8cf29ec946befd69218b2d"})))}get hostElement(){return r(this)}static get watchers(){return{show:["changedShow"],trigger:["changedTrigger"]}}};p.style=v;export{p as ix_dropdown};
+//# sourceMappingURL=p-2fd6c84e.entry.js.map

package/dist/siemens-ix/{p-ead88218.entry.js → p-3222601f.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as o,H as i,a as e}from"./p-DJsXFBNm.js";import{i as s,s as n,o as a,f as l,a as r,b as h,c as m}from"./p-CAqtPJ4-.js";const f='.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:inline-block;position:relative;width:100%;z-index:var(--theme-z-index-tooltip)}:host .validation-tooltip{background-color:var(--theme-tootlip--background);color:var(--theme-tooltip--color);padding:5px 10px;border-radius:4px;font-size:13px;border:1px solid var(--theme-tooltip--border-color);box-shadow:0 0 2px 0 rgba(0, 0, 40, 0.1), 0 4px 8px 0 rgba(0, 0, 40, 0.1), 0 12px 18px 0 rgba(0, 0, 40, 0.1)}:host .validation-tooltip #arrow,:host .validation-tooltip #arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host .validation-tooltip #arrow{visibility:hidden}:host .validation-tooltip #arrow::before{visibility:visible;content:"";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}:host .validation-tooltip>#arrow{bottom:-5px}:host .validation-tooltip>#arrow::before{border-right:1px solid var(--theme-tooltip--border-color);border-bottom:1px solid var(--theme-tooltip--border-color)}';const d=class{constructor(o){t(this,o);this.placement="top";this.suppressAutomaticPlacement=false;this.isInputValid=true;this.onSubmitBind=this.onSubmit.bind(this);this.onInputFocusBind=this.onInputFocus.bind(this)}get arrow(){return this.hostElement.shadowRoot.querySelector("#arrow")}get inputElement(){return this.hostElement.querySelector("input")}get formElement(){var t;return(t=this.inputElement)===null||t===void 0?void 0:t.form}get tooltipElement(){return this.hostElement.shadowRoot.querySelector(".validation-tooltip")}destroyAutoUpdate(){if(this.tooltipElement){this.tooltipElement.style.display="none"}if(this.autoUpdateCleanup){this.autoUpdateCleanup()}}applyTooltipPosition(){this.tooltipElement.style.display="block";let t={strategy:"fixed",middleware:[s(),n(),a({mainAxis:8})]};if(!t.middleware){t.middleware=[]}if(!this.suppressAutomaticPlacement){t.middleware.push(l({fallbackStrategy:"initialPlacement"}))}t.placement=this.placement;this.autoUpdateCleanup=r(this.inputElement,this.tooltipElement,(async()=>{t.middleware=[...t.middleware,h({element:this.arrow})];const o=await m(this.inputElement,this.tooltipElement,t);if(o.middlewareData.arrow){const{x:t,y:i}=o.middlewareData.arrow;this.arrowPosition={x:t,y:i};Object.assign(this.arrow.style,{left:t!=null?`${t}px`:"",top:i!=null?`${i}px`:""})}this.tooltipPosition={x:o.x,y:o.y}}),{ancestorResize:true,ancestorScroll:true,elementResize:true})}componentDidLoad(){if(!this.inputElement){throw Error("Validation tooltip is only working with an direct input child.")}if(!this.formElement){throw Error("Validation tooltip is only working with an form element.")}this.formElement.addEventListener("submit",this.onSubmitBind);this.inputElement.addEventListener("focus",this.onInputFocusBind);this.observer=new MutationObserver((()=>{if(this.inputElement.classList.contains("is-invalid")){this.isInputValid=false;this.validationChanged()}}));this.observer.observe(this.inputElement,{childList:false,subtree:false,attributes:true,attributeFilter:["class"]})}onInputFocus(){this.isInputValid=true}onSubmit(){if(this.formElement.classList.contains("needs-validation")){this.isInputValid=this.inputElement.validity.valid}}disconnectedCallback(){var t,o,i;(t=this.observer)===null||t===void 0?void 0:t.disconnect();this.destroyAutoUpdate();(o=this.formElement)===null||o===void 0?void 0:o.removeEventListener("submit",this.onSubmitBind);(i=this.inputElement)===null||i===void 0?void 0:i.removeEventListener("focus",this.onInputFocusBind)}validationChanged(){if(!this.isInputValid){this.applyTooltipPosition()}else{this.destroyAutoUpdate()}}render(){var t,e,s,n;return o(i,{key:"24a20bd307d3286b2705abd3ee1b45a6827d2b02"},o("slot",{key:"c7e67ecb25abff1543be230029581d1c27e0fb72"}),o("div",{key:"34a919e2a1ff5a17202d38a9458d4645630b1d62",role:"tooltip",style:{display:"none",position:"fixed",top:"0",left:"0",transform:`translate(${Math.round((e=(t=this.tooltipPosition)===null||t===void 0?void 0:t.x)!==null&&e!==void 0?e:0)}px,${Math.round((n=(s=this.tooltipPosition)===null||s===void 0?void 0:s.y)!==null&&n!==void 0?n:0)}px)`},class:"validation-tooltip text-default"},this.message,o("slot",{key:"aae5ba647f98d1d8a4ffc1271c955d655c18d018",name:"tooltip-message"}),o("div",{key:"fe7f6be697b61a31fbd401cf5d3ca04152c4d655",id:"arrow"})))}get hostElement(){return e(this)}static get watchers(){return{isInputValid:["validationChanged"]}}};d.style=f;export{d as ix_validation_tooltip};
-//# sourceMappingURL=p-ead88218.entry.js.map
+import{r as t,h as o,H as i,g as e}from"./p-DUcGWByh.js";import{i as s,s as n,o as a,f as l,a as r,b as h,c as m}from"./p-CAqtPJ4-.js";const f='.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:inline-block;position:relative;width:100%;z-index:var(--theme-z-index-tooltip)}:host .validation-tooltip{background-color:var(--theme-tootlip--background);color:var(--theme-tooltip--color);padding:5px 10px;border-radius:4px;font-size:13px;border:1px solid var(--theme-tooltip--border-color);box-shadow:0 0 2px 0 rgba(0, 0, 40, 0.1), 0 4px 8px 0 rgba(0, 0, 40, 0.1), 0 12px 18px 0 rgba(0, 0, 40, 0.1)}:host .validation-tooltip #arrow,:host .validation-tooltip #arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host .validation-tooltip #arrow{visibility:hidden}:host .validation-tooltip #arrow::before{visibility:visible;content:"";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}:host .validation-tooltip>#arrow{bottom:-5px}:host .validation-tooltip>#arrow::before{border-right:1px solid var(--theme-tooltip--border-color);border-bottom:1px solid var(--theme-tooltip--border-color)}';const d=class{constructor(o){t(this,o);this.placement="top";this.suppressAutomaticPlacement=false;this.isInputValid=true;this.onSubmitBind=this.onSubmit.bind(this);this.onInputFocusBind=this.onInputFocus.bind(this)}get arrow(){return this.hostElement.shadowRoot.querySelector("#arrow")}get inputElement(){return this.hostElement.querySelector("input")}get formElement(){var t;return(t=this.inputElement)===null||t===void 0?void 0:t.form}get tooltipElement(){return this.hostElement.shadowRoot.querySelector(".validation-tooltip")}destroyAutoUpdate(){if(this.tooltipElement){this.tooltipElement.style.display="none"}if(this.autoUpdateCleanup){this.autoUpdateCleanup()}}applyTooltipPosition(){this.tooltipElement.style.display="block";let t={strategy:"fixed",middleware:[s(),n(),a({mainAxis:8})]};if(!t.middleware){t.middleware=[]}if(!this.suppressAutomaticPlacement){t.middleware.push(l({fallbackStrategy:"initialPlacement"}))}t.placement=this.placement;this.autoUpdateCleanup=r(this.inputElement,this.tooltipElement,(async()=>{t.middleware=[...t.middleware,h({element:this.arrow})];const o=await m(this.inputElement,this.tooltipElement,t);if(o.middlewareData.arrow){const{x:t,y:i}=o.middlewareData.arrow;this.arrowPosition={x:t,y:i};Object.assign(this.arrow.style,{left:t!=null?`${t}px`:"",top:i!=null?`${i}px`:""})}this.tooltipPosition={x:o.x,y:o.y}}),{ancestorResize:true,ancestorScroll:true,elementResize:true})}componentDidLoad(){if(!this.inputElement){throw Error("Validation tooltip is only working with an direct input child.")}if(!this.formElement){throw Error("Validation tooltip is only working with an form element.")}this.formElement.addEventListener("submit",this.onSubmitBind);this.inputElement.addEventListener("focus",this.onInputFocusBind);this.observer=new MutationObserver((()=>{if(this.inputElement.classList.contains("is-invalid")){this.isInputValid=false;this.validationChanged()}}));this.observer.observe(this.inputElement,{childList:false,subtree:false,attributes:true,attributeFilter:["class"]})}onInputFocus(){this.isInputValid=true}onSubmit(){if(this.formElement.classList.contains("needs-validation")){this.isInputValid=this.inputElement.validity.valid}}disconnectedCallback(){var t,o,i;(t=this.observer)===null||t===void 0?void 0:t.disconnect();this.destroyAutoUpdate();(o=this.formElement)===null||o===void 0?void 0:o.removeEventListener("submit",this.onSubmitBind);(i=this.inputElement)===null||i===void 0?void 0:i.removeEventListener("focus",this.onInputFocusBind)}validationChanged(){if(!this.isInputValid){this.applyTooltipPosition()}else{this.destroyAutoUpdate()}}render(){var t,e,s,n;return o(i,{key:"60d0a4ecdb91c93ae250d1906708eda5a67b2f77"},o("slot",{key:"69982e766bc15a1c8e37851c6aa7d5171a27d152"}),o("div",{key:"efde4ebde828c81512b106438049f473953d4325",role:"tooltip",style:{display:"none",position:"fixed",top:"0",left:"0",transform:`translate(${Math.round((e=(t=this.tooltipPosition)===null||t===void 0?void 0:t.x)!==null&&e!==void 0?e:0)}px,${Math.round((n=(s=this.tooltipPosition)===null||s===void 0?void 0:s.y)!==null&&n!==void 0?n:0)}px)`},class:"validation-tooltip text-default"},this.message,o("slot",{key:"71cc0f6a941722bf84d4b8124c930dbd8c66a7a5",name:"tooltip-message"}),o("div",{key:"20b1bc13d47052b8384ea289bb9ecde8ee5fb155",id:"arrow"})))}get hostElement(){return e(this)}static get watchers(){return{isInputValid:["validationChanged"]}}};d.style=f;export{d as ix_validation_tooltip};
+//# sourceMappingURL=p-3222601f.entry.js.map

package/dist/siemens-ix/p-35e30061.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as o,g as a}from"./p-DUcGWByh.js";import{u as r,A as i}from"./p--2LOMK-5.js";import{a as s}from"./p-CyFFBc_G.js";import{m as n}from"./p-DDHkNPby.js";import"./p-BdCnOrqW.js";import"./p-D6vSVaHq.js";const h=":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}: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 ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .content{display:flex;height:100%;width:100%;position:relative;margin-left:3.25rem;overflow:auto}:host .navigation-content{display:flex;position:relative;flex-direction:row;height:calc(100% - 2.75rem);width:100%}:host(.hide-header) .navigation-content,:host(.hide-header) .content{height:100%}:host(.breakpoint-lg) .content{margin-left:0rem}:host(.breakpoint-sm) .content{margin-left:0px;width:100%}";const l=class{constructor(e){t(this,e);this.hideHeader=false;this.breakpoints=["sm","md","lg"];this.breakpoint="lg"}onHideHeaderChange(){var t;(t=this.contextProvider)===null||t===void 0?void 0:t.emit({hideHeader:this.hideHeader,host:"basic-navigation"});this.breakpoint=s.breakpoint}forceLayoutChange(t){if(!t){s.enableBreakpointDetection();return}s.disableBreakpointDetection();s.setBreakpoint(t)}onBreakpointsChange(t){s.setBreakpoints(t)}get menu(){return this.hostElement.querySelector("ix-menu")}onContentClick(){var t;if(n.isPinned){return}(t=this.menu)===null||t===void 0?void 0:t.toggleMenu(false)}componentWillLoad(){s.setBreakpoints(this.breakpoints);this.contextProvider=r(this.hostElement,i,{hideHeader:this.hideHeader,host:"basic-navigation"});this.modeDisposable=s.onChange.on((t=>{this.breakpoint=t}));this.breakpoint=s.breakpoint;if(this.forceBreakpoint){this.forceLayoutChange(this.forceBreakpoint)}}componentDidRender(){if(this.menu){this.menu.applicationName=this.applicationName}}disconnectedCallback(){var t;(t=this.modeDisposable)===null||t===void 0?void 0:t.dispose()}render(){return e(o,{key:"4822db1bf514b124a556e3ad84371ec65c80b79e","data-role":"",class:{"hide-header":this.hideHeader,[`breakpoint-${this.breakpoint}`]:true}},!this.hideHeader?e("ix-application-header",{name:this.applicationName},e("slot",{name:"logo",slot:"logo"})):null,e("div",{key:"6dac9e78e5fdfcde1d6ceadb634edf144f92d533",class:"navigation-content"},e("slot",{key:"32e0ae56a4bd3d71298fd8febf6dab05f352addf",name:"menu"}),e("div",{key:"9c58c183a31ab742153be18d439e44557caa70b3",class:"content",onClick:()=>this.onContentClick()},e("slot",{key:"8fba39214e60168b3780d95c1e262b976dc4a5a6"}))))}get hostElement(){return a(this)}static get watchers(){return{hideHeader:["onHideHeaderChange"],breakpoints:["onBreakpointsChange"]}}};l.style=h;export{l as ix_basic_navigation};
+//# sourceMappingURL=p-35e30061.entry.js.map

package/dist/siemens-ix/{p-aa2dd2c3.entry.js.map → p-35e30061.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["basicNavigationCss","BasicNavigation","constructor","hostRef","this","hideHeader","breakpoints","breakpoint","onHideHeaderChange","_a","contextProvider","emit","host","applicationLayoutService","forceLayoutChange","newMode","enableBreakpointDetection","disableBreakpointDetection","setBreakpoint","onBreakpointsChange","setBreakpoints","menu","hostElement","querySelector","onContentClick","menuController","isPinned","toggleMenu","componentWillLoad","useContextProvider","ApplicationLayoutContext","modeDisposable","onChange","on","mode","forceBreakpoint","componentDidRender","applicationName","disconnectedCallback","dispose","render","h","Host","key","class","name","slot","onClick"],"sources":["src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","src/components/basic-navigation/basic-navigation.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 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  flex-direction: column;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .logo-wrapper {\n    display: contents;\n  }\n\n  .content {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    margin-left: 3.25rem;\n    overflow: auto;\n  }\n\n  .navigation-content {\n    display: flex;\n    position: relative;\n\n    flex-direction: row;\n\n    height: calc(100% - 2.75rem);\n    width: 100%;\n  }\n}\n\n:host(.hide-header) {\n  .navigation-content,\n  .content {\n    height: 100%;\n  }\n}\n\n:host(.breakpoint-lg) {\n  .content {\n    margin-left: 0rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .content {\n    margin-left: 0px;\n    width: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  shadow: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement!: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName?: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n  @Watch('hideHeader')\n  onHideHeaderChange() {\n    this.contextProvider?.emit({\n      hideHeader: this.hideHeader,\n      host: 'basic-navigation',\n    });\n\n    this.breakpoint = applicationLayoutService.breakpoint;\n  }\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   * @example ['sm', 'md']\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  @State() breakpoint: Breakpoint = 'lg';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable?: Disposable;\n  private contextProvider?: ContextProvider<typeof ApplicationLayoutContext>;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: this.hideHeader,\n        host: 'basic-navigation',\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\" slot=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div class=\"navigation-content\">\n          <slot name=\"menu\"></slot>\n          <div class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uNAAA,MAAMA,EAAqB,i1C,MCsBdC,EAAe,MAL5B,WAAAC,CAAAC,G,UAgBUC,KAAUC,WAAG,MA6BbD,KAAWE,YAAiB,CAAC,KAAM,KAAM,MAMxCF,KAAUG,WAAe,IAuEnC,CAxGC,kBAAAC,G,OACEC,EAAAL,KAAKM,mBAAe,MAAAD,SAAA,SAAAA,EAAEE,KAAK,CACzBN,WAAYD,KAAKC,WACjBO,KAAM,qBAGRR,KAAKG,WAAaM,EAAyBN,U,CAO7C,iBAAAO,CAAkBC,GAChB,IAAKA,EAAS,CACZF,EAAyBG,4BACzB,M,CAGFH,EAAyBI,6BACzBJ,EAAyBK,cAAcH,E,CASzC,mBAAAI,CAAoBb,GAClBO,EAAyBO,eAAed,E,CAK1C,QAAIe,GACF,OAAOjB,KAAKkB,YAAYC,cAAc,U,CAMhC,cAAAC,G,MACN,GAAIC,EAAeC,SAAU,CAC3B,M,EAEFjB,EAAAL,KAAKiB,QAAI,MAAAZ,SAAA,SAAAA,EAAEkB,WAAW,M,CAGxB,iBAAAC,GACEf,EAAyBO,eAAehB,KAAKE,aAE7CF,KAAKM,gBAAkBmB,EACrBzB,KAAKkB,YACLQ,EACA,CACEzB,WAAYD,KAAKC,WACjBO,KAAM,qBAIVR,KAAK2B,eAAiBlB,EAAyBmB,SAASC,IAAIC,IAC1D9B,KAAKG,WAAa2B,CAAI,IAExB9B,KAAKG,WAAaM,EAAyBN,WAE3C,GAAIH,KAAK+B,gBAAiB,CACxB/B,KAAKU,kBAAkBV,KAAK+B,gB,EAIhC,kBAAAC,GACE,GAAIhC,KAAKiB,KAAM,CACbjB,KAAKiB,KAAKgB,gBAAkBjC,KAAKiC,e,EAIrC,oBAAAC,G,OACE7B,EAAAL,KAAK2B,kBAAgB,MAAAtB,SAAA,SAAAA,EAAA8B,S,CAGvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,uDACO,GACVC,MAAO,CACL,cAAexC,KAAKC,WACpB,CAAC,cAAcD,KAAKG,cAAe,QAGnCH,KAAKC,WACLoC,EAAA,yBAAuBI,KAAMzC,KAAKiC,iBAChCI,EAAA,QAAMI,KAAK,OAAOC,KAAK,UAEvB,KACJL,EAAK,OAAAE,IAAA,2CAAAC,MAAM,sBACTH,EAAM,QAAAE,IAAA,2CAAAE,KAAK,SACXJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUG,QAAS,IAAM3C,KAAKoB,kBACvCiB,EAAA,QAAAE,IAAA,+C","ignoreList":[]}
+{"version":3,"names":["basicNavigationCss","BasicNavigation","constructor","hostRef","this","hideHeader","breakpoints","breakpoint","onHideHeaderChange","_a","contextProvider","emit","host","applicationLayoutService","forceLayoutChange","newMode","enableBreakpointDetection","disableBreakpointDetection","setBreakpoint","onBreakpointsChange","setBreakpoints","menu","hostElement","querySelector","onContentClick","menuController","isPinned","toggleMenu","componentWillLoad","useContextProvider","ApplicationLayoutContext","modeDisposable","onChange","on","mode","forceBreakpoint","componentDidRender","applicationName","disconnectedCallback","dispose","render","h","Host","key","class","name","slot","onClick"],"sources":["src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","src/components/basic-navigation/basic-navigation.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 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  flex-direction: column;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .logo-wrapper {\n    display: contents;\n  }\n\n  .content {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    margin-left: 3.25rem;\n    overflow: auto;\n  }\n\n  .navigation-content {\n    display: flex;\n    position: relative;\n\n    flex-direction: row;\n\n    height: calc(100% - 2.75rem);\n    width: 100%;\n  }\n}\n\n:host(.hide-header) {\n  .navigation-content,\n  .content {\n    height: 100%;\n  }\n}\n\n:host(.breakpoint-lg) {\n  .content {\n    margin-left: 0rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .content {\n    margin-left: 0px;\n    width: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  shadow: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement!: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName?: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n  @Watch('hideHeader')\n  onHideHeaderChange() {\n    this.contextProvider?.emit({\n      hideHeader: this.hideHeader,\n      host: 'basic-navigation',\n    });\n\n    this.breakpoint = applicationLayoutService.breakpoint;\n  }\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   * @example ['sm', 'md']\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  @State() breakpoint: Breakpoint = 'lg';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable?: Disposable;\n  private contextProvider?: ContextProvider<typeof ApplicationLayoutContext>;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: this.hideHeader,\n        host: 'basic-navigation',\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\" slot=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div class=\"navigation-content\">\n          <slot name=\"menu\"></slot>\n          <div class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"4NAAA,MAAMA,EAAqB,i1C,MCsBdC,EAAe,MAL5B,WAAAC,CAAAC,G,UAgBUC,KAAUC,WAAG,MA6BbD,KAAWE,YAAiB,CAAC,KAAM,KAAM,MAMxCF,KAAUG,WAAe,IAuEnC,CAxGC,kBAAAC,G,OACEC,EAAAL,KAAKM,mBAAe,MAAAD,SAAA,SAAAA,EAAEE,KAAK,CACzBN,WAAYD,KAAKC,WACjBO,KAAM,qBAGRR,KAAKG,WAAaM,EAAyBN,U,CAO7C,iBAAAO,CAAkBC,GAChB,IAAKA,EAAS,CACZF,EAAyBG,4BACzB,M,CAGFH,EAAyBI,6BACzBJ,EAAyBK,cAAcH,E,CASzC,mBAAAI,CAAoBb,GAClBO,EAAyBO,eAAed,E,CAK1C,QAAIe,GACF,OAAOjB,KAAKkB,YAAYC,cAAc,U,CAMhC,cAAAC,G,MACN,GAAIC,EAAeC,SAAU,CAC3B,M,EAEFjB,EAAAL,KAAKiB,QAAI,MAAAZ,SAAA,SAAAA,EAAEkB,WAAW,M,CAGxB,iBAAAC,GACEf,EAAyBO,eAAehB,KAAKE,aAE7CF,KAAKM,gBAAkBmB,EACrBzB,KAAKkB,YACLQ,EACA,CACEzB,WAAYD,KAAKC,WACjBO,KAAM,qBAIVR,KAAK2B,eAAiBlB,EAAyBmB,SAASC,IAAIC,IAC1D9B,KAAKG,WAAa2B,CAAI,IAExB9B,KAAKG,WAAaM,EAAyBN,WAE3C,GAAIH,KAAK+B,gBAAiB,CACxB/B,KAAKU,kBAAkBV,KAAK+B,gB,EAIhC,kBAAAC,GACE,GAAIhC,KAAKiB,KAAM,CACbjB,KAAKiB,KAAKgB,gBAAkBjC,KAAKiC,e,EAIrC,oBAAAC,G,OACE7B,EAAAL,KAAK2B,kBAAgB,MAAAtB,SAAA,SAAAA,EAAA8B,S,CAGvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,uDACO,GACVC,MAAO,CACL,cAAexC,KAAKC,WACpB,CAAC,cAAcD,KAAKG,cAAe,QAGnCH,KAAKC,WACLoC,EAAA,yBAAuBI,KAAMzC,KAAKiC,iBAChCI,EAAA,QAAMI,KAAK,OAAOC,KAAK,UAEvB,KACJL,EAAK,OAAAE,IAAA,2CAAAC,MAAM,sBACTH,EAAM,QAAAE,IAAA,2CAAAE,KAAK,SACXJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUG,QAAS,IAAM3C,KAAKoB,kBACvCiB,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

package/dist/siemens-ix/{p-ea142215.entry.js → p-39dda65c.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as t,h as r,H as e}from"./p-DJsXFBNm.js";import{j as n,k as i}from"./p-DLTnniMb.js";const a=".ix-form-control,.ix-form-control-plaintext{-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);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem}.ix-form-control::-moz-placeholder,.ix-form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.ix-form-control::placeholder,.ix-form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:focus-visible{color:var(--theme-input--color)}.ix-form-control[type=number]{text-align:right}.ix-form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.ix-form-control.readonly,.ix-form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.ix-form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only,.ix-form-control[readonly],.ix-form-control[readOnly],.ix-form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only::-moz-placeholder,.ix-form-control[readonly]::-moz-placeholder,.ix-form-control[readOnly]::-moz-placeholder,.ix-form-control.readonly::-moz-placeholder{color:transparent}.ix-form-control:-moz-read-only::placeholder{color:transparent}.ix-form-control:read-only::placeholder,.ix-form-control[readonly]::placeholder,.ix-form-control[readOnly]::placeholder,.ix-form-control.readonly::placeholder{color:transparent}.ix-form-control:disabled,.ix-form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.ix-form-control:disabled::-moz-placeholder,.ix-form-control.disabled::-moz-placeholder{color:transparent}.ix-form-control:disabled::placeholder,.ix-form-control.disabled::placeholder{color:transparent}.ix-form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{padding-inline-start:2.2rem}select.ix-form-control{padding:0 0.312rem}textarea.ix-form-control{padding:0.375rem 0.5rem}input.ix-form-control.disabled,input.ix-form-control:disabled{color:var(--theme-input--color--disabled)}input.ix-form-control:-moz-read-only{cursor:default}input.ix-form-control:read-only,input.ix-form-control.readonly{cursor:default}:host{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between;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 .input-container{transition:all var(--theme-medium-time) ease-in-out}:host input{box-shadow:var(--theme-input--box-shadow);cursor:auto !important;width:100%}:host .expanded{width:11.5625rem}:host .expanded.fullWidth{width:100%}:host .collapsed{width:1.5rem;border:none}:host .btn-search-icon{align-self:center;margin:auto;position:relative}:host .btn-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all var(--theme-default-time) ease-in-out;z-index:1;align-items:center;position:relative;border:none}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):hover,:host .btn-search:not(.disabled):not(:disabled).hover{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):active,:host .btn-search:not(.disabled):not(:disabled).active{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:none}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}:host .btn-search.btn-search--expanded{margin-left:0.25rem;pointer-events:none}:host .btn-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}:host .input-container{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}:host .btn-clear{position:absolute;border-radius:var(--theme-input--border-radius);right:0px;margin-right:0.25rem}:host .input{padding-left:2rem !important;padding-right:2.5rem !important}:host .opacity-before{opacity:0}:host .opacity-after{opacity:1}:host(.right-position){width:11.5625rem !important}:host(.right-position.fullWidth){width:100% !important}:host(.right-position.fullWidth) .fullWidth{width:100% !important}";const l=class{expandInput(){setTimeout(this.focusTextInput,300);this.expanded=true}collapseInput(){if(!this.isFieldChanged&&this.expanded){this.expanded=false}}clearInput(){this.value="";this.isFieldChanged=false}onChange(o){this.value=o.target.value;if(this.isFieldChanged&&this.value===""){this.isFieldChanged=false}else{this.isFieldChanged=true}this.valueChange.emit(this.value)}constructor(r){o(this,r);this.valueChange=t(this,"valueChange",7);this.placeholder="Enter text here";this.value="";this.fullWidth=false;this.variant="primary";this.outline=false;this.ghost=true;this.isFieldChanged=false;this.expanded=false;this.hasFocus=false;this.focusTextInput=this.focusTextInput.bind(this)}focusTextInput(){var o;(o=this.textInput)===null||o===void 0?void 0:o.focus()}clearClicked(){var o;this.clearInput();(o=this.textInput)===null||o===void 0?void 0:o.focus();this.valueChange.emit(this.value)}render(){var o;return r(e,{key:"6fd8984383d4b8459981f951c40913d4c194df54",class:{expanded:this.expanded,"right-position":this.expanded,fullWidth:this.fullWidth}},r("ix-icon-button",{key:"5f63c65cfe62582bb214007ca2f6fd61ef3796b1",size:this.expanded?"16":"24",icon:(o=this.icon)!==null&&o!==void 0?o:i,variant:this.expanded?"primary":this.variant,ghost:this.ghost||this.expanded,outline:this.outline&&!this.expanded,"data-testid":"button",onClick:()=>this.expandInput(),tabindex:this.expanded?-1:0,color:this.hasFocus?"input-search-icon--color--focus":undefined,class:{"btn-search":true,"btn-search--expanded":this.expanded}}),r("div",{key:"d4e2020d174e1a71842586eac3cdfe5fe17a0ece",class:{expanded:this.expanded,fullWidth:this.fullWidth,collapsed:!this.expanded,"disable-pointer":!this.expanded,"input-container":true},"data-testid":"input-wrapper"},r("input",{key:"f375ac635389108c7711d1075b1d7c730db1e554",class:{"ix-form-control":true,input:this.expanded,"disable-pointer":!this.expanded,"opacity-before":!this.expanded,"opacity-after":this.expanded},ref:o=>this.textInput=o,"data-testid":"input",placeholder:this.placeholder,type:"text",value:this.value,onBlur:()=>{this.collapseInput();this.hasFocus=false},onFocus:()=>this.hasFocus=true,onInput:o=>this.onChange(o),tabindex:this.expanded?0:-1}),this.isFieldChanged?r("ix-icon-button",{class:"btn-clear",icon:n,ghost:true,size:"16","data-testid":"clear-button",onClick:()=>this.clearClicked()}):null))}};l.style=a;export{l as ix_expanding_search};
-//# sourceMappingURL=p-ea142215.entry.js.map
+import{r as o,c as t,h as r,H as e}from"./p-DUcGWByh.js";import{j as n,k as i}from"./p-BSqRUSbt.js";const a=".ix-form-control,.ix-form-control-plaintext{-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);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem}.ix-form-control::-moz-placeholder,.ix-form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.ix-form-control::placeholder,.ix-form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.ix-form-control:focus-visible{color:var(--theme-input--color)}.ix-form-control[type=number]{text-align:right}.ix-form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.ix-form-control.readonly,.ix-form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.ix-form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only,.ix-form-control[readonly],.ix-form-control[readOnly],.ix-form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.ix-form-control:read-only::-moz-placeholder,.ix-form-control[readonly]::-moz-placeholder,.ix-form-control[readOnly]::-moz-placeholder,.ix-form-control.readonly::-moz-placeholder{color:transparent}.ix-form-control:-moz-read-only::placeholder{color:transparent}.ix-form-control:read-only::placeholder,.ix-form-control[readonly]::placeholder,.ix-form-control[readOnly]::placeholder,.ix-form-control.readonly::placeholder{color:transparent}.ix-form-control:disabled,.ix-form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.ix-form-control:disabled::-moz-placeholder,.ix-form-control.disabled::-moz-placeholder{color:transparent}.ix-form-control:disabled::placeholder,.ix-form-control.disabled::placeholder{color:transparent}.ix-form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{padding-inline-start:2.2rem}select.ix-form-control{padding:0 0.312rem}textarea.ix-form-control{padding:0.375rem 0.5rem}input.ix-form-control.disabled,input.ix-form-control:disabled{color:var(--theme-input--color--disabled)}input.ix-form-control:-moz-read-only{cursor:default}input.ix-form-control:read-only,input.ix-form-control.readonly{cursor:default}:host{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between;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 .input-container{transition:all var(--theme-medium-time) ease-in-out}:host input{box-shadow:var(--theme-input--box-shadow);cursor:auto !important;width:100%}:host .expanded{width:11.5625rem}:host .expanded.fullWidth{width:100%}:host .collapsed{width:1.5rem;border:none}:host .btn-search-icon{align-self:center;margin:auto;position:relative}:host .btn-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all var(--theme-default-time) ease-in-out;z-index:1;align-items:center;position:relative;border:none}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):hover,:host .btn-search:not(.disabled):not(:disabled).hover{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):active,:host .btn-search:not(.disabled):not(:disabled).active{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:none}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}:host .btn-search.btn-search--expanded{margin-left:0.25rem;pointer-events:none}:host .btn-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}:host .input-container{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}:host .btn-clear{position:absolute;border-radius:var(--theme-input--border-radius);right:0px;margin-right:0.25rem}:host .input{padding-left:2rem !important;padding-right:2.5rem !important}:host .opacity-before{opacity:0}:host .opacity-after{opacity:1}:host(.right-position){width:11.5625rem !important}:host(.right-position.fullWidth){width:100% !important}:host(.right-position.fullWidth) .fullWidth{width:100% !important}";const l=class{expandInput(){setTimeout(this.focusTextInput,300);this.expanded=true}collapseInput(){if(!this.isFieldChanged&&this.expanded){this.expanded=false}}clearInput(){this.value="";this.isFieldChanged=false}onChange(o){this.value=o.target.value;if(this.isFieldChanged&&this.value===""){this.isFieldChanged=false}else{this.isFieldChanged=true}this.valueChange.emit(this.value)}constructor(r){o(this,r);this.valueChange=t(this,"valueChange",7);this.placeholder="Enter text here";this.value="";this.fullWidth=false;this.variant="primary";this.outline=false;this.ghost=true;this.isFieldChanged=false;this.expanded=false;this.hasFocus=false;this.focusTextInput=this.focusTextInput.bind(this)}focusTextInput(){var o;(o=this.textInput)===null||o===void 0?void 0:o.focus()}clearClicked(){var o;this.clearInput();(o=this.textInput)===null||o===void 0?void 0:o.focus();this.valueChange.emit(this.value)}render(){var o;return r(e,{key:"6fd8984383d4b8459981f951c40913d4c194df54",class:{expanded:this.expanded,"right-position":this.expanded,fullWidth:this.fullWidth}},r("ix-icon-button",{key:"5f63c65cfe62582bb214007ca2f6fd61ef3796b1",size:this.expanded?"16":"24",icon:(o=this.icon)!==null&&o!==void 0?o:i,variant:this.expanded?"primary":this.variant,ghost:this.ghost||this.expanded,outline:this.outline&&!this.expanded,"data-testid":"button",onClick:()=>this.expandInput(),tabindex:this.expanded?-1:0,color:this.hasFocus?"input-search-icon--color--focus":undefined,class:{"btn-search":true,"btn-search--expanded":this.expanded}}),r("div",{key:"d4e2020d174e1a71842586eac3cdfe5fe17a0ece",class:{expanded:this.expanded,fullWidth:this.fullWidth,collapsed:!this.expanded,"disable-pointer":!this.expanded,"input-container":true},"data-testid":"input-wrapper"},r("input",{key:"f375ac635389108c7711d1075b1d7c730db1e554",class:{"ix-form-control":true,input:this.expanded,"disable-pointer":!this.expanded,"opacity-before":!this.expanded,"opacity-after":this.expanded},ref:o=>this.textInput=o,"data-testid":"input",placeholder:this.placeholder,type:"text",value:this.value,onBlur:()=>{this.collapseInput();this.hasFocus=false},onFocus:()=>this.hasFocus=true,onInput:o=>this.onChange(o),tabindex:this.expanded?0:-1}),this.isFieldChanged?r("ix-icon-button",{class:"btn-clear",icon:n,ghost:true,size:"16","data-testid":"clear-button",onClick:()=>this.clearClicked()}):null))}};l.style=a;export{l as ix_expanding_search};
+//# sourceMappingURL=p-39dda65c.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as r,H as o,g as a}from"./p-DUcGWByh.js";import{f as i,C as s}from"./p-BSqRUSbt.js";const c='@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 l=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.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:"5f99427e72341c777cb118dcbcd7587293c1b691",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=>{if(t.defaultPrevented)return;const e=this.tabClick.emit({nativeEvent:t});if(e.defaultPrevented){t.stopPropagation()}}},r("div",{key:"361559a66388b001472212ae7e2ecf9e164f8440",class:{circle:this.rounded,text:!this.rounded,selected:this.selected,disabled:this.disabled}},r("slot",{key:"94e209864ffbe284a8491d0059cd40bb70bddef3"})),r("div",{key:"27b5d1b3691d5086c15449936769e373bb3c6d1b",class:{counter:true,selected:this.selected,hidden:!(this.rounded&&this.counter!==undefined),disabled:this.disabled}},this.counter))}};l.style=c;const n=t=>{if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(t)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(t)}return setTimeout(t)};const h=":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 d=class{constructor(r){t(this,r);this.selectedChange=e(this,"selectedChange",7);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;this.windowStartSize=window.innerWidth;this.clickAction={timeout:null,isClick:true}}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(){n((()=>{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:"3a5a12a358f96a6b3eb9d3c626cff46be9d12b20"},this.showArrowPrevious&&r("div",{key:"03e87ff4152b6c41b4d20c57ae98f44e812b01dd",class:"arrow",onClick:()=>this.move(this.scrollAmount,true)},r("ix-icon",{key:"accba6626cf7e29dc217d4eecb1dc63c13cc7e74",name:s})),r("div",{key:"7c608a6a63d765019883a57038621daef3a99e99",class:{"tab-items":true,"overflow-shadow":true,"shadow-left":this.showArrowPrevious,"shadow-right":this.showArrowNext,"shadow-both":this.showArrowNext&&this.showArrowPrevious}},r("div",{key:"f4eca9afba68f8acc61b08f47ac45306cb530843",class:"items-content"},r("slot",{key:"2e16534b9365c6832929a64df055a9e8ec6231ff"}))),this.showArrowNext&&r("div",{key:"09f0cbbcb821f2d6a03090bfc04bac91f84277cc",class:"arrow right",onClick:()=>this.move(-this.scrollAmount,true)},r("ix-icon",{key:"f09da2a9097ce727ae21b8b4c49daddb7b3714ad",name:i})))}get hostElement(){return a(this)}static get watchers(){return{selected:["onSelectedChange"]}}};d.style=h;export{l as ix_tab_item,d as ix_tabs};
+//# sourceMappingURL=p-3b4b7666.entry.js.map

package/dist/siemens-ix/{p-326c0944.entry.js.map → p-3b4b7666.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["tabItemCss","TabItem","constructor","hostRef","this","selected","disabled","small","icon","rounded","layout","placement","tabItemClasses","props","stretched","bottom","top","circle","render","h","Host","key","class","tabIndex","onClick","event","defaultPrevented","clientEvent","tabClick","emit","nativeEvent","stopPropagation","text","counter","hidden","undefined","requestAnimationFrameNoNgZone","callback","__zone_symbol__requestAnimationFrame","requestAnimationFrame","setTimeout","tabsCss","Tabs","totalItems","currentScrollAmount","scrollAmount","scrollActionAmount","showArrowPrevious","showArrowNext","windowStartSize","window","innerWidth","clickAction","timeout","isClick","onWindowResize","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","showNextArrow","tabWrapperRect","amount","click","tabsWrapper","tabsWrapperVisibleWidth","maxScrollWidth","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","componentDidLoad","forEach","disconnectedCallback","disconnect","onTabClick","target","tab","name","iconChevronLeftSmall","iconChevronRightSmall"],"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';\nimport type { TabClickDetail } from './tab-item.types';\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  @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          if (event.defaultPrevented) return;\n\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';\nimport {\n  iconChevronLeftSmall,\n  iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\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  @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={iconChevronLeftSmall}></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={iconChevronRightSmall}></ix-icon>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tabItemCss","TabItem","constructor","hostRef","this","selected","disabled","small","icon","rounded","layout","placement","tabItemClasses","props","stretched","bottom","top","circle","render","h","Host","key","class","tabIndex","onClick","event","defaultPrevented","clientEvent","tabClick","emit","nativeEvent","stopPropagation","text","counter","hidden","undefined","requestAnimationFrameNoNgZone","callback","__zone_symbol__requestAnimationFrame","requestAnimationFrame","setTimeout","tabsCss","Tabs","totalItems","currentScrollAmount","scrollAmount","scrollActionAmount","showArrowPrevious","showArrowNext","windowStartSize","window","innerWidth","clickAction","timeout","isClick","onWindowResize","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","showNextArrow","tabWrapperRect","amount","click","tabsWrapper","tabsWrapperVisibleWidth","maxScrollWidth","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","componentDidLoad","forEach","disconnectedCallback","disconnect","onTabClick","target","tab","name","iconChevronLeftSmall","iconChevronRightSmall"],"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';\nimport type { TabClickDetail } from './tab-item.types';\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  @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          if (event.defaultPrevented) return;\n\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';\nimport {\n  iconChevronLeftSmall,\n  iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\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  @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={iconChevronLeftSmall}></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={iconChevronRightSmall}></ix-icon>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/p-41def6c4.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,d as o,h as i,F as r,H as s,g as a}from"./p-DUcGWByh.js";import{g as n,d as h}from"./p-BSqRUSbt.js";import{s as l}from"./p-DmGLQ0QW.js";import{a as d}from"./p-CyFFBc_G.js";import{a as c,A as p}from"./p--2LOMK-5.js";import{m}from"./p-DDHkNPby.js";import{h as f}from"./p-i60z1FJC.js";import"./p-Dp15M30K.js";import"./p-S9TGLK4M.js";import"./p-BdCnOrqW.js";import"./p-D6vSVaHq.js";const b=":host{display:flex;align-items:flex-end;flex-wrap:nowrap;position:relative;width:100%;height:calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));min-height:calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));padding-top:0;padding-right:calc(1rem + var(--ix-safe-area-inset-right, 0rem));padding-bottom:0.3rem;padding-left:calc(0.625rem + var(--ix-safe-area-inset-left, 0rem));color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);z-index:var(--theme-z-index-fixed)}: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 .app-switch{margin-right:1rem}:host .name{overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:nowrap;max-width:50%;margin-left:1.5rem;margin-right:2.5rem;margin-bottom:0.25rem;color:var(--theme-app-header--color)}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color);margin-left:0.375rem}:host .content{display:flex;position:relative;flex-direction:row;margin-left:auto;margin-right:0px}:host .dropdown{overflow:visible}:host .dropdown-content{padding:1rem}:host .context-menu{display:none}:host .context-menu.context-menu-visible{display:block}@media only screen and (max-width: 48em){:host .logo{display:none}}:host ::slotted(ix-avatar){margin-left:1rem}:host(.breakpoint-sm) .logo{margin-left:0.5rem}";const u=class{constructor(o){t(this,o);this.menuToggle=e(this,"menuToggle",7);this.openAppSwitch=e(this,"openAppSwitch",7);this.showMenu=false;this.breakpoint="lg";this.menuExpanded=false;this.suppressResponsive=false;this.hasSlottedElements=false}get contentBackground(){return this.hostElement.shadowRoot.querySelector(".dropdown-content")}componentWillLoad(){c(this.hostElement,p,(t=>{if((t===null||t===void 0?void 0:t.host)==="map-navigation"){this.suppressResponsive=true;this.breakpoint="md";return}this.breakpoint=d.breakpoint;this.applicationLayoutContext=t;this.tryUpdateAppSwitch()}),true);this.menuDisposable=m.expandChange.on((t=>{this.menuExpanded=t}));this.modeDisposable=d.onChange.on((t=>{if(this.suppressResponsive){return}this.breakpoint=t}));this.updateIsSlottedContent()}componentDidLoad(){this.attachSiemensLogoIfLoaded()}disconnectedCallback(){var t,e;(t=this.menuDisposable)===null||t===void 0?void 0:t.dispose();(e=this.modeDisposable)===null||e===void 0?void 0:e.dispose()}watchApplicationLayoutContext(){if(this.applicationLayoutContext){this.showMenu=false}}watchSuppressResponsive(){this.breakpoint="md"}isLogoSlotted(){const t=this.hostElement.shadowRoot.querySelector('slot[name="logo"]');const e=t.assignedNodes({flatten:true});return e.length!==0}attachSiemensLogoIfLoaded(){var t;const e=document.createElement("ix-siemens-logo");if(!this.isLogoSlotted()){(t=this.hostElement.shadowRoot.querySelector(".logo"))===null||t===void 0?void 0:t.appendChild(e)}}async onMenuClick(){if(this.applicationLayoutContext){m.toggle()}else{this.menuExpanded=!this.menuExpanded}this.menuToggle.emit(this.menuExpanded)}resolveContextMenuButton(){return new Promise((t=>o((()=>t(this.hostElement.shadowRoot.querySelector("[data-context-menu]"))))))}tryUpdateAppSwitch(){var t,e;if(!this.callbackUpdateAppSwitchModal||!((t=this.applicationLayoutContext)===null||t===void 0?void 0:t.appSwitchConfig)){return}this.callbackUpdateAppSwitchModal((e=this.applicationLayoutContext)===null||e===void 0?void 0:e.appSwitchConfig)}async showAppSwitch(){var t,e;const{defaultPrevented:o}=this.openAppSwitch.emit();if(o){return}if(!((t=this.applicationLayoutContext)===null||t===void 0?void 0:t.appSwitchConfig)){return}this.callbackUpdateAppSwitchModal=await l((e=this.applicationLayoutContext)===null||e===void 0?void 0:e.appSwitchConfig)}updateIsSlottedContent(){const t=this.hostElement.shadowRoot.querySelector(".content slot");this.hasSlottedElements=f(t)}onContentBgClick(t){if(t.target===this.contentBackground){t.preventDefault()}}render(){var t;const e=!!this.applicationLayoutContext;const o=this.breakpoint==="sm"&&this.suppressResponsive===false&&e;const a=((t=this.applicationLayoutContext)===null||t===void 0?void 0:t.appSwitchConfig)&&this.breakpoint!=="sm"&&this.suppressResponsive===false;return i(s,{key:"ea35fc68c2e1908c7f54d34f5b2a6d40e1ff6848",class:{[`breakpoint-${this.breakpoint}`]:true},slot:"application-header"},(this.showMenu||o)&&i("ix-menu-expand-icon",{key:"23c6315c2dc9fc2bc508f756299303a9ee38d43d",onClick:()=>this.onMenuClick(),expanded:this.menuExpanded}),a&&i("ix-icon-button",{key:"4fa7d4883123f64a1a9d6305195f6f16117bf3df",onClick:()=>this.showAppSwitch(),icon:h,ghost:true,class:"app-switch"}),i("div",{key:"855a8032a50adf8029e926633b5bc35f686344fa",class:{logo:true}},i("slot",{key:"5dbf947fdeb4d5faefa7746f6f49ba40f2a4b43d",name:"logo"})),i("ix-typography",{key:"75055f9bff04a6dc5703b6126204d8ca172b586d",format:"body-lg",class:"name"},this.name),i("div",{key:"df59f3d7bdcbb43461f88564b59f0e3d913686a9",class:"content"},this.breakpoint==="sm"?i(r,null,i("ix-icon-button",{class:{["context-menu"]:true,["context-menu-visible"]:this.hasSlottedElements},"data-context-menu":true,"data-testid":"show-more",icon:n,ghost:true}),i("ix-dropdown",{"data-overflow-dropdown":true,class:"dropdown",discoverAllSubmenus:true,trigger:this.resolveContextMenuButton()},i("div",{class:"dropdown-content",onClick:t=>this.onContentBgClick(t)},i("slot",{onSlotchange:()=>this.updateIsSlottedContent()})))):i("slot",{onSlotchange:()=>this.updateIsSlottedContent()}),i("slot",{key:"257f20905871e368edcfceb9bef84a843df457ed",name:"ix-application-header-avatar"})))}get hostElement(){return a(this)}static get watchers(){return{applicationLayoutContext:["watchApplicationLayoutContext"],suppressResponsive:["watchSuppressResponsive"]}}};u.style=b;export{u as ix_application_header};
+//# sourceMappingURL=p-41def6c4.entry.js.map

package/dist/siemens-ix/{p-91ba2527.entry.js.map → p-41def6c4.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["applicationHeaderCss","ApplicationHeader","constructor","hostRef","this","showMenu","breakpoint","menuExpanded","suppressResponsive","hasSlottedElements","contentBackground","hostElement","shadowRoot","querySelector","componentWillLoad","useContextConsumer","ApplicationLayoutContext","ctx","host","applicationLayoutService","applicationLayoutContext","tryUpdateAppSwitch","menuDisposable","menuController","expandChange","on","show","modeDisposable","onChange","mode","updateIsSlottedContent","componentDidLoad","attachSiemensLogoIfLoaded","disconnectedCallback","_a","dispose","_b","watchApplicationLayoutContext","watchSuppressResponsive","isLogoSlotted","slotElement","nodes","assignedNodes","flatten","length","logoElement","document","createElement","appendChild","onMenuClick","toggle","menuToggle","emit","resolveContextMenuButton","Promise","resolve","readTask","callbackUpdateAppSwitchModal","appSwitchConfig","showAppSwitch","defaultPrevented","openAppSwitch","onContentBgClick","e","target","preventDefault","render","hasApplicationContextAvailable","showMenuByApplicationFrame","showApplicationSwitch","h","Host","key","class","slot","onClick","expanded","icon","iconApps","ghost","logo","name","format","Fragment","iconMoreMenu","discoverAllSubmenus","trigger","onSlotchange"],"sources":["src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","src/components/application-header/application-header.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@import 'mixins/break-points';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: flex-end;\n  flex-wrap: nowrap;\n  position: relative;\n  width: 100%;\n  height: calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));\n  min-height: calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));\n  padding-top: 0;\n  padding-right: calc(1rem + var(--ix-safe-area-inset-right, 0rem));\n  padding-bottom: 0.3rem;\n  padding-left: calc(0.625rem + var(--ix-safe-area-inset-left, 0rem));\n\n  color: var(--theme-app-header--color);\n  background-color: var(--theme-app-header--background);\n\n  border-bottom: var(--theme-app-header--border-width) solid\n    var(--theme-app-header--border-color);\n\n  z-index: var(--theme-z-index-fixed);\n\n  .app-switch {\n    margin-right: 1rem;\n  }\n\n  .name {\n    overflow: hidden;\n    overflow-wrap: anywhere;\n    text-overflow: ellipsis;\n    text-wrap: nowrap;\n    max-width: 50%;\n    margin-left: 1.5rem;\n    margin-right: 2.5rem;\n    margin-bottom: 0.25rem;\n    color: var(--theme-app-header--color);\n  }\n\n  .logo {\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    height: 32px;\n    overflow: hidden;\n    line-height: 0rem;\n    color: var(--theme-app-header-logo--color);\n    margin-left: 0.375rem;\n  }\n\n  .content {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .dropdown {\n    overflow: visible;\n  }\n\n  .dropdown-content {\n    padding: 1rem;\n  }\n\n  .context-menu {\n    display: none;\n  }\n\n  .context-menu.context-menu-visible {\n    display: block;\n  }\n\n  @include media-breakpoint-match('sm') {\n    .logo {\n      display: none;\n    }\n  }\n\n  ::slotted(ix-avatar) {\n    margin-left: 1rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .logo {\n    margin-left: 0.5rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { iconApps, iconMoreMenu } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n  ApplicationLayoutContext,\n  AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @slot logo - Location of the logo\n */\n@Component({\n  tag: 'ix-application-header',\n  styleUrl: 'application-header.scss',\n  shadow: true,\n})\nexport class ApplicationHeader {\n  @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n  /**\n   * Application name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Controls the visibility of the menu toggle button based on the context of the application header.\n   *\n   * When the application header is utilized outside the application frame, the menu toggle button is displayed.\n   * Conversely, if the header is within the application frame, this property is ineffective.\n   */\n  @Prop({ mutable: true }) showMenu?: boolean = false;\n\n  /**\n   * Event emitted when the menu toggle button is clicked\n   */\n  @Event() menuToggle!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the app switch button is clicked\n   *\n   * @since 3.0.0\n   */\n  @Event() openAppSwitch!: EventEmitter<void>;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() menuExpanded = false;\n  @State() suppressResponsive = false;\n\n  @State() hasSlottedElements = false;\n\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n  private callbackUpdateAppSwitchModal?: (\n    config: AppSwitchConfiguration\n  ) => void;\n\n  @State() applicationLayoutContext?: ContextType<\n    typeof ApplicationLayoutContext\n  >;\n\n  get contentBackground() {\n    return this.hostElement.shadowRoot!.querySelector('.dropdown-content');\n  }\n\n  componentWillLoad() {\n    useContextConsumer(\n      this.hostElement,\n      ApplicationLayoutContext,\n      (ctx) => {\n        if (ctx?.host === 'map-navigation') {\n          this.suppressResponsive = true;\n          this.breakpoint = 'md';\n          return;\n        }\n\n        this.breakpoint = applicationLayoutService.breakpoint;\n        this.applicationLayoutContext = ctx;\n\n        this.tryUpdateAppSwitch();\n      },\n      true\n    );\n\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      if (this.suppressResponsive) {\n        return;\n      }\n\n      this.breakpoint = mode;\n    });\n\n    this.updateIsSlottedContent();\n  }\n\n  componentDidLoad() {\n    this.attachSiemensLogoIfLoaded();\n  }\n\n  disconnectedCallback() {\n    this.menuDisposable?.dispose();\n    this.modeDisposable?.dispose();\n  }\n\n  @Watch('applicationLayoutContext')\n  watchApplicationLayoutContext() {\n    if (this.applicationLayoutContext) {\n      this.showMenu = false;\n    }\n  }\n  @Watch('suppressResponsive')\n  watchSuppressResponsive() {\n    this.breakpoint = 'md';\n  }\n\n  private isLogoSlotted() {\n    const slotElement = this.hostElement.shadowRoot!.querySelector(\n      'slot[name=\"logo\"]'\n    ) as HTMLSlotElement;\n    const nodes = slotElement.assignedNodes({\n      flatten: true,\n    });\n\n    return nodes.length !== 0;\n  }\n\n  private attachSiemensLogoIfLoaded() {\n    const logoElement = document.createElement('ix-siemens-logo');\n    if (!this.isLogoSlotted()) {\n      this.hostElement\n        .shadowRoot!.querySelector('.logo')\n        ?.appendChild(logoElement);\n    }\n  }\n\n  private async onMenuClick() {\n    if (this.applicationLayoutContext) {\n      menuController.toggle();\n    } else {\n      this.menuExpanded = !this.menuExpanded;\n    }\n\n    this.menuToggle.emit(this.menuExpanded);\n  }\n\n  private resolveContextMenuButton() {\n    return new Promise<HTMLElement>((resolve) =>\n      readTask(() =>\n        resolve(\n          this.hostElement.shadowRoot!.querySelector(\n            '[data-context-menu]'\n          ) as HTMLElement\n        )\n      )\n    );\n  }\n\n  private tryUpdateAppSwitch() {\n    if (\n      !this.callbackUpdateAppSwitchModal ||\n      !this.applicationLayoutContext?.appSwitchConfig\n    ) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private async showAppSwitch() {\n    const { defaultPrevented } = this.openAppSwitch.emit();\n\n    if (defaultPrevented) {\n      return;\n    }\n\n    if (!this.applicationLayoutContext?.appSwitchConfig) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal = await showAppSwitch(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private updateIsSlottedContent() {\n    const slotElement =\n      this.hostElement.shadowRoot!.querySelector('.content slot');\n\n    this.hasSlottedElements = hasSlottedElements(slotElement);\n  }\n\n  private onContentBgClick(e: MouseEvent) {\n    if (e.target === this.contentBackground) {\n      e.preventDefault();\n    }\n  }\n\n  render() {\n    const hasApplicationContextAvailable = !!this.applicationLayoutContext;\n\n    const showMenuByApplicationFrame =\n      this.breakpoint === 'sm' &&\n      this.suppressResponsive === false &&\n      hasApplicationContextAvailable;\n\n    const showApplicationSwitch =\n      this.applicationLayoutContext?.appSwitchConfig &&\n      this.breakpoint !== 'sm' &&\n      this.suppressResponsive === false;\n\n    return (\n      <Host\n        class={{\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n        slot=\"application-header\"\n      >\n        {(this.showMenu || showMenuByApplicationFrame) && (\n          <ix-menu-expand-icon\n            onClick={() => this.onMenuClick()}\n            expanded={this.menuExpanded}\n          ></ix-menu-expand-icon>\n        )}\n        {showApplicationSwitch && (\n          <ix-icon-button\n            onClick={() => this.showAppSwitch()}\n            icon={iconApps}\n            ghost\n            class=\"app-switch\"\n          ></ix-icon-button>\n        )}\n        <div class={{ logo: true }}>\n          <slot name=\"logo\"></slot>\n        </div>\n        <ix-typography format=\"body-lg\" class=\"name\">\n          {this.name}\n        </ix-typography>\n        <div class=\"content\">\n          {this.breakpoint === 'sm' ? (\n            <Fragment>\n              <ix-icon-button\n                class={{\n                  ['context-menu']: true,\n                  ['context-menu-visible']: this.hasSlottedElements,\n                }}\n                data-context-menu\n                data-testid=\"show-more\"\n                icon={iconMoreMenu}\n                ghost\n              ></ix-icon-button>\n              <ix-dropdown\n                data-overflow-dropdown\n                class=\"dropdown\"\n                discoverAllSubmenus\n                trigger={this.resolveContextMenuButton()}\n              >\n                <div\n                  class=\"dropdown-content\"\n                  onClick={(e) => this.onContentBgClick(e)}\n                >\n                  <slot\n                    onSlotchange={() => this.updateIsSlottedContent()}\n                  ></slot>\n                </div>\n              </ix-dropdown>\n            </Fragment>\n          ) : (\n            <slot onSlotchange={() => this.updateIsSlottedContent()}></slot>\n          )}\n          <slot name=\"ix-application-header-avatar\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["applicationHeaderCss","ApplicationHeader","constructor","hostRef","this","showMenu","breakpoint","menuExpanded","suppressResponsive","hasSlottedElements","contentBackground","hostElement","shadowRoot","querySelector","componentWillLoad","useContextConsumer","ApplicationLayoutContext","ctx","host","applicationLayoutService","applicationLayoutContext","tryUpdateAppSwitch","menuDisposable","menuController","expandChange","on","show","modeDisposable","onChange","mode","updateIsSlottedContent","componentDidLoad","attachSiemensLogoIfLoaded","disconnectedCallback","_a","dispose","_b","watchApplicationLayoutContext","watchSuppressResponsive","isLogoSlotted","slotElement","nodes","assignedNodes","flatten","length","logoElement","document","createElement","appendChild","onMenuClick","toggle","menuToggle","emit","resolveContextMenuButton","Promise","resolve","readTask","callbackUpdateAppSwitchModal","appSwitchConfig","showAppSwitch","defaultPrevented","openAppSwitch","onContentBgClick","e","target","preventDefault","render","hasApplicationContextAvailable","showMenuByApplicationFrame","showApplicationSwitch","h","Host","key","class","slot","onClick","expanded","icon","iconApps","ghost","logo","name","format","Fragment","iconMoreMenu","discoverAllSubmenus","trigger","onSlotchange"],"sources":["src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","src/components/application-header/application-header.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@import 'mixins/break-points';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: flex-end;\n  flex-wrap: nowrap;\n  position: relative;\n  width: 100%;\n  height: calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));\n  min-height: calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));\n  padding-top: 0;\n  padding-right: calc(1rem + var(--ix-safe-area-inset-right, 0rem));\n  padding-bottom: 0.3rem;\n  padding-left: calc(0.625rem + var(--ix-safe-area-inset-left, 0rem));\n\n  color: var(--theme-app-header--color);\n  background-color: var(--theme-app-header--background);\n\n  border-bottom: var(--theme-app-header--border-width) solid\n    var(--theme-app-header--border-color);\n\n  z-index: var(--theme-z-index-fixed);\n\n  .app-switch {\n    margin-right: 1rem;\n  }\n\n  .name {\n    overflow: hidden;\n    overflow-wrap: anywhere;\n    text-overflow: ellipsis;\n    text-wrap: nowrap;\n    max-width: 50%;\n    margin-left: 1.5rem;\n    margin-right: 2.5rem;\n    margin-bottom: 0.25rem;\n    color: var(--theme-app-header--color);\n  }\n\n  .logo {\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    height: 32px;\n    overflow: hidden;\n    line-height: 0rem;\n    color: var(--theme-app-header-logo--color);\n    margin-left: 0.375rem;\n  }\n\n  .content {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .dropdown {\n    overflow: visible;\n  }\n\n  .dropdown-content {\n    padding: 1rem;\n  }\n\n  .context-menu {\n    display: none;\n  }\n\n  .context-menu.context-menu-visible {\n    display: block;\n  }\n\n  @include media-breakpoint-match('sm') {\n    .logo {\n      display: none;\n    }\n  }\n\n  ::slotted(ix-avatar) {\n    margin-left: 1rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .logo {\n    margin-left: 0.5rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { iconApps, iconMoreMenu } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n  ApplicationLayoutContext,\n  AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @slot logo - Location of the logo\n */\n@Component({\n  tag: 'ix-application-header',\n  styleUrl: 'application-header.scss',\n  shadow: true,\n})\nexport class ApplicationHeader {\n  @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n  /**\n   * Application name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Controls the visibility of the menu toggle button based on the context of the application header.\n   *\n   * When the application header is utilized outside the application frame, the menu toggle button is displayed.\n   * Conversely, if the header is within the application frame, this property is ineffective.\n   */\n  @Prop({ mutable: true }) showMenu?: boolean = false;\n\n  /**\n   * Event emitted when the menu toggle button is clicked\n   */\n  @Event() menuToggle!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the app switch button is clicked\n   *\n   * @since 3.0.0\n   */\n  @Event() openAppSwitch!: EventEmitter<void>;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() menuExpanded = false;\n  @State() suppressResponsive = false;\n\n  @State() hasSlottedElements = false;\n\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n  private callbackUpdateAppSwitchModal?: (\n    config: AppSwitchConfiguration\n  ) => void;\n\n  @State() applicationLayoutContext?: ContextType<\n    typeof ApplicationLayoutContext\n  >;\n\n  get contentBackground() {\n    return this.hostElement.shadowRoot!.querySelector('.dropdown-content');\n  }\n\n  componentWillLoad() {\n    useContextConsumer(\n      this.hostElement,\n      ApplicationLayoutContext,\n      (ctx) => {\n        if (ctx?.host === 'map-navigation') {\n          this.suppressResponsive = true;\n          this.breakpoint = 'md';\n          return;\n        }\n\n        this.breakpoint = applicationLayoutService.breakpoint;\n        this.applicationLayoutContext = ctx;\n\n        this.tryUpdateAppSwitch();\n      },\n      true\n    );\n\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      if (this.suppressResponsive) {\n        return;\n      }\n\n      this.breakpoint = mode;\n    });\n\n    this.updateIsSlottedContent();\n  }\n\n  componentDidLoad() {\n    this.attachSiemensLogoIfLoaded();\n  }\n\n  disconnectedCallback() {\n    this.menuDisposable?.dispose();\n    this.modeDisposable?.dispose();\n  }\n\n  @Watch('applicationLayoutContext')\n  watchApplicationLayoutContext() {\n    if (this.applicationLayoutContext) {\n      this.showMenu = false;\n    }\n  }\n  @Watch('suppressResponsive')\n  watchSuppressResponsive() {\n    this.breakpoint = 'md';\n  }\n\n  private isLogoSlotted() {\n    const slotElement = this.hostElement.shadowRoot!.querySelector(\n      'slot[name=\"logo\"]'\n    ) as HTMLSlotElement;\n    const nodes = slotElement.assignedNodes({\n      flatten: true,\n    });\n\n    return nodes.length !== 0;\n  }\n\n  private attachSiemensLogoIfLoaded() {\n    const logoElement = document.createElement('ix-siemens-logo');\n    if (!this.isLogoSlotted()) {\n      this.hostElement\n        .shadowRoot!.querySelector('.logo')\n        ?.appendChild(logoElement);\n    }\n  }\n\n  private async onMenuClick() {\n    if (this.applicationLayoutContext) {\n      menuController.toggle();\n    } else {\n      this.menuExpanded = !this.menuExpanded;\n    }\n\n    this.menuToggle.emit(this.menuExpanded);\n  }\n\n  private resolveContextMenuButton() {\n    return new Promise<HTMLElement>((resolve) =>\n      readTask(() =>\n        resolve(\n          this.hostElement.shadowRoot!.querySelector(\n            '[data-context-menu]'\n          ) as HTMLElement\n        )\n      )\n    );\n  }\n\n  private tryUpdateAppSwitch() {\n    if (\n      !this.callbackUpdateAppSwitchModal ||\n      !this.applicationLayoutContext?.appSwitchConfig\n    ) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private async showAppSwitch() {\n    const { defaultPrevented } = this.openAppSwitch.emit();\n\n    if (defaultPrevented) {\n      return;\n    }\n\n    if (!this.applicationLayoutContext?.appSwitchConfig) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal = await showAppSwitch(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private updateIsSlottedContent() {\n    const slotElement =\n      this.hostElement.shadowRoot!.querySelector('.content slot');\n\n    this.hasSlottedElements = hasSlottedElements(slotElement);\n  }\n\n  private onContentBgClick(e: MouseEvent) {\n    if (e.target === this.contentBackground) {\n      e.preventDefault();\n    }\n  }\n\n  render() {\n    const hasApplicationContextAvailable = !!this.applicationLayoutContext;\n\n    const showMenuByApplicationFrame =\n      this.breakpoint === 'sm' &&\n      this.suppressResponsive === false &&\n      hasApplicationContextAvailable;\n\n    const showApplicationSwitch =\n      this.applicationLayoutContext?.appSwitchConfig &&\n      this.breakpoint !== 'sm' &&\n      this.suppressResponsive === false;\n\n    return (\n      <Host\n        class={{\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n        slot=\"application-header\"\n      >\n        {(this.showMenu || showMenuByApplicationFrame) && (\n          <ix-menu-expand-icon\n            onClick={() => this.onMenuClick()}\n            expanded={this.menuExpanded}\n          ></ix-menu-expand-icon>\n        )}\n        {showApplicationSwitch && (\n          <ix-icon-button\n            onClick={() => this.showAppSwitch()}\n            icon={iconApps}\n            ghost\n            class=\"app-switch\"\n          ></ix-icon-button>\n        )}\n        <div class={{ logo: true }}>\n          <slot name=\"logo\"></slot>\n        </div>\n        <ix-typography format=\"body-lg\" class=\"name\">\n          {this.name}\n        </ix-typography>\n        <div class=\"content\">\n          {this.breakpoint === 'sm' ? (\n            <Fragment>\n              <ix-icon-button\n                class={{\n                  ['context-menu']: true,\n                  ['context-menu-visible']: this.hasSlottedElements,\n                }}\n                data-context-menu\n                data-testid=\"show-more\"\n                icon={iconMoreMenu}\n                ghost\n              ></ix-icon-button>\n              <ix-dropdown\n                data-overflow-dropdown\n                class=\"dropdown\"\n                discoverAllSubmenus\n                trigger={this.resolveContextMenuButton()}\n              >\n                <div\n                  class=\"dropdown-content\"\n                  onClick={(e) => this.onContentBgClick(e)}\n                >\n                  <slot\n                    onSlotchange={() => this.updateIsSlottedContent()}\n                  ></slot>\n                </div>\n              </ix-dropdown>\n            </Fragment>\n          ) : (\n            <slot onSlotchange={() => this.updateIsSlottedContent()}></slot>\n          )}\n          <slot name=\"ix-application-header-avatar\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/p-41f019ce.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as t,h as e,H as n,g as r}from"./p-DUcGWByh.js";import{l as i}from"./p-BSqRUSbt.js";import{m as a}from"./p-bcj7UEIC.js";const c=':host{display:inline-block;position:relative;height:2rem;max-height:2rem;margin-left:0.25rem}: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(.inactive){pointer-events:none}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;vertical-align:top;height:2rem;max-height:2rem;cursor:pointer}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary:hover{background-color:var(--theme-chip-primary--background--hover)}.container.primary:active{background-color:var(--theme-chip-primary--background--active)}.container.primary:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.primary.outline:hover{background-color:var(--theme-chip-primary-outline--background--hover)}.container.primary.outline:active{background-color:var(--theme-chip-primary-outline--background--active)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:hover::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.alarm.active::after,.container.alarm:active::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}.container.alarm:not(.outline).active::after,.container.alarm:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.alarm.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-alarm)}.container.alarm.outline:hover::after{display:none}.container.alarm.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.alarm.outline.active::after,.container.alarm.outline:active::after{display:none}.container.alarm.outline.active,.container.alarm.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.alarm:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:hover::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.critical.active::after,.container.critical:active::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}.container.critical:not(.outline).active::after,.container.critical:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.critical.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-critical)}.container.critical.outline:hover::after{display:none}.container.critical.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.critical.outline.active::after,.container.critical.outline:active::after{display:none}.container.critical.outline.active,.container.critical.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.critical:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:hover::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.warning.active::after,.container.warning:active::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}.container.warning:not(.outline).active::after,.container.warning:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.warning.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-warning)}.container.warning.outline:hover::after{display:none}.container.warning.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.warning.outline.active::after,.container.warning.outline:active::after{display:none}.container.warning.outline.active,.container.warning.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.warning:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.info{color:var(--theme-color-info--contrast)}.container.info:hover::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.info.active::after,.container.info:active::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}.container.info:not(.outline).active::after,.container.info:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.info.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-info)}.container.info.outline:hover::after{display:none}.container.info.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.info.outline.active::after,.container.info.outline:active::after{display:none}.container.info.outline.active,.container.info.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.info:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:hover::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.neutral.active::after,.container.neutral:active::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}.container.neutral:not(.outline).active::after,.container.neutral:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.neutral.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-neutral)}.container.neutral.outline:hover::after{display:none}.container.neutral.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.neutral.outline.active::after,.container.neutral.outline:active::after{display:none}.container.neutral.outline.active,.container.neutral.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.neutral:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.success{color:var(--theme-color-success--contrast)}.container.success:hover::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.success.active::after,.container.success:active::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}.container.success:not(.outline).active::after,.container.success:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.success.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-success)}.container.success.outline:hover::after{display:none}.container.success.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.success.outline.active::after,.container.success.outline:active::after{display:none}.container.success.outline.active,.container.success.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.success:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}';const l=class{constructor(e){o(this,e);this.closeChip=t(this,"closeChip",7);this.variant="primary";this.active=true;this.closable=false;this.outline=false;this.tooltipText=false;this.centerContent=false;this.containerElementRef=a()}getCloseButton(){return e("div",{class:"close-button-container"},e("ix-icon-button",{type:"button",variant:"secondary",icon:i,class:"close-button",oval:true,size:"16",style:this.variant==="custom"?{color:this.chipColor}:{},ghost:true,onClick:o=>{this.closeChip.emit(o);o.stopPropagation()}}))}getTooltip(){var o;if(!this.tooltipText&&!this.hostElement.hasAttribute("tooltip-text")){return null}const t=typeof this.tooltipText==="string"&&this.tooltipText.trim()?this.tooltipText:(o=this.hostElement.textContent)===null||o===void 0?void 0:o.trim();return e("ix-tooltip",{for:this.containerElementRef.waitForCurrent()},t)}render(){const o=this.active===false;let t={};if(this.variant==="custom"){t={color:this.chipColor,[this.outline?"borderColor":"backgroundColor"]:this.background}}return e(n,{key:"e9bfceb20d9b6b7642a529fdc9721869e7a25a2b",tabIndex:"-1",class:{inactive:o},style:this.variant==="custom"?{"--ix-icon-button-color":this.chipColor}:{}},e("div",{key:"9e76be46aa4d054f2f6c5328ef4896a06d366a4e",ref:this.containerElementRef,style:Object.assign({},t),class:{container:true,outline:this.outline,inactive:o,alarm:this.variant==="alarm",critical:this.variant==="critical",info:this.variant==="info",neutral:this.variant==="neutral",primary:this.variant==="primary",success:this.variant==="success",warning:this.variant==="warning",custom:this.variant==="custom",closable:this.closable,icon:!!this.icon,centerContent:this.centerContent}},e("div",{key:"7e0f1aa32e1f2f27e992771e3e202dcd8e79ee38",class:"content-wrapper"},this.icon&&e("ix-icon",{key:"88a6342667bdc0973372818d2e54e13607c4b0e7",class:{"with-icon":true},name:this.icon,size:"24",style:this.variant==="custom"?{color:this.outline?this.background:this.chipColor}:undefined}),e("span",{key:"18d2a134c4f45425d0ba3ebbb2ee40e8219f53e9",class:"slot-container"},e("slot",{key:"689548052a1972046dbc9b0847c7323ade871644"}))),o===false&&this.closable?this.getCloseButton():null),this.getTooltip())}get hostElement(){return r(this)}};l.style=c;export{l as ix_chip};
+//# sourceMappingURL=p-41f019ce.entry.js.map