@siemens/ix 0.0.0-pr-1974-20250624072317 → 0.0.0-pr-1974-20250627114851

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

@@ -0,0 +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

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

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,H as r,a as i}from"./p-DJsXFBNm.js";import{N as s,f as d}from"./p-DLTnniMb.js";const a=":host{--ix-dropdown-item-checked-color:var(--theme-color-primary);display:flex;flex-direction:row;position:relative;height:2.5rem;width:auto;overflow:hidden;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .dropdown-item{all:unset;display:flex;flex-direction:row;align-items:center;position:relative;height:calc(100% - 2px);width:calc(100% - 0.5rem - 1.5rem);padding:0 0.5rem;padding-right:1.5rem;border:0.0625rem solid transparent;white-space:nowrap}:host .dropdown-item.no-checked-field{width:calc(100% - 1rem - 1.5rem);padding:0 1rem;padding-right:1.5rem}:host .dropdown-item:focus-visible{border-color:var(--theme-color-focus-bdr)}:host .dropdown-item-checked{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:1rem;min-width:1rem;margin-right:0.5rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.5rem;color:var(--theme-color-std-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:pre}:host .submenu-icon{margin-left:auto}:host(.icon-only) .dropdown-item-icon{margin-right:0px}:host(.icon-only) .dropdown-item-checked{display:none}:host(.icon-only) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(:not(.disabled):not(:disabled).hover),:host(:not(.disabled):not(:disabled):hover){background-color:var(--theme-ghost--background--hover)}:host(:not(.disabled):not(:disabled).active),:host(:not(.disabled):not(:disabled):active){background-color:var(--theme-ghost--background--active)}:host(.disabled){pointer-events:none;color:var(--theme-color-weak-text) !important}:host(.disabled) .dropdown-item-icon{color:var(--theme-color-weak-text) !important}";const n=class{constructor(t){e(this,t);this.itemClick=o(this,"itemClick",7);this.hover=false;this.disabled=false;this.checked=false;this.isSubMenu=false;this.suppressChecked=false}async emitItemClick(){this.itemClick.emit(this.hostElement)}async getDropdownItemElement(){return this.hostElement}isIconOnly(){return this.label===undefined&&this.hostElement.innerText===""&&this.icon!==undefined}render(){return t(r,{key:"95905e08054762d328dd53c72ed418da09e4df87",class:{hover:this.hover,"icon-only":this.isIconOnly(),disabled:this.disabled,submenu:this.isSubMenu},role:"listitem"},t("button",{key:"26a2572a6ac9924b84a3b6b25b5c9cd93f80c503",type:"button",tabIndex:0,class:{"dropdown-item":true,"no-checked-field":this.suppressChecked},onClick:()=>this.emitItemClick()},!this.suppressChecked?t("div",{class:"dropdown-item-checked"},this.checked?t("ix-icon",{class:"checkmark",name:s,size:"16"}):null):null,this.icon?t("ix-icon",{class:"dropdown-item-icon",name:this.icon}):null,t("div",{key:"6e31ff133320a795040ef9b4aaf6cb33ce0f27a1",class:"dropdown-item-text"},this.label,t("slot",{key:"7dc0f39923346b6eeb4887dcd0491be79926ab2d"})),this.isSubMenu?t("ix-icon",{name:d,class:"submenu-icon"}):null))}get hostElement(){return i(this)}};n.style=a;export{n as ix_dropdown_item};
+//# sourceMappingURL=p-ec7cd008.entry.js.map

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

@@ -0,0 +1,2 @@
+import{h as r,r as e,F as t,H as s,a as i}from"./p-DJsXFBNm.js";import{T as o,c as a,a as n,b as c,i as l}from"./p-DLTnniMb.js";function h({value:e}){return r("div",{class:"linear-progress-container"},r("div",{class:"progress",role:"progressbar","aria-valuenow":e,"aria-valuemin":0,"aria-valuemax":100},r("div",{class:{"progress-bar":true},style:{width:`${e}%`},"data-value":e})))}function d(r){switch(r){case"xs":return 16;case"sm":return 24;case"md":return 32;case"lg":return 48;case"xl":return 64;default:return 32}}const p=(e,t)=>{const{value:s,size:i}=e;const o=d(i);const a=o/2;const n=2*Math.PI*a;const c=Math.round(n*((100-s)/100));const l=i==="lg"||i==="xl";return r("div",{class:"circular-progress-container"},r("svg",{width:o,height:o,viewBox:`-${o*.125} -${o*.125} ${o*1.25} ${o*1.25}`,version:"1.1",xmlns:"http://www.w3.org/2000/svg",style:{transform:"rotate(-90deg)"}},r("circle",{r:a,cx:a,cy:a,fill:"transparent",stroke:"var(--theme-color-component-4)","stroke-width":`3px`}),c>0&&r("circle",{r:a,cx:a,cy:a,stroke:"var(--ix-progress-indicator-color)","stroke-width":"3px","stroke-linecap":"round","stroke-dashoffset":`${c}px`,fill:"transparent","stroke-dasharray":`${n}px`}),r("foreignObject",{x:`0px`,y:`0px`,width:`${o}px`,height:`${o}px`,style:{transform:`rotate(90deg) translate(0px, -${o}px)`}},l&&r("div",{class:"slotted-container slotted-container-inside"},t))),!l&&r("div",{class:"slotted-container"},t))};const g=":host{display:block;position:relative;width:24rem;height:-moz-fit-content;height:fit-content}:host .progress-container{display:flex;align-items:center;gap:0.5rem;flex-wrap:nowrap}:host .label{margin:0.25rem 0px}:host .helper-text{display:flex;align-items:flex-start;margin:0.25rem 0px;gap:0.25rem}:host .helper-text ix-icon{margin:0.125rem}:host .helper-text.success ix-icon{color:var(--theme-color-success)}:host .helper-text.error{color:var(--theme-color-alarm-text)}:host .helper-text.error ix-icon{color:var(--theme-color-alarm)}:host .helper-text.info ix-icon{color:var(--theme-color-info)}:host .helper-text.warning ix-icon{color:var(--theme-color-warning)}:host .helper-text.paused ix-icon{color:var(--theme-color-neutral)}:host .helper-text.text-left{justify-content:flex-start}:host .helper-text.text-right{justify-content:flex-end}:host .helper-text.text-center{justify-content:center}:host .progress-indicator{--ix-progress-indicator-color:var(--theme-color-success);height:100%}:host .progress-indicator.xs{--ix-progress-indicator-height:0.125rem}:host .progress-indicator.sm{--ix-progress-indicator-height:0.25rem}:host .progress-indicator.md{--ix-progress-indicator-height:0.5rem}:host .progress-indicator.lg{--ix-progress-indicator-height:1rem}:host .progress-indicator.xl{--ix-progress-indicator-height:1.5rem}:host .progress-indicator.success{--ix-progress-indicator-color:var(--theme-color-success)}:host .progress-indicator.error{--ix-progress-indicator-color:var(--theme-color-alarm)}:host .progress-indicator.info{--ix-progress-indicator-color:var(--theme-color-info)}:host .progress-indicator.warning{--ix-progress-indicator-color:var(--theme-color-warning)}:host .progress-indicator.paused{--ix-progress-indicator-color:var(--theme-color-neutral)}:host(.linear) .progress-indicator.xs{--ix-progress-indicator-height:0.125rem}:host(.linear) .progress-indicator.sm{--ix-progress-indicator-height:0.25rem}:host(.linear) .progress-indicator.md{--ix-progress-indicator-height:0.5rem}:host(.linear) .progress-indicator.lg{--ix-progress-indicator-height:1rem}:host(.linear) .progress-indicator.xl{--ix-progress-indicator-height:1.5rem}:host(.linear) .linear-progress-container{width:100%;height:var(--ix-progress-indicator-height);background-color:var(--theme-color-component-4);border-radius:2px;overflow:hidden}:host(.linear) .progress{width:100%;height:100%;position:relative}:host(.linear) .progress-bar{height:100%;background-color:var(--ix-progress-indicator-color);transition:width 0.3s ease}:host(.linear) .linear-slot{min-width:2.25rem}:host(.circular) .circular-progress-container{display:flex;align-items:center;width:100%;gap:0.25rem}:host(.circular) .slotted-container{width:100%;height:100%}:host(.circular) .slotted-container.slotted-container-inside{display:flex;align-items:center;justify-content:center;width:100%;height:100%}";const x=class{constructor(r){e(this,r);this.type="linear";this.size="md";this.value=0;this.min=0;this.max=100;this.status="default";this.textAlignment="left";this.showTextAsTooltip=false}getHelperText(){let e=null;switch(this.status){case"error":e=l;break;case"info":e=c;break;case"warning":e=n;break;case"success":e=a;break;case"paused":e=o;break;default:e=null}if(!this.helperText){return r("slot",{name:"helper-text"})}return r("div",{class:{"helper-text":true,[this.status]:true,"text-left":this.textAlignment==="left","text-center":this.textAlignment==="center","text-right":this.textAlignment==="right"}},e&&r("ix-icon",{name:e,size:"16"}),r("div",{class:"text"},this.helperText),r("slot",{name:"helper-text"}))}render(){const e=(this.value-this.min)/(this.max-this.min)*100;const i=Math.max(0,Math.min(e,100));return r(s,{key:"cc4c823745da737d65f73c5b5525a58c634ded43",class:{linear:this.type==="linear",circular:this.type==="circular"},tabIndex:-1},r("div",{key:"aa5c1b618b24bccd01611fcd2cb99cf9d496e94b",class:{"progress-indicator":true,[this.size]:true,[this.status]:true}},this.label&&r("ix-typography",{key:"dd49d159c46f555a5e3385c361604d500477b9ba",format:"label",textColor:this.status==="error"?"alarm":"soft",class:"label"},this.label),r("div",{key:"67f62d530de5dcc02f274aab3ddde419d56d383c",class:"progress-container"},this.type==="linear"?r(t,null,r(h,{value:i}),r("div",{class:"linear-slot"},r("slot",null))):r(p,{value:i,size:this.size},r("slot",null))),this.showTextAsTooltip===true&&this.helperText?r("ix-tooltip",{for:this.hostElement,showDelay:500,placement:"bottom"},this.getHelperText()):this.getHelperText()))}get hostElement(){return i(this)}};x.style=g;export{x as ix_progress_indicator};
+//# sourceMappingURL=p-ecd576f8.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["LinearBar","value","h","class","role","style","width","getCircularSize","size","CircularProgress","props","children","sizeInPixel","radius","circumference","Math","PI","percentage","round","slotInsideCircular","height","viewBox","version","xmlns","transform","r","cx","cy","fill","stroke","x","y","progressIndicatorCss","ProgressIndicator","constructor","hostRef","this","type","min","max","status","textAlignment","showTextAsTooltip","getHelperText","icon","iconError","iconInfo","iconWarning","iconSuccess","iconCirclePause","helperText","name","render","normalizedValue","clampedValue","Host","key","linear","circular","tabIndex","label","format","textColor","Fragment","for","hostElement","showDelay","placement"],"sources":["src/components/progress-indicator/linear.tsx","src/components/progress-indicator/circular.tsx","src/components/progress-indicator/progress-indicator.scss?tag=ix-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 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 { h } from '@stencil/core';\n\nexport function LinearBar({\n  value,\n}: Readonly<{\n  value: number;\n}>) {\n  return (\n    <div class=\"linear-progress-container\">\n      <div\n        class=\"progress\"\n        role=\"progressbar\"\n        aria-valuenow={value}\n        aria-valuemin={0}\n        aria-valuemax={100}\n      >\n        <div\n          class={{\n            'progress-bar': true,\n          }}\n          style={{ width: `${value}%` }}\n          data-value={value}\n        ></div>\n      </div>\n    </div>\n  );\n}\n","/*\n * SPDX-FileCopyrightText: 2025 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 { h, type FunctionalComponent } from '@stencil/core';\nimport type { ProgressIndicatorSize } from './progress-indicator.types';\n\nfunction getCircularSize(size: ProgressIndicatorSize) {\n  switch (size) {\n    case 'xs':\n      return 16;\n    case 'sm':\n      return 24;\n    case 'md':\n      return 32;\n    case 'lg':\n      return 48;\n    case 'xl':\n      return 64;\n    default:\n      return 32;\n  }\n}\n\nexport type CircularProgressProps = {\n  value: number;\n  size: ProgressIndicatorSize;\n};\n\nexport const CircularProgress: FunctionalComponent<CircularProgressProps> = (\n  props: Readonly<CircularProgressProps>,\n  children\n) => {\n  const { value, size } = props;\n  const sizeInPixel = getCircularSize(size);\n  const radius = sizeInPixel / 2;\n  const circumference = 2 * Math.PI * radius;\n  const percentage = Math.round(circumference * ((100 - value) / 100));\n\n  const slotInsideCircular = size === 'lg' || size === 'xl';\n\n  return (\n    <div class=\"circular-progress-container\">\n      <svg\n        width={sizeInPixel}\n        height={sizeInPixel}\n        viewBox={`-${sizeInPixel * 0.125} -${sizeInPixel * 0.125} ${\n          sizeInPixel * 1.25\n        } ${sizeInPixel * 1.25}`}\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{ transform: 'rotate(-90deg)' }}\n      >\n        <circle\n          r={radius}\n          cx={radius}\n          cy={radius}\n          fill=\"transparent\"\n          stroke=\"var(--theme-color-component-4)\"\n          stroke-width={`3px`}\n        ></circle>\n        {percentage > 0 && (\n          <circle\n            r={radius}\n            cx={radius}\n            cy={radius}\n            stroke=\"var(--ix-progress-indicator-color)\"\n            stroke-width=\"3px\"\n            stroke-linecap=\"round\"\n            stroke-dashoffset={`${percentage}px`}\n            fill=\"transparent\"\n            stroke-dasharray={`${circumference}px`}\n          ></circle>\n        )}\n        <foreignObject\n          x={`0px`}\n          y={`0px`}\n          width={`${sizeInPixel}px`}\n          height={`${sizeInPixel}px`}\n          style={{\n            transform: `rotate(90deg) translate(0px, -${sizeInPixel}px)`,\n          }}\n        >\n          {slotInsideCircular && (\n            <div class=\"slotted-container slotted-container-inside\">\n              {children}\n            </div>\n          )}\n        </foreignObject>\n      </svg>\n      {!slotInsideCircular && <div class=\"slotted-container\">{children}</div>}\n    </div>\n  );\n};\n","/*\n * SPDX-FileCopyrightText: 2025 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@use './linear' as linear;\n@use './circular' as circular;\n\n:host {\n  display: block;\n  position: relative;\n  width: 24rem;\n  height: fit-content;\n\n  .progress-container {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: nowrap;\n  }\n\n  .label {\n    margin: 0.25rem 0px;\n  }\n\n  .helper-text {\n    display: flex;\n    align-items: flex-start;\n    margin: 0.25rem 0px;\n    gap: 0.25rem;\n\n    ix-icon {\n      margin: 0.125rem;\n    }\n\n    &.success {\n      ix-icon {\n        color: var(--theme-color-success);\n      }\n    }\n\n    &.error {\n      color: var(--theme-color-alarm-text);\n\n      ix-icon {\n        color: var(--theme-color-alarm);\n      }\n    }\n\n    &.info {\n      ix-icon {\n        color: var(--theme-color-info);\n      }\n    }\n\n    &.warning {\n      ix-icon {\n        color: var(--theme-color-warning);\n      }\n    }\n\n    &.paused {\n      ix-icon {\n        color: var(--theme-color-neutral);\n      }\n    }\n\n    &.text-left {\n      justify-content: flex-start;\n    }\n\n    &.text-right {\n      justify-content: flex-end;\n    }\n\n    &.text-center {\n      justify-content: center;\n    }\n  }\n\n  .progress-indicator {\n    --ix-progress-indicator-color: var(--theme-color-success);\n\n    height: 100%;\n\n    &.xs {\n      --ix-progress-indicator-height: 0.125rem;\n    }\n\n    &.sm {\n      --ix-progress-indicator-height: 0.25rem;\n    }\n\n    &.md {\n      --ix-progress-indicator-height: 0.5rem;\n    }\n\n    &.lg {\n      --ix-progress-indicator-height: 1rem;\n    }\n\n    &.xl {\n      --ix-progress-indicator-height: 1.5rem;\n    }\n\n    &.success {\n      --ix-progress-indicator-color: var(--theme-color-success);\n    }\n\n    &.error {\n      --ix-progress-indicator-color: var(--theme-color-alarm);\n    }\n\n    &.info {\n      --ix-progress-indicator-color: var(--theme-color-info);\n    }\n\n    &.warning {\n      --ix-progress-indicator-color: var(--theme-color-warning);\n    }\n\n    &.paused {\n      --ix-progress-indicator-color: var(--theme-color-neutral);\n    }\n  }\n}\n\n:host(.linear) {\n  .progress-indicator {\n    &.xs {\n      --ix-progress-indicator-height: 0.125rem;\n    }\n\n    &.sm {\n      --ix-progress-indicator-height: 0.25rem;\n    }\n\n    &.md {\n      --ix-progress-indicator-height: 0.5rem;\n    }\n\n    &.lg {\n      --ix-progress-indicator-height: 1rem;\n    }\n\n    &.xl {\n      --ix-progress-indicator-height: 1.5rem;\n    }\n  }\n\n  @include linear.linear;\n\n  .linear-slot {\n    min-width: 2.25rem;\n  }\n}\n\n:host(.circular) {\n  @include circular.circular;\n}\n","/*\n * SPDX-FileCopyrightText: 2025 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 { Component, Element, Fragment, Host, Prop, h } from '@stencil/core';\nimport { LinearBar } from './linear';\nimport {\n  iconCirclePause,\n  iconError,\n  iconInfo,\n  iconSuccess,\n  iconWarning,\n} from '@siemens/ix-icons/icons';\nimport { CircularProgress } from './circular';\nimport type { ProgressIndicatorSize } from './progress-indicator.types';\n\n/**\n * @since 3.2.0\n */\n@Component({\n  tag: 'ix-progress-indicator',\n  styleUrl: 'progress-indicator.scss',\n  shadow: true,\n})\nexport class ProgressIndicator {\n  @Element() hostElement!: HTMLIxProgressIndicatorElement;\n\n  /**\n   * The type of progress indicator to use.\n   */\n  @Prop() type: 'linear' | 'circular' = 'linear';\n\n  /**\n   * The size of the progress indicator.\n   */\n  @Prop() size: ProgressIndicatorSize = 'md';\n\n  /**\n   * The value of the progress indicator.\n   */\n  @Prop() value: number = 0;\n\n  /**\n   * The minimum value of the progress indicator.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum value of the progress indicator.\n   */\n  @Prop() max: number = 100;\n\n  /**\n   * The state of the progress indicator.\n   * This is used to indicate the current state of the progress indicator.\n   */\n  @Prop() status:\n    | 'default'\n    | 'success'\n    | 'error'\n    | 'info'\n    | 'warning'\n    | 'paused' = 'default';\n\n  /**\n   * The label for the progress indicator.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The helper text for the progress indicator.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The text alignment for the helper text.\n   * Can be 'left', 'center', or 'right'.\n   */\n  @Prop() textAlignment: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Show the helper text as a tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  private getHelperText() {\n    let icon: string | null = null;\n\n    switch (this.status) {\n      case 'error':\n        icon = iconError;\n        break;\n      case 'info':\n        icon = iconInfo;\n        break;\n      case 'warning':\n        icon = iconWarning;\n        break;\n      case 'success':\n        icon = iconSuccess;\n        break;\n      case 'paused':\n        icon = iconCirclePause;\n        break;\n      default:\n        icon = null;\n    }\n\n    if (!this.helperText) {\n      return <slot name=\"helper-text\"></slot>;\n    }\n\n    return (\n      <div\n        class={{\n          'helper-text': true,\n          [this.status]: true,\n          'text-left': this.textAlignment === 'left',\n          'text-center': this.textAlignment === 'center',\n          'text-right': this.textAlignment === 'right',\n        }}\n      >\n        {icon && <ix-icon name={icon} size=\"16\"></ix-icon>}\n        <div class=\"text\">{this.helperText}</div>\n        <slot name=\"helper-text\"></slot>\n      </div>\n    );\n  }\n\n  render() {\n    const normalizedValue =\n      ((this.value - this.min) / (this.max - this.min)) * 100;\n\n    const clampedValue = Math.max(0, Math.min(normalizedValue, 100));\n\n    return (\n      <Host\n        class={{\n          linear: this.type === 'linear',\n          circular: this.type === 'circular',\n        }}\n        tabIndex={-1}\n      >\n        <div\n          class={{\n            'progress-indicator': true,\n            [this.size]: true,\n            [this.status]: true,\n          }}\n        >\n          {this.label && (\n            <ix-typography\n              format=\"label\"\n              textColor={this.status === 'error' ? 'alarm' : 'soft'}\n              class={'label'}\n            >\n              {this.label}\n            </ix-typography>\n          )}\n\n          <div class=\"progress-container\">\n            {this.type === 'linear' ? (\n              <Fragment>\n                <LinearBar value={clampedValue}></LinearBar>\n                <div class=\"linear-slot\">\n                  <slot></slot>\n                </div>\n              </Fragment>\n            ) : (\n              <CircularProgress value={clampedValue} size={this.size}>\n                <slot></slot>\n              </CircularProgress>\n            )}\n          </div>\n          {this.showTextAsTooltip === true && this.helperText ? (\n            <ix-tooltip\n              for={this.hostElement}\n              showDelay={500}\n              placement=\"bottom\"\n            >\n              {this.getHelperText()}\n            </ix-tooltip>\n          ) : (\n            this.getHelperText()\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as r,H as s,a as o}from"./p-DJsXFBNm.js";import{c as i}from"./p-CX81WQtk.js";const h=":host{display:block;position:relative;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;min-width:2rem}: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 .steps{display:flex;height:100%}:host .steps.vertical{flex-direction:column}";const a=class{constructor(r){t(this,r);this.stepSelected=e(this,"stepSelected",7);this.vertical=false;this.clickable=false;this.selectedIndex=0}getSteps(){return Array.from(this.hostElement.querySelectorAll("ix-workflow-step"))}updateSteps(){let t=this.getSteps();t.forEach(((e,r)=>{e.vertical=this.vertical;e.clickable=this.clickable;e.selected=this.selectedIndex===r;if(t.length===1){e.position="single";return}if(r===0){e.position="first"}else if(r===t.length-1){e.position="last"}else{e.position="undefined"}}))}onStepSelectionChanged(t){const e=t.detail;const r=this.getSteps();const s=r.findIndex((t=>t===e));const o=this.stepSelected.emit(s);if(o.defaultPrevented){return}r.forEach(((t,e)=>{t.selected=e===s}))}componentWillLoad(){this.updateSteps()}componentDidLoad(){this.observer=i((t=>{for(let e of t){if(e.type==="childList"){this.updateSteps()}}}));this.observer.observe(this.hostElement,{childList:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}componentDidRender(){this.updateSteps()}render(){return r(s,{key:"f8b17414e0483043ca19ea615424edd9d1186d65"},r("div",{key:"7e5e437796034eec9fca0f49d066649314e00ed6",class:{steps:true,vertical:this.vertical}},r("slot",{key:"80c3e814489566858fdd37d254ecb04a6be50846"})))}get hostElement(){return o(this)}};a.style=h;export{a as ix_workflow_steps};
+//# sourceMappingURL=p-ee2902a5.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as t,c as a,h as e,H as r,a as o}from"./p-DJsXFBNm.js";import{g as i}from"./p-i60z1FJC.js";import{x as s}from"./p-DLTnniMb.js";const l=":host{display:block;position:relative;margin-bottom:0.5rem;margin-right:0.75rem}: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 .avatar{all:unset;box-sizing:border-box;display:flex;align-items:center;height:2.5rem;width:100%;max-height:2.5rem;padding-left:0.25rem;margin-left:0.41rem;margin-right:0.35rem;transition:var(--theme-default-time);border-radius:1.25rem}:host .avatar .avatar-name{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}:host .avatar .avatar-name .text-default-single{color:var(--theme-nav-item-primary--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):hover,:host .avatar:not(.disabled):not(:disabled).hover{background-color:var(--theme-avatar-btn--background--hover);color:var(--theme-avatar-btn--color--hover)}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):active,:host .avatar:not(.disabled):not(:disabled).active{background-color:var(--theme-avatar-btn--background--active);color:var(--theme-avatar-btn--color--active)}:host .avatar:focus-visible{outline:1px solid var(--theme-color-focus-bdr)}";const n=class{constructor(e){t(this,e);this.logoutClick=a(this,"logoutClick",7);this.i18nLogout="Logout";this.showLogoutButton=true;this.showContextMenu=false;this.avatarElementId="ix-menu-avatar-id"}onSlotChange(){const t=this.hostElement.shadowRoot.querySelector("slot");if(!t){return}const a=i(t);this.showContextMenu=a.length!==0}render(){return e(r,{key:"d39f2185d9c75395af0b72507439a8e28a20fdc7",slot:"ix-menu-avatar"},e("button",{key:"f171e34fa3361cbeb55d4730de3536918cfccb31",class:"nav-item top-item avatar no-hover",title:this.top,id:this.avatarElementId,tabIndex:0},e("ix-avatar",{key:"6c9496150170f3474bf4dd545c834ecd3dd4e215",image:this.image,initials:this.initials}),e("div",{key:"6493bd94c069d676f41984274dec57b876117ae5",class:"avatar-name"},e("span",{key:"f72261b4c8a7752fbbe93df416b0b2f8c314c61b",class:"text-default-single",title:this.top},this.top),e("span",{key:"909f8c9579d97d92f9be2b86e336f5ed8a2b3c78",class:"text-default-single",title:this.bottom},this.bottom))),e("ix-dropdown",{key:"c1a91f5f2703d85fb0fefef0ef97b17112113b55",trigger:this.hostElement,placement:"right-start",hidden:!this.showContextMenu&&!this.showLogoutButton,offset:{mainAxis:16}},e("slot",{key:"284a7ea7a3431c1b2b83fc6dd13cbb51d517a45a",onSlotchange:()=>this.onSlotChange()}),this.showLogoutButton?e("ix-menu-avatar-item",{label:this.i18nLogout,icon:s,onClick:t=>{this.logoutClick.emit(t)}}):null))}get hostElement(){return o(this)}};n.style=l;export{n as ix_menu_avatar};
+//# sourceMappingURL=p-f4415d44.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as s,a as h}from"./p-DJsXFBNm.js";import{a as o}from"./p-Ou74PMQs.js";import{A as a}from"./p-Dp15M30K.js";import{a as r}from"./p-CyFFBc_G.js";import{m as n}from"./p-D6vSVaHq.js";import{p as l,D as d,E as p,F as c,G as b}from"./p-DLTnniMb.js";import"./p-BdCnOrqW.js";const m=":host{background-color:var(--theme-color-2);display:flex;position:relative;overflow:hidden;box-sizing:border-box}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host aside{width:100%;height:100%}:host .title-text{display:flex;align-items:center;gap:var(--theme-space-1);overflow:hidden}:host .title-text .title-text-overflow{width:100%;height:100%;display:contents}:host .title-text .title-text-overflow *{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .header-gap{gap:var(--theme-space-1)}:host .top-bottom-pane{display:flex;flex-direction:column;flex-grow:1}:host .top-bottom-pane .title{display:flex;flex-direction:row;align-items:center;margin:var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2)}:host .top-bottom-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .top-bottom-pane .title-expanded{display:flex;flex-direction:row}:host .top-bottom-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane{display:flex;flex-grow:1}:host .left-right-pane .title{display:flex;flex-direction:column;align-items:center;margin:var(--theme-space-2) var(--theme-space--1) var(--theme-space-2) var(--theme-space--1)}:host .left-right-pane .title .title-text{flex-direction:row-reverse;justify-content:start;flex-direction:row}:host .left-right-pane .title .rotate{writing-mode:vertical-lr;text-orientation:mixed;transform:rotate(180deg);flex-direction:row-reverse}:host .left-right-pane .title .rotate ix-icon{transform:rotate(90deg)}:host .left-right-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane .title-expanded{display:flex;flex-direction:row}:host .left-right-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane.expanded{flex-direction:column}:host .mobile-pane{display:flex;flex-direction:column;flex-grow:1}:host .mobile-pane .title-mobile{display:flex;flex-direction:row-reverse;justify-content:space-between;margin:var(--theme-space-1) var(--theme-space-2)}:host .side-pane-content{padding:var(--theme-space-1) var(--theme-space-2);overflow:auto;height:100%;width:100%}:host(.not-visible){display:none}:host(.inline-color){background-color:var(--theme-color-1)}:host(.box-shadow){box-shadow:0 0 1rem black}:host(.nav-left-border){border-left:var(--theme-app-header--border-width) solid var(--theme-color-weak-bdr)}:host(.left-pane-border){border-right:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.right-pane-border){border-left:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.top-pane-border){border-bottom:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.bottom-pane-border){border-top:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.mobile-overlay){width:100%;position:absolute;z-index:100 !important}:host(.mobile-overlay) .side-pane-content{height:calc(100% - 2.5rem)}:host(.mobile-border-top){border-bottom:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.mobile-border-bottom){border-top:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.top-expanded){top:0}:host(.bottom-expanded){bottom:0}:host(.left-right-pane){height:100%}:host(.top-bottom-pane){width:100%}";const f=class{constructor(i){t(this,i);this.expandedChanged=e(this,"expandedChanged",7);this.variantChanged=e(this,"variantChanged",7);this.borderlessChanged=e(this,"borderlessChanged",7);this.hideOnCollapseChanged=e(this,"hideOnCollapseChanged",7);this.slotChanged=e(this,"slotChanged",7);this.variant="inline";this.hideOnCollapse=false;this.size="240px";this.borderless=false;this.expanded=false;this.composition="top";this.ignoreLayoutSettings=false;this.isMobile=false;this.expandIcon="";this.showContent=false;this.minimizeIcon="";this.floating=false;this.parentWidthPx=0;this.parentHeightPx=0;this.animations=new Map;this.animationCounter=0}get currentSlot(){return this.hostElement.getAttribute("slot")}get isBottomTopPane(){return this.composition==="bottom"||this.composition==="top"}get isLeftRightPane(){return this.composition==="left"||this.composition==="right"}get isMobileTop(){return this.composition==="top"||this.composition==="left"}componentWillLoad(){this.setIcons();this.floating=this.variant==="floating";if(this.expanded){this.onParentSizeChange()}this.isMobile=n("sm");r.onChange.on((()=>{this.isMobile=n("sm")}));if(this.currentSlot){this.setPosition(this.currentSlot)}this.mutationObserver=new MutationObserver((t=>{t.forEach((t=>{if(t.type==="attributes"&&t.attributeName==="slot"){const e=this.currentSlot;const i=t.oldValue;if(e!==i){this.slotChanged.emit({slot:i!==null&&i!==void 0?i:"",newSlot:e!==null&&e!==void 0?e:""});if(e){this.setPosition(e)}}}}))}));this.mutationObserver.observe(this.hostElement,{attributes:true,attributeOldValue:true});const t=this.hostElement.parentElement;this.resizeObserver=new ResizeObserver((t=>{this.parentWidthPx=t[0].borderBoxSize[0].inlineSize;this.parentHeightPx=t[0].borderBoxSize[0].blockSize}));if(t)this.resizeObserver.observe(t)}disconnectedCallback(){var t,e;(t=this.mutationObserver)===null||t===void 0?void 0:t.disconnect();(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}setPosition(t){if(f.validPositions.includes(t)){this.composition=t}}getExpandPaneSize(){let t;if(this.isBottomTopPane){if(this.size.includes("px")){const e=Math.round(this.parentHeightPx/2);const i=Number(this.size.replace("px",""));if(e&&e<i){t=`${e}px`}else{t=`${i}px`}}else{if(this.size==="50%"){t=`${Math.round(this.parentHeightPx/2)}px`}else{t=`${Math.round(this.parentHeightPx/3)}px`}}}else{if(this.size.includes("px")){const e=Math.round(this.parentWidthPx/2);const i=Number(this.size.replace("px",""));if(e&&e<i){t=`${e}px`}else{t=`${i}px`}}else{if(this.size==="50%"){t=`${Math.round(this.parentWidthPx/2)}px`}else{t=`${Math.round(this.parentWidthPx/3)}px`}}}return t}setIcons(){const{expandIcon:t,minimizeIcon:e}=this.getIconNames();this.expandIcon=t;this.minimizeIcon=e}getIconNames(){let t="";let e="";switch(this.composition){case"left":t=this.isMobile?d:b;e=this.isMobile?p:c;break;case"right":t=this.isMobile?p:c;e=this.isMobile?d:b;break;case"bottom":t=p;e=d;break;case"top":t=d;e=p;break}return{expandIcon:t,minimizeIcon:e}}getKey(){return(this.animationCounter++).toString()}animateVerticalFadeIn(t){let e=this.getKey();let i=o({targets:this.hostElement,duration:a.mediumTime,width:t,easing:"easeInOutSine",delay:0,begin:()=>{if(!this.expanded){this.showContent=false;this.animateVerticalPadding("0px")}else{this.animateVerticalPadding("8px")}},complete:()=>{if(this.expanded){this.showContent=true}this.animations.delete(e)}});this.animations.set(e,i)}animateHorizontalFadeIn(t){let e=this.getKey();let i=o({targets:this.hostElement,duration:a.mediumTime,height:t,easing:"easeInOutSine",delay:0,begin:()=>{if(!this.expanded){this.showContent=false;if(!this.isMobile)this.animateHorizontalPadding("0px")}else{if(!this.isMobile)this.animateHorizontalPadding("8px")}},complete:()=>{if(this.expanded){this.showContent=true}this.animations.delete(e)}});this.animations.set(e,i)}removePadding(){o({targets:this.hostElement.shadowRoot.querySelector("#title-div"),duration:0,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:0,delay:0})}animateHorizontalPadding(t,e=a.mediumTime){let i=this.getKey();let s=o({targets:this.hostElement.shadowRoot.querySelector("#title-div"),duration:e,paddingTop:t,paddingBottom:t,easing:"easeInOutSine",delay:0,complete:()=>{this.animations.delete(i)}});this.animations.set(i,s)}animateVerticalPadding(t,e=a.mediumTime){let i=this.getKey();let s=o({targets:this.hostElement.shadowRoot.querySelector("#title-div"),duration:e,paddingLeft:t,paddingRight:t,easing:"easeInOutSine",delay:0,complete:()=>{this.animations.delete(i)}});this.animations.set(i,s)}clearAnimations(){this.animations.forEach((t=>t.pause()));this.animations.clear();this.animationCounter=0}onMobileChange(){this.setIcons();this.hostElement.style.removeProperty("width");this.hostElement.style.removeProperty("height");this.hostElement.style.removeProperty("min-height");this.onParentSizeChange()}onPositionChange(){this.setIcons();this.hostElement.style.removeProperty("width");this.hostElement.style.removeProperty("height");this.onParentSizeChange()}onHideOnCollapseChange(t){var e;this.onParentSizeChange();this.hideOnCollapseChanged.emit({slot:(e=this.currentSlot)!==null&&e!==void 0?e:"",hideOnCollapse:t})}onVariantChange(t){var e;this.floating=t==="floating";this.variantChanged.emit({slot:(e=this.currentSlot)!==null&&e!==void 0?e:"",variant:t})}onBorderlessChange(t){var e;this.borderlessChanged.emit({slot:(e=this.currentSlot)!==null&&e!==void 0?e:"",borderless:t})}dispatchExpandedChangedEvent(){var t;const e=this.expandedChanged.emit({slot:(t=this.currentSlot)!==null&&t!==void 0?t:"",expanded:!this.expanded});if(!e.defaultPrevented){this.expanded=!this.expanded}}onParentSizeChange(){this.clearAnimations();this.removePadding();if(this.expanded){if(this.isMobile){this.hostElement.style.height="100%"}else{const t=this.getExpandPaneSize();if(this.isBottomTopPane){this.hostElement.style.height=t;this.animateHorizontalPadding("8px",0)}else{this.hostElement.style.width=t;this.animateVerticalPadding("8px",0)}}this.showContent=true}else{this.showContent=false;if(this.isMobile){this.hostElement.style.height=this.hideOnCollapse?"0":f.collapsedPaneMobile}else{if(this.isBottomTopPane){this.hostElement.style.height=this.hideOnCollapse?"0":f.collapsedPane}else{this.hostElement.style.width=this.hideOnCollapse?"0":f.collapsedPane}}}}onSizeChange(){if(this.expanded){if(this.isMobile){this.hostElement.style.minHeight=this.hideOnCollapse?"0":f.collapsedPaneMobile;this.animateHorizontalFadeIn("100%")}else{const t=this.getExpandPaneSize();if(this.isBottomTopPane){this.hostElement.style.height=this.hideOnCollapse?"0":f.collapsedPane;this.animateHorizontalFadeIn(t)}else{this.hostElement.style.width=this.hideOnCollapse?"0":f.collapsedPane;this.animateVerticalFadeIn(t)}}}else{this.showContent=false;if(this.isMobile){this.hostElement.style.height=f.collapsedPaneMobile}else{if(this.isBottomTopPane){this.animateHorizontalFadeIn(f.collapsedPane)}else{this.animateVerticalFadeIn(f.collapsedPane)}}}}render(){return i(s,{key:"6958a07de2094b215de983689d7994f989e1c4d5",class:{"inline-color":!this.floating,"mobile-overlay":this.expanded&&this.isMobile,"top-expanded":this.expanded&&this.isMobileTop&&this.isMobile,"bottom-expanded":this.expanded&&!this.isMobileTop&&this.isMobile,"top-bottom-pane":this.isBottomTopPane&&!this.isMobile,"left-right-pane":this.isLeftRightPane&&!this.isMobile,[`${this.composition}-pane-border`]:!this.borderless&&!this.isMobile&&!this.floating,"nav-left-border":!this.borderless&&!this.isMobile&&this.composition!=="right"&&this.floating,"mobile-border-top":!this.borderless&&this.isMobileTop&&this.isMobile&&!this.expanded&&!this.floating,"mobile-border-bottom":!this.borderless&&!this.isMobileTop&&this.isMobile&&!this.expanded&&!this.floating,"box-shadow":this.floating,"aria-expanded":this.expanded,"not-visible":this.hideOnCollapse&&!this.expanded}},i("aside",{key:"48a62bf16c9dd3593ba21c84aaa8333c029ec573",id:`pane-${this.composition}`,class:{"top-bottom-pane":this.isBottomTopPane&&!this.isMobile,"left-right-pane":this.isLeftRightPane&&!this.isMobile,"mobile-pane":this.isMobile,expanded:this.expanded}},i("div",{key:"599b76fbe18cd65f3754915ba6188b1161539b7f",id:"title-div",class:{title:!this.isMobile&&!this.hideOnCollapse&&!this.showContent,"title-finished":!this.isMobile&&!this.hideOnCollapse&&this.showContent,"title-expanded":!this.isMobile&&!this.hideOnCollapse&&this.expanded,"title-hide-on-collapse":!this.isMobile&&this.hideOnCollapse,"title-mobile":this.isMobile,"header-gap":!this.isMobile&&!this.hideOnCollapse}},i("ix-icon-button",{key:"f4707c78fcda268d4d138cb200e52c67e65613d1",class:"title-icon",size:"24",icon:this.expanded?this.isMobile||this.hideOnCollapse?l:this.expandIcon:this.minimizeIcon,ghost:true,onClick:()=>this.dispatchExpandedChangedEvent(),"aria-controls":`pane-${this.composition}`}),i("span",{key:"b3e0bf72e12572c04e1dd3bdf1c9937f24dad785",class:{"title-text":true,rotate:!this.expanded&&!this.isMobile&&this.isLeftRightPane}},this.icon?i("ix-icon",{size:"24",name:this.icon}):null,i("div",{key:"bea7f36346524df0cb6f01d59111df0acb720905",class:"title-text-overflow"},i("ix-typography",{key:"749d4728bf23d659cca7e5a17f84f49a301fe4c2",format:"h4"},this.heading)))),i("div",{key:"3c32d46897ab55ea7044f02d7d230da0bc24fe09",class:"side-pane-content",hidden:!this.showContent},i("slot",{key:"75c266031424482f1f633c1aaa4d20ef92a21dea"}))))}get hostElement(){return h(this)}static get watchers(){return{isMobile:["onMobileChange"],composition:["onPositionChange"],hideOnCollapse:["onHideOnCollapseChange"],variant:["onVariantChange"],borderless:["onBorderlessChange"],parentHeightPx:["onParentSizeChange"],parentWidthPx:["onParentSizeChange"],expanded:["onSizeChange"],size:["onSizeChange"]}}};f.validPositions=["top","left","bottom","right"];f.collapsedPane="40px";f.collapsedPaneMobile="48px";f.style=m;export{f as ix_pane};
+//# sourceMappingURL=p-f4ce72e4.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["paneCss","Pane","constructor","hostRef","this","variant","hideOnCollapse","size","borderless","expanded","composition","ignoreLayoutSettings","isMobile","expandIcon","showContent","minimizeIcon","floating","parentWidthPx","parentHeightPx","animations","Map","animationCounter","currentSlot","hostElement","getAttribute","isBottomTopPane","isLeftRightPane","isMobileTop","componentWillLoad","setIcons","onParentSizeChange","matchBreakpoint","applicationLayoutService","onChange","on","setPosition","mutationObserver","MutationObserver","mutations","forEach","mutation","type","attributeName","newSlot","oldSlot","oldValue","slotChanged","emit","slot","observe","attributes","attributeOldValue","parentElement","resizeObserver","ResizeObserver","entries","borderBoxSize","inlineSize","blockSize","disconnectedCallback","_a","disconnect","_b","value","validPositions","includes","getExpandPaneSize","expandPaneSize","referenceValue","Math","round","currentValue","Number","replace","getIconNames","iconDoubleChevronUp","iconDoubleChevronLeft","iconDoubleChevronDown","iconDoubleChevronRight","getKey","toString","animateVerticalFadeIn","key","animation","anime","targets","duration","Animation","mediumTime","width","easing","delay","begin","animateVerticalPadding","complete","delete","set","animateHorizontalFadeIn","height","animateHorizontalPadding","removePadding","shadowRoot","querySelector","paddingTop","paddingBottom","paddingLeft","paddingRight","clearAnimations","pause","clear","onMobileChange","style","removeProperty","onPositionChange","onHideOnCollapseChange","hideOnCollapseChanged","onVariantChange","variantChanged","onBorderlessChange","borderlessChanged","dispatchExpandedChangedEvent","event","expandedChanged","defaultPrevented","collapsedPaneMobile","collapsedPane","onSizeChange","minHeight","render","h","Host","class","id","title","icon","iconClose","ghost","onClick","rotate","name","format","heading","hidden"],"sources":["src/components/pane/pane.scss?tag=ix-pane&encapsulation=shadow","src/components/pane/pane.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n@mixin set-border($composition) {\n  @if $composition {\n    border-#{$composition}: var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr);\n  }\n}\n\n:host {\n  @include ix-component;\n  background-color: var(--theme-color-2);\n  display: flex;\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  aside {\n    width: 100%;\n    height: 100%;\n  }\n\n  .title-text {\n    display: flex;\n    align-items: center;\n    gap: var(--theme-space-1);\n    overflow: hidden;\n\n    .title-text-overflow {\n      width: 100%;\n      height: 100%;\n      display: contents;\n\n      * {\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n    }\n  }\n\n  .header-gap {\n    gap: var(--theme-space-1);\n  }\n\n  .top-bottom-pane {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    .title {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      margin: var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2);\n    }\n\n    .title-finished {\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n    }\n\n    .title-expanded {\n      display: flex;\n      flex-direction: row;\n    }\n\n    .title-hide-on-collapse {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n    }\n  }\n\n  .left-right-pane {\n    display: flex;\n    flex-grow: 1;\n\n    .title {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin: var(--theme-space-2) var(--theme-space--1)  var(--theme-space-2) var(--theme-space--1);\n\n      .title-text {\n        flex-direction: row-reverse;\n        justify-content: start;\n        flex-direction: row;\n      }\n\n      .rotate {\n        writing-mode: vertical-lr;\n        text-orientation: mixed;\n        transform: rotate(180deg);\n        flex-direction: row-reverse;\n\n        ix-icon {\n          transform: rotate(90deg);\n        }\n      }\n    }\n\n    .title-finished {\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n    }\n\n    .title-expanded {\n      display: flex;\n      flex-direction: row;\n    }\n\n    .title-hide-on-collapse {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n    }\n  }\n\n  .left-right-pane.expanded {\n    flex-direction: column;\n  }\n\n  .mobile-pane {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    .title-mobile {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      margin: var(--theme-space-1) var(--theme-space-2);\n    }\n  }\n\n  .side-pane-content {\n    padding: var(--theme-space-1) var(--theme-space-2);\n    overflow: auto;\n    height: 100%;\n    width: 100%;\n  }\n}\n\n:host(.not-visible) {\n  display: none;\n}\n\n:host(.inline-color) {\n  background-color: var(--theme-color-1);\n}\n\n:host(.box-shadow) {\n  box-shadow: 0 0 1rem black;\n}\n\n:host(.nav-left-border) {\n  border-left: var(--theme-app-header--border-width) solid var(--theme-color-weak-bdr);\n}\n\n:host(.left-pane-border) {\n  @include set-border(right);\n}\n\n:host(.right-pane-border) {\n  @include set-border(left);\n}\n\n:host(.top-pane-border) {\n  @include set-border(bottom);\n}\n\n:host(.bottom-pane-border) {\n  @include set-border(top);\n}\n\n:host(.mobile-overlay) {\n  width: 100%;\n  position: absolute;\n  z-index: 100 !important;\n\n  .side-pane-content {\n    height: calc(100% - 2.5rem);\n  }\n}\n\n:host(.mobile-border-top) {\n  @include set-border(bottom);\n}\n\n:host(.mobile-border-bottom) {\n  @include set-border(top);\n}\n\n:host(.top-expanded) {\n  top: 0;\n}\n\n:host(.bottom-expanded) {\n  bottom: 0;\n}\n\n:host(.left-right-pane) {\n  height: 100%;\n}\n\n:host(.top-bottom-pane) {\n  width: 100%;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\nimport {\n  iconClose,\n  iconDoubleChevronDown,\n  iconDoubleChevronLeft,\n  iconDoubleChevronRight,\n  iconDoubleChevronUp,\n} from '@siemens/ix-icons/icons';\nimport type {\n  BorderlessChangedEvent,\n  Composition,\n  ExpandedChangedEvent,\n  HideOnCollapseChangedEvent,\n  SlotChangedEvent,\n  VariantChangedEvent,\n} from './pane.types';\n\n@Component({\n  tag: 'ix-pane',\n  styleUrl: 'pane.scss',\n  shadow: true,\n})\nexport class Pane {\n  @Element() hostElement!: HTMLIxPaneElement;\n\n  /**\n   * Title of the side panel\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Variant of the side pane.\n   * Defaults to the variant attribute of the pane layout. If used standalone it defaults to inline.\n   */\n  @Prop() variant: 'floating' | 'inline' = 'inline';\n\n  /**\n   * Define if the pane should have a collapsed state\n   */\n  @Prop() hideOnCollapse: boolean = false;\n\n  /**\n   * The maximum size of the sidebar, when it is expanded\n   */\n  @Prop() size:\n    | '240px'\n    | '320px'\n    | '360px'\n    | '480px'\n    | '600px'\n    | '33%'\n    | '50%' = '240px';\n\n  /**\n   * Toggle the border of the pane.\n   * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.\n   */\n  @Prop() borderless: boolean = false;\n\n  /**\n   * State of the pane\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * Defines the position of the pane inside it's container.\n   * Inside a pane layout this property will automatically be set to the name of slot the pane is assigned to.\n   */\n  @Prop({ mutable: true }) composition: Composition = 'top';\n\n  /**\n   * Name of the icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * @internal\n   * Prevents overwriting of the variant and borderless property when used inside layout\n   */\n  @Prop() ignoreLayoutSettings: boolean = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true }) isMobile: boolean = false;\n\n  /**\n   * This event is triggered when the pane either expands or contracts\n   */\n  @Event() expandedChanged!: EventEmitter<ExpandedChangedEvent>;\n\n  /**\n   * This event is triggered when the variant of the pane is changed\n   */\n  @Event() variantChanged!: EventEmitter<VariantChangedEvent>;\n\n  /**\n   * This event is triggered when the variant of the pane is changed\n   */\n  @Event() borderlessChanged!: EventEmitter<BorderlessChangedEvent>;\n\n  /**\n   * @internal\n   */\n  @Event() hideOnCollapseChanged!: EventEmitter<HideOnCollapseChangedEvent>;\n\n  /**\n   * @internal\n   */\n  @Event() slotChanged!: EventEmitter<SlotChangedEvent>;\n\n  @State() private expandIcon = '';\n  @State() private showContent = false;\n  @State() private minimizeIcon = '';\n  @State() private floating = false;\n  @State() private parentWidthPx = 0;\n  @State() private parentHeightPx = 0;\n\n  private static readonly validPositions = ['top', 'left', 'bottom', 'right'];\n  private static readonly collapsedPane = '40px';\n  private static readonly collapsedPaneMobile = '48px';\n  private readonly animations: Map<string, anime.AnimeInstance> = new Map();\n  private animationCounter = 0;\n\n  private mutationObserver?: MutationObserver;\n  private resizeObserver?: ResizeObserver;\n\n  get currentSlot() {\n    return this.hostElement.getAttribute('slot');\n  }\n\n  get isBottomTopPane() {\n    return this.composition === 'bottom' || this.composition === 'top';\n  }\n\n  get isLeftRightPane() {\n    return this.composition === 'left' || this.composition === 'right';\n  }\n\n  get isMobileTop() {\n    return this.composition === 'top' || this.composition === 'left';\n  }\n\n  componentWillLoad() {\n    this.setIcons();\n\n    this.floating = this.variant === 'floating';\n\n    if (this.expanded) {\n      this.onParentSizeChange();\n    }\n\n    this.isMobile = matchBreakpoint('sm');\n    applicationLayoutService.onChange.on(() => {\n      this.isMobile = matchBreakpoint('sm');\n    });\n\n    if (this.currentSlot) {\n      this.setPosition(this.currentSlot);\n    }\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === 'attributes' &&\n          mutation.attributeName === 'slot'\n        ) {\n          const newSlot = this.currentSlot;\n          const oldSlot = mutation.oldValue;\n\n          if (newSlot !== oldSlot) {\n            this.slotChanged.emit({\n              slot: oldSlot ?? '',\n              newSlot: newSlot ?? '',\n            });\n\n            if (newSlot) {\n              this.setPosition(newSlot);\n            }\n          }\n        }\n      });\n    });\n    this.mutationObserver.observe(this.hostElement, {\n      attributes: true,\n      attributeOldValue: true,\n    });\n\n    const parentElement = this.hostElement.parentElement;\n    this.resizeObserver = new ResizeObserver((entries) => {\n      this.parentWidthPx = entries[0].borderBoxSize[0].inlineSize;\n      this.parentHeightPx = entries[0].borderBoxSize[0].blockSize;\n    });\n    if (parentElement) this.resizeObserver.observe(parentElement);\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n    this.resizeObserver?.disconnect();\n  }\n\n  private setPosition(value: string) {\n    if (Pane.validPositions.includes(value)) {\n      this.composition = value as Composition;\n    }\n  }\n\n  private getExpandPaneSize() {\n    let expandPaneSize: string;\n\n    if (this.isBottomTopPane) {\n      if (this.size.includes('px')) {\n        const referenceValue = Math.round(this.parentHeightPx / 2);\n        const currentValue = Number(this.size.replace('px', ''));\n\n        if (referenceValue && referenceValue < currentValue) {\n          expandPaneSize = `${referenceValue}px`;\n        } else {\n          expandPaneSize = `${currentValue}px`;\n        }\n      } else {\n        if (this.size === '50%') {\n          expandPaneSize = `${Math.round(this.parentHeightPx / 2)}px`;\n        } else {\n          expandPaneSize = `${Math.round(this.parentHeightPx / 3)}px`;\n        }\n      }\n    } else {\n      if (this.size.includes('px')) {\n        const referenceValue = Math.round(this.parentWidthPx / 2);\n        const currentValue = Number(this.size.replace('px', ''));\n\n        if (referenceValue && referenceValue < currentValue) {\n          expandPaneSize = `${referenceValue}px`;\n        } else {\n          expandPaneSize = `${currentValue}px`;\n        }\n      } else {\n        if (this.size === '50%') {\n          expandPaneSize = `${Math.round(this.parentWidthPx / 2)}px`;\n        } else {\n          expandPaneSize = `${Math.round(this.parentWidthPx / 3)}px`;\n        }\n      }\n    }\n\n    return expandPaneSize;\n  }\n\n  private setIcons() {\n    const { expandIcon, minimizeIcon } = this.getIconNames();\n    this.expandIcon = expandIcon;\n    this.minimizeIcon = minimizeIcon;\n  }\n\n  private getIconNames(): { expandIcon: string; minimizeIcon: string } {\n    let expandIcon = '';\n    let minimizeIcon = '';\n\n    switch (this.composition) {\n      case 'left':\n        expandIcon = this.isMobile\n          ? iconDoubleChevronUp\n          : iconDoubleChevronLeft;\n        minimizeIcon = this.isMobile\n          ? iconDoubleChevronDown\n          : iconDoubleChevronRight;\n        break;\n      case 'right':\n        expandIcon = this.isMobile\n          ? iconDoubleChevronDown\n          : iconDoubleChevronRight;\n        minimizeIcon = this.isMobile\n          ? iconDoubleChevronUp\n          : iconDoubleChevronLeft;\n        break;\n      case 'bottom':\n        expandIcon = iconDoubleChevronDown;\n        minimizeIcon = iconDoubleChevronUp;\n        break;\n      case 'top':\n        expandIcon = iconDoubleChevronUp;\n        minimizeIcon = iconDoubleChevronDown;\n        break;\n    }\n\n    return { expandIcon, minimizeIcon };\n  }\n\n  private getKey() {\n    return (this.animationCounter++).toString();\n  }\n\n  private animateVerticalFadeIn(size: string) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement,\n      duration: Animation.mediumTime,\n      width: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      begin: () => {\n        if (!this.expanded) {\n          this.showContent = false;\n          this.animateVerticalPadding('0px');\n        } else {\n          this.animateVerticalPadding('8px');\n        }\n      },\n      complete: () => {\n        if (this.expanded) {\n          this.showContent = true;\n        }\n\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private animateHorizontalFadeIn(size: string) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement,\n      duration: Animation.mediumTime,\n      height: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      begin: () => {\n        if (!this.expanded) {\n          this.showContent = false;\n          if (!this.isMobile) this.animateHorizontalPadding('0px');\n        } else {\n          if (!this.isMobile) this.animateHorizontalPadding('8px');\n        }\n      },\n      complete: () => {\n        if (this.expanded) {\n          this.showContent = true;\n        }\n\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private removePadding() {\n    anime({\n      targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n      duration: 0,\n      paddingTop: 0,\n      paddingBottom: 0,\n      paddingLeft: 0,\n      paddingRight: 0,\n      delay: 0,\n    });\n  }\n\n  private animateHorizontalPadding(\n    size: string,\n    duration = Animation.mediumTime\n  ) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n      duration: duration,\n      paddingTop: size,\n      paddingBottom: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      complete: () => {\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private animateVerticalPadding(\n    size: string,\n    duration = Animation.mediumTime\n  ) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n      duration: duration,\n      paddingLeft: size,\n      paddingRight: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      complete: () => {\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private clearAnimations() {\n    this.animations.forEach((animation) => animation.pause());\n    this.animations.clear();\n    this.animationCounter = 0;\n  }\n\n  @Watch('isMobile')\n  onMobileChange() {\n    this.setIcons();\n    this.hostElement.style.removeProperty('width');\n    this.hostElement.style.removeProperty('height');\n    this.hostElement.style.removeProperty('min-height');\n    this.onParentSizeChange();\n  }\n\n  @Watch('composition')\n  onPositionChange() {\n    this.setIcons();\n    this.hostElement.style.removeProperty('width');\n    this.hostElement.style.removeProperty('height');\n    this.onParentSizeChange();\n  }\n\n  @Watch('hideOnCollapse')\n  onHideOnCollapseChange(value: boolean) {\n    this.onParentSizeChange();\n\n    this.hideOnCollapseChanged.emit({\n      slot: this.currentSlot ?? '',\n      hideOnCollapse: value,\n    });\n  }\n\n  @Watch('variant')\n  onVariantChange(value: 'inline' | 'floating') {\n    this.floating = value === 'floating';\n\n    this.variantChanged.emit({\n      slot: this.currentSlot ?? '',\n      variant: value,\n    });\n  }\n\n  @Watch('borderless')\n  onBorderlessChange(value: boolean) {\n    this.borderlessChanged.emit({\n      slot: this.currentSlot ?? '',\n      borderless: value,\n    });\n  }\n\n  private dispatchExpandedChangedEvent() {\n    const event = this.expandedChanged.emit({\n      slot: this.currentSlot ?? '',\n      expanded: !this.expanded,\n    });\n\n    if (!event.defaultPrevented) {\n      this.expanded = !this.expanded;\n    }\n  }\n\n  @Watch('parentHeightPx')\n  @Watch('parentWidthPx')\n  onParentSizeChange() {\n    this.clearAnimations();\n    this.removePadding();\n\n    if (this.expanded) {\n      if (this.isMobile) {\n        this.hostElement.style.height = '100%';\n      } else {\n        const expandPaneSize = this.getExpandPaneSize();\n\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = expandPaneSize;\n          this.animateHorizontalPadding('8px', 0);\n        } else {\n          this.hostElement.style.width = expandPaneSize;\n          this.animateVerticalPadding('8px', 0);\n        }\n      }\n\n      this.showContent = true;\n    } else {\n      this.showContent = false;\n\n      if (this.isMobile) {\n        this.hostElement.style.height = this.hideOnCollapse\n          ? '0'\n          : Pane.collapsedPaneMobile;\n      } else {\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n        } else {\n          this.hostElement.style.width = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n        }\n      }\n    }\n  }\n\n  @Watch('expanded')\n  @Watch('size')\n  onSizeChange() {\n    if (this.expanded) {\n      if (this.isMobile) {\n        this.hostElement.style.minHeight = this.hideOnCollapse\n          ? '0'\n          : Pane.collapsedPaneMobile;\n        this.animateHorizontalFadeIn('100%');\n      } else {\n        const expandPaneSize = this.getExpandPaneSize();\n\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n          this.animateHorizontalFadeIn(expandPaneSize);\n        } else {\n          this.hostElement.style.width = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n          this.animateVerticalFadeIn(expandPaneSize);\n        }\n      }\n    } else {\n      this.showContent = false;\n\n      if (this.isMobile) {\n        this.hostElement.style.height = Pane.collapsedPaneMobile;\n      } else {\n        if (this.isBottomTopPane) {\n          this.animateHorizontalFadeIn(Pane.collapsedPane);\n        } else {\n          this.animateVerticalFadeIn(Pane.collapsedPane);\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'inline-color': !this.floating,\n          'mobile-overlay': this.expanded && this.isMobile,\n          'top-expanded': this.expanded && this.isMobileTop && this.isMobile,\n          'bottom-expanded':\n            this.expanded && !this.isMobileTop && this.isMobile,\n          'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n          'left-right-pane': this.isLeftRightPane && !this.isMobile,\n          [`${this.composition}-pane-border`]:\n            !this.borderless && !this.isMobile && !this.floating,\n          'nav-left-border':\n            !this.borderless &&\n            !this.isMobile &&\n            this.composition !== 'right' &&\n            this.floating,\n          'mobile-border-top':\n            !this.borderless &&\n            this.isMobileTop &&\n            this.isMobile &&\n            !this.expanded &&\n            !this.floating,\n          'mobile-border-bottom':\n            !this.borderless &&\n            !this.isMobileTop &&\n            this.isMobile &&\n            !this.expanded &&\n            !this.floating,\n          'box-shadow': this.floating,\n          'aria-expanded': this.expanded,\n          'not-visible': this.hideOnCollapse && !this.expanded,\n        }}\n      >\n        <aside\n          id={`pane-${this.composition}`}\n          class={{\n            'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n            'left-right-pane': this.isLeftRightPane && !this.isMobile,\n            'mobile-pane': this.isMobile,\n            expanded: this.expanded,\n          }}\n        >\n          <div\n            id=\"title-div\"\n            class={{\n              title:\n                !this.isMobile && !this.hideOnCollapse && !this.showContent,\n              'title-finished':\n                !this.isMobile && !this.hideOnCollapse && this.showContent,\n              'title-expanded':\n                !this.isMobile && !this.hideOnCollapse && this.expanded,\n              'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,\n              'title-mobile': this.isMobile,\n              'header-gap': !this.isMobile && !this.hideOnCollapse,\n            }}\n          >\n            <ix-icon-button\n              class=\"title-icon\"\n              size=\"24\"\n              icon={\n                this.expanded\n                  ? this.isMobile || this.hideOnCollapse\n                    ? iconClose\n                    : this.expandIcon\n                  : this.minimizeIcon\n              }\n              ghost\n              onClick={() => this.dispatchExpandedChangedEvent()}\n              aria-controls={`pane-${this.composition}`}\n            />\n            <span\n              class={{\n                'title-text': true,\n                rotate:\n                  !this.expanded && !this.isMobile && this.isLeftRightPane,\n              }}\n            >\n              {this.icon ? (\n                <ix-icon size=\"24\" name={this.icon}></ix-icon>\n              ) : null}\n              <div class=\"title-text-overflow\">\n                <ix-typography format=\"h4\">{this.heading}</ix-typography>\n              </div>\n            </span>\n          </div>\n          <div class=\"side-pane-content\" hidden={!this.showContent}>\n            <slot></slot>\n          </div>\n        </aside>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["waitForElement","selector","doc","timeout","Promise","resolve","reject","startTime","Date","now","checkIfElementExist","dialog","querySelector","setTimeout","modalCss","Modal","constructor","hostRef","this","ariaAttributes","size","animation","backdrop","closeOnBackdropClick","centered","closeOnEscape","modalVisible","onKey","e","key","preventDefault","hostElement","shadowRoot","slideInModal","duration","Animation","mediumTime","transformY","anime","targets","opacity","translateY","translateX","easing","slideOutModal","completeCallback","complete","onModalClick","event","target","rect","getBoundingClientRect","isClickOutside","top","clientY","height","left","clientX","width","dismissModal","showModal","console","error","reason","allowDismiss","beforeDismiss","undefined","close","JSON","stringify","type","dialogDismiss","emit","closeModal","dialogClose","componentDidLoad","componentWillLoad","a11yHostAttributes","render","h","Host","class","visible","a11yBoolean","modal","onClose","onClick","onCancel","__decorate","OnListener","self","prototype"],"sources":["src/components/utils/waitForElement.ts","src/components/modal/modal.scss?tag=ix-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport function waitForElement<R extends HTMLElement>(\n  selector: string,\n  doc: any,\n  timeout = 3000\n): Promise<R> {\n  return new Promise<R>((resolve, reject) => {\n    const startTime = Date.now();\n\n    const checkIfElementExist = () => {\n      const dialog = doc.querySelector(selector) satisfies R;\n\n      if (dialog) {\n        resolve(dialog);\n      } else {\n        if (Date.now() - startTime < timeout) {\n          setTimeout(checkIfElementExist);\n        } else {\n          reject();\n        }\n      }\n    };\n\n    checkIfElementExist();\n  });\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n::backdrop {\n  --ix-dialog-backdrop: var(--theme-color-lightbox, #0000008c);\n}\n\n:focus-visible {\n  outline: none !important;\n}\n\n:host {\n  display: none;\n\n  dialog {\n    --ix-dialog-padding: 1rem;\n\n    margin: 0;\n    padding: var(--ix-dialog-padding);\n    padding-top: calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));\n    padding-bottom: calc(\n      var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom)\n    );\n    left: 50%;\n  }\n\n  dialog::backdrop {\n    backdrop-filter: blur(2.7182817459106445px);\n  }\n\n  .modal {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    border: none;\n    border-radius: var(--theme-default-border-radius);\n    background: var(--theme-modal--background);\n    box-shadow: var(--theme-shadow-4);\n    color: var(--theme-color-std-text);\n    overflow: visible;\n    max-height: 80vh;\n    pointer-events: all;\n  }\n\n  .modal-size-360 {\n    width: 22.5rem;\n  }\n\n  .modal-size-480 {\n    width: 30rem;\n  }\n\n  .modal-size-600 {\n    width: 37.5rem;\n  }\n\n  .modal-size-720 {\n    width: 45rem;\n  }\n\n  .modal-size-840 {\n    width: 52.5rem;\n  }\n\n  .modal-size-full-width {\n    width: 95%;\n  }\n\n  .modal-size-full-screen {\n    border-radius: 0;\n    left: 0 !important;\n    top: 0 !important;\n    transform: none !important;\n    box-shadow: none;\n\n    --ix-dialog-full-screen-height: calc(\n      var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n    );\n\n    width: calc(100% - var(--ix-dialog-padding) * 2);\n    min-width: calc(100% - var(--ix-dialog-padding) * 2);\n    max-width: calc(100% - var(--ix-dialog-padding) * 2);\n\n    min-height: calc(\n      100% - (var(--ix-dialog-padding) * 2) -\n        var(--ix-dialog-full-screen-height)\n    );\n    max-height: calc(\n      100% - (var(--ix-dialog-padding) * 2) -\n        var(--ix-dialog-full-screen-height)\n    );\n  }\n\n  dialog.modal-size-full-screen::backdrop {\n    background: var(--theme-modal--background);\n  }\n\n  .dialog-backdrop {\n    display: block;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    top: 0;\n    left: 0;\n\n    pointer-events: none;\n  }\n\n  ::slotted(ix-modal-footer) {\n    margin-top: auto;\n  }\n}\n\n:host(.visible) {\n  display: block;\n}\n\n:host(.align-center) {\n  dialog {\n    margin: 0;\n    left: 50%;\n    top: 50%;\n  }\n}\n\n:host(.no-backdrop) {\n  dialog::backdrop {\n    background-color: transparent !important;\n    backdrop-filter: none !important;\n  }\n}\n\n:host(.with-icon) {\n  ::slotted(ix-modal-footer),\n  ::slotted(ix-modal-content) {\n    margin-left: 3rem;\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 */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\nimport { IxModalSize } from './modal.types';\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  private ariaAttributes: A11yAttributes = {};\n\n  @Element() hostElement!: HTMLIxModalElement;\n\n  /**\n   * Modal size\n   */\n  @Prop() size: IxModalSize = '360';\n\n  /**\n   * Should the modal be animated\n   */\n  @Prop() animation = true;\n\n  /**\n   * Show a backdrop behind the modal dialog\n   */\n  @Prop() backdrop = true;\n\n  /**\n   * Dismiss modal on backdrop click\n   */\n  @Prop() closeOnBackdropClick = false;\n\n  /**\n   * Is called before the modal is dismissed.\n   *\n   * - Return `true` to proceed in dismissing the modal\n   * - Return `false` to abort in dismissing the modal\n   */\n  @Prop() beforeDismiss?: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * If set to true the modal can be closed by pressing the Escape key\n   */\n  @Prop() closeOnEscape = true;\n\n  /**\n   * Dialog close\n   */\n  @Event() dialogClose!: EventEmitter;\n\n  /**\n   * Dialog cancel\n   */\n  @Event() dialogDismiss!: EventEmitter;\n\n  @State() modalVisible = false;\n\n  @OnListener<Modal>('keydown', (self) => !self.closeOnEscape)\n  onKey(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n    }\n  }\n\n  get dialog() {\n    return this.hostElement.shadowRoot!.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [0, 1],\n      translateY: [0, transformY],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [1, 0],\n      translateY: [transformY, 0],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onModalClick(event: MouseEvent) {\n    if (event.target !== this.dialog) {\n      return;\n    }\n\n    const rect = this.dialog!.getBoundingClientRect();\n    const isClickOutside =\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width;\n\n    if (!isClickOutside && this.closeOnBackdropClick) {\n      this.dismissModal();\n    }\n  }\n\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    try {\n      const dialog = await waitForElement<HTMLDialogElement>(\n        'dialog',\n        this.hostElement.shadowRoot\n      );\n      this.modalVisible = true;\n      dialog.showModal();\n    } catch (e) {\n      console.error('HTMLDialogElement not existing');\n    }\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.modalVisible,\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={{\n              modal: true,\n              [`modal-size-${this.size}`]: true,\n            }}\n            onClose={() => this.dismissModal()}\n            onClick={(event) => this.onModalClick(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as o,H as r,a as i}from"./p-DJsXFBNm.js";import{H as a}from"./p-DLTnniMb.js";import{D as n}from"./p-bDicGJUN.js";import{d as l}from"./p-D3K9vmFp.js";import{a as d,b as s,S as h,c}from"./p-BsJawkTz.js";import{H as b,c as u}from"./p-CFsAnuUU.js";import{m as p}from"./p-bcj7UEIC.js";import"./p-Bb7pDeaQ.js";import"./p-CX81WQtk.js";import"./p-pXYAoEyc.js";import"./p-Ou74PMQs.js";const m='input{font-feature-settings:"clig" off, "liga" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,input.disabled::placeholder{color:transparent}textarea{font-feature-settings:"clig" off, "liga" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea[type=number]{text-align:right}textarea[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{min-height:2rem;height:3.25rem;padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),input.ix-info:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .input-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%}:host input{width:100%;height:100%}:host .start-container,:host .end-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .start-container{left:0}:host .end-container{right:0}:host .start-container ::slotted(*){margin-left:0.5rem}:host .start-container ::slotted(ix-icon.size-24),:host .start-container ::slotted(ix-icon-button.btn-icon-16){margin-left:0.25rem}:host .start-container ::slotted(ix-icon-button.btn-icon-32){margin-left:0}:host .end-container ::slotted(*){margin-right:0.5rem}:host .end-container ::slotted(ix-icon.size-24),:host .end-container ::slotted(ix-icon-button.btn-icon-16){margin-right:0.25rem}:host .end-container ::slotted(ix-icon-button.btn-icon-32){margin-right:0}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input{width:100%;height:100%}:host .time-icon-hidden{display:none}:host(.readonly) input{pointer-events:none}.input-wrapper{position:relative}';var v=undefined&&undefined.__decorate||function(t,e,o,r){var i=arguments.length,a=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,o):r,n;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)if(n=t[l])a=(i<3?n(a):i>3?n(e,o,a):n(e,o))||a;return i>3&&a&&Object.defineProperty(e,o,a),a};const f=class{constructor(o){t(this,o);this.valueChange=e(this,"valueChange",6);this.validityStateChange=e(this,"validityStateChange",7);this.ixFocus=e(this,"ixFocus",7);this.ixBlur=e(this,"ixBlur",7);if(o.$hostElement$["s-ei"]){this.formInternals=o.$hostElement$["s-ei"]}else{this.formInternals=o.$hostElement$.attachInternals();o.$hostElement$["s-ei"]=this.formInternals}this.value="";this.format="TT";this.readonly=false;this.disabled=false;this.i18nErrorTimeUnparsable="Time is not valid";this.hourInterval=1;this.minuteInterval=1;this.secondInterval=1;this.millisecondInterval=100;this.i18nSelectTime="Confirm";this.i18nTime="Time";this.i18nHourColumnHeader="hr";this.i18nMinuteColumnHeader="min";this.i18nSecondColumnHeader="sec";this.i18nMillisecondColumnHeader="ms";this.show=false;this.time=null;this.isInputInvalid=false;this.isInvalid=false;this.isValid=false;this.isInfo=false;this.isWarning=false;this.focus=false;this.slotStartRef=p();this.slotEndRef=p();this.timePickerRef=p();this.inputElementRef=p();this.dropdownElementRef=p();this.touched=false}updateFormInternalValue(t){this.formInternals.setFormValue(t);this.value=t}connectedCallback(){this.classObserver=u(this.hostElement,(()=>this.checkClassList()));this.disposableChangesAndVisibilityObservers=d(this.hostElement,this.updatePaddings.bind(this))}componentWillLoad(){if(!this.value){const t=n.now();if(t.isValid){this.value=t.toFormat(this.format)}}this.onInput(this.value);if(this.isInputInvalid){this.time=null}else{this.watchValue()}this.checkClassList();this.updateFormInternalValue(this.value)}updatePaddings(){s(this.slotStartRef.current,this.slotEndRef.current,this.inputElementRef.current)}disconnectedCallback(){var t,e;(t=this.classObserver)===null||t===void 0?void 0:t.destroy();(e=this.disposableChangesAndVisibilityObservers)===null||e===void 0?void 0:e.call(this)}watchValue(){this.time=this.value}hasValidValue(){return Promise.resolve(!!this.value)}getAssociatedFormElement(){return Promise.resolve(this.formInternals.form)}async onInput(t){this.value=t;if(!t){this.isInputInvalid=false;this.updateFormInternalValue(t);this.valueChange.emit(t);return}if(!this.format){return}const e=n.fromFormat(t,this.format);if(e.isValid){this.isInputInvalid=false}else{this.isInputInvalid=true;this.invalidReason=e.invalidReason}this.updateFormInternalValue(t);this.valueChange.emit(t)}onTimeIconClick(t){if(!this.show){t.stopPropagation();t.preventDefault();this.openDropdown()}if(this.inputElementRef.current){this.inputElementRef.current.focus()}}async openDropdown(){this.time=this.value;const t=await this.dropdownElementRef.waitForCurrent();const e=t.getAttribute("data-ix-dropdown");l.dismissAll();if(!e){return}const o=l.getDropdownById(e);if(!o){return}l.present(o)}async closeDropdown(){const t=await this.dropdownElementRef.waitForCurrent();const e=t.getAttribute("data-ix-dropdown");if(!e){return}const o=l.getDropdownById(e);if(!o){return}l.dismiss(o)}checkClassList(){this.isInvalid=this.hostElement.classList.contains("ix-invalid")}renderInput(){return o("div",{class:"input-wrapper"},o(c,{slotStartRef:this.slotStartRef,onSlotChange:()=>this.updatePaddings()}),o("input",{autoComplete:"off",class:{"is-invalid":this.isInputInvalid},disabled:this.disabled,readOnly:this.readonly,required:this.required,ref:this.inputElementRef,type:"text",value:this.value,placeholder:this.placeholder,name:this.name,onInput:t=>{const e=t.target;this.onInput(e.value)},onClick:t=>{if(this.show){t.stopPropagation();t.preventDefault()}},onFocus:async()=>{this.openDropdown();this.ixFocus.emit()},onBlur:()=>{this.ixBlur.emit();this.touched=true}}),o(h,{slotEndRef:this.slotEndRef,onSlotChange:()=>this.updatePaddings()},o("ix-icon-button",{"data-testid":"open-time-picker",class:{"time-icon-hidden":this.disabled||this.readonly},ghost:true,icon:a,onClick:t=>this.onTimeIconClick(t),"aria-label":"Toggle time picker","aria-expanded":this.show})))}hookValidationLifecycle({isInfo:t,isInvalid:e,isInvalidByRequired:o,isValid:r,isWarning:i}){this.isInvalid=e||o||this.isInputInvalid;this.isInfo=t;this.isValid=r;this.isWarning=i}async onInputValidationChange(){const t=await this.getValidityState();this.validityStateChange.emit({patternMismatch:t.patternMismatch,invalidReason:this.invalidReason})}getValidityState(){return Promise.resolve({badInput:false,customError:false,patternMismatch:this.isInputInvalid,rangeOverflow:false,rangeUnderflow:false,stepMismatch:false,tooLong:false,tooShort:false,typeMismatch:false,valid:!this.isInputInvalid,valueMissing:!!this.required&&!this.value})}getNativeInputElement(){return this.inputElementRef.waitForCurrent()}async focusInput(){return(await this.getNativeInputElement()).focus()}isTouched(){return Promise.resolve(this.touched)}render(){var t;const e=this.isInputInvalid?this.i18nErrorTimeUnparsable:this.invalidText;return o(r,{key:"9c340254423471c518d3fcc3f8c917665931b629",class:{disabled:this.disabled,readonly:this.readonly}},o("ix-field-wrapper",{key:"f3ed6f6ad1fb86beda3c4b0a015590962fbe2fb8",label:this.label,helperText:this.helperText,isInvalid:this.isInvalid,invalidText:e,infoText:this.infoText,isInfo:this.isInfo,isWarning:this.isWarning,warningText:this.warningText,isValid:this.isValid,validText:this.validText,showTextAsTooltip:this.showTextAsTooltip,required:this.required,controlRef:this.inputElementRef},this.renderInput()),o("ix-dropdown",{key:"1d7e6c7db0db891ece69853da2839e36ff563efd","data-testid":"time-dropdown",trigger:this.inputElementRef.waitForCurrent(),ref:this.dropdownElementRef,closeBehavior:"outside",suppressOverflowBehavior:true,show:this.show,onShowChanged:t=>{this.show=t.detail}},o("ix-time-picker",{key:"9545a2d9a75cc18c939b160048df241d0861dd63",ref:this.timePickerRef,format:this.format,time:(t=this.time)!==null&&t!==void 0?t:"",hourInterval:this.hourInterval,minuteInterval:this.minuteInterval,secondInterval:this.secondInterval,millisecondInterval:this.millisecondInterval,standaloneAppearance:false,i18nConfirmTime:this.i18nSelectTime,i18nHeader:this.i18nTime,i18nHourColumnHeader:this.i18nHourColumnHeader,i18nSecondColumnHeader:this.i18nSecondColumnHeader,i18nMinuteColumnHeader:this.i18nMinuteColumnHeader,i18nMillisecondColumnHeader:this.i18nMillisecondColumnHeader,onTimeSelect:t=>{this.onInput(t.detail);this.show=false}})))}static get formAssociated(){return true}get hostElement(){return i(this)}static get watchers(){return{value:["watchValue"],isInputInvalid:["onInputValidationChange"]}}};v([b()],f.prototype,"hookValidationLifecycle",null);f.style=m;export{f as ix_time_input};
+//# sourceMappingURL=p-fbacd6eb.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["timeInputCss","TimeInput","constructor","hostRef","this","value","format","readonly","disabled","i18nErrorTimeUnparsable","hourInterval","minuteInterval","secondInterval","millisecondInterval","i18nSelectTime","i18nTime","i18nHourColumnHeader","i18nMinuteColumnHeader","i18nSecondColumnHeader","i18nMillisecondColumnHeader","show","time","isInputInvalid","isInvalid","isValid","isInfo","isWarning","focus","slotStartRef","makeRef","slotEndRef","timePickerRef","inputElementRef","dropdownElementRef","touched","updateFormInternalValue","formInternals","setFormValue","connectedCallback","classObserver","createClassMutationObserver","hostElement","checkClassList","disposableChangesAndVisibilityObservers","addDisposableChangesAndVisibilityObservers","updatePaddings","bind","componentWillLoad","now","DateTime","toFormat","onInput","watchValue","adjustPaddingForStartAndEnd","current","disconnectedCallback","_a","destroy","_b","call","hasValidValue","Promise","resolve","getAssociatedFormElement","form","valueChange","emit","fromFormat","invalidReason","onTimeIconClick","event","stopPropagation","preventDefault","openDropdown","dropdownElement","waitForCurrent","id","getAttribute","dropdownController","dismissAll","dropdown","getDropdownById","present","closeDropdown","dismiss","classList","contains","renderInput","h","class","SlotStart","onSlotChange","autoComplete","readOnly","required","ref","type","placeholder","name","target","onClick","onFocus","async","ixFocus","onBlur","ixBlur","SlotEnd","ghost","icon","iconClock","hookValidationLifecycle","isInvalidByRequired","onInputValidationChange","state","getValidityState","validityStateChange","patternMismatch","badInput","customError","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valid","valueMissing","getNativeInputElement","focusInput","isTouched","render","invalidText","Host","key","label","helperText","infoText","warningText","validText","showTextAsTooltip","controlRef","trigger","closeBehavior","suppressOverflowBehavior","onShowChanged","detail","standaloneAppearance","i18nConfirmTime","i18nHeader","onTimeSelect","__decorate","HookValidationLifecycle","prototype"],"sources":["src/components/time-input/time-input.scss?tag=ix-time-input&encapsulation=shadow","src/components/time-input/time-input.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/input';\n@import './../input/input.mixins.scss';\n\n@include input-field;\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n\n  input {\n    width: 100%;\n    height: 100%;\n  }\n\n  .time-icon-hidden {\n    display: none;\n  }\n}\n\n:host(.readonly) {\n  input {\n    pointer-events: none;\n  }\n}\n\n.input-wrapper {\n  position: relative;\n}\n","/*\n * SPDX-FileCopyrightText: 2025 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 { iconClock } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { dropdownController } from '../dropdown/dropdown-controller';\nimport { SlotEnd, SlotStart } from '../input/input.fc';\nimport {\n  DisposableChangesAndVisibilityObservers,\n  addDisposableChangesAndVisibilityObservers,\n  adjustPaddingForStartAndEnd,\n} from '../input/input.util';\nimport {\n  ClassMutationObserver,\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n  createClassMutationObserver,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { IxTimePickerCustomEvent } from '../../components';\nimport type { TimeInputValidityState } from './time-input.types';\n\n/**\n * @since 3.2.0\n * @form-ready\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n */\n@Component({\n  tag: 'ix-time-input',\n  styleUrl: 'time-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class TimeInput implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxTimeInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the input element\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Placeholder of the input element\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * Value of the input element\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\n   */\n  @Prop() locale?: string;\n\n  /**\n   * Format of time string\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   */\n  @Prop() format: string = 'TT';\n\n  /**\n   * Required attribute\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Helper text below the input field\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label of the input field\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text below the input field\n   */\n  @Prop({ reflect: true }) invalidText?: string;\n\n  /**\n   * Readonly attribute\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Disabled attribute\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Info text below the input field\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text below the input field\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Valid text below the input field\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Show text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * I18n string for the error message when the time is not parsable\n   */\n  @Prop({ attribute: 'i18n-error-time-unparsable' }) i18nErrorTimeUnparsable =\n    'Time is not valid';\n\n  /**\n   * Interval for hour selection\n   */\n  @Prop() hourInterval: number = 1;\n\n  /**\n   * Interval for minute selection\n   */\n  @Prop() minuteInterval: number = 1;\n\n  /**\n   * Interval for second selection\n   */\n  @Prop() secondInterval: number = 1;\n\n  /**\n   * Interval for millisecond selection\n   */\n  @Prop() millisecondInterval: number = 100;\n\n  /**\n   * Text of time-picker time select button\n   */\n  @Prop({ attribute: 'i18n-select-time' }) i18nSelectTime: string = 'Confirm';\n\n  /**\n   * Text for time-picker top label\n   */\n  @Prop({ attribute: 'i18n-time' }) i18nTime: string = 'Time';\n\n  /**\n   * Text for time-picker hour column header\n   */\n  @Prop({ attribute: 'i18n-hour-column-header' }) i18nHourColumnHeader: string =\n    'hr';\n\n  /**\n   * Text for time-picker minute column header\n   */\n  // eslint-disable-next-line @stencil-community/decorators-style\n  @Prop({ attribute: 'i18n-minute-column-header' })\n  i18nMinuteColumnHeader: string = 'min';\n\n  /**\n   * Text for time-picker second column header\n   */\n  // eslint-disable-next-line @stencil-community/decorators-style\n  @Prop({ attribute: 'i18n-second-column-header' })\n  i18nSecondColumnHeader: string = 'sec';\n\n  /**\n   * Text for time-picker millisecond column header\n   */\n  // eslint-disable-next-line @stencil-community/decorators-style\n  @Prop({ attribute: 'i18n-millisecond-column-header' })\n  i18nMillisecondColumnHeader: string = 'ms';\n\n  /**\n   * Input change event.\n   */\n  @Event({ cancelable: false }) valueChange!: EventEmitter<string>;\n\n  /**\n   * Validation state change event.\n   */\n  @Event() validityStateChange!: EventEmitter<TimeInputValidityState>;\n\n  /** @internal */\n  @Event() ixFocus!: EventEmitter<void>;\n\n  /** @internal */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() show = false;\n  @State() time: string | null = null;\n  @State() isInputInvalid = false;\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() focus = false;\n\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n\n  private readonly timePickerRef = makeRef<HTMLIxTimePickerElement>();\n\n  private readonly inputElementRef = makeRef<HTMLInputElement>();\n  private readonly dropdownElementRef = makeRef<HTMLIxDropdownElement>();\n  private classObserver?: ClassMutationObserver;\n  private invalidReason?: string;\n  private touched = false;\n\n  private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n  updateFormInternalValue(value: string): void {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  connectedCallback(): void {\n    this.classObserver = createClassMutationObserver(this.hostElement, () =>\n      this.checkClassList()\n    );\n\n    this.disposableChangesAndVisibilityObservers =\n      addDisposableChangesAndVisibilityObservers(\n        this.hostElement,\n        this.updatePaddings.bind(this)\n      );\n  }\n\n  componentWillLoad(): void {\n    if (!this.value) {\n      const now = DateTime.now();\n      if (now.isValid) {\n        this.value = now.toFormat(this.format);\n      }\n    }\n\n    this.onInput(this.value);\n    if (this.isInputInvalid) {\n      this.time = null;\n    } else {\n      this.watchValue();\n    }\n\n    this.checkClassList();\n    this.updateFormInternalValue(this.value);\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputElementRef.current\n    );\n  }\n\n  disconnectedCallback(): void {\n    this.classObserver?.destroy();\n    this.disposableChangesAndVisibilityObservers?.();\n  }\n\n  @Watch('value')\n  watchValue() {\n    this.time = this.value;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  async onInput(value: string) {\n    this.value = value;\n    if (!value) {\n      this.isInputInvalid = false;\n      this.updateFormInternalValue(value);\n      this.valueChange.emit(value);\n      return;\n    }\n\n    if (!this.format) {\n      return;\n    }\n\n    const time = DateTime.fromFormat(value, this.format);\n    if (time.isValid) {\n      this.isInputInvalid = false;\n    } else {\n      this.isInputInvalid = true;\n      this.invalidReason = time.invalidReason;\n    }\n\n    this.updateFormInternalValue(value);\n    this.valueChange.emit(value);\n  }\n\n  onTimeIconClick(event: Event) {\n    if (!this.show) {\n      event.stopPropagation();\n      event.preventDefault();\n      this.openDropdown();\n    }\n\n    if (this.inputElementRef.current) {\n      this.inputElementRef.current.focus();\n    }\n  }\n\n  async openDropdown() {\n    // keep picker in sync with input\n    this.time = this.value;\n\n    const dropdownElement = await this.dropdownElementRef.waitForCurrent();\n    const id = dropdownElement.getAttribute('data-ix-dropdown');\n\n    dropdownController.dismissAll();\n    if (!id) {\n      return;\n    }\n\n    const dropdown = dropdownController.getDropdownById(id);\n    if (!dropdown) {\n      return;\n    }\n    dropdownController.present(dropdown);\n  }\n\n  async closeDropdown() {\n    const dropdownElement = await this.dropdownElementRef.waitForCurrent();\n    const id = dropdownElement.getAttribute('data-ix-dropdown');\n\n    if (!id) {\n      return;\n    }\n\n    const dropdown = dropdownController.getDropdownById(id);\n    if (!dropdown) {\n      return;\n    }\n    dropdownController.dismiss(dropdown);\n  }\n\n  private checkClassList() {\n    this.isInvalid = this.hostElement.classList.contains('ix-invalid');\n  }\n\n  private renderInput() {\n    return (\n      <div class=\"input-wrapper\">\n        <SlotStart\n          slotStartRef={this.slotStartRef}\n          onSlotChange={() => this.updatePaddings()}\n        ></SlotStart>\n        <input\n          autoComplete=\"off\"\n          class={{\n            'is-invalid': this.isInputInvalid,\n          }}\n          disabled={this.disabled}\n          readOnly={this.readonly}\n          required={this.required}\n          ref={this.inputElementRef}\n          type=\"text\"\n          value={this.value}\n          placeholder={this.placeholder}\n          name={this.name}\n          onInput={(event) => {\n            const target = event.target as HTMLInputElement;\n            this.onInput(target.value);\n          }}\n          onClick={(event) => {\n            if (this.show) {\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onFocus={async () => {\n            this.openDropdown();\n            this.ixFocus.emit();\n          }}\n          onBlur={() => {\n            this.ixBlur.emit();\n            this.touched = true;\n          }}\n        ></input>\n        <SlotEnd\n          slotEndRef={this.slotEndRef}\n          onSlotChange={() => this.updatePaddings()}\n        >\n          <ix-icon-button\n            data-testid=\"open-time-picker\"\n            class={{ 'time-icon-hidden': this.disabled || this.readonly }}\n            ghost\n            icon={iconClock}\n            onClick={(event) => this.onTimeIconClick(event)}\n            aria-label=\"Toggle time picker\"\n            aria-expanded={this.show}\n          ></ix-icon-button>\n        </SlotEnd>\n      </div>\n    );\n  }\n\n  @HookValidationLifecycle()\n  hookValidationLifecycle({\n    isInfo,\n    isInvalid,\n    isInvalidByRequired,\n    isValid,\n    isWarning,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  @Watch('isInputInvalid')\n  async onInputValidationChange() {\n    const state = await this.getValidityState();\n    this.validityStateChange.emit({\n      patternMismatch: state.patternMismatch,\n      invalidReason: this.invalidReason,\n    });\n  }\n\n  /** @internal */\n  @Method()\n  getValidityState(): Promise<ValidityState> {\n    return Promise.resolve({\n      badInput: false,\n      customError: false,\n      patternMismatch: this.isInputInvalid,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: !this.isInputInvalid,\n      valueMissing: !!this.required && !this.value,\n    });\n  }\n\n  /**\n   * Get the native input element\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLInputElement> {\n    return this.inputElementRef.waitForCurrent();\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  /**\n   * Returns whether the text field has been touched.\n   * @internal\n   */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    const invalidText = this.isInputInvalid\n      ? this.i18nErrorTimeUnparsable\n      : this.invalidText;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          isInvalid={this.isInvalid}\n          invalidText={invalidText}\n          infoText={this.infoText}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          warningText={this.warningText}\n          isValid={this.isValid}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          required={this.required}\n          controlRef={this.inputElementRef}\n        >\n          {this.renderInput()}\n        </ix-field-wrapper>\n        <ix-dropdown\n          data-testid=\"time-dropdown\"\n          trigger={this.inputElementRef.waitForCurrent()}\n          ref={this.dropdownElementRef}\n          closeBehavior=\"outside\"\n          suppressOverflowBehavior={true}\n          show={this.show}\n          onShowChanged={(event) => {\n            this.show = event.detail;\n          }}\n        >\n          <ix-time-picker\n            ref={this.timePickerRef}\n            format={this.format}\n            time={this.time ?? ''}\n            hourInterval={this.hourInterval}\n            minuteInterval={this.minuteInterval}\n            secondInterval={this.secondInterval}\n            millisecondInterval={this.millisecondInterval}\n            standaloneAppearance={false}\n            i18nConfirmTime={this.i18nSelectTime}\n            i18nHeader={this.i18nTime}\n            i18nHourColumnHeader={this.i18nHourColumnHeader}\n            i18nSecondColumnHeader={this.i18nSecondColumnHeader}\n            i18nMinuteColumnHeader={this.i18nMinuteColumnHeader}\n            i18nMillisecondColumnHeader={this.i18nMillisecondColumnHeader}\n            onTimeSelect={(event: IxTimePickerCustomEvent<string>) => {\n              this.onInput(event.detail);\n\n              this.show = false;\n            }}\n          ></ix-time-picker>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}