npm - @siemens/ix - Versions diffs - 0.0.0-20240522073858 → 0.0.0-pr-1318-20240627080522 - Mend

@siemens/ix 0.0.0-20240522073858 → 0.0.0-pr-1318-20240627080522

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1382) hide show

package/dist/cjs/ix-toggle.cjs.entry.js CHANGED Viewed

@@ -2,16 +2,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c6f0ac73.js');
-const a11y = require('./a11y-d3ce56d1.js');
+const index = require('./index-0f6297c8.js');
+const a11y = require('./a11y-32046b56.js');
-const toggleCss = ":host{display:inline-flex;position:relative;height:2rem;justify-content:flex-start;align-items:center;margin-right:0.25rem;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 .switch{position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem;margin-right:0.25rem}:host .switch input{opacity:0;width:0;height:0}:host .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem}:host .slider:before{position:absolute;content:\"\";height:1.125rem;width:1.125rem;left:4px;bottom:3px;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%}:host input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host input:focus-visible+.switch>.slider{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host input:checked+.switch>.slider{background-color:var(--theme-switch-on--background)}:host input:checked+.switch>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.35rem)}:host input+.switch:hover>.slider{background-color:var(--theme-switch-off--background--hover)}:host input+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host input+.switch:active>.slider{background-color:var(--theme-switch-off--background--active)}:host input+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host input:checked+.switch:hover>.slider{background-color:var(--theme-switch-on--background--hover)}:host input:checked+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host input:checked+.switch:active>.slider{background-color:var(--theme-switch-on--background--active)}:host input:checked+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host input:indeterminate+.switch>.slider::before{transform:translateX(0.7rem)}:host .toggle-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.disabled){pointer-events:none}:host(.disabled) input+.switch{opacity:0.5}:host(.disabled) input+.switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) input+.switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) input:checked+.switch>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) input:checked+.switch>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .toggle-text{color:var(--theme-color-weak-text)}";
+const toggleCss = ":host{display:inline-flex;position:relative;height:2rem;justify-content:flex-start;align-items:center;margin-right:0.25rem;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .switch{position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem;margin-right:0.25rem}:host .switch input{opacity:0;width:0;height:0}:host .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem;border:1px solid transparent}:host .slider:before{position:absolute;content:\"\";height:1.125rem;width:1.125rem;left:4px;bottom:2px;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%}:host input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host input:focus-visible+.switch>.slider{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host input:checked+.switch>.slider{background-color:var(--theme-switch-on--background)}:host input:checked+.switch>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.35rem)}:host input+.switch>.slider{border-color:var(--theme-switch-off--border-color)}:host input+.switch:hover>.slider{background-color:var(--theme-switch-off--background--hover);border-color:var(--theme-switch-off--border-color--hover)}:host input+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host input+.switch:active>.slider{background-color:var(--theme-switch-off--background--active);border-color:var(--theme-switch-off--border-color--active)}:host input+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host input:checked+.switch>.slider{border-color:var(--theme-switch-on--border-color)}:host input:checked+.switch:hover>.slider{background-color:var(--theme-switch-on--background--hover);border-color:var(--theme-switch-on--border-color--hover)}:host input:checked+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host input:checked+.switch:active>.slider{background-color:var(--theme-switch-on--background--active);border-color:var(--theme-switch-on--border-color--active)}:host input:checked+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host input:indeterminate+.switch>.slider::before{transform:translateX(0.7rem)}:host .toggle-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.disabled){pointer-events:none}:host(.disabled) input+.switch{opacity:0.5}:host(.disabled) input+.switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) input+.switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) input:checked+.switch>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) input:checked+.switch>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .toggle-text{color:var(--theme-color-weak-text)}:host(.ix-info:not(.disabled)) .slider{--theme-switch-off--background:var(--theme-switch-off--background--info);--theme-switch-off--background--hover:var(--theme-switch-off--background--info--hover);--theme-switch-off--background--active:var(--theme-switch-off--background--info--active);--theme-switch-thumb-off--background:var(--theme-switch-thumb-off--background--info);--theme-switch-thumb-off--background--hover:var(--theme-switch-thumb-off--background--info--hover);--theme-switch-thumb-off--background--active:var(--theme-switch-thumb-off--background--info--active);--theme-switch-off--border-color:var(--theme-switch-off--border-color--info);--theme-switch-off--border-color--hover:var(--theme-switch-off--border-color--info--hover);--theme-switch-off--border-color--active:var(--theme-switch-off--border-color--info--active);--theme-switch-on--background:var(--theme-switch-on--background--info);--theme-switch-on--background--hover:var(--theme-switch-on--background--info--hover);--theme-switch-on--background--active:var(--theme-switch-on--background--info--active);--theme-switch-thumb-on--background:var(--theme-switch-thumb-on--background--info);--theme-switch-thumb-on--background--hover:var(--theme-switch-thumb-on--background--info--hover);--theme-switch-thumb-on--background--active:var(--theme-switch-thumb-on--background--info--active);--theme-switch-on--border-color:var(--theme-switch-on--border-color--info);--theme-switch-on--border-color--hover:var(--theme-switch-on--border-color--info--hover);--theme-switch-on--border-color--active:var(--theme-switch-on--border-color--info--active);--theme-switch-mixed--background:var(--theme-switch-mixed--background--info);--theme-switch-mixed--background--hover:var(--theme-switch-mixed--background--info--hover);--theme-switch-mixed--background--active:var(--theme-switch-mixed--background--info--active);--theme-switch-thumb-mixed--background:var(--theme-switch-thumb-mixed--background--info);--theme-switch-thumb-mixed--background--hover:var(--theme-switch-thumb-mixed--background--info--hover);--theme-switch-thumb-mixed--background--active:var(--theme-switch-thumb-mixed--background--info--active);--theme-switch-mixed--border-color:var(--theme-switch-mixed--border-color--info);--theme-switch-mixed--border-color--hover:var(--theme-switch-mixed--border-color--info--hover);--theme-switch-mixed--border-color--active:var(--theme-switch-mixed--border-color--info--active)}:host(.ix-warning:not(.disabled)) .slider{--theme-switch-off--background:var(--theme-switch-off--background--warning);--theme-switch-off--background--hover:var(--theme-switch-off--background--warning--hover);--theme-switch-off--background--active:var(--theme-switch-off--background--warning--active);--theme-switch-thumb-off--background:var(--theme-switch-thumb-off--background--warning);--theme-switch-thumb-off--background--hover:var(--theme-switch-thumb-off--background--warning--hover);--theme-switch-thumb-off--background--active:var(--theme-switch-thumb-off--background--warning--active);--theme-switch-off--border-color:var(--theme-switch-off--border-color--warning);--theme-switch-off--border-color--hover:var(--theme-switch-off--border-color--warning--hover);--theme-switch-off--border-color--active:var(--theme-switch-off--border-color--warning--active);--theme-switch-on--background:var(--theme-switch-on--background--warning);--theme-switch-on--background--hover:var(--theme-switch-on--background--warning--hover);--theme-switch-on--background--active:var(--theme-switch-on--background--warning--active);--theme-switch-thumb-on--background:var(--theme-switch-thumb-on--background--warning);--theme-switch-thumb-on--background--hover:var(--theme-switch-thumb-on--background--warning--hover);--theme-switch-thumb-on--background--active:var(--theme-switch-thumb-on--background--warning--active);--theme-switch-on--border-color:var(--theme-switch-on--border-color--warning);--theme-switch-on--border-color--hover:var(--theme-switch-on--border-color--warning--hover);--theme-switch-on--border-color--active:var(--theme-switch-on--border-color--warning--active);--theme-switch-mixed--background:var(--theme-switch-mixed--background--warning);--theme-switch-mixed--background--hover:var(--theme-switch-mixed--background--warning--hover);--theme-switch-mixed--background--active:var(--theme-switch-mixed--background--warning--active);--theme-switch-thumb-mixed--background:var(--theme-switch-thumb-mixed--background--warning);--theme-switch-thumb-mixed--background--hover:var(--theme-switch-thumb-mixed--background--warning--hover);--theme-switch-thumb-mixed--background--active:var(--theme-switch-thumb-mixed--background--warning--active);--theme-switch-mixed--border-color:var(--theme-switch-mixed--border-color--warning);--theme-switch-mixed--border-color--hover:var(--theme-switch-mixed--border-color--warning--hover);--theme-switch-mixed--border-color--active:var(--theme-switch-mixed--border-color--warning--active)}:host(.ix-invalid--required:not(.disabled)) .slider{--theme-switch-off--background:var(--theme-switch-off--background--invalid);--theme-switch-off--background--hover:var(--theme-switch-off--background--invalid--hover);--theme-switch-off--background--active:var(--theme-switch-off--background--invalid--active);--theme-switch-thumb-off--background:var(--theme-switch-thumb-off--background--invalid);--theme-switch-thumb-off--background--hover:var(--theme-switch-thumb-off--background--invalid--hover);--theme-switch-thumb-off--background--active:var(--theme-switch-thumb-off--background--invalid--active);--theme-switch-off--border-color:var(--theme-switch-off--border-color--invalid);--theme-switch-off--border-color--hover:var(--theme-switch-off--border-color--invalid--hover);--theme-switch-off--border-color--active:var(--theme-switch-off--border-color--invalid--active);--theme-switch-on--background:var(--theme-switch-on--background--invalid);--theme-switch-on--background--hover:var(--theme-switch-on--background--invalid--hover);--theme-switch-on--background--active:var(--theme-switch-on--background--invalid--active);--theme-switch-thumb-on--background:var(--theme-switch-thumb-on--background--invalid);--theme-switch-thumb-on--background--hover:var(--theme-switch-thumb-on--background--invalid--hover);--theme-switch-thumb-on--background--active:var(--theme-switch-thumb-on--background--invalid--active);--theme-switch-on--border-color:var(--theme-switch-on--border-color--invalid);--theme-switch-on--border-color--hover:var(--theme-switch-on--border-color--invalid--hover);--theme-switch-on--border-color--active:var(--theme-switch-on--border-color--invalid--active);--theme-switch-mixed--background:var(--theme-switch-mixed--background--invalid);--theme-switch-mixed--background--hover:var(--theme-switch-mixed--background--invalid--hover);--theme-switch-mixed--background--active:var(--theme-switch-mixed--background--invalid--active);--theme-switch-thumb-mixed--background:var(--theme-switch-thumb-mixed--background--invalid);--theme-switch-thumb-mixed--background--hover:var(--theme-switch-thumb-mixed--background--invalid--hover);--theme-switch-thumb-mixed--background--active:var(--theme-switch-thumb-mixed--background--invalid--active);--theme-switch-mixed--border-color:var(--theme-switch-mixed--border-color--invalid);--theme-switch-mixed--border-color--hover:var(--theme-switch-mixed--border-color--invalid--hover);--theme-switch-mixed--border-color--active:var(--theme-switch-mixed--border-color--invalid--active)}:host(.ix-invalid:not(.disabled)) .slider{--theme-switch-off--background:var(--theme-switch-off--background--invalid);--theme-switch-off--background--hover:var(--theme-switch-off--background--invalid--hover);--theme-switch-off--background--active:var(--theme-switch-off--background--invalid--active);--theme-switch-thumb-off--background:var(--theme-switch-thumb-off--background--invalid);--theme-switch-thumb-off--background--hover:var(--theme-switch-thumb-off--background--invalid--hover);--theme-switch-thumb-off--background--active:var(--theme-switch-thumb-off--background--invalid--active);--theme-switch-off--border-color:var(--theme-switch-off--border-color--invalid);--theme-switch-off--border-color--hover:var(--theme-switch-off--border-color--invalid--hover);--theme-switch-off--border-color--active:var(--theme-switch-off--border-color--invalid--active);--theme-switch-on--background:var(--theme-switch-on--background--invalid);--theme-switch-on--background--hover:var(--theme-switch-on--background--invalid--hover);--theme-switch-on--background--active:var(--theme-switch-on--background--invalid--active);--theme-switch-thumb-on--background:var(--theme-switch-thumb-on--background--invalid);--theme-switch-thumb-on--background--hover:var(--theme-switch-thumb-on--background--invalid--hover);--theme-switch-thumb-on--background--active:var(--theme-switch-thumb-on--background--invalid--active);--theme-switch-on--border-color:var(--theme-switch-on--border-color--invalid);--theme-switch-on--border-color--hover:var(--theme-switch-on--border-color--invalid--hover);--theme-switch-on--border-color--active:var(--theme-switch-on--border-color--invalid--active);--theme-switch-mixed--background:var(--theme-switch-mixed--background--invalid);--theme-switch-mixed--background--hover:var(--theme-switch-mixed--background--invalid--hover);--theme-switch-mixed--background--active:var(--theme-switch-mixed--background--invalid--active);--theme-switch-thumb-mixed--background:var(--theme-switch-thumb-mixed--background--invalid);--theme-switch-thumb-mixed--background--hover:var(--theme-switch-thumb-mixed--background--invalid--hover);--theme-switch-thumb-mixed--background--active:var(--theme-switch-thumb-mixed--background--invalid--active);--theme-switch-mixed--border-color:var(--theme-switch-mixed--border-color--invalid);--theme-switch-mixed--border-color--hover:var(--theme-switch-mixed--border-color--invalid--hover);--theme-switch-mixed--border-color--active:var(--theme-switch-mixed--border-color--invalid--active)}";
 const IxToggleStyle0 = toggleCss;
 const Toggle = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.checkedChange = index.createEvent(this, "checkedChange", 7);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.formInternals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.formInternals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.formInternals;
