@siemens/ix 3.0.0-alpha.4 → 3.0.0

package/dist/siemens-ix/{p-ce0642f0.entry.js → p-76565681.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c,h as o,F as r,H as h,g as d}from"./p-BNpBEtDH.js";import{H as t}from"./p-2j3Ly91D.js";import{m as b}from"./p-bcj7UEIC.js";import{a as n}from"./p-Bb7pDeaQ.js";const a=":host{--ix-checkbox-check-color:var(--theme-color-primary--contrast);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 button{all:unset;display:inline-flex;position:relative;align-items:center;justify-content:center;width:1.125rem;min-width:1.125rem;max-width:1.125rem;height:1.125rem;min-height:1.125rem;max-height:1.125rem;margin-right:0.5rem}:host button:disabled{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host button:focus-visible{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:var(--theme-checkbox--focus--outline-offset)}:host input[type=checkbox]{display:none}:host label{display:flex;justify-content:flex-start;align-items:flex-start;width:100%;height:100%}:host ix-typography{margin-top:0.125rem}:host button{background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.checked) button,:host(.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.checked:hover) button,:host(.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.checked:active) button,:host(.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.checked.disabled) button,:host(.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-info) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--info\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--info--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--info--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--info\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--info--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--info--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--info\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--info--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--info--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--info\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--info--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--info--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--info\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--info--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--info--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--info\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--info--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--info--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-info:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-info:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-info.checked) button,:host(.ix-info.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-info.checked:hover) button,:host(.ix-info.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-info.checked:active) button,:host(.ix-info.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-info.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-info.checked.disabled) button,:host(.ix-info.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-warning) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--warning\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--warning--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--warning--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--warning\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--warning--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--warning--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--warning\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--warning--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--warning--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--warning\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--warning--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--warning--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--warning\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--warning--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--warning--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--warning\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--warning--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--warning--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-warning:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-warning:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-warning.checked) button,:host(.ix-warning.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-warning.checked:hover) button,:host(.ix-warning.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-warning.checked:active) button,:host(.ix-warning.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-warning.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-warning.checked.disabled) button,:host(.ix-warning.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid--required) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--invalid\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--invalid--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--invalid--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--invalid\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--invalid--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--invalid--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--invalid\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--invalid--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--invalid--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--invalid\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--invalid--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--invalid--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--invalid\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--invalid--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--invalid--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--invalid\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--invalid--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--invalid--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid--required:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid--required:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid--required.checked) button,:host(.ix-invalid--required.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid--required.checked:hover) button,:host(.ix-invalid--required.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid--required.checked:active) button,:host(.ix-invalid--required.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid--required.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid--required.checked.disabled) button,:host(.ix-invalid--required.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--invalid\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--invalid--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--invalid--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--invalid\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--invalid--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--invalid--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--invalid\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--invalid--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--invalid--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--invalid\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--invalid--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--invalid--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--invalid\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--invalid--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--invalid--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--invalid\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--invalid--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--invalid--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid.checked) button,:host(.ix-invalid.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid.checked:hover) button,:host(.ix-invalid.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid.checked:active) button,:host(.ix-invalid.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid.checked.disabled) button,:host(.ix-invalid.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.disabled){pointer-events:none}:host(.disabled) button,:host(.disabled) label,:host(.disabled) input{pointer-events:none}";var k=undefined&&undefined.__decorate||function(e,c,o,r){var h=arguments.length,d=h<3?c:r===null?r=Object.getOwnPropertyDescriptor(c,o):r,t;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")d=Reflect.decorate(e,c,o,r);else for(var b=e.length-1;b>=0;b--)if(t=e[b])d=(h<3?t(d):h>3?t(c,o,d):t(c,o))||d;return h>3&&d&&Object.defineProperty(c,o,d),d};const i=class{constructor(o){e(this,o);this.checkedChange=c(this,"checkedChange",7);this.valueChange=c(this,"valueChange",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="on";this.checked=false;this.disabled=false;this.indeterminate=false;this.required=false;this.inputRef=b((e=>{e.checked=this.checked}))}setCheckedState(e){this.checked=e;this.checkedChange.emit(this.checked)}onCheckedChange(){this.updateFormInternalValue()}onValueChange(){this.valueChange.emit(this.value)}componentWillLoad(){this.updateFormInternalValue()}updateFormInternalValue(){var e;if(this.checked){this.formInternals.setFormValue((e=this.value)!==null&&e!==void 0?e:"on")}else{this.formInternals.setFormValue(null)}}hasValidValue(){return Promise.resolve(this.checked)}getAssociatedFormElement(){return Promise.resolve(this.formInternals.form)}updateClassMappings(){}renderCheckmark(){return o("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},this.indeterminate&&o(r,null,o("rect",{width:"18",height:"18",fill:"transparent"}),o("rect",{x:"3",y:"8",width:"12",height:"2",fill:"var(--ix-checkbox-check-color)"})),this.checked&&o("path",{d:"M3.65625 8.15625L8.4375 12.9375L14.625 3.9375",stroke:"var(--ix-checkbox-check-color)","stroke-width":"2"}))}render(){return o(h,{key:"d089bc3c663788b708f2ceb7fd1bbb21706a1534","aria-checked":n(this.checked),"aria-disabled":n(this.disabled),role:"checkbox",class:{disabled:this.disabled,checked:this.checked,indeterminate:this.indeterminate}},o("label",{key:"c80b9d8f724f6b76bfaffb2f5a1a182bb8753e53"},o("input",{key:"ab21dcea80e6823ae3029ba769853be39cab7bf4","aria-checked":n(this.checked),disabled:this.disabled,checked:this.checked,ref:this.inputRef,type:"checkbox",onChange:()=>this.setCheckedState(!this.checked)}),o("button",{key:"100dc970576623fc11099abfefc9a51479c9ea14",disabled:this.disabled,class:{checked:this.checked},onClick:()=>this.setCheckedState(!this.checked)},this.renderCheckmark()),o("ix-typography",{key:"0852bd38494e0d39fc8d37d8e1f5b8469fe8b811",format:"label",textColor:this.disabled?"weak":"std"},this.label,o("slot",{key:"9ec03a9c86d0ec8e1306320963fc690640a55723"}))))}static get formAssociated(){return true}get hostElement(){return d(this)}static get watchers(){return{checked:["onCheckedChange"],value:["onValueChange"]}}};k([t()],i.prototype,"updateClassMappings",null);i.style=a;export{i as ix_checkbox};
-//# sourceMappingURL=p-ce0642f0.entry.js.map
+import{r as e,c,h as o,F as r,H as h,g as d}from"./p-BNpBEtDH.js";import{a as t}from"./p-Bb7pDeaQ.js";import{H as b}from"./p-DHml78Yc.js";import{m as n}from"./p-bcj7UEIC.js";const a=":host{--ix-checkbox-check-color:var(--theme-color-primary--contrast);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 button{all:unset;display:inline-flex;position:relative;align-items:center;justify-content:center;width:1.125rem;min-width:1.125rem;max-width:1.125rem;height:1.125rem;min-height:1.125rem;max-height:1.125rem;margin-right:0.5rem}:host button:disabled{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host button:focus-visible{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:var(--theme-checkbox--focus--outline-offset)}:host input[type=checkbox]{display:none}:host label{display:flex;justify-content:flex-start;align-items:flex-start;width:100%;height:100%}:host ix-typography{margin-top:0.125rem}:host button{background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.checked) button,:host(.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.checked:hover) button,:host(.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.checked:active) button,:host(.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.checked.disabled) button,:host(.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-info) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--info\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--info--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--info--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--info\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--info--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--info--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--info\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--info--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--info--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--info\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--info--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--info--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--info\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--info--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--info--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--info\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--info--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--info--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-info:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-info:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-info.checked) button,:host(.ix-info.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-info.checked:hover) button,:host(.ix-info.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-info.checked:active) button,:host(.ix-info.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-info.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-info.checked.disabled) button,:host(.ix-info.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-warning) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--warning\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--warning--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--warning--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--warning\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--warning--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--warning--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--warning\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--warning--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--warning--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--warning\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--warning--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--warning--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--warning\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--warning--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--warning--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--warning\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--warning--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--warning--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-warning:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-warning:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-warning.checked) button,:host(.ix-warning.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-warning.checked:hover) button,:host(.ix-warning.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-warning.checked:active) button,:host(.ix-warning.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-warning.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-warning.checked.disabled) button,:host(.ix-warning.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid--required) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--invalid\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--invalid--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--invalid--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--invalid\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--invalid--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--invalid--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--invalid\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--invalid--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--invalid--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--invalid\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--invalid--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--invalid--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--invalid\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--invalid--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--invalid--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--invalid\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--invalid--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--invalid--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid--required:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid--required:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid--required.checked) button,:host(.ix-invalid--required.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid--required.checked:hover) button,:host(.ix-invalid--required.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid--required.checked:active) button,:host(.ix-invalid--required.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid--required.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid--required.checked.disabled) button,:host(.ix-invalid--required.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--invalid\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--invalid--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--invalid--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--invalid\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--invalid--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--invalid--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--invalid\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--invalid--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--invalid--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--invalid\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--invalid--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--invalid--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--invalid\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--invalid--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--invalid--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--invalid\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--invalid--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--invalid--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid.checked) button,:host(.ix-invalid.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid.checked:hover) button,:host(.ix-invalid.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid.checked:active) button,:host(.ix-invalid.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid.checked.disabled) button,:host(.ix-invalid.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.disabled){pointer-events:none}:host(.disabled) button,:host(.disabled) label,:host(.disabled) input{pointer-events:none}";var k=undefined&&undefined.__decorate||function(e,c,o,r){var h=arguments.length,d=h<3?c:r===null?r=Object.getOwnPropertyDescriptor(c,o):r,t;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")d=Reflect.decorate(e,c,o,r);else for(var b=e.length-1;b>=0;b--)if(t=e[b])d=(h<3?t(d):h>3?t(c,o,d):t(c,o))||d;return h>3&&d&&Object.defineProperty(c,o,d),d};const i=class{constructor(o){e(this,o);this.checkedChange=c(this,"checkedChange",7);this.valueChange=c(this,"valueChange",7);this.ixBlur=c(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="on";this.checked=false;this.disabled=false;this.indeterminate=false;this.required=false;this.touched=false;this.inputRef=n((e=>{e.checked=this.checked}))}setCheckedState(e){this.checked=e;this.checkedChange.emit(this.checked)}onCheckedChange(){this.touched=true;this.updateFormInternalValue()}onValueChange(){this.valueChange.emit(this.value)}componentWillLoad(){this.updateFormInternalValue()}updateFormInternalValue(){var e;if(this.checked){this.formInternals.setFormValue((e=this.value)!==null&&e!==void 0?e:"on")}else{this.formInternals.setFormValue(null)}}hasValidValue(){return Promise.resolve(this.checked)}getAssociatedFormElement(){return Promise.resolve(this.formInternals.form)}isTouched(){return Promise.resolve(this.touched)}updateClassMappings(){}renderCheckmark(){return o("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},this.indeterminate&&o(r,null,o("rect",{width:"18",height:"18",fill:"transparent"}),o("rect",{x:"3",y:"8",width:"12",height:"2",fill:"var(--ix-checkbox-check-color)"})),this.checked&&o("path",{d:"M3.65625 8.15625L8.4375 12.9375L14.625 3.9375",stroke:"var(--ix-checkbox-check-color)","stroke-width":"2"}))}render(){return o(h,{key:"2562db7e75c07d8cf18e7bd977ffc2bb85efe22c","aria-checked":t(this.checked),"aria-disabled":t(this.disabled),role:"checkbox",class:{disabled:this.disabled,checked:this.checked,indeterminate:this.indeterminate},onFocus:()=>this.touched=true,onBlur:()=>this.ixBlur.emit()},o("label",{key:"a9163950ab9493863c2d8b6deae758d237d3d582"},o("input",{key:"361a23e529e302daef40e6eb79a1bbc6a2ec7f0d","aria-checked":t(this.checked),required:this.required,disabled:this.disabled,checked:this.checked,ref:this.inputRef,type:"checkbox",onChange:()=>this.setCheckedState(!this.checked)}),o("button",{key:"bed5a7cd29b5469e653dfacdc831a9a7de0d2953",disabled:this.disabled,class:{checked:this.checked},onClick:()=>this.setCheckedState(!this.checked)},this.renderCheckmark()),o("ix-typography",{key:"fc6e95e6e9fef24068f4081461e54288a4c8bcfa",format:"label",textColor:this.disabled?"weak":"std"},this.label,o("slot",{key:"9147eda9d809b21d83abd752a223023e7550909a"}))))}static get formAssociated(){return true}get hostElement(){return d(this)}static get watchers(){return{checked:["onCheckedChange"],value:["onValueChange"]}}};k([b()],i.prototype,"updateClassMappings",null);i.style=a;export{i as ix_checkbox};
+//# sourceMappingURL=p-76565681.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["checkboxCss","Checkbox","constructor","hostRef","this","value","checked","disabled","indeterminate","required","touched","inputRef","makeRef","checkboxRef","setCheckedState","newChecked","checkedChange","emit","onCheckedChange","updateFormInternalValue","onValueChange","valueChange","componentWillLoad","formInternals","setFormValue","_a","hasValidValue","Promise","resolve","getAssociatedFormElement","form","isTouched","updateClassMappings","renderCheckmark","h","width","height","viewBox","fill","xmlns","Fragment","x","y","d","stroke","render","Host","key","a11yBoolean","role","class","onFocus","onBlur","ixBlur","ref","type","onChange","onClick","format","textColor","label","__decorate","HookValidationLifecycle","prototype"],"sources":["src/components/checkbox/checkbox.scss?tag=ix-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.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\n:host {\n  --ix-checkbox-check-color: var(--theme-color-primary--contrast);\n\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n\n  button {\n    all: unset;\n    display: inline-flex;\n    position: relative;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 1.125rem;\n    min-width: 1.125rem;\n    max-width: 1.125rem;\n    height: 1.125rem;\n    min-height: 1.125rem;\n    max-height: 1.125rem;\n    margin-right: 0.5rem;\n  }\n\n  button:disabled {\n    background-color: var(--theme-checkbox-unchecked--background--disabled);\n    border: var(--theme-checkbox--border-thickness) solid\n      var(--theme-checkbox-unchecked--border-color--disabled);\n  }\n\n  button:focus-visible {\n    outline: 0.0625rem solid var(--theme-color-focus-bdr);\n    outline-offset: var(--theme-checkbox--focus--outline-offset);\n  }\n\n  input[type='checkbox'] {\n    display: none;\n  }\n\n  label {\n    display: flex;\n\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    width: 100%;\n    height: 100%;\n  }\n\n  ix-typography {\n    margin-top: 0.125rem;\n  }\n}\n\n@mixin checkbox-base() {\n  :host {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color);\n    }\n  }\n\n  :host(:hover) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--hover);\n    }\n  }\n\n  :host(:active) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--active);\n    }\n  }\n\n  :host(.checked),\n  :host(.indeterminate) {\n    button {\n      background-color: var(--theme-checkbox-checked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color);\n    }\n  }\n\n  :host(.checked:hover),\n  :host(.indeterminate:hover) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--hover);\n    }\n  }\n\n  :host(.checked:active),\n  :host(.indeterminate:active) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--active);\n    }\n  }\n\n  :host(.disabled) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(.checked.disabled),\n  :host(.indeterminate.disabled) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin checkbox-variant($selector) {\n  :host(#{$selector}) {\n    button {\n      @content;\n      background-color: var(--theme-checkbox-unchecked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color);\n    }\n  }\n\n  :host(#{$selector}:hover) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}:active) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.checked),\n  :host(#{$selector}.indeterminate) {\n    button {\n      background-color: var(--theme-checkbox-checked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color);\n    }\n  }\n\n  :host(#{$selector}.checked:hover),\n  :host(#{$selector}.indeterminate:hover) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}.checked:active),\n  :host(#{$selector}.indeterminate:active) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.disabled) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(#{$selector}.checked.disabled),\n  :host(#{$selector}.indeterminate.disabled) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin define-checkbox-vars($state, $type) {\n  --theme-checkbox-#{$state}--background: var(\n    --theme-checkbox-#{$state}--background--#{$type}\n  );\n  --theme-checkbox-#{$state}--background--hover: var(\n    --theme-checkbox-#{$state}--background--#{$type}--hover\n  );\n  --theme-checkbox-#{$state}--background--active: var(\n    --theme-checkbox-#{$state}--background--#{$type}--active\n  );\n\n  --theme-checkbox-#{$state}--border-color: var(\n    --theme-checkbox-#{$state}--border-color--#{$type}\n  );\n  --theme-checkbox-#{$state}--border-color--hover: var(\n    --theme-checkbox-#{$state}--border-color--#{$type}--hover\n  );\n  --theme-checkbox-#{$state}--border-color--active: var(\n    --theme-checkbox-#{$state}--border-color--#{$type}--active\n  );\n}\n\n@include checkbox-base();\n@include checkbox-variant($selector: '.ix-info') {\n  @include define-checkbox-vars('unchecked', 'info');\n  @include define-checkbox-vars('checked', 'info');\n  @include define-checkbox-vars('mixed', 'info');\n}\n\n@include checkbox-variant($selector: '.ix-warning') {\n  @include define-checkbox-vars('unchecked', 'warning');\n  @include define-checkbox-vars('checked', 'warning');\n  @include define-checkbox-vars('mixed', 'warning');\n}\n\n@include checkbox-variant($selector: '.ix-invalid--required') {\n  @include define-checkbox-vars('unchecked', 'invalid');\n  @include define-checkbox-vars('checked', 'invalid');\n  @include define-checkbox-vars('mixed', 'invalid');\n}\n\n@include checkbox-variant($selector: '.ix-invalid') {\n  @include define-checkbox-vars('unchecked', 'invalid');\n  @include define-checkbox-vars('checked', 'invalid');\n  @include define-checkbox-vars('mixed', 'invalid');\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  button,\n  label,\n  input {\n    pointer-events: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\nimport { HookValidationLifecycle, IxFormComponent } from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Checkbox implements IxFormComponent<string> {\n  @Element() hostElement!: HTMLIxCheckboxElement;\n\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the checkbox component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the checkbox component\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * Label for the checkbox component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Checked state of the checkbox component\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /**\n   * Disabled state of the checkbox component\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Indeterminate state of the checkbox component\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  /**\n   * Required state of the checkbox component.\n   *\n   * If true, checkbox needs to be checked to be valid\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * Event emitted when the checked state of the checkbox changes\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the value of the checkbox changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the checkbox is blurred\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  private touched = false;\n\n  private readonly inputRef = makeRef<HTMLInputElement>((checkboxRef) => {\n    checkboxRef.checked = this.checked;\n  });\n\n  private setCheckedState(newChecked: boolean) {\n    this.checked = newChecked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  @Watch('checked')\n  onCheckedChange() {\n    this.touched = true;\n    this.updateFormInternalValue();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.valueChange.emit(this.value);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue() {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value ?? 'on');\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  /** @internal */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  @HookValidationLifecycle()\n  updateClassMappings() {\n    /** This function is intentionally empty */\n  }\n\n  private renderCheckmark() {\n    return (\n      <svg\n        width=\"18\"\n        height=\"18\"\n        viewBox=\"0 0 18 18\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {this.indeterminate && (\n          <Fragment>\n            <rect width=\"18\" height=\"18\" fill=\"transparent\" />\n            <rect\n              x=\"3\"\n              y=\"8\"\n              width=\"12\"\n              height=\"2\"\n              fill=\"var(--ix-checkbox-check-color)\"\n            />\n          </Fragment>\n        )}\n\n        {this.checked && (\n          <path\n            d=\"M3.65625 8.15625L8.4375 12.9375L14.625 3.9375\"\n            stroke=\"var(--ix-checkbox-check-color)\"\n            stroke-width=\"2\"\n          />\n        )}\n      </svg>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        aria-checked={a11yBoolean(this.checked)}\n        aria-disabled={a11yBoolean(this.disabled)}\n        role=\"checkbox\"\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n          indeterminate: this.indeterminate,\n        }}\n        onFocus={() => (this.touched = true)}\n        onBlur={() => this.ixBlur.emit()}\n      >\n        <label>\n          <input\n            aria-checked={a11yBoolean(this.checked)}\n            required={this.required}\n            disabled={this.disabled}\n            checked={this.checked}\n            ref={this.inputRef}\n            type=\"checkbox\"\n            onChange={() => this.setCheckedState(!this.checked)}\n          />\n          <button\n            disabled={this.disabled}\n            class={{\n              checked: this.checked,\n            }}\n            onClick={() => this.setCheckedState(!this.checked)}\n          >\n            {this.renderCheckmark()}\n          </button>\n          <ix-typography\n            format=\"label\"\n            textColor={this.disabled ? 'weak' : 'std'}\n          >\n            {this.label}\n            <slot></slot>\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAc,4xkB,iXCmCPC,EAAQ,MANrB,WAAAC,CAAAC,G,2SAmB2BC,KAAKC,MAAW,KAUDD,KAAOE,QAAY,MAKlCF,KAAQG,SAAY,MAKpBH,KAAaI,cAAY,MAOzBJ,KAAQK,SAAG,MAiB5BL,KAAOM,QAAG,MAEDN,KAAAO,SAAWC,GAA2BC,IACrDA,EAAYP,QAAUF,KAAKE,OAAO,GAmIrC,CAhIS,eAAAQ,CAAgBC,GACtBX,KAAKE,QAAUS,EACfX,KAAKY,cAAcC,KAAKb,KAAKE,Q,CAI/B,eAAAY,GACEd,KAAKM,QAAU,KACfN,KAAKe,yB,CAIP,aAAAC,GACEhB,KAAKiB,YAAYJ,KAAKb,KAAKC,M,CAG7B,iBAAAiB,GACElB,KAAKe,yB,CAGP,uBAAAA,G,MACE,GAAIf,KAAKE,QAAS,CAChBF,KAAKmB,cAAcC,cAAaC,EAAArB,KAAKC,SAAK,MAAAoB,SAAA,EAAAA,EAAI,K,KACzC,CACLrB,KAAKmB,cAAcC,aAAa,K,EAMpC,aAAAE,GACE,OAAOC,QAAQC,QAAQxB,KAAKE,Q,CAK9B,wBAAAuB,GACE,OAAOF,QAAQC,QAAQxB,KAAKmB,cAAcO,K,CAK5C,SAAAC,GACE,OAAOJ,QAAQC,QAAQxB,KAAKM,Q,CAI9B,mBAAAsB,G,CAIQ,eAAAC,GACN,OACEC,EAAA,OACEC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAELnC,KAAKI,eACJ0B,EAACM,EAAQ,KACPN,EAAM,QAAAC,MAAM,KAAKC,OAAO,KAAKE,KAAK,gBAClCJ,EACE,QAAAO,EAAE,IACFC,EAAE,IACFP,MAAM,KACNC,OAAO,IACPE,KAAK,oCAKVlC,KAAKE,SACJ4B,EACE,QAAAS,EAAE,gDACFC,OAAO,iCACM,qB,CAOvB,MAAAC,GACE,OACEX,EAACY,EAAI,CAAAC,IAAA,0DACWC,EAAY5C,KAAKE,SAAQ,gBACxB0C,EAAY5C,KAAKG,UAChC0C,KAAK,WACLC,MAAO,CACL3C,SAAUH,KAAKG,SACfD,QAASF,KAAKE,QACdE,cAAeJ,KAAKI,eAEtB2C,QAAS,IAAO/C,KAAKM,QAAU,KAC/B0C,OAAQ,IAAMhD,KAAKiD,OAAOpC,QAE1BiB,EAAA,SAAAa,IAAA,4CACEb,EACgB,SAAAa,IAAA,0DAAAC,EAAY5C,KAAKE,SAC/BG,SAAUL,KAAKK,SACfF,SAAUH,KAAKG,SACfD,QAASF,KAAKE,QACdgD,IAAKlD,KAAKO,SACV4C,KAAK,WACLC,SAAU,IAAMpD,KAAKU,iBAAiBV,KAAKE,WAE7C4B,EAAA,UAAAa,IAAA,2CACExC,SAAUH,KAAKG,SACf2C,MAAO,CACL5C,QAASF,KAAKE,SAEhBmD,QAAS,IAAMrD,KAAKU,iBAAiBV,KAAKE,UAEzCF,KAAK6B,mBAERC,EAAA,iBAAAa,IAAA,2CACEW,OAAO,QACPC,UAAWvD,KAAKG,SAAW,OAAS,OAEnCH,KAAKwD,MACN1B,EAAA,QAAAa,IAAA,+C,8JA3EVc,EAAA,CADCC,KAGA7D,EAAA8D,UAAA,4B","ignoreList":[]}

package/dist/siemens-ix/{p-f7bfd5f6.entry.js → p-781e0057.entry.js}

@@ -1,2 +1,2 @@
-import{r as a,c as t,h as e,H as r,g as o}from"./p-BNpBEtDH.js";import{g as i}from"./p-i60z1FJC.js";import{x as s}from"./p-CrTP-icT.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{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){a(this,e);this.logoutClick=t(this,"logoutClick",7);this.i18nLogout="Logout";this.showLogoutButton=true;this.showContextMenu=false;this.avatarElementId="ix-menu-avatar-id"}onSlotChange(){const a=this.hostElement.shadowRoot.querySelector("slot");if(!a){return}const t=i(a);this.showContextMenu=t.length!==0}render(){return e(r,{key:"3bcb9db9a5f7b6e2b949a1b78d31ac4307d55a21",slot:"ix-menu-avatar"},e("button",{key:"997f2a3ca9f419eb8618b7baecea9487fee4353a",class:"nav-item top-item avatar no-hover",title:this.top,id:this.avatarElementId,tabIndex:0},e("ix-avatar",{key:"9f16020bf51db6289cdda6ec9f9576d5d1e0f30a",image:this.image,initials:this.initials}),e("div",{key:"bb5bc3adb3b7ec2973e2212fc913423ae69d2796",class:"avatar-name"},e("span",{key:"efa4a3e92895392a7618db2f124228bb785717ae",class:"text-default-single",title:this.top},this.top),e("span",{key:"eff8ba846915852b97771f1610f62450496f8c33",class:"text-default-single",title:this.bottom},this.bottom))),e("ix-dropdown",{key:"51e2c74f032ef5960aa1b3491728545bd3d88557",trigger:this.hostElement,placement:"right-start",hidden:!this.showContextMenu&&!this.showLogoutButton,offset:{mainAxis:16}},e("slot",{key:"28605745ab13750eba6842c78e42fac4ac705a51",onSlotchange:()=>this.onSlotChange()}),this.showLogoutButton?e("ix-menu-avatar-item",{label:this.i18nLogout,icon:s,onClick:a=>{this.logoutClick.emit(a)}}):null))}get hostElement(){return o(this)}};n.style=l;export{n as ix_menu_avatar};
-//# sourceMappingURL=p-f7bfd5f6.entry.js.map
+import{r as t,c as a,h as e,H as r,g as o}from"./p-BNpBEtDH.js";import{g as i}from"./p-i60z1FJC.js";import{x as s}from"./p-CrTP-icT.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{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 d=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:"0de17572a27311bdac05540ef99db83d45805f75",slot:"ix-menu-avatar"},e("button",{key:"92f5318a7f2d858eb2c5de56dc2fb936e89287ec",class:"nav-item top-item avatar no-hover",title:this.top,id:this.avatarElementId,tabIndex:0},e("ix-avatar",{key:"467817b892981995dad63306d86a37c319667677",image:this.image,initials:this.initials}),e("div",{key:"25339aa123e84ed37d4d6733c571a4b9c542b3b0",class:"avatar-name"},e("span",{key:"b4be6b9c6821461b2c01679ed5343dc233441b7c",class:"text-default-single",title:this.top},this.top),e("span",{key:"1beaa9327403d4d8a5da0ca6a9ec0e546ee2172e",class:"text-default-single",title:this.bottom},this.bottom))),e("ix-dropdown",{key:"d5fcd99be86d4d13dad176354bfb7d8ba516c269",trigger:this.hostElement,placement:"right-start",hidden:!this.showContextMenu&&!this.showLogoutButton,offset:{mainAxis:16}},e("slot",{key:"dd3580e96699f31becd4c16705ee4275960c1442",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)}};d.style=l;export{d as ix_menu_avatar};
+//# sourceMappingURL=p-781e0057.entry.js.map

package/dist/siemens-ix/p-781e0057.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["menuAvatarCss","MenuAvatar","constructor","hostRef","this","i18nLogout","showLogoutButton","showContextMenu","avatarElementId","onSlotChange","slot","hostElement","shadowRoot","querySelector","elements","getSlottedElements","length","render","h","Host","key","class","title","top","id","tabIndex","image","initials","bottom","trigger","placement","hidden","offset","mainAxis","onSlotchange","label","icon","iconLogOut","onClick","e","logoutClick","emit"],"sources":["src/components/menu-avatar/menu-avatar.scss?tag=ix-menu-avatar&encapsulation=shadow","src/components/menu-avatar/menu-avatar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  margin-bottom: 0.5rem;\n  margin-right: 0.75rem;\n\n  .avatar {\n    all: unset;\n    box-sizing: border-box;\n\n    display: flex;\n    align-items: center;\n    height: 2.5rem;\n    width: 100%;\n    max-height: 2.5rem;\n    padding-left: 0.25rem;\n    margin-left: 0.41rem;\n    margin-right: 0.35rem;\n    transition: var(--theme-default-time);\n\n    .avatar-name {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      white-space: nowrap;\n      margin-left: $default-space;\n      line-height: 1.14;\n\n      .text-default-single {\n        color: var(--theme-nav-item-primary--color);\n        @include ellipsis;\n      }\n    }\n\n    border-radius: 1.25rem;\n\n    @include hover {\n      background-color: var(--theme-avatar-btn--background--hover);\n      color: var(--theme-avatar-btn--color--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-avatar-btn--background--active);\n      color: var(--theme-avatar-btn--color--active);\n    }\n  }\n\n  .avatar:focus-visible {\n    outline: 1px solid var(--theme-color-focus-bdr);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\nimport { iconLogOut } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-menu-avatar',\n  styleUrl: 'menu-avatar.scss',\n  shadow: true,\n})\nexport class MenuAvatar {\n  @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n  /**\n   * First line of text\n   */\n  @Prop() top?: string;\n\n  /**\n   * Second line of text\n   */\n  @Prop() bottom?: string;\n\n  /**\n   * Display a avatar image\n   */\n  @Prop() image?: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   */\n  @Prop() initials?: string;\n\n  /**\n   * Use for translation\n   */\n  @Prop() i18nLogout: string = 'Logout';\n\n  /**\n   *  Control the visibility of the logout button\n   */\n  @Prop() showLogoutButton: boolean = true;\n\n  /**\n   * Control the visibility of the dropdown menu\n   */\n  @State() showContextMenu: boolean = false;\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick!: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  onSlotChange() {\n    const slot = this.hostElement.shadowRoot!.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n  }\n\n  render() {\n    return (\n      <Host slot=\"ix-menu-avatar\">\n        <button\n          class=\"nav-item top-item avatar no-hover\"\n          title={this.top}\n          id={this.avatarElementId}\n          tabIndex={0}\n        >\n          <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n          <div class=\"avatar-name\">\n            <span class=\"text-default-single\" title={this.top}>\n              {this.top}\n            </span>\n            <span class=\"text-default-single\" title={this.bottom}>\n              {this.bottom}\n            </span>\n          </div>\n        </button>\n        <ix-dropdown\n          trigger={this.hostElement}\n          placement={'right-start'}\n          hidden={!this.showContextMenu && !this.showLogoutButton}\n          offset={{\n            mainAxis: 16,\n          }}\n        >\n          <slot onSlotchange={() => this.onSlotChange()}></slot>\n          {this.showLogoutButton ? (\n            <ix-menu-avatar-item\n              label={this.i18nLogout}\n              icon={iconLogOut}\n              onClick={(e) => {\n                this.logoutClick.emit(e);\n              }}\n            ></ix-menu-avatar-item>\n          ) : null}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAgB,g4D,MC0BTC,EAAU,MALvB,WAAAC,CAAAC,G,mDA+BUC,KAAUC,WAAW,SAKrBD,KAAgBE,iBAAY,KAK3BF,KAAeG,gBAAY,MAO5BH,KAAeI,gBAAG,mBAqD3B,CAnDC,YAAAC,GACE,MAAMC,EAAON,KAAKO,YAAYC,WAAYC,cAAc,QACxD,IAAKH,EAAM,CACT,M,CAEF,MAAMI,EAAWC,EAAmBL,GACpCN,KAAKG,gBAAkBO,EAASE,SAAW,C,CAG7C,MAAAC,GACE,OACEC,EAACC,EAAK,CAAAC,IAAA,2CAAAV,KAAK,kBACTQ,EAAA,UAAAE,IAAA,2CACEC,MAAM,oCACNC,MAAOlB,KAAKmB,IACZC,GAAIpB,KAAKI,gBACTiB,SAAU,GAEVP,EAAW,aAAAE,IAAA,2CAAAM,MAAOtB,KAAKsB,MAAOC,SAAUvB,KAAKuB,WAE7CT,EAAK,OAAAE,IAAA,2CAAAC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAMC,MAAM,sBAAsBC,MAAOlB,KAAKmB,KAC3CnB,KAAKmB,KAERL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,sBAAsBC,MAAOlB,KAAKwB,QAC3CxB,KAAKwB,UAIZV,EACE,eAAAE,IAAA,2CAAAS,QAASzB,KAAKO,YACdmB,UAAW,cACXC,QAAS3B,KAAKG,kBAAoBH,KAAKE,iBACvC0B,OAAQ,CACNC,SAAU,KAGZf,EAAM,QAAAE,IAAA,2CAAAc,aAAc,IAAM9B,KAAKK,iBAC9BL,KAAKE,iBACJY,EAAA,uBACEiB,MAAO/B,KAAKC,WACZ+B,KAAMC,EACNC,QAAUC,IACRnC,KAAKoC,YAAYC,KAAKF,EAAE,IAG1B,M","ignoreList":[]}

package/dist/siemens-ix/{p-2295246b.entry.js → p-78b7ce69.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as t,H as e,g as o}from"./p-BNpBEtDH.js";import{h as a}from"./p-i60z1FJC.js";const s=":host{display:flex;flex-direction:column;position:relative;padding:1.5rem 0rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{flex-grow:1;overflow:auto;padding-right:1.5rem;position:relative}:host .content-header.slotted{margin-bottom:1rem;padding-right:1.5rem}";const b=class{constructor(t){r(this,t);this.isContentHeaderSlotted=false}get contentHeaderSlot(){return this.hostElement.shadowRoot.querySelector(".content-header slot")}render(){return t(e,{key:"5ff3dde4c94bd5f40598a6b8fc9043ab2755c9a7"},t("div",{key:"cb2d5d8d011649e5f2cb67d8b7857b7bd096ca44",class:{"content-header":true,slotted:this.isContentHeaderSlotted}},t("slot",{key:"1a0c6b612ff4364e6bdd10b15745160925b61efd",name:"header",onSlotchange:()=>{this.isContentHeaderSlotted=a(this.contentHeaderSlot)}})),t("div",{key:"5eabaf6bcd0c33d982bd1b88862873383b58fae6",class:"content"},t("slot",{key:"25fa713021e9c01c08282da185c2fc14b6d06b3f"})))}get hostElement(){return o(this)}};b.style=s;export{b as ix_content};
-//# sourceMappingURL=p-2295246b.entry.js.map
+import{r,h as t,H as e,g as o}from"./p-BNpBEtDH.js";import{h as a}from"./p-i60z1FJC.js";const s=":host{display:flex;flex-direction:column;position:relative;padding:1.5rem 2rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{flex-grow:1;overflow:auto;position:relative}:host .content-header.slotted{margin-bottom:1rem}";const c=class{constructor(t){r(this,t);this.isContentHeaderSlotted=false}get contentHeaderSlot(){return this.hostElement.shadowRoot.querySelector(".content-header slot")}render(){return t(e,{key:"3c3c64e2754e169fb11710f049e434c52ad8f541"},t("div",{key:"4ccc370d1e12bdf3a8c2992c9d453002892ef948",class:{"content-header":true,slotted:this.isContentHeaderSlotted}},t("slot",{key:"b028f5424366302f93a8c873102b21ad619c35d1",name:"header",onSlotchange:()=>{this.isContentHeaderSlotted=a(this.contentHeaderSlot)}})),t("div",{key:"2a7fb716ca17249c9757d77f2774692e26851f39",class:"content"},t("slot",{key:"b3f6363475f45f36837120f2ecfda6aa4b751a09"})))}get hostElement(){return o(this)}};c.style=s;export{c as ix_content};
+//# sourceMappingURL=p-78b7ce69.entry.js.map

package/dist/siemens-ix/p-78b7ce69.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["contentCss","Content","constructor","hostRef","this","isContentHeaderSlotted","contentHeaderSlot","hostElement","shadowRoot","querySelector","render","h","Host","key","class","slotted","name","onSlotchange","hasSlottedElements"],"sources":["src/components/content/content.scss?tag=ix-content&encapsulation=shadow","src/components/content/content.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  padding: 1.5rem 2rem 0.25rem 2rem;\n\n  width: 100%;\n  height: 100%;\n\n  overflow: hidden;\n\n  .content {\n    flex-grow: 1;\n    overflow: auto;\n    position: relative;\n  }\n\n  .content-header.slotted {\n    margin-bottom: 1rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n/**\n * @slot header - Display content at the top of the content page\n */\n@Component({\n  tag: 'ix-content',\n  styleUrl: 'content.scss',\n  shadow: true,\n})\nexport class Content {\n  @Element() hostElement!: HTMLIxContentElement;\n\n  @State() isContentHeaderSlotted = false;\n\n  get contentHeaderSlot() {\n    return this.hostElement.shadowRoot!.querySelector(\n      '.content-header slot'\n    ) as HTMLSlotElement;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'content-header': true,\n            slotted: this.isContentHeaderSlotted,\n          }}\n        >\n          <slot\n            name=\"header\"\n            onSlotchange={() => {\n              this.isContentHeaderSlotted = hasSlottedElements(\n                this.contentHeaderSlot\n              );\n            }}\n          ></slot>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wFAAA,MAAMA,EAAa,0+B,MCoBNC,EAAO,MALpB,WAAAC,CAAAC,G,UAQWC,KAAsBC,uBAAG,KAgCnC,CA9BC,qBAAIC,GACF,OAAOF,KAAKG,YAAYC,WAAYC,cAClC,uB,CAIJ,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,iBAAkB,KAClBC,QAASX,KAAKC,yBAGhBM,EAAA,QAAAE,IAAA,2CACEG,KAAK,SACLC,aAAc,KACZb,KAAKC,uBAAyBa,EAC5Bd,KAAKE,kBACN,KAIPK,EAAK,OAAAE,IAAA,2CAAAC,MAAM,WACTH,EAAa,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/siemens-ix/p-78f99962.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["avatarCss","DefaultAvatar","props","initials","h","class","xmlns","width","height","viewBox","fill","id","d","AvatarImage","image","src","UserInfo","Fragment","onClick","event","preventDefault","userName","extra","Avatar","constructor","hostRef","this","isClosestApplicationHeader","hasSlottedElements","componentWillLoad","closest","closestElement","hostElement","slottedChanged","slotElement","resolveAvatarTrigger","Promise","resolve","reject","readTask","button","shadowRoot","querySelector","Error","onDropdownClick","target","dropdownElement","render","Host","slot","BaseButton","disabled","ghost","iconOval","icon","undefined","iconOnly","loading","outline","selected","type","variant","ref","trigger","e","username","onSlotchange","menuAvatarItemCss","MenuAvatarItem","dropdownItemRef","makeRef","getDropdownItemElement","waitForCurrent","key","label","itemClick","emit"],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n@import 'mixins/scrollbar';\n\n:host {\n  @include scrollbar();\n  display: flex;\n  position: relative;\n  width: fit-content;\n\n  .avatar {\n    display: flex;\n    align-items: center;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-avatar--background);\n      color: var(--theme-avatar--color);\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill:var(--theme-avatar--color);\n    }\n  }\n}\n\n:host {\n  .user-info {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    height: 2.5rem;\n    padding: 1rem;\n    width: 12.75rem;\n    min-width: 12.75rem;\n    max-width: 12.75rem;\n\n    gap: 1rem;\n\n    .avatar {\n      width: 2rem;\n      pointer-events: none;\n    }\n\n    .user {\n      display: flex;\n      position: relative;\n      flex-direction: column;\n      justify-content: center;\n      max-width: 10rem;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    .username {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .extra {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n}\n\n:host(.avatar-button) {\n  button {\n    @include btn-base;\n    padding: 0px;\n\n    border-radius: 100px !important;\n  }\n\n  @include btn-base-variant('invisible-primary', false);\n\n  .avatar {\n    transform: scale(0.8);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n  const { initials } = props;\n\n  if (initials) {\n    return <div class={'avatar-initials'}>{initials}</div>;\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nfunction AvatarImage(props: { image?: string; initials?: string }) {\n  return (\n    <div class=\"avatar\">\n      {props.image ? (\n        <img src={props.image} class=\"avatar-image\"></img>\n      ) : (\n        <DefaultAvatar initials={props.initials} />\n      )}\n    </div>\n  );\n}\n\nfunction UserInfo(props: {\n  image?: string;\n  initials?: string;\n  userName: string;\n  extra?: string;\n}) {\n  return (\n    <Fragment>\n      <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n        <AvatarImage image={props.image} initials={props.initials} />\n        <div class=\"user\">\n          <div class=\"username\">{props.userName}</div>\n          {props.extra && (\n            <ix-typography class=\"extra\" text-color={'soft'}>\n              {props.extra}\n            </ix-typography>\n          )}\n        </div>\n      </div>\n    </Fragment>\n  );\n}\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  @Element() hostElement!: HTMLIxAvatarElement;\n\n  /**\n   * Display an avatar image\n   *\n   */\n  @Prop() image?: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   */\n  @Prop() initials?: string;\n\n  /**\n   * If set an info card displaying the username will be placed inside the dropdown.\n   * Note: Only working if avatar is part of the ix-application-header\n   *\n   * @since 2.1.0\n   */\n  @Prop() username?: string;\n\n  /**\n   * Optional description text that will be displayed underneath the username.\n   * Note: Only working if avatar is part of the ix-application-header\n   *\n   * @since 2.1.0\n   */\n  @Prop() extra?: string;\n\n  @State() isClosestApplicationHeader = false;\n  @State() hasSlottedElements = false;\n\n  private slotElement?: HTMLSlotElement;\n  private dropdownElement?: HTMLIxDropdownElement;\n\n  componentWillLoad() {\n    const closest = closestElement('ix-application-header', this.hostElement);\n    this.isClosestApplicationHeader = closest !== null;\n  }\n\n  private async slottedChanged() {\n    this.hasSlottedElements = hasSlottedElements(this.slotElement);\n  }\n\n  private resolveAvatarTrigger() {\n    return new Promise<HTMLElement>((resolve, reject) => {\n      readTask(() => {\n        const button = this.hostElement.shadowRoot!.querySelector('button');\n        if (button) {\n          resolve(button);\n        } else {\n          reject(new Error('ix-avatar - trigger element not found'));\n        }\n      });\n    });\n  }\n\n  private onDropdownClick(event: MouseEvent) {\n    if (event.target === this.dropdownElement) {\n      event.preventDefault();\n    }\n  }\n\n  render() {\n    if (this.isClosestApplicationHeader) {\n      return (\n        <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n          <BaseButton\n            disabled={false}\n            ghost={true}\n            iconOval={false}\n            icon={undefined}\n            iconOnly={false}\n            loading={false}\n            outline={false}\n            selected={false}\n            type=\"button\"\n            variant=\"primary\"\n          >\n            <AvatarImage image={this.image} initials={this.initials} />\n          </BaseButton>\n          <ix-dropdown\n            ref={(ref) => (this.dropdownElement = ref as HTMLIxDropdownElement)}\n            trigger={this.resolveAvatarTrigger()}\n            class=\"avatar-dropdown\"\n            onClick={(e) => this.onDropdownClick(e)}\n          >\n            {this.username && (\n              <Fragment>\n                <UserInfo\n                  extra={this.extra}\n                  image={this.image}\n                  initials={this.initials}\n                  userName={this.username}\n                />\n                {this.hasSlottedElements && (\n                  <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n                )}\n              </Fragment>\n            )}\n            <slot\n              onSlotchange={() => this.slottedChanged()}\n              ref={(ref) => (this.slotElement = ref as HTMLSlotElement)}\n            ></slot>\n          </ix-dropdown>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <AvatarImage image={this.image} initials={this.initials} />\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  color: var(--theme-color-std-text);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-menu-avatar-item',\n  styleUrl: 'menu-avatar-item.scss',\n  shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxMenuAvatarItemElement;\n\n  /**\n   * Avatar dropdown icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Avatar dropdown label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Avatar dropdown item clicked\n   */\n  @Event() itemClick!: EventEmitter<MouseEvent>;\n\n  private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement() {\n    return this.dropdownItemRef.waitForCurrent();\n  }\n\n  render() {\n    return (\n      <ix-dropdown-item\n        ref={this.dropdownItemRef}\n        icon={this.icon}\n        label={this.label}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["avatarCss","DefaultAvatar","props","initials","h","class","xmlns","width","height","viewBox","fill","id","d","AvatarImage","image","src","UserInfo","Fragment","onClick","event","preventDefault","userName","extra","Avatar","constructor","hostRef","this","isClosestApplicationHeader","hasSlottedElements","componentWillLoad","closest","closestElement","hostElement","slottedChanged","slotElement","resolveAvatarTrigger","Promise","resolve","reject","readTask","button","shadowRoot","querySelector","Error","onDropdownClick","target","dropdownElement","render","Host","slot","BaseButton","disabled","ghost","iconOval","icon","undefined","iconOnly","loading","outline","selected","type","variant","ref","trigger","e","username","onSlotchange","menuAvatarItemCss","MenuAvatarItem","dropdownItemRef","makeRef","getDropdownItemElement","waitForCurrent","key","label","itemClick","emit"],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n@import 'mixins/scrollbar';\n\n:host {\n  @include scrollbar();\n  display: flex;\n  position: relative;\n  width: fit-content;\n\n  .avatar {\n    display: flex;\n    align-items: center;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-avatar--background);\n      color: var(--theme-avatar--color);\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill:var(--theme-avatar--color);\n    }\n  }\n}\n\n:host {\n  .user-info {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    height: 2.5rem;\n    padding: 1rem;\n    width: 12.75rem;\n    min-width: 12.75rem;\n    max-width: 12.75rem;\n\n    gap: 1rem;\n\n    .avatar {\n      width: 2rem;\n      pointer-events: none;\n    }\n\n    .user {\n      display: flex;\n      position: relative;\n      flex-direction: column;\n      justify-content: center;\n      max-width: 10rem;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    .username {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .extra {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n}\n\n:host(.avatar-button) {\n  button {\n    @include btn-base;\n    padding: 0px;\n\n    border-radius: 100px !important;\n  }\n\n  @include btn-base-variant('invisible-primary', false);\n\n  .avatar {\n    transform: scale(0.8);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n  const { initials } = props;\n\n  if (initials) {\n    return <div class={'avatar-initials'}>{initials}</div>;\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nfunction AvatarImage(props: { image?: string; initials?: string }) {\n  return (\n    <div class=\"avatar\">\n      {props.image ? (\n        <img src={props.image} class=\"avatar-image\"></img>\n      ) : (\n        <DefaultAvatar initials={props.initials} />\n      )}\n    </div>\n  );\n}\n\nfunction UserInfo(props: {\n  image?: string;\n  initials?: string;\n  userName: string;\n  extra?: string;\n}) {\n  return (\n    <Fragment>\n      <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n        <AvatarImage image={props.image} initials={props.initials} />\n        <div class=\"user\">\n          <div class=\"username\">{props.userName}</div>\n          {props.extra && (\n            <ix-typography class=\"extra\" text-color={'soft'}>\n              {props.extra}\n            </ix-typography>\n          )}\n        </div>\n      </div>\n    </Fragment>\n  );\n}\n\n@Component({\n  tag: 'ix-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  @Element() hostElement!: HTMLIxAvatarElement;\n\n  /**\n   * Display an avatar image\n   *\n   */\n  @Prop() image?: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   */\n  @Prop() initials?: string;\n\n  /**\n   * If set an info card displaying the username will be placed inside the dropdown.\n   * Note: Only working if avatar is part of the ix-application-header\n   */\n  @Prop() username?: string;\n\n  /**\n   * Optional description text that will be displayed underneath the username.\n   * Note: Only working if avatar is part of the ix-application-header\n   */\n  @Prop() extra?: string;\n\n  @State() isClosestApplicationHeader = false;\n  @State() hasSlottedElements = false;\n\n  private slotElement?: HTMLSlotElement;\n  private dropdownElement?: HTMLIxDropdownElement;\n\n  componentWillLoad() {\n    const closest = closestElement('ix-application-header', this.hostElement);\n    this.isClosestApplicationHeader = closest !== null;\n  }\n\n  private async slottedChanged() {\n    this.hasSlottedElements = hasSlottedElements(this.slotElement);\n  }\n\n  private resolveAvatarTrigger() {\n    return new Promise<HTMLElement>((resolve, reject) => {\n      readTask(() => {\n        const button = this.hostElement.shadowRoot!.querySelector('button');\n        if (button) {\n          resolve(button);\n        } else {\n          reject(new Error('ix-avatar - trigger element not found'));\n        }\n      });\n    });\n  }\n\n  private onDropdownClick(event: MouseEvent) {\n    if (event.target === this.dropdownElement) {\n      event.preventDefault();\n    }\n  }\n\n  render() {\n    if (this.isClosestApplicationHeader) {\n      return (\n        <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n          <BaseButton\n            disabled={false}\n            ghost={true}\n            iconOval={false}\n            icon={undefined}\n            iconOnly={false}\n            loading={false}\n            outline={false}\n            selected={false}\n            type=\"button\"\n            variant=\"primary\"\n          >\n            <AvatarImage image={this.image} initials={this.initials} />\n          </BaseButton>\n          <ix-dropdown\n            ref={(ref) => (this.dropdownElement = ref as HTMLIxDropdownElement)}\n            trigger={this.resolveAvatarTrigger()}\n            class=\"avatar-dropdown\"\n            onClick={(e) => this.onDropdownClick(e)}\n          >\n            {this.username && (\n              <Fragment>\n                <UserInfo\n                  extra={this.extra}\n                  image={this.image}\n                  initials={this.initials}\n                  userName={this.username}\n                />\n                {this.hasSlottedElements && (\n                  <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n                )}\n              </Fragment>\n            )}\n            <slot\n              onSlotchange={() => this.slottedChanged()}\n              ref={(ref) => (this.slotElement = ref as HTMLSlotElement)}\n            ></slot>\n          </ix-dropdown>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <AvatarImage image={this.image} initials={this.initials} />\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  color: var(--theme-color-std-text);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-menu-avatar-item',\n  styleUrl: 'menu-avatar-item.scss',\n  shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxMenuAvatarItemElement;\n\n  /**\n   * Avatar dropdown icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Avatar dropdown label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Avatar dropdown item clicked\n   */\n  @Event() itemClick!: EventEmitter<MouseEvent>;\n\n  private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement() {\n    return this.dropdownItemRef.waitForCurrent();\n  }\n\n  render() {\n    return (\n      <ix-dropdown-item\n        ref={this.dropdownItemRef}\n        icon={this.icon}\n        label={this.label}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/{p-f3f6e45d.entry.js → p-827653a3.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as i,H as s,g as o}from"./p-BNpBEtDH.js";import{a as r}from"./p-Ou74PMQs.js";import{c as a}from"./p--2LOMK-5.js";import{c as n}from"./p-CX81WQtk.js";import{q as h}from"./p-CrTP-icT.js";import"./p-BdCnOrqW.js";function c(e,t,{debounceTimeEnter:i,debounceTimeLeave:s}={debounceTimeEnter:0,debounceTimeLeave:500}){let o;let r;return{onEnter:()=>{clearTimeout(r);o=setTimeout((()=>{e()}),i)},onLeave:()=>{clearTimeout(o);r=setTimeout((()=>{t()}),s)}}}const d=":host{display:flex;flex-direction:column;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 .category{display:flex;position:relative;align-items:center;width:100%;height:100%}:host .category-text{width:100%;padding-right:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .category-chevron{margin-left:auto;margin-right:0;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0;transition:var(--theme-default-time) max-height ease-in-out}:host .menu-items--expanded{max-height:999999999px;padding:0.25rem 0 0.25rem 1.625rem}:host .menu-items--collapsed{display:none}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;padding-left:0.125rem;min-width:256px}:host ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host(.expanded){background-color:var(--theme-color-ghost--active)}:host ::slotted(a[href]){text-decoration:none !important}";const l=40;const m=150;const u=class{constructor(i){e(this,i);this.closeOtherCategories=t(this,"closeOtherCategories",7);this.menuExpand=false;this.showItems=false;this.showDropdown=false;this.nestedItems=[];this.enterLeaveDebounce=c((()=>{this.onPointerEnter()}),(()=>{this.onPointerLeave()}))}isNestedItemActive(){return this.getNestedItems().some((e=>e.active))}getNestedItems(){return Array.from(this.hostElement.querySelectorAll(":scope ix-menu-item"))}getNestedItemsHeight(){const e=this.getNestedItems();return e.length*l}onExpandCategory(e){if(e){this.animateFadeIn()}else{this.animateFadeOut()}}animateFadeOut(){const e=25;r({targets:this.menuItemsContainer,duration:m,easing:"easeInSine",opacity:[1,0],maxHeight:[this.getNestedItemsHeight()+l,0],complete:()=>{setTimeout((()=>{this.showItems=false;this.showDropdown=false}),m+e)}})}animateFadeIn(){r({targets:this.menuItemsContainer,duration:m,easing:"easeInSine",opacity:[0,1],maxHeight:[0,this.getNestedItemsHeight()+l],begin:()=>{this.showItems=true;this.showDropdown=false}})}onPointerEnter(){var e;if((e=this.ixMenu)===null||e===void 0?void 0:e.expand){return}this.closeOtherCategories.emit();this.showDropdown=true}onPointerLeave(){this.showDropdown=false}onCategoryClick(e){var t;e.stopPropagation();if((t=this.ixMenu)===null||t===void 0?void 0:t.expand){this.onExpandCategory(!this.showItems);return}}onNestedItemsChanged(e){const t=this.nestedItems.length;this.nestedItems=this.getNestedItems();if(this.showItems&&this.menuItemsContainer&&t!==this.nestedItems.length){this.menuItemsContainer.style.maxHeight=`${this.getNestedItemsHeight()+l}px`}if(!this.menuExpand||this.showItems||!e){return}for(const t of e!==null&&e!==void 0?e:[]){if(t.attributeName==="class"&&t.target instanceof HTMLElement&&t.target.classList.contains("active")){this.showItems=true;this.onExpandCategory(true);return}}}isCategoryItemListVisible(){return this.menuExpand&&(this.showItems||this.isNestedItemActive())}componentWillLoad(){const e=a(this.hostElement);if(!e){throw Error("ix-menu-category can only be used as a child of ix-menu")}this.ixMenu=e;this.menuExpand=this.ixMenu.expand;this.showItems=this.isCategoryItemListVisible()}componentDidLoad(){var e;this.observer=n((e=>this.onNestedItemsChanged(e)));this.observer.observe(this.hostElement,{attributes:true,childList:true,subtree:true});requestAnimationFrame((()=>{this.onNestedItemsChanged()}));(e=this.ixMenu)===null||e===void 0?void 0:e.addEventListener("expandChange",(({detail:e})=>{this.menuExpand=e;if(!e){this.clearMenuItemStyles()}this.showItems=this.isCategoryItemListVisible()}))}clearMenuItemStyles(){var e,t;(e=this.menuItemsContainer)===null||e===void 0?void 0:e.style.removeProperty("max-height");(t=this.menuItemsContainer)===null||t===void 0?void 0:t.style.removeProperty("opacity")}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){return i(s,{key:"571bcfb41185abbb0507273605c92c808c6d5153",class:{expanded:this.showItems},onPointerEnter:()=>{this.enterLeaveDebounce.onEnter()},onPointerLeave:e=>{if(e.pointerType==="touch"){return}this.enterLeaveDebounce.onLeave()}},i("ix-menu-item",{key:"8bccb98e2774f6ab46fa42ef6ef349464940dd2f",class:"category-parent",active:this.isNestedItemActive(),notifications:this.notifications,icon:this.icon,onClick:e=>this.onCategoryClick(e),onFocus:()=>this.onPointerEnter(),isCategory:true},i("div",{key:"6b292422fa8e7ffb5fe572bef0ed94d89d2c9e15",class:"category"},i("div",{key:"6c2ff8cf81035e13dcdbc0e450a99fb6397951c8",class:"category-text"},this.label),i("ix-icon",{key:"8f2e7518ab754635fbadd82d54b93e441917ce7a",name:h,class:{"category-chevron":true,"category-chevron--open":this.showItems}}))),i("div",{key:"b2f01026fcd4893f9b43ee83144f4e978f805358",ref:e=>this.menuItemsContainer=e,class:{"menu-items":true,"menu-items--expanded":this.showItems,"menu-items--collapsed":!this.showItems}},this.showItems?i("slot",null):null),i("ix-dropdown",{key:"5c07087f31baea26b2d7f170e9166f7758f59c0a",closeBehavior:"both",show:this.showDropdown,onShowChanged:({detail:e})=>{this.showDropdown=e},class:"category-dropdown",anchor:this.hostElement,placement:"right-start",offset:{mainAxis:3},onClick:e=>{if(e.target instanceof HTMLElement){if(e.target.tagName==="IX-MENU-ITEM"){this.showDropdown=false}else{e.preventDefault()}}}},i("ix-dropdown-item",{key:"58082df65e185ce432b3d901c4c62894bd594790",class:"category-dropdown-header"},i("ix-typography",{key:"a0effbd7404653428b6197652943b7a6be2cd82f",format:"label",bold:true,textColor:"std"},this.label)),i("ix-divider",{key:"52a6bd0499b16717a27dc189f170fc1f7d91043a"}),i("slot",{key:"67e00f22fc9ae4cde06408c87357483666201723"})))}get hostElement(){return o(this)}};u.style=d;export{u as ix_menu_category};
-//# sourceMappingURL=p-f3f6e45d.entry.js.map
+import{r as e,c as t,h as i,H as s,g as o}from"./p-BNpBEtDH.js";import{a as r}from"./p-Ou74PMQs.js";import{c as a}from"./p--2LOMK-5.js";import{c as n}from"./p-CX81WQtk.js";import{q as h}from"./p-CrTP-icT.js";import"./p-BdCnOrqW.js";function c(e,t,{debounceTimeEnter:i,debounceTimeLeave:s}={debounceTimeEnter:0,debounceTimeLeave:500}){let o;let r;return{onEnter:()=>{clearTimeout(r);o=setTimeout((()=>{e()}),i)},onLeave:()=>{clearTimeout(o);r=setTimeout((()=>{t()}),s)}}}const d=":host{display:flex;flex-direction:column;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 .category{display:flex;position:relative;align-items:center;width:100%;height:100%}:host .category-text{width:100%;padding-right:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .category-chevron{margin-left:auto;margin-right:0;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0;transition:var(--theme-default-time) max-height ease-in-out}:host .menu-items--expanded{max-height:999999999px;padding:0.25rem 0 0.25rem 1.625rem}:host .menu-items--collapsed{display:none}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;padding-left:0.125rem;min-width:256px}:host ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host(.expanded){background-color:var(--theme-color-ghost--active)}:host ::slotted(a[href]){text-decoration:none !important}";const l=40;const m=150;const u=class{constructor(i){e(this,i);this.closeOtherCategories=t(this,"closeOtherCategories",7);this.menuExpand=false;this.showItems=false;this.showDropdown=false;this.nestedItems=[];this.enterLeaveDebounce=c((()=>{this.onPointerEnter()}),(()=>{this.onPointerLeave()}))}isNestedItemActive(){return this.getNestedItems().some((e=>e.active))}getNestedItems(){return Array.from(this.hostElement.querySelectorAll(":scope ix-menu-item"))}getNestedItemsHeight(){const e=this.getNestedItems();return e.length*l}onExpandCategory(e){if(e){this.animateFadeIn()}else{this.animateFadeOut()}}animateFadeOut(){const e=25;r({targets:this.menuItemsContainer,duration:m,easing:"easeInSine",opacity:[1,0],maxHeight:[this.getNestedItemsHeight()+l,0],complete:()=>{setTimeout((()=>{this.showItems=false;this.showDropdown=false}),m+e)}})}animateFadeIn(){r({targets:this.menuItemsContainer,duration:m,easing:"easeInSine",opacity:[0,1],maxHeight:[0,this.getNestedItemsHeight()+l],begin:()=>{this.showItems=true;this.showDropdown=false}})}onPointerEnter(){var e;if((e=this.ixMenu)===null||e===void 0?void 0:e.expand){return}this.closeOtherCategories.emit();this.showDropdown=true}onPointerLeave(){this.showDropdown=false}onCategoryClick(e){var t;e.stopPropagation();if((t=this.ixMenu)===null||t===void 0?void 0:t.expand){this.onExpandCategory(!this.showItems);return}}onNestedItemsChanged(e){const t=this.nestedItems.length;this.nestedItems=this.getNestedItems();if(this.showItems&&this.menuItemsContainer&&t!==this.nestedItems.length){this.menuItemsContainer.style.maxHeight=`${this.getNestedItemsHeight()+l}px`}if(!this.menuExpand||this.showItems||!e){return}for(const t of e!==null&&e!==void 0?e:[]){if(t.attributeName==="class"&&t.target instanceof HTMLElement&&t.target.classList.contains("active")){this.showItems=true;this.onExpandCategory(true);return}}}isCategoryItemListVisible(){return this.menuExpand&&(this.showItems||this.isNestedItemActive())}componentWillLoad(){const e=a(this.hostElement);if(!e){throw Error("ix-menu-category can only be used as a child of ix-menu")}this.ixMenu=e;this.menuExpand=this.ixMenu.expand;this.showItems=this.isCategoryItemListVisible()}componentDidLoad(){var e;this.observer=n((e=>this.onNestedItemsChanged(e)));this.observer.observe(this.hostElement,{attributes:true,childList:true,subtree:true});requestAnimationFrame((()=>{this.onNestedItemsChanged()}));(e=this.ixMenu)===null||e===void 0?void 0:e.addEventListener("expandChange",(({detail:e})=>{this.menuExpand=e;if(!e){this.clearMenuItemStyles()}this.showItems=this.isCategoryItemListVisible()}))}clearMenuItemStyles(){var e,t;(e=this.menuItemsContainer)===null||e===void 0?void 0:e.style.removeProperty("max-height");(t=this.menuItemsContainer)===null||t===void 0?void 0:t.style.removeProperty("opacity")}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){return i(s,{key:"d72ef297d80ee26065129e05a4ce8327892efd93",class:{expanded:this.showItems},onPointerEnter:()=>{this.enterLeaveDebounce.onEnter()},onPointerLeave:e=>{if(e.pointerType==="touch"){return}this.enterLeaveDebounce.onLeave()}},i("ix-menu-item",{key:"fa772d59cc0dbbf554287fdd351b650288c8253d",class:"category-parent",active:this.isNestedItemActive(),notifications:this.notifications,icon:this.icon,onClick:e=>this.onCategoryClick(e),onFocus:()=>this.onPointerEnter(),isCategory:true},i("div",{key:"746cbb90fbec01530029523a49a9f0192086d701",class:"category"},i("div",{key:"201db5723f9e97b8e2c98f39ea7afc4480856528",class:"category-text"},this.label),i("ix-icon",{key:"5968ee754cc97aaf4947a003bf0536c09e9a156a",name:h,class:{"category-chevron":true,"category-chevron--open":this.showItems}}))),i("div",{key:"26894105c6d8355c957e30ab622658570aa62daf",ref:e=>this.menuItemsContainer=e,class:{"menu-items":true,"menu-items--expanded":this.showItems,"menu-items--collapsed":!this.showItems}},this.showItems?i("slot",null):null),i("ix-dropdown",{key:"708a0e2a15b0c67612981c84c8b854a95289a7c6",closeBehavior:"both",show:this.showDropdown,onShowChanged:({detail:e})=>{this.showDropdown=e},class:"category-dropdown",anchor:this.hostElement,placement:"right-start",offset:{mainAxis:3},onClick:e=>{if(e.target instanceof HTMLElement){if(e.target.tagName==="IX-MENU-ITEM"){this.showDropdown=false}else{e.preventDefault()}}}},i("ix-dropdown-item",{key:"7a95a0c12b475aae1842ddabf1bb0c8e1bbfd8b0",class:"category-dropdown-header"},i("ix-typography",{key:"ed99df5df58194920ea6389ebc1db8cf1df80676",format:"label",bold:true,textColor:"std"},this.label)),i("ix-divider",{key:"665617271f5a9864d9b98756f484a414f2eac4fe"}),i("slot",{key:"a61911819a98287b91e4d37b12799148c5a51adf"})))}get hostElement(){return o(this)}};u.style=d;export{u as ix_menu_category};
+//# sourceMappingURL=p-827653a3.entry.js.map

package/dist/siemens-ix/p-827653a3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createEnterLeaveDebounce","enterCallback","leaveCallback","debounceTimeEnter","debounceTimeLeave","enterTimeout","leaveTimeout","onEnter","clearTimeout","setTimeout","onLeave","menuCategoryCss","DefaultIxMenuItemHeight","DefaultAnimationTimeout","MenuCategory","constructor","hostRef","this","menuExpand","showItems","showDropdown","nestedItems","enterLeaveDebounce","onPointerEnter","onPointerLeave","isNestedItemActive","getNestedItems","some","item","active","Array","from","hostElement","querySelectorAll","getNestedItemsHeight","items","length","onExpandCategory","animateFadeIn","animateFadeOut","slotHideThresholdMs","anime","targets","menuItemsContainer","duration","easing","opacity","maxHeight","complete","begin","_a","ixMenu","expand","closeOtherCategories","emit","onCategoryClick","e","stopPropagation","onNestedItemsChanged","mutations","oldNestedItemsLength","style","mutation","attributeName","target","HTMLElement","classList","contains","isCategoryItemListVisible","componentWillLoad","closestMenu","closestIxMenu","Error","componentDidLoad","observer","createMutationObserver","observe","attributes","childList","subtree","requestAnimationFrame","addEventListener","detail","clearMenuItemStyles","removeProperty","_b","disconnectedCallback","disconnect","render","h","Host","key","class","expanded","event","pointerType","notifications","icon","onClick","onFocus","isCategory","label","name","iconChevronDownSmall","ref","closeBehavior","show","onShowChanged","dropdownShown","anchor","placement","offset","mainAxis","tagName","preventDefault","format","bold","textColor"],"sources":["src/components/menu-category/enter-leave.ts","src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","src/components/menu-category/menu-category.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 */\nexport function createEnterLeaveDebounce(\n  enterCallback: Function,\n  leaveCallback: Function,\n  {\n    debounceTimeEnter,\n    debounceTimeLeave,\n  }: {\n    debounceTimeEnter: number;\n    debounceTimeLeave: number;\n  } = {\n    debounceTimeEnter: 0,\n    debounceTimeLeave: 500,\n  }\n) {\n  let enterTimeout: NodeJS.Timeout;\n  let leaveTimeout: NodeJS.Timeout;\n\n  return {\n    onEnter: () => {\n      clearTimeout(leaveTimeout);\n      enterTimeout = setTimeout(() => {\n        enterCallback();\n      }, debounceTimeEnter);\n    },\n    onLeave: () => {\n      clearTimeout(enterTimeout);\n      leaveTimeout = setTimeout(() => {\n        leaveCallback();\n      }, debounceTimeLeave);\n    },\n  };\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  .category {\n    display: flex;\n    position: relative;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n  }\n\n  .category-text {\n    width: 100%;\n    padding-right: 0.25rem;\n    @include ellipsis;\n  }\n\n  .category-chevron {\n    margin-left: auto;\n    margin-right: 0;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .category-chevron--open {\n    transform: rotate(-180deg);\n  }\n\n  .menu-items {\n    overflow: hidden;\n    max-height: 0;\n    transition: var(--theme-default-time) max-height ease-in-out;\n  }\n\n  .menu-items--expanded {\n    max-height: 999999999px;\n    padding: 0.25rem 0 0.25rem 1.625rem;\n  }\n\n  .menu-items--collapsed {\n    display: none;\n  }\n\n  .category-dropdown {\n    ::slotted(ix-menu-item) {\n      --ix-menu-item-height: 2.5rem;\n    }\n  }\n\n  .category-dropdown-header {\n    pointer-events: none;\n    padding-left: 0.125rem;\n    min-width: 256px;\n  }\n\n  ::slotted(ix-menu-item) {\n    --ix-menu-item-height: 2.5rem;\n  }\n}\n\n:host(.expanded) {\n  background-color: var(--theme-color-ghost--active);\n}\n\n:host {\n  ::slotted(a[href]) {\n    text-decoration: none !important;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\nimport { iconChevronDownSmall } from '@siemens/ix-icons/icons';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n@Component({\n  tag: 'ix-menu-category',\n  styleUrl: 'menu-category.scss',\n  shadow: true,\n})\nexport class MenuCategory {\n  @Element() hostElement!: HTMLIxMenuCategoryElement;\n\n  /**\n   * Display name of the category\n   */\n  @Prop() label?: string;\n\n  /**\n   * Icon of the category\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Show notification count on the category\n   */\n  @Prop() notifications?: number;\n\n  /** @internal */\n  // eslint-disable-next-line @stencil-community/decorators-style\n  @Event({ bubbles: true, cancelable: true })\n  closeOtherCategories!: EventEmitter;\n\n  @State() menuExpand = false;\n  @State() showItems = false;\n  @State() showDropdown = false;\n  @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n  private observer?: MutationObserver;\n  private menuItemsContainer?: HTMLDivElement;\n  private ixMenu?: HTMLIxMenuElement;\n\n  private enterLeaveDebounce = createEnterLeaveDebounce(\n    () => {\n      this.onPointerEnter();\n    },\n    () => {\n      this.onPointerLeave();\n    }\n  );\n\n  private isNestedItemActive() {\n    return this.getNestedItems().some((item) => item.active);\n  }\n\n  private getNestedItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(':scope ix-menu-item')\n    ) as HTMLIxMenuItemElement[];\n  }\n\n  private getNestedItemsHeight() {\n    const items = this.getNestedItems();\n\n    return items.length * DefaultIxMenuItemHeight;\n  }\n\n  private onExpandCategory(showItems: boolean) {\n    if (showItems) {\n      this.animateFadeIn();\n    } else {\n      this.animateFadeOut();\n    }\n  }\n\n  private animateFadeOut() {\n    const slotHideThresholdMs = 25;\n    anime({\n      targets: this.menuItemsContainer,\n      duration: DefaultAnimationTimeout,\n      easing: 'easeInSine',\n      opacity: [1, 0],\n      maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n      complete: () => {\n        setTimeout(() => {\n          this.showItems = false;\n          this.showDropdown = false;\n        }, DefaultAnimationTimeout + slotHideThresholdMs);\n      },\n    });\n  }\n\n  private animateFadeIn() {\n    anime({\n      targets: this.menuItemsContainer,\n      duration: DefaultAnimationTimeout,\n      easing: 'easeInSine',\n      opacity: [0, 1],\n      maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n      begin: () => {\n        this.showItems = true;\n        this.showDropdown = false;\n      },\n    });\n  }\n\n  private onPointerEnter() {\n    if (this.ixMenu?.expand) {\n      return;\n    }\n    this.closeOtherCategories.emit();\n    this.showDropdown = true;\n  }\n\n  @Listen('closeOtherCategories', { target: 'window' })\n  private onPointerLeave() {\n    this.showDropdown = false;\n  }\n\n  private onCategoryClick(e: MouseEvent) {\n    e.stopPropagation();\n    if (this.ixMenu?.expand) {\n      this.onExpandCategory(!this.showItems);\n      return;\n    }\n  }\n\n  private onNestedItemsChanged(mutations?: MutationRecord[]) {\n    const oldNestedItemsLength = this.nestedItems.length;\n    this.nestedItems = this.getNestedItems();\n\n    if (\n      this.showItems &&\n      this.menuItemsContainer &&\n      oldNestedItemsLength !== this.nestedItems.length\n    ) {\n      this.menuItemsContainer.style.maxHeight = `${\n        this.getNestedItemsHeight() + DefaultIxMenuItemHeight\n      }px`;\n    }\n\n    if (!this.menuExpand || this.showItems || !mutations) {\n      return;\n    }\n\n    for (const mutation of mutations ?? []) {\n      if (\n        mutation.attributeName === 'class' &&\n        mutation.target instanceof HTMLElement &&\n        mutation.target.classList.contains('active')\n      ) {\n        this.showItems = true;\n        this.onExpandCategory(true);\n        return;\n      }\n    }\n  }\n\n  private isCategoryItemListVisible() {\n    return this.menuExpand && (this.showItems || this.isNestedItemActive());\n  }\n\n  componentWillLoad() {\n    const closestMenu = closestIxMenu(this.hostElement);\n    if (!closestMenu) {\n      throw Error('ix-menu-category can only be used as a child of ix-menu');\n    }\n    this.ixMenu = closestMenu;\n\n    this.menuExpand = this.ixMenu.expand;\n    this.showItems = this.isCategoryItemListVisible();\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver((mutations: MutationRecord[]) =>\n      this.onNestedItemsChanged(mutations)\n    );\n\n    this.observer.observe(this.hostElement, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n\n    requestAnimationFrame(() => {\n      this.onNestedItemsChanged();\n    });\n\n    this.ixMenu?.addEventListener(\n      'expandChange',\n      ({ detail: menuExpand }: CustomEvent<boolean>) => {\n        this.menuExpand = menuExpand;\n        if (!menuExpand) {\n          this.clearMenuItemStyles();\n        }\n        this.showItems = this.isCategoryItemListVisible();\n      }\n    );\n  }\n\n  clearMenuItemStyles() {\n    this.menuItemsContainer?.style.removeProperty('max-height');\n    this.menuItemsContainer?.style.removeProperty('opacity');\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.showItems,\n        }}\n        onPointerEnter={() => {\n          this.enterLeaveDebounce.onEnter();\n        }}\n        onPointerLeave={(event: PointerEvent) => {\n          if (event.pointerType === 'touch') {\n            return;\n          }\n          this.enterLeaveDebounce.onLeave();\n        }}\n      >\n        <ix-menu-item\n          class={'category-parent'}\n          active={this.isNestedItemActive()}\n          notifications={this.notifications}\n          icon={this.icon}\n          onClick={(e) => this.onCategoryClick(e)}\n          onFocus={() => this.onPointerEnter()}\n          isCategory\n        >\n          <div class=\"category\">\n            <div class=\"category-text\">{this.label}</div>\n            <ix-icon\n              name={iconChevronDownSmall}\n              class={{\n                'category-chevron': true,\n                'category-chevron--open': this.showItems,\n              }}\n            ></ix-icon>\n          </div>\n        </ix-menu-item>\n        <div\n          ref={(ref) => (this.menuItemsContainer = ref!)}\n          class={{\n            'menu-items': true,\n            'menu-items--expanded': this.showItems,\n            'menu-items--collapsed': !this.showItems,\n          }}\n        >\n          {this.showItems ? <slot></slot> : null}\n        </div>\n        <ix-dropdown\n          closeBehavior={'both'}\n          show={this.showDropdown}\n          onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n            this.showDropdown = dropdownShown;\n          }}\n          class={'category-dropdown'}\n          anchor={this.hostElement}\n          placement=\"right-start\"\n          offset={{\n            mainAxis: 3,\n          }}\n          onClick={(e) => {\n            if (e.target instanceof HTMLElement) {\n              if (e.target.tagName === 'IX-MENU-ITEM') {\n                this.showDropdown = false;\n              } else {\n                e.preventDefault();\n              }\n            }\n          }}\n        >\n          <ix-dropdown-item class={'category-dropdown-header'}>\n            <ix-typography format=\"label\" bold textColor=\"std\">\n              {this.label}\n            </ix-typography>\n          </ix-dropdown-item>\n          <ix-divider></ix-divider>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/{p-cd52e37a.entry.js → p-83367279.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as s,H as e,g as i}from"./p-BNpBEtDH.js";import{g as r}from"./p-i60z1FJC.js";const o=":host{position:relative;display:flex;width:100%;flex-wrap:wrap;align-items:stretch}: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 .group{display:flex;position:absolute;align-items:center;height:100%}:host .group-start{left:0px;height:2rem;margin-left:0.5rem;color:var(--theme-color-soft-text)}:host .group-end{right:0px;height:2rem;margin-right:0.5rem;color:var(--theme-color-soft-text)}:host ::slotted(*){display:flex}:host(.disabled){pointer-events:none}:host(.disabled) .group-start ::slotted(*),:host(.disabled) .group-end ::slotted(*){opacity:0.4 !important}";const a=class{constructor(s){t(this,s);this.disabled=false;this.inputPaddingLeft=0;this.inputPaddingRight=0}get inputElement(){return this.hostElement.querySelector("input")}componentWillLoad(){var t;const{valid:s}=this.inputElement.validity;this.inputElement.addEventListener("valid",(()=>{this.onValidInput()}));this.inputElement.addEventListener("invalid",(()=>{this.onInvalidInput()}));this.inputElement.addEventListener("input",(()=>{this.startSlotChanged()}));(t=this.inputElement.form)===null||t===void 0?void 0:t.addEventListener("submit",(()=>{this.startSlotChanged()}));s?this.onValidInput():this.onInvalidInput();this.observer=new MutationObserver((()=>{this.slotChanged();this.startSlotChanged();this.endSlotChanged()}));this.observer.observe(this.hostElement,{subtree:true,childList:true,attributes:true,characterData:true})}componentDidRender(){this.prepareInputElement()}onValidInput(){this.startSlotChanged()}onInvalidInput(){this.startSlotChanged()}prepareInputElement(){if(this.inputElement){this.inputElement.style.width="100%";if(this.inputPaddingRight!==0){this.inputElement.style.paddingRight=this.inputPaddingRight+"px"}else{this.inputElement.style.paddingRight="0.5rem"}if(this.inputPaddingLeft!==0){this.inputElement.style.paddingLeft=this.inputPaddingLeft+"px"}else{this.inputElement.style.paddingLeft="0.5rem"}}else{console.warn('You used the ix-input-group without an input tag, e.g. <input class="ix-form-control" />')}}slotChanged(){var t;this.disabled=(t=this.inputElement)===null||t===void 0?void 0:t.disabled}startSlotChanged(){setTimeout((()=>{var t,s;const e=this.getChildrenWidth(this.startSlotRef);if(e!==0){this.inputPaddingLeft=11+e}else{this.inputPaddingLeft=0}if(!this.inputElement){return}const i=!this.inputElement.validity.valid||this.inputElement.classList.contains("is-invalid");const r=((t=this.inputElement.form)===null||t===void 0?void 0:t.classList.contains("was-validated"))||((s=this.inputElement.form)===null||s===void 0?void 0:s.noValidate)===false;if(r&&i){const t=this.inputPaddingLeft!==0?this.inputPaddingLeft:7;this.inputElement.style.backgroundPosition=`left ${t}px center`;this.inputPaddingLeft+=26}}))}endSlotChanged(){setTimeout((()=>{this.inputPaddingRight=15+this.getChildrenWidth(this.endSlotRef)}))}getChildrenWidth(t){if(!t){return 0}const s=r(t);if(s.length===0){return 0}let e=0;s.forEach((t=>{e+=t.getBoundingClientRect().width}));return e}render(){return s(e,{key:"f911a9b30ed5788e3a2e81da5d935ccdc2bbfbbd",class:{disabled:this.disabled}},s("div",{key:"65d7c4134a794f46c89d7a8a55140ac515a9d27b",class:"group group-start"},s("slot",{key:"39bdf4ec556d693e34862bd058a4dfa25f93c82c",ref:t=>this.startSlotRef=t,name:"input-start"})),s("slot",{key:"88a1331fdda64f4981cad520f93027740284ce4d"}),s("div",{key:"7b6b3c4b1c365b3bcf0a60715c678fe973c17483",class:"group group-end"},s("slot",{key:"a8f4717abc967a4a7fcebd261937ee3533ae344a",ref:t=>this.endSlotRef=t,name:"input-end"})))}get hostElement(){return i(this)}};a.style=o;export{a as ix_input_group};
-//# sourceMappingURL=p-cd52e37a.entry.js.map
+import{r as t,h as e,H as s,g as i}from"./p-BNpBEtDH.js";import{g as r}from"./p-i60z1FJC.js";const o=":host{position:relative;display:flex;width:100%;flex-wrap:wrap;align-items:stretch}: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 .group{display:flex;position:absolute;align-items:center;height:100%}:host .group-start{left:0px;height:2rem;margin-left:0.5rem;color:var(--theme-color-soft-text)}:host .group-end{right:0px;height:2rem;margin-right:0.5rem;color:var(--theme-color-soft-text)}:host ::slotted(*){display:flex}:host(.disabled){pointer-events:none}:host(.disabled) .group-start ::slotted(*),:host(.disabled) .group-end ::slotted(*){opacity:0.4 !important}";const h=class{constructor(e){t(this,e);this.disabled=false;this.inputPaddingLeft=0;this.inputPaddingRight=0}get inputElement(){return this.hostElement.querySelector("input")}componentWillLoad(){var t;const{valid:e}=this.inputElement.validity;this.inputElement.addEventListener("valid",(()=>{this.onValidInput()}));this.inputElement.addEventListener("invalid",(()=>{this.onInvalidInput()}));this.inputElement.addEventListener("input",(()=>{this.startSlotChanged()}));(t=this.inputElement.form)===null||t===void 0?void 0:t.addEventListener("submit",(()=>{this.startSlotChanged()}));e?this.onValidInput():this.onInvalidInput();this.observer=new MutationObserver((()=>{this.slotChanged();this.startSlotChanged();this.endSlotChanged()}));this.observer.observe(this.hostElement,{subtree:true,childList:true,attributes:true,characterData:true})}componentDidRender(){this.prepareInputElement()}onValidInput(){this.startSlotChanged()}onInvalidInput(){this.startSlotChanged()}prepareInputElement(){if(this.inputElement){this.inputElement.style.width="100%";if(this.inputPaddingRight!==0){this.inputElement.style.paddingRight=this.inputPaddingRight+"px"}else{this.inputElement.style.paddingRight="0.5rem"}if(this.inputPaddingLeft!==0){this.inputElement.style.paddingLeft=this.inputPaddingLeft+"px"}else{this.inputElement.style.paddingLeft="0.5rem"}}else{console.warn('You used the ix-input-group without an input tag, e.g. <input class="ix-form-control" />')}}slotChanged(){var t;this.disabled=(t=this.inputElement)===null||t===void 0?void 0:t.disabled}startSlotChanged(){setTimeout((()=>{var t,e;const s=this.getChildrenWidth(this.startSlotRef);if(s!==0){this.inputPaddingLeft=11+s}else{this.inputPaddingLeft=0}if(!this.inputElement){return}const i=!this.inputElement.validity.valid||this.inputElement.classList.contains("is-invalid");const r=((t=this.inputElement.form)===null||t===void 0?void 0:t.classList.contains("was-validated"))||((e=this.inputElement.form)===null||e===void 0?void 0:e.noValidate)===false;if(r&&i){const t=this.inputPaddingLeft!==0?this.inputPaddingLeft:7;this.inputElement.style.backgroundPosition=`left ${t}px center`;this.inputPaddingLeft+=26}}))}endSlotChanged(){setTimeout((()=>{this.inputPaddingRight=15+this.getChildrenWidth(this.endSlotRef)}))}getChildrenWidth(t){if(!t){return 0}const e=r(t);if(e.length===0){return 0}let s=0;e.forEach((t=>{s+=t.getBoundingClientRect().width}));return s}render(){return e(s,{key:"537177c9cb9a001815ac47742896143a163bf071",class:{disabled:this.disabled}},e("div",{key:"3b66c6d7b6b810d958de6c33fd508239b6caeac9",class:"group group-start"},e("slot",{key:"22ff48e13e858965b9565f1b9b1701ae71fc533c",ref:t=>this.startSlotRef=t,name:"input-start"})),e("slot",{key:"9b017c4b47a6c814932ca744c977ede9b71940dd"}),e("div",{key:"2f2deaf07fdc410bc205e1c5af19dcb491be660c",class:"group group-end"},e("slot",{key:"fb30e0f0ddd98f9f2224c7413f7185f563dee966",ref:t=>this.endSlotRef=t,name:"input-end"})))}get hostElement(){return i(this)}};h.style=o;export{h as ix_input_group};
+//# sourceMappingURL=p-83367279.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["inputGroupCss","InputGroup","constructor","hostRef","this","disabled","inputPaddingLeft","inputPaddingRight","inputElement","hostElement","querySelector","componentWillLoad","valid","validity","addEventListener","onValidInput","onInvalidInput","startSlotChanged","_a","form","observer","MutationObserver","slotChanged","endSlotChanged","observe","subtree","childList","attributes","characterData","componentDidRender","prepareInputElement","style","width","paddingRight","paddingLeft","console","warn","setTimeout","startPadding","getChildrenWidth","startSlotRef","isInputInvalid","classList","contains","formWasValidated","_b","noValidate","left","backgroundPosition","endSlotRef","slotElement","endElements","getSlottedElements","length","forEach","element","getBoundingClientRect","render","h","Host","key","class","ref","el","name"],"sources":["src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","src/components/input-group/input-group.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/host-disabled';\n\n:host {\n  @include ix-component;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: stretch;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n    height: 2rem;\n    margin-left: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n    margin-right: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(*) {\n    display: flex;\n  }\n}\n\n@include host-disabled {\n  .group-start,\n  .group-end {\n    ::slotted(*) {\n      opacity: 0.4 !important;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n/**\n * @deprecated Will be removed with 4.0.0\n * Use the 'ix-input' component instead\n */\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() disabled = false;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  startSlotRef?: HTMLElement;\n  endSlotRef?: HTMLElement;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  private observer?: MutationObserver;\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n\n    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"ix-form-control\" />'\n      );\n    }\n  }\n\n  private slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(this.startSlotRef);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element | undefined) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <div class=\"group group-start\">\n          <slot\n            ref={(el) => (this.startSlotRef = el as HTMLElement)}\n            name=\"input-start\"\n          ></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot\n            ref={(el) => (this.endSlotRef = el as HTMLElement)}\n            name=\"input-end\"\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/{p-c80dddf1.entry.js → p-8804a378.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as o,H as r,g as a}from"./p-BNpBEtDH.js";import{s as i,t as n}from"./p-CrTP-icT.js";import{H as d}from"./p-2j3Ly91D.js";import{m as l}from"./p-bcj7UEIC.js";import{m as s,a as b,b as h,c,I as p,g as u,d as m,o as v,S as f}from"./p-BPfEX8mR.js";import"./p-Bb7pDeaQ.js";import"./p-CX81WQtk.js";import"./p-pXYAoEyc.js";import"./p-Ou74PMQs.js";const x='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 .password-eye{margin-left:0.125rem;color:red}:host .password-eye.eye-hidden{display:none}';var g=undefined&&undefined.__decorate||function(e,t,o,r){var a=arguments.length,i=a<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,o):r,n;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")i=Reflect.decorate(e,t,o,r);else for(var d=e.length-1;d>=0;d--)if(n=e[d])i=(a<3?n(i):a>3?n(t,o,i):n(t,o))||i;return a>3&&i&&Object.defineProperty(t,o,i),i};let y=0;const k=class{constructor(o){e(this,o);this.valueChange=t(this,"valueChange",7);this.validityStateChange=t(this,"validityStateChange",7);this.ixBlur=t(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.type="text";this.value="";this.required=false;this.disabled=false;this.readonly=false;this.isInvalid=false;this.isValid=false;this.isInfo=false;this.isWarning=false;this.isInvalidByRequired=false;this.inputType="text";this.inputRef=l();this.slotEndRef=l();this.slotStartRef=l();this.inputId=`input-${y++}`;this.touched=false}updateClassMappings(e){s(this,e)}updateInputType(){this.inputType=this.type}componentWillLoad(){this.updateFormInternalValue(this.value);this.inputType=this.type}connectedCallback(){this.disposableChangesAndVisibilityObservers=b(this.hostElement,this.updatePaddings.bind(this))}updatePaddings(){h(this.slotStartRef.current,this.slotEndRef.current,this.inputRef.current)}disconnectedCallback(){var e;(e=this.disposableChangesAndVisibilityObservers)===null||e===void 0?void 0:e.call(this)}updateFormInternalValue(e){this.formInternals.setFormValue(e);this.value=e}async getAssociatedFormElement(){return this.formInternals.form}hasValidValue(){return Promise.resolve(!!this.value)}getNativeInputElement(){return this.inputRef.waitForCurrent()}async focusInput(){return(await this.getNativeInputElement()).focus()}isTouched(){return Promise.resolve(this.touched)}render(){var e;const t=u(this);return o(r,{key:"e97028201512da11b9689b345c9fa798067eb763",class:{disabled:this.disabled,readonly:this.readonly}},o("ix-field-wrapper",{key:"922e59e33affd1e1fb0ddabad74adb65b91ed1a1",htmlForLabel:this.inputId,required:this.required,label:this.label,helperText:this.helperText,invalidText:this.invalidText,infoText:this.infoText,warningText:this.warningText,validText:this.validText,showTextAsTooltip:this.showTextAsTooltip,isInvalid:this.isInvalid,isValid:this.isValid,isInfo:this.isInfo,isWarning:this.isWarning,controlRef:this.inputRef},o("div",{key:"a01046da7f1c0ef87780ef6535fc15941df56605",class:"input-wrapper"},o(c,{key:"e35395215ee831413792f31d021d65b36106a002",slotStartRef:this.slotStartRef,onSlotChange:()=>this.updatePaddings()}),o(p,{key:"ef08393ffd6f5715e9493bec32ee652177cf11fc",id:this.inputId,readonly:this.readonly,disabled:this.disabled,maxLength:this.maxLength,minLength:this.minLength,pattern:this.pattern,type:this.inputType,isInvalid:this.isInvalid,required:this.required,value:this.value,placeholder:this.placeholder,inputRef:this.inputRef,onKeyPress:e=>m(this,e),valueChange:e=>this.valueChange.emit(e),updateFormInternalValue:e=>this.updateFormInternalValue(e),onBlur:()=>{v(this,this.inputRef.current);this.touched=true},ariaAttributes:t}),o(f,{key:"a21e3d12f0525430e8898a9b979c1e038fd2a76f",slotEndRef:this.slotEndRef,onSlotChange:()=>this.updatePaddings()},o("ix-icon-button",{key:"1c45547f969085a5b484143c5f1b1de3d801696d",color:"color-weak-text",class:{"password-eye":true,"eye-hidden":this.type!=="password"},ghost:true,icon:this.inputType==="password"?i:n,onClick:()=>{if(this.inputType==="password"){this.inputType="text";return}this.inputType="password"}}))),!!this.maxLength&&this.maxLength>0&&o("ix-typography",{key:"8d699ee76f3b7be660c5b8bab57a9d18f6abb769",class:"bottom-text",slot:"bottom-right",textColor:"soft"},(e=this.value)===null||e===void 0?void 0:e.length,"/",this.maxLength)))}static get formAssociated(){return true}get hostElement(){return a(this)}static get watchers(){return{type:["updateInputType"]}}};g([d()],k.prototype,"updateClassMappings",null);k.style=x;export{k as ix_input};
-//# sourceMappingURL=p-c80dddf1.entry.js.map
+import{r as e,c as t,h as o,H as r,g as a}from"./p-BNpBEtDH.js";import{s as i,t as n}from"./p-CrTP-icT.js";import{H as d}from"./p-DHml78Yc.js";import{m as l}from"./p-bcj7UEIC.js";import{m as s,a as b,b as h,c,I as p,g as u,d as m,o as v,S as f}from"./p-CASZsflI.js";import"./p-Bb7pDeaQ.js";import"./p-CX81WQtk.js";import"./p-pXYAoEyc.js";import"./p-Ou74PMQs.js";const x='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 .password-eye{margin-left:0.125rem;color:red}:host .password-eye.eye-hidden{display:none}';var g=undefined&&undefined.__decorate||function(e,t,o,r){var a=arguments.length,i=a<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,o):r,n;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")i=Reflect.decorate(e,t,o,r);else for(var d=e.length-1;d>=0;d--)if(n=e[d])i=(a<3?n(i):a>3?n(t,o,i):n(t,o))||i;return a>3&&i&&Object.defineProperty(t,o,i),i};let y=0;const k=class{constructor(o){e(this,o);this.valueChange=t(this,"valueChange",7);this.validityStateChange=t(this,"validityStateChange",7);this.ixBlur=t(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.type="text";this.value="";this.required=false;this.disabled=false;this.readonly=false;this.isInvalid=false;this.isValid=false;this.isInfo=false;this.isWarning=false;this.isInvalidByRequired=false;this.inputType="text";this.inputRef=l();this.slotEndRef=l();this.slotStartRef=l();this.inputId=`input-${y++}`;this.touched=false}updateClassMappings(e){s(this,e)}updateInputType(){this.inputType=this.type}componentWillLoad(){this.updateFormInternalValue(this.value);this.inputType=this.type}connectedCallback(){this.disposableChangesAndVisibilityObservers=b(this.hostElement,this.updatePaddings.bind(this))}updatePaddings(){h(this.slotStartRef.current,this.slotEndRef.current,this.inputRef.current)}disconnectedCallback(){var e;(e=this.disposableChangesAndVisibilityObservers)===null||e===void 0?void 0:e.call(this)}updateFormInternalValue(e){this.formInternals.setFormValue(e);this.value=e}async getAssociatedFormElement(){return this.formInternals.form}hasValidValue(){return Promise.resolve(!!this.value)}getNativeInputElement(){return this.inputRef.waitForCurrent()}getValidityState(){return Promise.resolve(this.inputRef.current.validity)}async focusInput(){return(await this.getNativeInputElement()).focus()}isTouched(){return Promise.resolve(this.touched)}render(){var e;const t=u(this);return o(r,{key:"48a3eeafce2c7449aac74866ce083b2985b788c3",class:{disabled:this.disabled,readonly:this.readonly}},o("ix-field-wrapper",{key:"8890776f7c99b4e5432d2a7e02b61885ab1f1f40",htmlForLabel:this.inputId,required:this.required,label:this.label,helperText:this.helperText,invalidText:this.invalidText,infoText:this.infoText,warningText:this.warningText,validText:this.validText,showTextAsTooltip:this.showTextAsTooltip,isInvalid:this.isInvalid,isValid:this.isValid,isInfo:this.isInfo,isWarning:this.isWarning,controlRef:this.inputRef},o("div",{key:"bb41666cc78347c3800d6efcf1912a450fc7e6e9",class:"input-wrapper"},o(c,{key:"3fafbeff30d7b3b0d7e22fc5ffc89f4ed3dfae86",slotStartRef:this.slotStartRef,onSlotChange:()=>this.updatePaddings()}),o(p,{key:"312f25e4cd128d32f6ba3f4960b9a00d860d89e5",id:this.inputId,readonly:this.readonly,disabled:this.disabled,maxLength:this.maxLength,minLength:this.minLength,pattern:this.pattern,type:this.inputType,isInvalid:this.isInvalid,required:this.required,value:this.value,placeholder:this.placeholder,inputRef:this.inputRef,onKeyPress:e=>m(this,e),valueChange:e=>this.valueChange.emit(e),updateFormInternalValue:e=>this.updateFormInternalValue(e),onBlur:()=>{v(this,this.inputRef.current);this.touched=true},ariaAttributes:t}),o(f,{key:"e1eb5730048cd5e21047c3656a4d37c3805ae757",slotEndRef:this.slotEndRef,onSlotChange:()=>this.updatePaddings()},o("ix-icon-button",{key:"ad393d7fd9acf7d5258e9e951e670abc99e19730",color:"color-weak-text",class:{"password-eye":true,"eye-hidden":this.type!=="password"},ghost:true,icon:this.inputType==="password"?i:n,onClick:()=>{if(this.inputType==="password"){this.inputType="text";return}this.inputType="password"}}))),!!this.maxLength&&this.maxLength>0&&o("ix-typography",{key:"3be733d6e0c96577d5d24c16f88de24ec966d570",class:"bottom-text",slot:"bottom-right",textColor:"soft"},(e=this.value)===null||e===void 0?void 0:e.length,"/",this.maxLength)))}static get formAssociated(){return true}get hostElement(){return a(this)}static get watchers(){return{type:["updateInputType"]}}};g([d()],k.prototype,"updateClassMappings",null);k.style=x;export{k as ix_input};
+//# sourceMappingURL=p-8804a378.entry.js.map

package/dist/siemens-ix/p-8804a378.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputCss","inputIds","Input","constructor","hostRef","this","type","value","required","disabled","readonly","isInvalid","isValid","isInfo","isWarning","isInvalidByRequired","inputType","inputRef","makeRef","slotEndRef","slotStartRef","inputId","touched","updateClassMappings","result","mapValidationResult","updateInputType","componentWillLoad","updateFormInternalValue","connectedCallback","disposableChangesAndVisibilityObservers","addDisposableChangesAndVisibilityObservers","hostElement","updatePaddings","bind","adjustPaddingForStartAndEnd","current","disconnectedCallback","_a","call","formInternals","setFormValue","getAssociatedFormElement","form","hasValidValue","Promise","resolve","getNativeInputElement","waitForCurrent","getValidityState","validity","focusInput","focus","isTouched","render","inputAria","getAriaAttributesForInput","h","Host","key","class","htmlForLabel","label","helperText","invalidText","infoText","warningText","validText","showTextAsTooltip","controlRef","SlotStart","onSlotChange","InputElement","id","maxLength","minLength","pattern","placeholder","onKeyPress","event","checkAllowedKeys","valueChange","emit","onBlur","onInputBlur","ariaAttributes","SlotEnd","color","ghost","icon","iconEye","iconEyeCancelled","onClick","slot","textColor","length","__decorate","HookValidationLifecycle","prototype"],"sources":["src/components/input/input.scss?tag=ix-input&encapsulation=shadow","src/components/input/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/validation/form-component';\n@import './input.mixins.scss';\n\n@include input-field;\n\n:host {\n  .password-eye {\n    margin-left: 0.125rem;\n    color: red;\n\n    &.eye-hidden {\n      display: none;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconEye, iconEyeCancelled } 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 { A11yAttributes } from '../utils/a11y';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, SlotEnd, SlotStart } from './input.fc';\nimport {\n  addDisposableChangesAndVisibilityObservers,\n  adjustPaddingForStartAndEnd,\n  checkAllowedKeys,\n  DisposableChangesAndVisibilityObservers,\n  getAriaAttributesForInput,\n  mapValidationResult,\n  onInputBlur,\n} from './input.util';\n\nlet inputIds = 0;\n\n/**\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-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * The type of the text field. Possible values are 'text', 'email', or 'password'.\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The name of the text field.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The placeholder text for the text field.\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Specifies whether the text field is required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specifies whether the text field is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Specifies whether the text field is readonly.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * The helper text for the text field.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the text field.\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Specifies whether to show the text as a tooltip.\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the text field.\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the text field.\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the text field.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the text field.\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The pattern for the text field.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * The maximum length of the text field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The minimum length of the text field.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The allowed characters pattern for the text field.\n   */\n  @Prop() allowedCharactersPattern?: string;\n\n  /**\n   * Event emitted when the value of the text field changes.\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the validity state of the text field changes.\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the text field loses focus.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  @State() inputType = 'text';\n\n  private readonly inputRef = makeRef<HTMLInputElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n  private readonly inputId = `input-${inputIds++}`;\n  private touched = false;\n\n  private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  @Watch('type')\n  updateInputType() {\n    this.inputType = this.type;\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n    this.inputType = this.type;\n  }\n\n  connectedCallback(): void {\n    this.disposableChangesAndVisibilityObservers =\n      addDisposableChangesAndVisibilityObservers(\n        this.hostElement,\n        this.updatePaddings.bind(this)\n      );\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputRef.current\n    );\n  }\n\n  disconnectedCallback(): void {\n    this.disposableChangesAndVisibilityObservers?.();\n  }\n\n  updateFormInternalValue(value: string) {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /**\n   * Returns the native input element used in the text field.\n   */\n  @Method()\n  getNativeInputElement() {\n    return this.inputRef.waitForCurrent();\n  }\n\n  /**\n   * Returns the validity state of the input field.\n   */\n  @Method()\n  getValidityState(): Promise<ValidityState> {\n    return Promise.resolve(this.inputRef.current.validity);\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 inputAria: A11yAttributes = getAriaAttributesForInput(this);\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          htmlForLabel={this.inputId}\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.inputRef}\n        >\n          <div class=\"input-wrapper\">\n            <SlotStart\n              slotStartRef={this.slotStartRef}\n              onSlotChange={() => this.updatePaddings()}\n            ></SlotStart>\n            <InputElement\n              id={this.inputId}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              maxLength={this.maxLength}\n              minLength={this.minLength}\n              pattern={this.pattern}\n              type={this.inputType}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              inputRef={this.inputRef}\n              onKeyPress={(event) => checkAllowedKeys(this, event)}\n              valueChange={(value) => this.valueChange.emit(value)}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(value)\n              }\n              onBlur={() => {\n                onInputBlur(this, this.inputRef.current);\n                this.touched = true;\n              }}\n              ariaAttributes={inputAria}\n            ></InputElement>\n            <SlotEnd\n              slotEndRef={this.slotEndRef}\n              onSlotChange={() => this.updatePaddings()}\n            >\n              <ix-icon-button\n                color=\"color-weak-text\"\n                class={{\n                  'password-eye': true,\n                  'eye-hidden': this.type !== 'password',\n                }}\n                ghost\n                icon={\n                  this.inputType === 'password' ? iconEye : iconEyeCancelled\n                }\n                onClick={() => {\n                  if (this.inputType === 'password') {\n                    this.inputType = 'text';\n                    return;\n                  }\n\n                  this.inputType = 'password';\n                }}\n              ></ix-icon-button>\n            </SlotEnd>\n          </div>\n          {!!this.maxLength && this.maxLength > 0 && (\n            <ix-typography\n              class=\"bottom-text\"\n              slot=\"bottom-right\"\n              textColor=\"soft\"\n            >\n              {this.value?.length}/{this.maxLength}\n            </ix-typography>\n          )}\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}