+        }
+        this.name = undefined;
+        this.value = 'on';
         this.checked = false;
         this.disabled = false;
         this.indeterminate = false;
@@ -19,6 +29,7 @@ const Toggle = class {
         this.textOff = 'Off';
         this.textIndeterminate = 'Mixed';
         this.hideText = false;
+        this.required = false;
     }
     onCheckedChange(newChecked) {
         if (this.indeterminate) {
@@ -27,12 +38,38 @@ const Toggle = class {
         this.checked = newChecked;
         this.checkedChange.emit(this.checked);
     }
+    componentWillLoad() {
+        this.updateFormInternalValue();
+    }
+    updateFormInternalValue() {
+        if (this.checked) {
+            this.formInternals.setFormValue(this.value);
+        }
+        else {
+            this.formInternals.setFormValue(null);
+        }
+    }
+    watchCheckedChange() {
+        this.updateFormInternalValue();
+    }
+    /** @internal */
+    hasValidValue() {
+        return Promise.resolve(this.checked);
+    }
+    /** @internal */
+    getAssociatedFormElement() {
+        return Promise.resolve(this.formInternals.form);
+    }
     render() {
-        return (index.h(index.Host, { key: 'ffc42b6828208dcf6483abfda90ae88dd43ee408', class: {
+        return (index.h(index.Host, { key: '0afa08e1803352f2bb3360c11fcda2745531e20d', class: {
                 disabled: this.disabled,
-            }, onClick: () => this.onCheckedChange(!this.checked) }, index.h("input", { key: '35954eafdb6301bb6e7063a8978f2bfcc7076de0', disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11y.a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), index.h("label", { key: '0aed058713bc742c3408accee2e3551313a1ad31', class: "switch", tabIndex: -1 }, index.h("span", { key: '62fbfca9e3adb625006e981f4ae655d2989d9aef', class: "slider" })), !this.hideText ? (index.h(index.Fragment, null, !this.indeterminate ? (index.h("span", { class: 'toggle-text', "aria-hidden": a11y.a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (index.h("span", { class: 'toggle-text', "aria-hidden": a11y.a11yBoolean(true) }, this.textIndeterminate)))) : null));
+            }, onClick: () => this.onCheckedChange(!this.checked) }, index.h("input", { key: '37ba0cf086ed01c01e61ff0bb24367759b537cd7', disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11y.a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), index.h("label", { key: '83d6712432de4b45396b11f7f21cf7072fd19fcd', class: "switch", tabIndex: -1 }, index.h("span", { key: 'f3f91c36a2043f039813b43bbc6285d67239d050', class: "slider" })), !this.hideText ? (index.h(index.Fragment, null, !this.indeterminate ? (index.h("span", { class: 'toggle-text', "aria-hidden": a11y.a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (index.h("span", { class: 'toggle-text', "aria-hidden": a11y.a11yBoolean(true) }, this.textIndeterminate)))) : null));
     }
+    static get formAssociated() { return true; }
     get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["watchCheckedChange"]
+    }; }
 };
 Toggle.style = IxToggleStyle0;

package/dist/cjs/ix-toggle.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-toggle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,+xGAA+xG,CAAC;AAClzG,uBAAe,SAAS;;MCyBX,MAAM;;;;uBAMiC,KAAK;wBAKpC,KAAK;6BAKgC,KAAK;sBAK5C,IAAI;uBAKH,KAAK;iCAKK,OAAO;wBAKhB,KAAK;;IAOxB,eAAe,CAAC,UAAmB;QACjC,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;QACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACvC;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAElDD,oEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,UAAU,kBACDE,gBAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAAc,CAAC,OAAO,CAAC,GAE9C,EACTF,oEAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,IAChCA,mEAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB,EACP,CAAC,IAAI,CAAC,QAAQ,IACbA,QAACG,cAAQ,QACN,CAAC,IAAI,CAAC,aAAa,IAClBH,kBAAM,KAAK,EAAE,aAAa,iBAAeE,gBAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CACrC,KAEPF,kBAAM,KAAK,EAAE,aAAa,iBAAeE,gBAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,IACT,IAAI,CACH,EACP;KACH;;;;;;;","names":["h","Host","a11yBoolean","Fragment"],"sources":["src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=shadow","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: inline-flex;\n position: relative;\n height: 2rem;\n justify-content: flex-start;\n align-items: center;\n margin-right: 0.25rem;\n\n cursor: pointer;\n\n .switch {\n position: relative;\n display: inline-block;\n width: 3rem;\n min-width: 3rem;\n max-width: 3rem;\n height: 1.5rem;\n margin-right: 0.25rem;\n }\n\n .switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--theme-switch-off--background);\n transition: var(--theme-default-time);\n border-radius: 1.5rem;\n }\n\n .slider:before {\n position: absolute;\n content: '';\n height: 1.125rem;\n width: 1.125rem;\n left: 4px;\n bottom: 3px;\n background-color: var(--theme-switch-thumb-off--background);\n transition: var(--theme-default-time);\n border-radius: 50%;\n }\n\n input {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n }\n\n input:focus-visible + .switch > .slider {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: 1px;\n }\n\n input:checked + .switch > .slider {\n background-color: var(--theme-switch-on--background);\n }\n\n input:checked + .switch > .slider::before {\n background-color: var(--theme-switch-thumb-on--background);\n transform: translateX(1.35rem);\n }\n\n // Toggle NOT checked\n input + .switch:hover > .slider {\n background-color: var(--theme-switch-off--background--hover);\n }\n\n input + .switch:hover > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--hover);\n }\n\n input + .switch:active > .slider {\n background-color: var(--theme-switch-off--background--active);\n }\n\n input + .switch:active > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--active);\n }\n\n // Toggle checked\n input:checked + .switch:hover > .slider {\n background-color: var(--theme-switch-on--background--hover);\n }\n\n input:checked + .switch:hover > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--hover);\n }\n\n input:checked + .switch:active > .slider {\n background-color: var(--theme-switch-on--background--active);\n }\n\n input:checked + .switch:active > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--active);\n }\n\n input:indeterminate + .switch > .slider::before {\n transform: translateX(0.7rem);\n }\n\n .toggle-text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n\n input + .switch {\n opacity: 0.5;\n }\n\n input + .switch > .slider {\n background-color: var(--theme-switch-off--background--disabled);\n }\n\n input + .switch > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--disabled);\n }\n\n input:checked + .switch > .slider {\n background-color: var(--theme-switch-on--background--disabled);\n }\n\n input:checked + .switch > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--disabled);\n }\n\n .toggle-text {\n color: var(--theme-color-weak-text);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n tag: 'ix-toggle',\n styleUrl: 'toggle.scss',\n shadow: true,\n})\nexport class Toggle {\n @Element() hostElement!: HTMLIxToggleElement;\n\n /\n Whether the slide-toggle element is checked or not.\n /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /\n Whether the slide-toggle element is disabled or not.\n /\n @Prop() disabled = false;\n\n /\n If true the control is in indeterminate state\n /\n @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n /\n Text for on state\n /\n @Prop() textOn = 'On';\n\n /\n Text for off state\n /\n @Prop() textOff = 'Off';\n\n /\n Text for indeterminate state\n /\n @Prop() textIndeterminate = 'Mixed';\n\n /\n Hide `on` and `off` text\n /\n @Prop() hideText = false;\n\n /\n An event will be dispatched each time the slide-toggle changes its value.\n */\n @Event() checkedChange: EventEmitter<boolean>;\n\n onCheckedChange(newChecked: boolean) {\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n this.checked = newChecked;\n this.checkedChange.emit(this.checked);\n }\n\n render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n }}\n onClick={() => this.onCheckedChange(!this.checked)}\n >\n <input\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n checked={this.checked}\n role=\"switch\"\n tabindex={0}\n type=\"checkbox\"\n aria-checked={a11yBoolean(this.checked)}\n onChange={(event) =>\n this.onCheckedChange((event.target as any).checked)\n }\n ></input>\n <label class=\"switch\" tabIndex={-1}>\n <span class=\"slider\"></span>\n </label>\n {!this.hideText ? (\n <Fragment>\n {!this.indeterminate ? (\n <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n {this.checked ? this.textOn : this.textOff}\n </span>\n ) : (\n <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n {this.textIndeterminate}\n </span>\n )}\n </Fragment>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-toggle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,mpbAAmpb,CAAC;AACtqb,uBAAe,SAAS;;MCiCX,MAAM;;;;;;;;;;;;;qBAawB,IAAI;uBAKK,KAAK;wBAKpC,KAAK;6BAKgC,KAAK;sBAK5C,IAAI;uBAKH,KAAK;iCAKK,OAAO;wBAKhB,KAAK;wBAOY,KAAK;;IAUzC,eAAe,CAAC,UAAmB;QACjC,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;QACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACvC;IAED,iBAAiB;QACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;IAED,uBAAuB;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC7C;aAAM;YACL,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SACvC;KACF;IAGD,kBAAkB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;;IAID,aAAa;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACtC;;IAID,wBAAwB;QACtB,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;KACjD;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAElDD,oEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,UAAU,kBACDE,gBAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC,GAE3D,EACTF,oEAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,IAChCA,mEAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB,EACP,CAAC,IAAI,CAAC,QAAQ,IACbA,QAACG,cAAQ,QACN,CAAC,IAAI,CAAC,aAAa,IAClBH,kBAAM,KAAK,EAAE,aAAa,iBAAeE,gBAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CACrC,KAEPF,kBAAM,KAAK,EAAE,aAAa,iBAAeE,gBAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,IACT,IAAI,CACH,EACP;KACH;;;;;;;;;;;","names":["h","Host","a11yBoolean","Fragment"],"sources":["src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=shadow","src/components/toggle/toggle.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: inline-flex;\n position: relative;\n height: 2rem;\n justify-content: flex-start;\n align-items: center;\n margin-right: 0.25rem;\n\n cursor: pointer;\n\n .switch {\n position: relative;\n display: inline-block;\n width: 3rem;\n min-width: 3rem;\n max-width: 3rem;\n height: 1.5rem;\n margin-right: 0.25rem;\n }\n\n .switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--theme-switch-off--background);\n transition: var(--theme-default-time);\n border-radius: 1.5rem;\n border: 1px solid transparent;\n }\n\n .slider:before {\n position: absolute;\n content: '';\n height: 1.125rem;\n width: 1.125rem;\n left: 4px;\n bottom: 2px;\n background-color: var(--theme-switch-thumb-off--background);\n transition: var(--theme-default-time);\n border-radius: 50%;\n }\n\n input {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n }\n\n input:focus-visible + .switch > .slider {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: 1px;\n }\n\n input:checked + .switch > .slider {\n background-color: var(--theme-switch-on--background);\n }\n\n input:checked + .switch > .slider::before {\n background-color: var(--theme-switch-thumb-on--background);\n transform: translateX(1.35rem);\n }\n\n // Toggle NOT checked\n input + .switch > .slider {\n border-color: var(--theme-switch-off--border-color);\n }\n\n input + .switch:hover > .slider {\n background-color: var(--theme-switch-off--background--hover);\n border-color: var(--theme-switch-off--border-color--hover);\n }\n\n input + .switch:hover > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--hover);\n }\n\n input + .switch:active > .slider {\n background-color: var(--theme-switch-off--background--active);\n border-color: var(--theme-switch-off--border-color--active);\n }\n\n input + .switch:active > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--active);\n }\n\n // Toggle checked\n input:checked + .switch > .slider {\n border-color: var(--theme-switch-on--border-color);\n }\n\n input:checked + .switch:hover > .slider {\n background-color: var(--theme-switch-on--background--hover);\n border-color: var(--theme-switch-on--border-color--hover);\n }\n\n input:checked + .switch:hover > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--hover);\n }\n\n input:checked + .switch:active > .slider {\n background-color: var(--theme-switch-on--background--active);\n border-color: var(--theme-switch-on--border-color--active);\n }\n\n input:checked + .switch:active > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--active);\n }\n\n input:indeterminate + .switch > .slider::before {\n transform: translateX(0.7rem);\n }\n\n .toggle-text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n\n input + .switch {\n opacity: 0.5;\n }\n\n input + .switch > .slider {\n background-color: var(--theme-switch-off--background--disabled);\n }\n\n input + .switch > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--disabled);\n }\n\n input:checked + .switch > .slider {\n background-color: var(--theme-switch-on--background--disabled);\n }\n\n input:checked + .switch > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--disabled);\n }\n\n .toggle-text {\n color: var(--theme-color-weak-text);\n }\n}\n\n@mixin toggle-variant($selector) {\n :host(#{$selector}:not(.disabled)) {\n .slider {\n @content;\n }\n }\n}\n\n@mixin define-toggle-vars($state, $type) {\n --theme-switch-#{$state}--background: var(--theme-switch-#{$state}--background--#{$type});\n --theme-switch-#{$state}--background--hover: var(--theme-switch-#{$state}--background--#{$type}--hover);\n --theme-switch-#{$state}--background--active: var(--theme-switch-#{$state}--background--#{$type}--active);\n\n --theme-switch-thumb-#{$state}--background: var(--theme-switch-thumb-#{$state}--background--#{$type});\n --theme-switch-thumb-#{$state}--background--hover: var(--theme-switch-thumb-#{$state}--background--#{$type}--hover);\n --theme-switch-thumb-#{$state}--background--active: var(--theme-switch-thumb-#{$state}--background--#{$type}--active);\n\n --theme-switch-#{$state}--border-color: var(--theme-switch-#{$state}--border-color--#{$type});\n --theme-switch-#{$state}--border-color--hover: var(--theme-switch-#{$state}--border-color--#{$type}--hover);\n --theme-switch-#{$state}--border-color--active: var(--theme-switch-#{$state}--border-color--#{$type}--active);\n}\n\n@include toggle-variant(\n $selector: '.ix-info',\n) {\n @include define-toggle-vars('off', 'info');\n @include define-toggle-vars('on', 'info');\n @include define-toggle-vars('mixed', 'info');\n}\n\n@include toggle-variant(\n $selector: '.ix-warning',\n) {\n @include define-toggle-vars('off', 'warning');\n @include define-toggle-vars('on', 'warning');\n @include define-toggle-vars('mixed', 'warning');\n}\n\n@include toggle-variant(\n $selector: '.ix-invalid--required',\n) {\n @include define-toggle-vars('off', 'invalid');\n @include define-toggle-vars('on', 'invalid');\n @include define-toggle-vars('mixed', 'invalid');\n}\n\n@include toggle-variant(\n $selector: '.ix-invalid',\n) {\n @include define-toggle-vars('off', 'invalid');\n @include define-toggle-vars('on', 'invalid');\n @include define-toggle-vars('mixed', 'invalid');\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 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 { IxFormComponent } from '../utils/field';\n\n/\n @form-ready 2.4.0\n * /\n@Component({\n tag: 'ix-toggle',\n styleUrl: 'toggle.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Toggle implements IxFormComponent<string> {\n @AttachInternals() formInternals!: ElementInternals;\n\n @Element() hostElement!: HTMLIxToggleElement;\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 Whether the slide-toggle element is checked or not.\n /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /\n Whether the slide-toggle element is disabled or not.\n /\n @Prop() disabled = false;\n\n /\n If true the control is in indeterminate state\n /\n @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n /\n Text for on state\n /\n @Prop() textOn = 'On';\n\n /\n Text for off state\n /\n @Prop() textOff = 'Off';\n\n /\n Text for indeterminate state\n /\n @Prop() textIndeterminate = 'Mixed';\n\n /\n Hide `on` and `off` text\n /\n @Prop() hideText = 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 An event will be dispatched each time the slide-toggle changes its value.\n /\n @Event() checkedChange!: EventEmitter<boolean>;\n\n /* @internal /\n @Event() valueChange!: EventEmitter<string>;\n\n onCheckedChange(newChecked: boolean) {\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n this.checked = newChecked;\n this.checkedChange.emit(this.checked);\n }\n\n componentWillLoad() {\n this.updateFormInternalValue();\n }\n\n updateFormInternalValue(): void {\n if (this.checked) {\n this.formInternals.setFormValue(this.value);\n } else {\n this.formInternals.setFormValue(null);\n }\n }\n\n @Watch('checked')\n watchCheckedChange() {\n this.updateFormInternalValue();\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 render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n }}\n onClick={() => this.onCheckedChange(!this.checked)}\n >\n <input\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n checked={this.checked}\n role=\"switch\"\n tabindex={0}\n type=\"checkbox\"\n aria-checked={a11yBoolean(this.checked)}\n onChange={(event) =>\n this.onCheckedChange((event.target as HTMLInputElement).checked)\n }\n ></input>\n <label class=\"switch\" tabIndex={-1}>\n <span class=\"slider\"></span>\n </label>\n {!this.hideText ? (\n <Fragment>\n {!this.indeterminate ? (\n <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n {this.checked ? this.textOn : this.textOff}\n </span>\n ) : (\n <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n {this.textIndeterminate}\n </span>\n )}\n </Fragment>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-tree-item.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-0f6297c8.js');
-const treeItemCss = ":host{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tree-node-container{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem}:host .icon-toggle-container ix-icon{transition:transform var(--theme-default-time) ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(:disabled):not(.selected).hover),:host(:not(.disabled):not(:disabled):not(.selected):hover){background-color:var(--theme-tree-item--background--hover)}:host(:not(.disabled):not(:disabled):not(.selected).active),:host(:not(.disabled):not(:disabled):not(.selected):active){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}";
+const treeItemCss = ":host{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tree-node-container{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem}:host .icon-toggle-container ix-icon{transition:transform var(--theme-default-time) ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(:disabled):not(.selected).hover),:host(:not(.disabled):not(:disabled):not(.selected):hover){background-color:var(--theme-tree-item--background--hover)}:host(:not(.disabled):not(:disabled):not(.selected).active),:host(:not(.disabled):not(:disabled):not(.selected):active){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}";
 const IxTreeItemStyle0 = treeItemCss;
 const TreeItem = class {
@@ -18,16 +18,16 @@ const TreeItem = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'ba0c464b633cb3ca1ed0c5690245c1a69612e7fb', class: {
+        return (index.h(index.Host, { key: '4facce4de72cf050f1ca5160c23d513a51619182', class: {
                 selected: (_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected,
-            } }, index.h("div", { key: 'b94962dfd5d8be52ae6dab6b209d7f235dc2fc97', class: "icon-toggle-container", onClick: (e) => {
+            } }, index.h("div", { key: '6a5a090480876f134e2900b9ee04d529029b623b', class: "icon-toggle-container", onClick: (e) => {
                 e.preventDefault();
                 this.toggle.emit();
             } }, this.hasChildren ? (index.h("ix-icon", { name: 'chevron-right', size: "16", class: {
                 ['icon-toggle-down']: (_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded,
-            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null), index.h("div", { key: 'ec90acd5573bbb23978666fc9e43e4c107d35ce1', class: "tree-node-container", onClick: () => {
+            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null), index.h("div", { key: 'b46d172c5cb6685270e9259b7a5d9d27a4fab5aa', class: "tree-node-container", onClick: () => {
                 this.itemClick.emit();
-            } }, this.text, index.h("slot", { key: 'd70e947ceceeb7ecef901da3bc48ba58f898d419' }))));
+            } }, this.text, index.h("slot", { key: 'a766a38ebb4913509fe9dceb9e2079653eca9423' }))));
     }
 };
 TreeItem.style = IxTreeItemStyle0;

package/dist/cjs/ix-tree-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-tree-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,~~osDAAosD~~,CAAC;~~AACztD~~,yBAAe,WAAW;;MCgBb,QAAQ;;;;;;;;;IA0BnB,MAAM;;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;aACnC,IAEDD,kEACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,CAAC,CAAC;gBACT,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;aACpB,IAEA,IAAI,CAAC,WAAW,IACfA,qBACE,IAAI,EAAE,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;gBACL,CAAC,kBAAkB,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;aAC/C,EACD,KAAK,EAAE,SACL,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,IAAG,SAAS,GAAG,UACzC,EAAE,GACF,IACA,IAAI,CACJ,EACNA,kEACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE;gBACP,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;aACvB,IAEA,IAAI,CAAC,IAAI,EACVA,oEAAa,CACT,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/tree-item/tree-item.scss?tag=ix-tree-item&encapsulation=shadow","src/components/tree-item/tree-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n align-items: center;\n\n height: 32px;\n width: 100%;\n\n cursor: pointer;\n\n .tree-node-container {\n display: flex;\n align-items: center;\n height: $x-large-space;\n flex-grow: 1;\n align-items: center;\n }\n\n .icon-toggle-container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n\n ix-icon {\n transition: transform var(--theme-default-time) ease-in-out;\n\n &.icon-toggle-down {\n transform: rotate(90deg);\n }\n }\n }\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).hover),\n:host(:not(.disabled):not(:disabled):not(.selected):hover) {\n background-color: var(--theme-tree-item--background--hover);\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).active),\n:host(:not(.disabled):not(:disabled):not(.selected):active) {\n background-color: var(--theme-tree-item--background--active);\n}\n\n:host(.selected) {\n background-color: var(--theme-tree-item--background--selected);\n}\n\n:host(.selected.hover),\n:host(.selected:hover) {\n background-color: var(--theme-tree-item--background--selected-hover);\n}\n\n:host(.selected.active),\n:host(.selected:active) {\n background-color: var(--theme-tree-item--background--selected-active);\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\n\n@Component({\n tag: 'ix-tree-item',\n styleUrl: 'tree-item.scss',\n shadow: true,\n})\nexport class TreeItem {\n /\n Text\n /\n @Prop() text: string;\n\n /\n Has tree item children\n /\n @Prop() hasChildren: boolean;\n\n /\n Context\n /\n @Prop() context: TreeItemContext;\n\n /\n Expand/Collapsed toggled\n /\n @Event() toggle: EventEmitter<void>;\n\n /\n Clicked\n */\n @Event() itemClick: EventEmitter<void>;\n\n render() {\n return (\n <Host\n class={{\n selected: this.context?.isSelected,\n }}\n >\n <div\n class=\"icon-toggle-container\"\n onClick={(e) => {\n e.preventDefault();\n this.toggle.emit();\n }}\n >\n {this.hasChildren ? (\n <ix-icon\n name={'chevron-right'}\n size=\"16\"\n class={{\n ['icon-toggle-down']: this.context?.isExpanded,\n }}\n color={`color-${\n this.context?.isExpanded ? 'primary' : 'std-text'\n }`}\n />\n ) : null}\n </div>\n <div\n class=\"tree-node-container\"\n onClick={() => {\n this.itemClick.emit();\n }}\n >\n {this.text}\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-tree-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,g2DAAg2D,CAAC;AACr3D,yBAAe,WAAW;;MCgBb,QAAQ;;;;;;;;;IA0BnB,MAAM;;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;aACnC,IAEDD,kEACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,CAAC,CAAC;gBACT,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;aACpB,IAEA,IAAI,CAAC,WAAW,IACfA,qBACE,IAAI,EAAE,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;gBACL,CAAC,kBAAkB,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;aAC/C,EACD,KAAK,EAAE,SACL,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,IAAG,SAAS,GAAG,UACzC,EAAE,GACF,IACA,IAAI,CACJ,EACNA,kEACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE;gBACP,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;aACvB,IAEA,IAAI,CAAC,IAAI,EACVA,oEAAa,CACT,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/tree-item/tree-item.scss?tag=ix-tree-item&encapsulation=shadow","src/components/tree-item/tree-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n align-items: center;\n\n height: 32px;\n width: 100%;\n\n cursor: pointer;\n\n .tree-node-container {\n display: flex;\n align-items: center;\n height: $x-large-space;\n flex-grow: 1;\n align-items: center;\n }\n\n .icon-toggle-container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n\n ix-icon {\n transition: transform var(--theme-default-time) ease-in-out;\n\n &.icon-toggle-down {\n transform: rotate(90deg);\n }\n }\n }\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).hover),\n:host(:not(.disabled):not(:disabled):not(.selected):hover) {\n background-color: var(--theme-tree-item--background--hover);\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).active),\n:host(:not(.disabled):not(:disabled):not(.selected):active) {\n background-color: var(--theme-tree-item--background--active);\n}\n\n:host(.selected) {\n background-color: var(--theme-tree-item--background--selected);\n}\n\n:host(.selected.hover),\n:host(.selected:hover) {\n background-color: var(--theme-tree-item--background--selected-hover);\n}\n\n:host(.selected.active),\n:host(.selected:active) {\n background-color: var(--theme-tree-item--background--selected-active);\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\n\n@Component({\n tag: 'ix-tree-item',\n styleUrl: 'tree-item.scss',\n shadow: true,\n})\nexport class TreeItem {\n /\n Text\n /\n @Prop() text: string;\n\n /\n Has tree item children\n /\n @Prop() hasChildren: boolean;\n\n /\n Context\n /\n @Prop() context: TreeItemContext;\n\n /\n Expand/Collapsed toggled\n /\n @Event() toggle: EventEmitter<void>;\n\n /\n Clicked\n */\n @Event() itemClick: EventEmitter<void>;\n\n render() {\n return (\n <Host\n class={{\n selected: this.context?.isSelected,\n }}\n >\n <div\n class=\"icon-toggle-container\"\n onClick={(e) => {\n e.preventDefault();\n this.toggle.emit();\n }}\n >\n {this.hasChildren ? (\n <ix-icon\n name={'chevron-right'}\n size=\"16\"\n class={{\n ['icon-toggle-down']: this.context?.isExpanded,\n }}\n color={`color-${\n this.context?.isExpanded ? 'primary' : 'std-text'\n }`}\n />\n ) : null}\n </div>\n <div\n class=\"tree-node-container\"\n onClick={() => {\n this.itemClick.emit();\n }}\n >\n {this.text}\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-tree.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-0f6297c8.js');
 const _commonjsHelpers = require('./_commonjsHelpers-0192c5b3.js');
 const defaultTreeItem = require('./default-tree-item-309a50cd.js');
@@ -692,7 +692,7 @@ const Tree = class {
         this.hyperlist = new Hyperlist(this.hostElement, config);
     }
     render() {
-        return (index.h(index.Host, { key: '5e3f0e8bbd14073590ed9ae548fa51abb50bd52b' }, index.h("slot", { key: '9e05d42472878f4791cce2033271e1918d40c38f' })));
+        return (index.h(index.Host, { key: 'a64e17e0c6466065fe8de80715cbac794a6e7a95' }, index.h("slot", { key: 'a348c8357097c31e323d95033546d841f1986680' })));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-typography.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-0f6297c8.js');
 const VariantsMapping = {
     'x-small': 'text-xs',
@@ -19,7 +19,7 @@ const VariantsMapping = {
     'default-title-single': 'text-default-title-single',
 };
-const typographyCss = ".typography-label,:host(.typography-label){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-sm);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}.typography-label-xs,:host(.typography-label-xs){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--2);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xxl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-label-sm,:host(.typography-label-sm){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--1);line-height:var(--theme-line-height-sm);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}.typography-label-lg,:host(.typography-label-lg){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-1);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-body,:host(.typography-body){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}.typography-body-xs,:host(.typography-body-xs){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--2);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xxl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-body-sm,:host(.typography-body-sm){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--1);line-height:var(--theme-line-height-lg);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}.typography-body-lg,:host(.typography-body-lg){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-1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display,:host(.typography-display){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-3);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-xs,:host(.typography-display-xs){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-1);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-sm);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-sm,:host(.typography-display-sm){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-2);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-lg,:host(.typography-display-lg){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-4);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-xl,:host(.typography-display-xl){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-5);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-sm);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-xxl,:host(.typography-display-xxl){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-6);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-sm);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h6,.typography-h6,:host(.typography-h6){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--1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h5,.typography-h5,:host(.typography-h5){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-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h4,.typography-h4,:host(.typography-h4){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-1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h3,.typography-h3,:host(.typography-h3){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-2);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h2,.typography-h2,:host(.typography-h2){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-3);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h1,.typography-h1,:host(.typography-h1){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-4);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-code,:host(.typography-code){font-feature-settings:\"clig\" off, \"liga\" off;font-family:JetBrainsMono, Courier New, monospace, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-code-lg,:host(.typography-code-lg){font-feature-settings:\"clig\" off, \"liga\" off;font-family:JetBrainsMono, Courier New, monospace, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-code-sm,:host(.typography-code-sm){font-feature-settings:\"clig\" off, \"liga\" off;font-family:JetBrainsMono, Courier New, monospace, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms--1);line-height:var(--theme-line-height-lg);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}.typography-decoration-none,:host(.typography-decoration-none){text-decoration:none !important}.typography-decoration-underline,:host(.typography-decoration-underline){text-decoration:underline !important}.typography-decoration-line-through,:host(.typography-decoration-line-through){text-decoration:line-through !important}.typography-weight-bold,:host(.typography-weight-bold){font-weight:700 !important}a{color:var(--theme-color-primary)}:host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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(.text-xs){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}:host(.text-s){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}:host(.text-caption){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host(.text-caption-single){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}:host(.text-default){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}:host(.text-default-single){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}:host(.text-default-title){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host(.text-default-title-single){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}:host(.text-l){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}:host(.text-l-single){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}:host(.text-l-title){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host(.text-l-title-single){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}:host(.text-h2){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}:host(.text-xl){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}";
+const typographyCss = ".typography-label,:host(.typography-label){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-sm);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}.typography-label-xs,:host(.typography-label-xs){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--2);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xxl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-label-sm,:host(.typography-label-sm){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--1);line-height:var(--theme-line-height-sm);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}.typography-label-lg,:host(.typography-label-lg){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-1);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-body,:host(.typography-body){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}.typography-body-xs,:host(.typography-body-xs){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--2);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xxl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-body-sm,:host(.typography-body-sm){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--1);line-height:var(--theme-line-height-lg);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}.typography-body-lg,:host(.typography-body-lg){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-1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display,:host(.typography-display){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-3);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-xs,:host(.typography-display-xs){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-1);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-sm);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-sm,:host(.typography-display-sm){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-2);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-lg,:host(.typography-display-lg){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-4);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-xl,:host(.typography-display-xl){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-5);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-sm);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-xxl,:host(.typography-display-xxl){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-6);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-sm);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h6,.typography-h6,:host(.typography-h6){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--1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h5,.typography-h5,:host(.typography-h5){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-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h4,.typography-h4,:host(.typography-h4){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-1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h3,.typography-h3,:host(.typography-h3){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-2);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h2,.typography-h2,:host(.typography-h2){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-3);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h1,.typography-h1,:host(.typography-h1){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-4);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-code,:host(.typography-code){font-feature-settings:\"clig\" off, \"liga\" off;font-family:JetBrainsMono, Courier New, monospace, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-code-lg,:host(.typography-code-lg){font-feature-settings:\"clig\" off, \"liga\" off;font-family:JetBrainsMono, Courier New, monospace, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-code-sm,:host(.typography-code-sm){font-feature-settings:\"clig\" off, \"liga\" off;font-family:JetBrainsMono, Courier New, monospace, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms--1);line-height:var(--theme-line-height-lg);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}.typography-decoration-none,:host(.typography-decoration-none){text-decoration:none !important}.typography-decoration-underline,:host(.typography-decoration-underline){text-decoration:underline !important}.typography-decoration-line-through,:host(.typography-decoration-line-through){text-decoration:line-through !important}.typography-weight-bold,:host(.typography-weight-bold){font-weight:700 !important}a{color:var(--theme-color-primary)}:host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.text-xs){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}:host(.text-s){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}:host(.text-caption){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host(.text-caption-single){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}:host(.text-default){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}:host(.text-default-single){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}:host(.text-default-title){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host(.text-default-title-single){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}:host(.text-l){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}:host(.text-l-single){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}:host(.text-l-title){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host(.text-l-title-single){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}:host(.text-h2){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}:host(.text-xl){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}";
 const IxTypographyStyle0 = typographyCss;
 const IxTypography = class {

package/dist/cjs/ix-typography.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-typography.entry.cjs.js","mappings":";;;;;;AAsBO,MAAM,eAAe,GAAuC;IACjE,SAAS,EAAE,SAAS;IACpB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,cAAc;IACvB,gBAAgB,EAAE,qBAAqB;IACvC,OAAO,EAAE,cAAc;IACvB,gBAAgB,EAAE,qBAAqB;IACvC,KAAK,EAAE,QAAQ;IACf,cAAc,EAAE,eAAe;IAC/B,EAAE,EAAE,SAAS;IACb,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,oBAAoB;IACrC,sBAAsB,EAAE,2BAA2B;CACpD;;ACnCD,MAAM,aAAa,GAAG,~~2rbAA2rb~~,CAAC;~~AACltb~~,2BAAe,aAAa;;MCmEf,YAAY;;;;;;;oBA8BR,KAAK;8BAKqB,MAAM;;IAE/C,MAAM;;QACJ,IAAI,eAAe,GAAG,EAAE,CAAC;QAEzB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,eAAe,CAAC,eAAe,CAAC,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC;SACpE;aAAM;YACL,eAAe,CAAC,cAAc,MAAA,IAAI,CAAC,MAAM,mCAAI,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;SAC/D;QAED,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE;YAClC,eAAe,CAAC,yBAAyB,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,IAAI,CAAC;SACxE;QAED,eAAe,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QAEtD,IAAI,KAAK,GAAG,EAAE,CAAC;QAEf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,KAAK,QAAQ;aAC/C,CAAC;SACH;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,SAAS,QAAQ;aACnD,CAAC;SACH;QAED,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,IACxCD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/typography/type-mapping.ts","src/components/typography/typography.scss?tag=ix-typography&encapsulation=shadow","src/components/typography/typography.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 /\nexport type TypographyVariants =\n \| 'x-small'\n \| 'small'\n \| 'caption'\n \| 'caption-single'\n \| 'default'\n \| 'default-single'\n \| 'default-title'\n \| 'default-title-single'\n \| 'large'\n \| 'large-single'\n \| 'h2'\n \| 'display-large';\n\nexport const VariantsMapping: Record<TypographyVariants, string> = {\n 'x-small': 'text-xs',\n small: 'text-s',\n caption: 'text-caption',\n 'caption-single': 'text-caption-single',\n default: 'text-default',\n 'default-single': 'text-default-single',\n large: 'text-l',\n 'large-single': 'text-l-single',\n h2: 'text-h2',\n 'display-large': 'text-xl',\n 'default-title': 'text-default-title',\n 'default-title-single': 'text-default-title-single',\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 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n@import 'components/fonts';\n@import 'mixins/fonts';\n\n:host {\n @include ix-component;\n\n display: block;\n position: relative;\n}\n\n:host(.text-xs) {\n @include text-xs;\n}\n\n:host(.text-s) {\n @include text-s;\n}\n\n:host(.text-caption) {\n @include text-caption;\n}\n\n:host(.text-caption-single) {\n @include text-caption-single;\n}\n\n:host(.text-default) {\n @include text-default;\n}\n\n:host(.text-default-single) {\n @include text-default-single;\n}\n\n:host(.text-default-title) {\n @include text-default-title;\n}\n\n:host(.text-default-title-single) {\n @include text-default-title-single;\n}\n\n:host(.text-l) {\n @include text-l;\n}\n\n:host(.text-l-single) {\n @include text-l-single;\n}\n\n:host(.text-l-title) {\n @include text-l-title;\n}\n\n:host(.text-l-title-single) {\n @include text-l-title-single;\n}\n\n:host(.text-h2) {\n @include text-h2;\n}\n\n:host(.text-xl) {\n @include text-xl;\n}\n\n$typography-formats: label, label-xs, label-sm, label-lg, body, body-xs, body-sm,\n body-lg, display, display-xs, display-sm, display-lg, display-xl, display-xxl,\n h6, h5, h4, h3, h2, h1, code, code-sm, code-lg;\n\n@each $format in $typography-formats {\n :host(.typography-#{$format}) {\n @extend .typography-#{$format};\n }\n}\n\n$typography-decoration: none, underline, line-through;\n@each $decoration in $typography-decoration {\n :host(.typography-decoration-#{$decoration}) {\n @extend .typography-decoration-#{$decoration};\n }\n}\n\n:host(.typography-weight-bold) {\n @extend .typography-weight-bold;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { VariantsMapping } from './type-mapping';\n\nexport type TypographyVariants =\n \| 'x-small'\n \| 'small'\n \| 'caption'\n \| 'caption-single'\n \| 'default'\n \| 'default-single'\n \| 'default-title'\n \| 'default-title-single'\n \| 'large'\n \| 'large-single'\n \| 'large-title'\n \| 'large-title-single'\n \| 'h2'\n \| 'display-large';\n\nexport type TypographyColors =\n \| 'contrast'\n \| 'std'\n \| 'soft'\n \| 'weak'\n \| 'inv-contrast'\n \| 'inv-std'\n \| 'inv-soft'\n \| 'inv-weak'\n \| 'alarm';\n\ntype TypographyFormatLabel = 'label' \| 'label-xs' \| 'label-sm' \| 'label-lg';\ntype TypographyFormatBody = 'body' \| 'body-xs' \| 'body-sm' \| 'body-lg';\ntype TypographyFormatDisplay =\n \| 'display'\n \| 'display-xs'\n \| 'display-sm'\n \| 'display-lg'\n \| 'display-xl'\n \| 'display-xxl';\ntype TypographyFormatHeading = 'h6' \| 'h5' \| 'h4' \| 'h3' \| 'h2' \| 'h1';\ntype TypographyFormatCode = 'code' \| 'code-sm' \| 'code-lg';\n\nexport type TypographyFormat =\n \| TypographyFormatLabel\n \| TypographyFormatBody\n \| TypographyFormatDisplay\n \| TypographyFormatHeading\n \| TypographyFormatCode;\n\nexport type TextDecoration = 'none' \| 'underline' \| 'line-through';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-typography',\n styleUrl: 'typography.scss',\n shadow: true,\n})\nexport class IxTypography {\n /\n Font variant based on theme variables\n \n @deprecated Use `format` property\n * @internal\n /\n @Prop() variant: TypographyVariants;\n\n /\n Text format\n /\n @Prop() format: TypographyFormat;\n\n /\n Text color based on theme variables\n \n @deprecated since 2.1.0 use property `text-color`\n /\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() color: TypographyColors;\n\n /\n Text color based on theme variables\n /\n @Prop() textColor: TypographyColors;\n\n /\n Display text bold\n /\n @Prop() bold = false;\n\n /\n Text decoration\n */\n @Prop() textDecoration: TextDecoration = 'none';\n\n render() {\n let typographyClass = {};\n\n if (this.variant) {\n typographyClass[VariantsMapping[this.variant ?? 'default']] = true;\n } else {\n typographyClass[`typography-${this.format ?? 'body'}`] = true;\n }\n\n if (this.textDecoration !== 'none') {\n typographyClass[`typography-decoration-${this.textDecoration}`] = true;\n }\n\n typographyClass['typography-weight-bold'] = this.bold;\n\n let style = {};\n\n if (this.color) {\n style = {\n color: `var(--theme-color-${this.color}-text)`,\n };\n }\n\n if (this.textColor) {\n style = {\n color: `var(--theme-color-${this.textColor}-text)`,\n };\n }\n\n return (\n <Host class={typographyClass} style={style}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-typography.entry.cjs.js","mappings":";;;;;;AAsBO,MAAM,eAAe,GAAuC;IACjE,SAAS,EAAE,SAAS;IACpB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,cAAc;IACvB,gBAAgB,EAAE,qBAAqB;IACvC,OAAO,EAAE,cAAc;IACvB,gBAAgB,EAAE,qBAAqB;IACvC,KAAK,EAAE,QAAQ;IACf,cAAc,EAAE,eAAe;IAC/B,EAAE,EAAE,SAAS;IACb,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,oBAAoB;IACrC,sBAAsB,EAAE,2BAA2B;CACpD;;ACnCD,MAAM,aAAa,GAAG,u1bAAu1b,CAAC;AAC92b,2BAAe,aAAa;;MCmEf,YAAY;;;;;;;oBA8BR,KAAK;8BAKqB,MAAM;;IAE/C,MAAM;;QACJ,IAAI,eAAe,GAAG,EAAE,CAAC;QAEzB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,eAAe,CAAC,eAAe,CAAC,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC;SACpE;aAAM;YACL,eAAe,CAAC,cAAc,MAAA,IAAI,CAAC,MAAM,mCAAI,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;SAC/D;QAED,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE;YAClC,eAAe,CAAC,yBAAyB,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,IAAI,CAAC;SACxE;QAED,eAAe,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QAEtD,IAAI,KAAK,GAAG,EAAE,CAAC;QAEf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,KAAK,QAAQ;aAC/C,CAAC;SACH;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,SAAS,QAAQ;aACnD,CAAC;SACH;QAED,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,IACxCD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/typography/type-mapping.ts","src/components/typography/typography.scss?tag=ix-typography&encapsulation=shadow","src/components/typography/typography.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 /\nexport type TypographyVariants =\n \| 'x-small'\n \| 'small'\n \| 'caption'\n \| 'caption-single'\n \| 'default'\n \| 'default-single'\n \| 'default-title'\n \| 'default-title-single'\n \| 'large'\n \| 'large-single'\n \| 'h2'\n \| 'display-large';\n\nexport const VariantsMapping: Record<TypographyVariants, string> = {\n 'x-small': 'text-xs',\n small: 'text-s',\n caption: 'text-caption',\n 'caption-single': 'text-caption-single',\n default: 'text-default',\n 'default-single': 'text-default-single',\n large: 'text-l',\n 'large-single': 'text-l-single',\n h2: 'text-h2',\n 'display-large': 'text-xl',\n 'default-title': 'text-default-title',\n 'default-title-single': 'text-default-title-single',\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 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n@import 'components/fonts';\n@import 'mixins/fonts';\n\n:host {\n @include ix-component;\n\n display: block;\n position: relative;\n}\n\n:host(.text-xs) {\n @include text-xs;\n}\n\n:host(.text-s) {\n @include text-s;\n}\n\n:host(.text-caption) {\n @include text-caption;\n}\n\n:host(.text-caption-single) {\n @include text-caption-single;\n}\n\n:host(.text-default) {\n @include text-default;\n}\n\n:host(.text-default-single) {\n @include text-default-single;\n}\n\n:host(.text-default-title) {\n @include text-default-title;\n}\n\n:host(.text-default-title-single) {\n @include text-default-title-single;\n}\n\n:host(.text-l) {\n @include text-l;\n}\n\n:host(.text-l-single) {\n @include text-l-single;\n}\n\n:host(.text-l-title) {\n @include text-l-title;\n}\n\n:host(.text-l-title-single) {\n @include text-l-title-single;\n}\n\n:host(.text-h2) {\n @include text-h2;\n}\n\n:host(.text-xl) {\n @include text-xl;\n}\n\n$typography-formats: label, label-xs, label-sm, label-lg, body, body-xs, body-sm,\n body-lg, display, display-xs, display-sm, display-lg, display-xl, display-xxl,\n h6, h5, h4, h3, h2, h1, code, code-sm, code-lg;\n\n@each $format in $typography-formats {\n :host(.typography-#{$format}) {\n @extend .typography-#{$format};\n }\n}\n\n$typography-decoration: none, underline, line-through;\n@each $decoration in $typography-decoration {\n :host(.typography-decoration-#{$decoration}) {\n @extend .typography-decoration-#{$decoration};\n }\n}\n\n:host(.typography-weight-bold) {\n @extend .typography-weight-bold;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { VariantsMapping } from './type-mapping';\n\nexport type TypographyVariants =\n \| 'x-small'\n \| 'small'\n \| 'caption'\n \| 'caption-single'\n \| 'default'\n \| 'default-single'\n \| 'default-title'\n \| 'default-title-single'\n \| 'large'\n \| 'large-single'\n \| 'large-title'\n \| 'large-title-single'\n \| 'h2'\n \| 'display-large';\n\nexport type TypographyColors =\n \| 'contrast'\n \| 'std'\n \| 'soft'\n \| 'weak'\n \| 'inv-contrast'\n \| 'inv-std'\n \| 'inv-soft'\n \| 'inv-weak'\n \| 'alarm';\n\ntype TypographyFormatLabel = 'label' \| 'label-xs' \| 'label-sm' \| 'label-lg';\ntype TypographyFormatBody = 'body' \| 'body-xs' \| 'body-sm' \| 'body-lg';\ntype TypographyFormatDisplay =\n \| 'display'\n \| 'display-xs'\n \| 'display-sm'\n \| 'display-lg'\n \| 'display-xl'\n \| 'display-xxl';\ntype TypographyFormatHeading = 'h6' \| 'h5' \| 'h4' \| 'h3' \| 'h2' \| 'h1';\ntype TypographyFormatCode = 'code' \| 'code-sm' \| 'code-lg';\n\nexport type TypographyFormat =\n \| TypographyFormatLabel\n \| TypographyFormatBody\n \| TypographyFormatDisplay\n \| TypographyFormatHeading\n \| TypographyFormatCode;\n\nexport type TextDecoration = 'none' \| 'underline' \| 'line-through';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-typography',\n styleUrl: 'typography.scss',\n shadow: true,\n})\nexport class IxTypography {\n /\n Font variant based on theme variables\n \n @deprecated Use `format` property\n * @internal\n /\n @Prop() variant: TypographyVariants;\n\n /\n Text format\n /\n @Prop() format: TypographyFormat;\n\n /\n Text color based on theme variables\n \n @deprecated since 2.1.0 use property `text-color`\n /\n // eslint-disable-next-line @stencil-community/reserved-member-names\n @Prop() color: TypographyColors;\n\n /\n Text color based on theme variables\n /\n @Prop() textColor: TypographyColors;\n\n /\n Display text bold\n /\n @Prop() bold = false;\n\n /\n Text decoration\n */\n @Prop() textDecoration: TextDecoration = 'none';\n\n render() {\n let typographyClass = {};\n\n if (this.variant) {\n typographyClass[VariantsMapping[this.variant ?? 'default']] = true;\n } else {\n typographyClass[`typography-${this.format ?? 'body'}`] = true;\n }\n\n if (this.textDecoration !== 'none') {\n typographyClass[`typography-decoration-${this.textDecoration}`] = true;\n }\n\n typographyClass['typography-weight-bold'] = this.bold;\n\n let style = {};\n\n if (this.color) {\n style = {\n color: `var(--theme-color-${this.color}-text)`,\n };\n }\n\n if (this.textColor) {\n style = {\n color: `var(--theme-color-${this.textColor}-text)`,\n };\n }\n\n return (\n <Host class={typographyClass} style={style}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-upload.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-0f6297c8.js');
 const uploadFileState = require('./upload-file-state-3e9d929d.js');
-const uploadCss = ":host{display:block;min-height:4rem;height:4rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .file-upload-area{display:flex;flex-direction:row;align-items:center;justify-content:space-between;overflow:hidden;height:100%;width:100%;padding:1rem;border:1px dashed var(--theme-upload--border-color);border-radius:var(--theme-upload--border-radius);color:var(--theme-upload-text--color)}:host .file-upload-area.multiline{max-height:unset;height:auto}:host .file-upload-area.multiline .glyph{align-self:flex-start;margin-block-start:3px}:host .file-upload-area.multiline>div{align-self:flex-start}:host .file-upload-area:not(.multiline) .state,:host .file-upload-area:not(.multiline) .upload-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .file-upload-area:not(.disabled).file-over{border-color:var(--theme-upload--border-color--dragover);border-style:solid}:host .file-upload-area.checking{color:var(--theme-upload-text--color--checking);border-style:solid}:host .file-upload-area.disabled{border-style:solid;color:var(--theme-upload-text--color--disabled)}:host .file-upload-area ix-button{margin-inline-start:1rem}:host .file-upload-area .upload-browser{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host .file-upload-area .loader{margin:2.187rem auto;font-size:0.937rem;width:1rem;height:1rem;border-radius:50%;position:relative;text-indent:-9999em;animation:optimise-loading 1.1s infinite ease;transform:translateZ(0)}:host .file-upload-area .upload-filename{margin-bottom:1rem}:host .file-upload-area .state{display:flex;align-items:center}:host .file-upload-area .state>ix-spinner{margin-inline-end:0.5rem;height:1.5rem;width:1.5rem}:host .file-upload-area .state>ix-icon{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon.icon-error{color:var(--theme-color-alarm)}:host .file-upload-area .state>ix-icon.icon-success{color:var(--theme-color-success)}:host(.disabled){pointer-events:none}";
+const uploadCss = ":host{display:block;min-height:4rem;height:4rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .file-upload-area{display:flex;flex-direction:row;align-items:center;justify-content:space-between;overflow:hidden;height:100%;width:100%;padding:1rem;border:1px dashed var(--theme-upload--border-color);border-radius:var(--theme-upload--border-radius);color:var(--theme-upload-text--color)}:host .file-upload-area.multiline{max-height:unset;height:auto}:host .file-upload-area.multiline .glyph{align-self:flex-start;margin-block-start:3px}:host .file-upload-area.multiline>div{align-self:flex-start}:host .file-upload-area:not(.multiline) .state,:host .file-upload-area:not(.multiline) .upload-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .file-upload-area:not(.disabled).file-over{border-color:var(--theme-upload--border-color--dragover);border-style:solid}:host .file-upload-area.checking{color:var(--theme-upload-text--color--checking);border-style:solid}:host .file-upload-area.disabled{border-style:solid;color:var(--theme-upload-text--color--disabled)}:host .file-upload-area ix-button{margin-inline-start:1rem}:host .file-upload-area .upload-browser{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host .file-upload-area .loader{margin:2.187rem auto;font-size:0.937rem;width:1rem;height:1rem;border-radius:50%;position:relative;text-indent:-9999em;animation:optimise-loading 1.1s infinite ease;transform:translateZ(0)}:host .file-upload-area .upload-filename{margin-bottom:1rem}:host .file-upload-area .state{display:flex;align-items:center}:host .file-upload-area .state>ix-spinner{margin-inline-end:0.5rem;height:1.5rem;width:1.5rem}:host .file-upload-area .state>ix-icon{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon.icon-error{color:var(--theme-color-alarm)}:host .file-upload-area .state>ix-icon.icon-success{color:var(--theme-color-success)}:host(.disabled){pointer-events:none}";
 const IxUploadStyle0 = uploadCss;
 const Upload = class {
@@ -87,7 +87,7 @@ const Upload = class {
         this.filesToUpload = obj;
     }
     render() {
-        return (index.h(index.Host, { key: 'c13c30ad2fa2a251ad872d7b0461f625798a3d2a' }, index.h("div", { key: '572bf6899630cdc1fdff1518750415270792a368', class: {
+        return (index.h(index.Host, { key: '6578e437c8322cf20dbaa01ad7cce0085f840e37' }, index.h("div", { key: 'b45e0c890ab3a2d8eb3fe8e6c380d456414881d5', class: {
                 'file-upload-area': true,
                 'file-over': this.state !== uploadFileState.UploadFileState.LOADING && this.isFileOver,
                 checking: this.state === uploadFileState.UploadFileState.LOADING,
@@ -97,9 +97,9 @@ const Upload = class {
                 if (this.state !== uploadFileState.UploadFileState.LOADING) {
                     this.fileDropped(e);
                 }
-            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), index.h("div", { key: '5c48357676e704f0e285e510059593c526ca47fc' }, index.h("input", { key: '5ed9faca22b46db4962c64ff3822c59d3e44cf95', multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
+            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), index.h("div", { key: '5104dd9de609f5c726444f1c60c69973e01d5202' }, index.h("input", { key: 'da71d0df9e3c11ef25d7826e0e266b37b21db5e9', multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
                 this.fileChangeEvent(e);
-            }, accept: this.accept }), index.h("ix-button", { key: '6e5bcfec5d982c8674e6bf38bbf1e0d805b1af0f', tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === uploadFileState.UploadFileState.LOADING }, this.i18nUploadFile)))));
+            }, accept: this.accept }), index.h("ix-button", { key: '4ee1da0f8ce7066c8d36338327fc63a0d0c6eaa4', tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === uploadFileState.UploadFileState.LOADING }, this.i18nUploadFile)))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-upload.cjs.entry.js.map CHANGED Viewed

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

package/dist/cjs/ix-validation-tooltip.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-0f6297c8.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-94b4d17c.js');
 const validationTooltipCss = ".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{display:inline-block;position:relative;width:100%}:host .validation-tooltip{background-color:var(--theme-tootlip--background);color:var(--theme-tooltip--color);padding:5px 10px;border-radius:4px;font-size:13px;border:1px solid var(--theme-tooltip--border-color);box-shadow:0 0 2px 0 rgba(0, 0, 40, 0.1), 0 4px 8px 0 rgba(0, 0, 40, 0.1), 0 12px 18px 0 rgba(0, 0, 40, 0.1)}:host .validation-tooltip #arrow,:host .validation-tooltip #arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host .validation-tooltip #arrow{visibility:hidden}:host .validation-tooltip #arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}:host .validation-tooltip>#arrow{bottom:-5px}:host .validation-tooltip>#arrow::before{border-right:1px solid var(--theme-tooltip--border-color);border-bottom:1px solid var(--theme-tooltip--border-color)}";
@@ -133,13 +133,13 @@ const ValidationTooltip = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '2adabc09b27adab332a05e06f95f778e635db7cf' }, index.h("slot", { key: '9737aa1f46813f88404c5a80eaf0b8e1c6b166c4' }), index.h("div", { key: '6be2cd8f7c24bd7c3ddc42218ca0b70d3c56dc0a', role: "tooltip", style: {
+        return (index.h(index.Host, { key: '0c772922a6bdaec23f9d83246d593b46c26e291b' }, index.h("slot", { key: '198a41c6cb92903c326f2e8d5df3e6a0c92c6522' }), index.h("div", { key: '717146460e3883374b1c0fbd42d279e5b4d27f8e', role: "tooltip", style: {
                 display: 'none',
                 position: 'fixed',
                 top: '0',
                 left: '0',
                 transform: `translate(${Math.round(((_a = this.tooltipPosition) === null || _a === void 0 ? void 0 : _a.x) || 0)}px,${Math.round(((_b = this.tooltipPosition) === null || _b === void 0 ? void 0 : _b.y) || 0)}px)`,
-            }, class: "validation-tooltip text-default" }, this.message, index.h("slot", { key: '228c539e4447ce9a4c89ffe584f9b712ccaa1924', name: "tooltip-message" }), index.h("div", { key: 'cdbaf18c6c2033b9b03e33b4e5826309f504df14', id: "arrow" }))));
+            }, class: "validation-tooltip text-default" }, this.message, index.h("slot", { key: '6e60e1004bb8d37adb63dd220c7ff0353510b6fa', name: "tooltip-message" }), index.h("div", { key: 'a6050ccd86d15333835273a011860178df314ee1', id: "arrow" }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-workflow-step.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-0f6297c8.js');
-const workflowStepCss = ":host(:not(.host-vertical)){width:12rem;height:4rem;min-width:2rem;min-height:4rem;max-width:12rem}:host(.host-vertical){width:100%;height:4rem;min-width:4rem;min-height:2rem;max-height:12rem}:host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 .step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);padding:1.125rem 0 0.5rem 0}:host .step .wrapper{display:flex;width:100%;align-items:center;justify-content:center;position:relative}:host .step .wrapper .line{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}:host .step .wrapper .line.first,:host .step .wrapper .line.last{width:50%;margin:0 0 0 auto}:host .step .wrapper .line.last{margin:0 auto 0 0}:host .step .wrapper .line.single{width:0}:host .step .wrapper .line.selected{background-color:var(--theme-workflow-step-icon-default--color--selected)}:host .step .wrapper .line.done{background-color:var(--theme-workflow-step-icon-done--color)}:host .step .wrapper .line.done.selected{background-color:var(--theme-workflow-step-icon-done--color--selected)}:host .step .wrapper .line.warning{background-color:var(--theme-color-warning)}:host .step .wrapper .line.success{background-color:var(--theme-color-success)}:host .step .wrapper .line.error{background-color:var(--theme-color-alarm)}:host .step .wrapper .iconWrapper{display:flex;align-items:center;justify-content:center;position:absolute}:host .step .wrapper .iconWrapper .absolute{position:absolute}:host .step .text{margin-top:1rem;width:100%;padding:0 0.5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center}:host .step.vertical{flex-direction:row;padding:0;height:100%}:host .step.vertical .wrapper{width:auto;padding-left:1.125rem;height:100%}:host .step.vertical .wrapper .line{width:0.125rem;height:100%}:host .step.vertical .wrapper .line.first,:host .step.vertical .wrapper .line.last{height:50%;margin:auto 0 0 0}:host .step.vertical .wrapper .line.last{margin:0 0 auto 0}:host .step.vertical .wrapper .line.single{width:0}:host .step.vertical .text{margin:0 1rem;padding:0;width:auto}:host .step.clickable:hover{background-color:var(--theme-workflow-step--background--hover)}:host .step.clickable:active{background-color:var(--theme-workflow-step--background--active)}:host .step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}:host .step.selected{background-color:var(--theme-workflow-step--background--selected)}:host .step.disabled{background-color:var(--theme-workflow-step--background--disabled)}:host .step.disabled .line{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}:host .step.disabled .text{color:var(--theme-workflow-step--color--disabled)}";
+const workflowStepCss = ":host(:not(.host-vertical)){width:12rem;height:4rem;min-width:2rem;min-height:4rem;max-width:12rem}:host(.host-vertical){width:100%;height:4rem;min-width:4rem;min-height:2rem;max-height:12rem}:host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);padding:1.125rem 0 0.5rem 0}:host .step .wrapper{display:flex;width:100%;align-items:center;justify-content:center;position:relative}:host .step .wrapper .line{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}:host .step .wrapper .line.first,:host .step .wrapper .line.last{width:50%;margin:0 0 0 auto}:host .step .wrapper .line.last{margin:0 auto 0 0}:host .step .wrapper .line.single{width:0}:host .step .wrapper .line.selected{background-color:var(--theme-workflow-step-icon-default--color--selected)}:host .step .wrapper .line.done{background-color:var(--theme-workflow-step-icon-done--color)}:host .step .wrapper .line.done.selected{background-color:var(--theme-workflow-step-icon-done--color--selected)}:host .step .wrapper .line.warning{background-color:var(--theme-color-warning)}:host .step .wrapper .line.success{background-color:var(--theme-color-success)}:host .step .wrapper .line.error{background-color:var(--theme-color-alarm)}:host .step .wrapper .iconWrapper{display:flex;align-items:center;justify-content:center;position:absolute}:host .step .wrapper .iconWrapper .absolute{position:absolute}:host .step .text{margin-top:1rem;width:100%;padding:0 0.5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center}:host .step.vertical{flex-direction:row;padding:0;height:100%}:host .step.vertical .wrapper{width:auto;padding-left:1.125rem;height:100%}:host .step.vertical .wrapper .line{width:0.125rem;height:100%}:host .step.vertical .wrapper .line.first,:host .step.vertical .wrapper .line.last{height:50%;margin:auto 0 0 0}:host .step.vertical .wrapper .line.last{margin:0 0 auto 0}:host .step.vertical .wrapper .line.single{width:0}:host .step.vertical .text{margin:0 1rem;padding:0;width:auto}:host .step.clickable:hover{background-color:var(--theme-workflow-step--background--hover)}:host .step.clickable:active{background-color:var(--theme-workflow-step--background--active)}:host .step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}:host .step.selected{background-color:var(--theme-workflow-step--background--selected)}:host .step.disabled{background-color:var(--theme-workflow-step--background--disabled)}:host .step.disabled .line{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}:host .step.disabled .text{color:var(--theme-workflow-step--color--disabled)}";
 const IxWorkflowStepStyle0 = workflowStepCss;
 const WorkflowStep = class {
@@ -60,7 +60,7 @@ const WorkflowStep = class {
             this.iconColor = 'workflow-step-icon-success--color--disabled';
         }
     }
-    componentDidLoad() {
+    componentWillLoad() {
         this.watchPropHandler();
         this.selectedHandler();
         this.customIconSlot = !!this.hostElement.querySelector('[slot="custom-icon"]');
@@ -72,18 +72,18 @@ const WorkflowStep = class {
     }
     render() {
         const icons = !this.customIconSlot ? (index.h(index.Fragment, null, index.h("ix-icon", { color: "color-1", name: this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled', class: "absolute", size: "24" }), index.h("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24" }))) : null;
-        return (index.h(index.Host, { key: '9c612e6f80143d4312405fb896649976119df0a1', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, index.h("div", { key: '903de7186de582d8805c5603d61e8eba7795a520', tabIndex: 0, class: {
+        return (index.h(index.Host, { key: 'f955688afc40cfec2e7dc8e817608263393574bc', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, index.h("div", { key: '0044da6901febea340fa1c587b9176836d31ad1e', tabIndex: 0, class: {
                 step: true,
                 selected: this.selected,
                 vertical: this.vertical,
                 disabled: this.disabled,
                 clickable: this.clickable && !this.disabled,
-            } }, index.h("div", { key: '64f19c3c4506509706ae7395b402680bebc5eb38', class: "wrapper" }, index.h("div", { key: '34667014d7efedc776c043bda6cb2c83308c93a3', class: {
+            } }, index.h("div", { key: 'd88a6268a91385dccf888a1a47d0c96d93b1a0eb', class: "wrapper" }, index.h("div", { key: 'a83b9776004cdc76d624bf7dcad874a2a891644b', class: {
                 line: true,
                 selected: this.selected,
                 [this.status]: true,
                 [this.position]: true,
-            } }), index.h("div", { key: '548510e9fc89b7053f15c34c0a676d111e47de45', class: "iconWrapper" }, icons, index.h("slot", { key: '8e7e8a3b830e36f32440ac34eac923cdf1a28fbc', name: "custom-icon" }))), index.h("div", { key: 'e0430bc1a23569f5981c5def30874fd09468dff3', class: "text" }, index.h("slot", { key: 'fc1c638696cb585083374a22cc6132fe282226e6' })))));
+            } }), index.h("div", { key: 'f3eb2bbc583e40162cf1bf579d6a61945a41d819', class: "iconWrapper" }, icons, index.h("slot", { key: '34820c6841302866adb0beec34787aee6b54107d', name: "custom-icon" }))), index.h("div", { key: '2e2428021c4fc9b3308927c18287e7eb7263b1be', class: "text" }, index.h("slot", { key: '595fa991bf3bfeeb4c4d9351763591b64a4bc6c3' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {