npm - @siemens/ix - Versions diffs - 2.5.0 → 2.6.0 - Mend

@siemens/ix 2.5.0 → 2.6.0

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 (1456) hide show

package/components/ix-toggle.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { a as a11yBoolean } from './a11y.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}@-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}: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::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{background-color:var(--theme-switch-on--background);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 = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement {
@@ -10,6 +10,10 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         this.__registerHost();
         this.__attachShadow();
         this.checkedChange = createEvent(this, "checkedChange", 7);
+        this.valueChange = createEvent(this, "valueChange", 7);
+        this.formInternals = this.attachInternals();
+        this.name = undefined;
+        this.value = 'on';
         this.checked = false;
         this.disabled = false;
         this.indeterminate = false;
@@ -17,6 +21,7 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         this.textOff = 'Off';
         this.textIndeterminate = 'Mixed';
         this.hideText = false;
+        this.required = false;
     }
     onCheckedChange(newChecked) {
         if (this.indeterminate) {
@@ -25,21 +30,54 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         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 (h(Host, { key: '03673f4b416522c1c2b2ad8c9bb1727d58a065e5', class: {
+        return (h(Host, { key: '2aafe9718c088e425a93a520063a55690dfa2f4e', class: {
                 disabled: this.disabled,
-            }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { key: '8360bbdea9eaa0e801f551432e927c9231ece5ee', disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), h("label", { key: '1e3920edd2a4348ed08bf6311a1575ffa3e26ebd', class: "switch", tabIndex: -1 }, h("span", { key: 'c0a6a39e7f840be27443986b61e6c70750a0d364', class: "slider" })), !this.hideText ? (h(Fragment, null, !this.indeterminate ? (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.textIndeterminate)))) : null));
+            }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { key: 'eba13dd0d816d4f93113b7bc3eff1bd9bb304eb2', disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), h("label", { key: '587d507fb9e5208d4dfad4be72ca6a1483a3b96a', class: "switch", tabIndex: -1 }, h("span", { key: '6e3d43c84b83d15d1196aa4df1ab1944be820c25', class: "slider" })), !this.hideText ? (h(Fragment, null, !this.indeterminate ? (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.textIndeterminate)))) : null));
     }
+    static get formAssociated() { return true; }
     get hostElement() { return this; }
+    static get watchers() { return {
+        "checked": ["watchCheckedChange"]
+    }; }
     static get style() { return IxToggleStyle0; }
-}, [1, "ix-toggle", {
+}, [65, "ix-toggle", {
+        "name": [513],
+        "value": [513],
         "checked": [1540],
         "disabled": [4],
         "indeterminate": [1540],
         "textOn": [1, "text-on"],
         "textOff": [1, "text-off"],
         "textIndeterminate": [1, "text-indeterminate"],
-        "hideText": [4, "hide-text"]
+        "hideText": [4, "hide-text"],
+        "required": [516],
+        "hasValidValue": [64],
+        "getAssociatedFormElement": [64]
+    }, undefined, {
+        "checked": ["watchCheckedChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/ix-toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-toggle.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,27GAA27G,CAAC;AAC98G,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,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAElD,8DACE,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,kBACD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAAc,CAAC,OAAO,CAAC,GAE9C,EACT,8DAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,IAChC,6DAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB,EACP,CAAC,IAAI,CAAC,QAAQ,IACb,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,IAClB,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CACrC,KAEP,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,IACT,IAAI,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,+mbAA+mb,CAAC;AAClob,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,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAElD,8DACE,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,kBACD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC,GAE3D,EACT,8DAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,IAChC,6DAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB,EACP,CAAC,IAAI,CAAC,QAAQ,IACb,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,IAClB,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CACrC,KAEP,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,IACT,IAAI,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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::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 background-color: var(--theme-switch-on--background);\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/input';\n\n/\n @form-ready 2.6.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/components/ix-tree.js CHANGED Viewed

@@ -712,7 +712,7 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
         this.hyperlist = new Hyperlist(this.hostElement, config);
     }
     render() {
-        return (h(Host, { key: '672a6f112262bbce6960705dfb77d3b95b427546' }, h("slot", { key: '8b471762405fe96efc0b9b72957ea2fa717b674a' })));
+        return (h(Host, { key: '546ff1bb1f22e6a0ce218f560a667ef329ae86d3' }, h("slot", { key: 'b80ab61e3b9985743cf29e481f52393e20ff6fc3' })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-upload.js CHANGED Viewed

@@ -1,27 +1,75 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { U as UploadFileState } from './upload-file-state.js';
+import { b as a11yHostAttributes } from './a11y.js';
 import { d as defineCustomElement$3 } from './button.js';
 import { d as defineCustomElement$2 } from './spinner.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}@-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 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}: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;
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 const Upload = /*@__PURE__*/ proxyCustomElement(class Upload extends HTMLElement {
     get inputElement() {
         return this.hostElement.shadowRoot.querySelector('#upload-browser');
     }
-    constructor() { super(); this.__registerHost(); this.__attachShadow(); this.filesChanged = createEvent(this, "filesChanged", 7); this.accept = undefined; this.multiple = false; this.multiline = false; this.disabled = false; this.state = UploadFileState.SELECT_FILE; this.selectFileText = '+ Drag files here or…'; this.loadingText = 'Checking files…'; this.uploadFailedText = 'Upload failed. Please try again.'; this.uploadSuccessText = 'Upload successful'; this.i18nUploadFile = 'Upload file…'; this.i18nUploadDisabled = 'File upload currently not possible.'; this.isFileOver = false; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.filesChanged = createEvent(this, "filesChanged", 7);
+        this.a11y = {};
+        this.accept = undefined;
+        this.multiple = false;
+        this.multiline = false;
+        this.disabled = false;
+        this.state = UploadFileState.SELECT_FILE;
+        this.selectFileText = '+ Drag files here or…';
+        this.loadingText = 'Checking files…';
+        this.uploadFailedText = 'Upload failed. Please try again.';
+        this.uploadSuccessText = 'Upload successful';
+        this.i18nUploadFile = 'Upload file…';
+        this.i18nUploadDisabled = 'File upload currently not possible.';
+        this.isFileOver = false;
+    }
+    componentWillLoad() {
+        this.a11y = a11yHostAttributes(this.hostElement);
+    }
     fileDropped(evt) {
         evt.preventDefault();
         if (this.disabled) {
             return;
         }
+        if (!evt.dataTransfer) {
+            return;
+        }
         const file = evt.dataTransfer.files;
         this.isFileOver = false;
         this.filesToUpload = this.convertToFileArray(file);
         this.filesChanged.emit(this.filesToUpload);
     }
     fileOver(event) {
+        if (!event.dataTransfer) {
+            return;
+        }
         if (this.state !== UploadFileState.LOADING) {
             event.preventDefault();
             event.dataTransfer.dropEffect = 'move';
@@ -43,6 +91,9 @@ const Upload = /*@__PURE__*/ proxyCustomElement(class Upload extends HTMLElement
         if (this.disabled) {
             return;
         }
+        if (!event.target) {
+            return;
+        }
         this.filesToUpload = this.convertToFileArray(event.target.files);
         this.filesChanged.emit(this.filesToUpload);
         // Workaround for bug in native input element, that prevents the user from uploading
@@ -52,6 +103,9 @@ const Upload = /*@__PURE__*/ proxyCustomElement(class Upload extends HTMLElement
     }
     convertToFileArray(filesFromEvent) {
         let files = [];
+        if (!filesFromEvent) {
+            return [];
+        }
         if (filesFromEvent instanceof FileList) {
             files = Array.from(filesFromEvent);
         }
@@ -85,7 +139,9 @@ const Upload = /*@__PURE__*/ proxyCustomElement(class Upload extends HTMLElement
         this.filesToUpload = obj;
     }
     render() {
-        return (h(Host, { key: 'f4d3b7986dc9ee2d9249dd1275f057e72a03cd84' }, h("div", { key: 'de2560f5f66cad07f7515ac0610c21294c838bf2', class: {
+        const disabled = this.disabled || this.state === UploadFileState.LOADING;
+        const _a = this.a11y, { 'aria-label': ariaLabel = 'Upload files' } = _a, a11y = __rest(_a, ['aria-label']);
+        return (h(Host, Object.assign({ key: 'b1c5b28f959d15f353cc23d9c62e4198da6de51e' }, a11y, { "aria-disabled": disabled }), h("div", { key: 'bd664e29b549dd62f3492f6062068bdfcf1882c4', class: {
                 'file-upload-area': true,
                 'file-over': this.state !== UploadFileState.LOADING && this.isFileOver,
                 checking: this.state === UploadFileState.LOADING,
@@ -95,9 +151,9 @@ const Upload = /*@__PURE__*/ proxyCustomElement(class Upload extends HTMLElement
                 if (this.state !== UploadFileState.LOADING) {
                     this.fileDropped(e);
                 }
-            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), h("div", { key: 'a2d542458b53e0c9690480e8cd98d128e2e7d73b' }, h("input", { key: '73f93d9e720aad7908208f727f20355ec9e984f1', 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(), h("div", { key: '37fc7e4402b02769806c8b04b440942b94700ea7' }, h("input", { key: 'a1abd996a9ca1feb449e58f42159ca6493418aaa', "aria-label": ariaLabel, "aria-disabled": disabled, multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
                 this.fileChangeEvent(e);
-            }, accept: this.accept }), h("ix-button", { key: 'b9ec49c0ff2b9a62792c822278eb5ab3cf2669af', tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === UploadFileState.LOADING }, this.i18nUploadFile)))));
+            }, accept: this.accept, disabled: disabled }), h("ix-button", { key: '26d667a21e99922522704d3f5117412f686224bc', tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: disabled }, this.i18nUploadFile)))));
     }
     get hostElement() { return this; }
     static get style() { return IxUploadStyle0; }

package/components/ix-upload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-upload.js","mappings":"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","names":[],"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: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n 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.js","mappings":"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","names":[],"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 }\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: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { UploadFileState } from './upload-file-state';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\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 private a11y: A11yAttributes = {};\n\n constructor() {}\n\n componentWillLoad() {\n this.a11y = a11yHostAttributes(this.hostElement);\n }\n\n private fileDropped(evt: DragEvent) {\n evt.preventDefault();\n\n if (this.disabled) {\n return;\n }\n\n if (!evt.dataTransfer) {\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 (!event.dataTransfer) {\n return;\n }\n\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: Event) {\n if (this.disabled) {\n return;\n }\n\n if (!event.target) {\n return;\n }\n\n this.filesToUpload = this.convertToFileArray(\n (event.target as HTMLInputElement).files\n );\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 \| null): File[] {\n let files = [];\n\n if (!filesFromEvent) {\n return [];\n }\n\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 const disabled = this.disabled \|\| this.state === UploadFileState.LOADING;\n const { 'aria-label': ariaLabel = 'Upload files', ...a11y } = this.a11y;\n return (\n <Host {...a11y} aria-disabled={disabled}>\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 aria-label={ariaLabel}\n aria-disabled={disabled}\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 disabled={disabled}\n />\n <ix-button\n tabindex=\"-1\"\n outline\n onClick={() => this.inputElement.click()}\n disabled={disabled}\n >\n {this.i18nUploadFile}\n </ix-button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-validation-tooltip.js CHANGED Viewed

@@ -131,13 +131,13 @@ const ValidationTooltip = /*@__PURE__*/ proxyCustomElement(class ValidationToolt
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '72ba87bcf595d41ed8096280fbf9084651f56056' }, h("slot", { key: '078e7475136e0ddd6d79f24eed7391b170140bd8' }), h("div", { key: '578d040f7b29eacd35096d9e815d216f7be5db1f', role: "tooltip", style: {
+        return (h(Host, { key: 'a7c567c374504ae7465ed32cf3baec6a286038ad' }, h("slot", { key: 'c2e5e2095c1c531b80e2e1ee6f679d7ee795f940' }), h("div", { key: '9270d9a3615c623ba683f8def7596c193c2219f6', 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, h("slot", { key: '91b69dd9f97fb0d49dc3a74d3ba4c215e21e43f3', name: "tooltip-message" }), h("div", { key: '587dd2ab8238a0c23e3ef7a9faff0b64c271c9fe', id: "arrow" }))));
+            }, class: "validation-tooltip text-default" }, this.message, h("slot", { key: 'b3853acb6a7b9807460884e65aecd5502f18853c', name: "tooltip-message" }), h("div", { key: 'f420e4b62b79cb14dc94e5552ba2ea012d274e83', id: "arrow" }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-workflow-step.js CHANGED Viewed

@@ -70,18 +70,18 @@ const WorkflowStep = /*@__PURE__*/ proxyCustomElement(class WorkflowStep extends
     }
     render() {
         const icons = !this.customIconSlot ? (h(Fragment, null, h("ix-icon", { color: "color-1", name: this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled', class: "absolute", size: "24" }), h("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24" }))) : null;
-        return (h(Host, { key: 'd4e68cd7e2eb915e8e8f7d09b0c62a6a8af119d2', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, h("div", { key: 'de386fc5cde68f15a663726b1133e9cfa08a742a', tabIndex: 0, class: {
+        return (h(Host, { key: 'dfef5de6ba87c5215d96526679a96fe51ceaeaa8', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, h("div", { key: '86892c228e9a43bd73d14475199dde851080b71a', tabIndex: 0, class: {
                 step: true,
                 selected: this.selected,
                 vertical: this.vertical,
                 disabled: this.disabled,
                 clickable: this.clickable && !this.disabled,
-            } }, h("div", { key: '2399853ee54da5c2bdc15b7392634cf2611ea748', class: "wrapper" }, h("div", { key: '5da5862fa6295670b1ba3b3f2811a46c91cb4001', class: {
+            } }, h("div", { key: '757a08cd0fd27e11b64cdf5b589ff1fdb304b0bb', class: "wrapper" }, h("div", { key: '75385ba1e0ecbeee170685880c9301ad1d28958a', class: {
                 line: true,
                 selected: this.selected,
                 [this.status]: true,
                 [this.position]: true,
-            } }), h("div", { key: 'a419c64f356fb6ea53d148669de0bba0d160f61d', class: "iconWrapper" }, icons, h("slot", { key: '7834816f2573a75da4dd55ccccf4eee69d2ed9bf', name: "custom-icon" }))), h("div", { key: '75e4924fe9eab8b4db9147ac7700a9a50ce73b9a', class: "text" }, h("slot", { key: '8bb8981bb1ee9c0f3e43f82d5771cc1fccec44db' })))));
+            } }), h("div", { key: '7ec8eb93ab1547766b3fb5b30d4f341877ab941c', class: "iconWrapper" }, icons, h("slot", { key: 'f71aca96785073d647f977c95c8cdcc6fe654410', name: "custom-icon" }))), h("div", { key: '614c89c615bef9e1c13fe17ea6e712b573cebdc6', class: "text" }, h("slot", { key: '3025c556cdf6fcbc422c675a85cf9d524b8ee19d' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-workflow-steps.js CHANGED Viewed

@@ -72,7 +72,7 @@ const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps exten
         this.updateSteps();
     }
     render() {
-        return (h(Host, { key: 'b1c24f42786d7086e8db94ae37e667716ec1345c' }, h("div", { key: '62fbf3c6c51d00e3bea9d3ec251324e8db147aa4', class: { steps: true, vertical: this.vertical } }, h("slot", { key: '7fee89ab9c086a56f1ba4d47cefe2566007b374a' }))));
+        return (h(Host, { key: '052bc92640371b56974c12c8b07b49cc24233a4f' }, h("div", { key: '00d19de2fda034b1024c0a793e46ad401eed46ee', class: { steps: true, vertical: this.vertical } }, h("slot", { key: '4a6a73538d83c4d8f49c2404dadc5e130e6ba6e7' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxWorkflowStepsStyle0; }

package/components/layout-grid.js CHANGED Viewed

@@ -13,12 +13,12 @@ const LayoutGrid = /*@__PURE__*/ proxyCustomElement(class LayoutGrid extends HTM
         this.columns = 12;
     }
     render() {
-        return (h(Host, { key: 'af1bab1dee014e6675fe2a2304802a5767a76624', class: {
+        return (h(Host, { key: 'c94b508ccf7ff23d457bec9444d69eb97c9b46a2', class: {
                 'no-margin': this.noMargin,
             }, style: {
                 '--ix-layout-grid-columns': `${this.columns}`,
                 '--ix-layout-grid-gutter': `${this.gap}px`,
-            } }, h("slot", { key: 'db8de47b0e374e37dad532533c503f4129ecc75b' })));
+            } }, h("slot", { key: '5a8180b92db51b02dbc3ddd805fa3f2eacd886c0' })));
     }
     static get style() { return IxLayoutGridStyle0; }
 }, [1, "ix-layout-grid", {

package/components/layout-grid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"layout-grid.js","mappings":";;AAAA,MAAM,aAAa,GAAG,wOAAwO,CAAC;AAC/P,2BAAe,aAAa;;MCkBf,UAAU;;;;;wBAIF,KAAK;mBAKgB,IAAI;uBAK1B,EAAE;;IAEpB,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EACD,KAAK,EAAE;gBACL,0BAA0B,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;gBAC7C,yBAAyB,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI;aAC3C,IAED,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/grid/layout-grid.scss?tag=ix-layout-grid&encapsulation=shadow","src/components/grid/layout-grid.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n:host {\n --ix-layout-grid-gutter: 24px;\n\n display: block;\n flex: 1 1 0%;\n width: 100%;\n\n padding-left: calc(var(--ix-layout-grid-gutter) 0.5);\n padding-right: calc(var(--ix-layout-grid-gutter) * 0.5);\n}\n\n:host(.no-margin) {\n padding-left: 0;\n padding-right: 0;\n}\n","/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-layout-grid',\n styleUrl: 'layout-grid.scss',\n shadow: true,\n})\nexport class LayoutGrid {\n /\n The grid will not have any horizontal padding\n /\n @Prop() noMargin = false;\n\n /\n Grid gap\n /\n @Prop() gap: '8' \| '12' \| '16' \| '24' = '24';\n\n /\n Overwrite the default number of columns. Choose between 2 and 12 columns.\n */\n @Prop() columns = 12;\n\n render() {\n return (\n <Host\n class={{\n 'no-margin': this.noMargin,\n }}\n style={{\n '--ix-layout-grid-columns': `${this.columns}`,\n '--ix-layout-grid-gutter': `${this.gap}px`,\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"layout-grid.js","mappings":";;AAAA,MAAM,aAAa,GAAG,wOAAwO,CAAC;AAC/P,2BAAe,aAAa;;MCkBf,UAAU;;;;;wBAIF,KAAK;mBAKgB,IAAI;uBAK1B,EAAE;;IAEpB,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EACD,KAAK,EAAE;gBACL,0BAA0B,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;gBAC7C,yBAAyB,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI;aAC3C,IAED,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/layout-grid/layout-grid.scss?tag=ix-layout-grid&encapsulation=shadow","src/components/layout-grid/layout-grid.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n:host {\n --ix-layout-grid-gutter: 24px;\n\n display: block;\n flex: 1 1 0%;\n width: 100%;\n\n padding-left: calc(var(--ix-layout-grid-gutter) 0.5);\n padding-right: calc(var(--ix-layout-grid-gutter) * 0.5);\n}\n\n:host(.no-margin) {\n padding-left: 0;\n padding-right: 0;\n}\n","/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-layout-grid',\n styleUrl: 'layout-grid.scss',\n shadow: true,\n})\nexport class LayoutGrid {\n /\n The grid will not have any horizontal padding\n /\n @Prop() noMargin = false;\n\n /\n Grid gap\n /\n @Prop() gap: '8' \| '12' \| '16' \| '24' = '24';\n\n /\n Overwrite the default number of columns. Choose between 2 and 12 columns.\n */\n @Prop() columns = 12;\n\n render() {\n return (\n <Host\n class={{\n 'no-margin': this.noMargin,\n }}\n style={{\n '--ix-layout-grid-columns': `${this.columns}`,\n '--ix-layout-grid-gutter': `${this.gap}px`,\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/listener.js CHANGED Viewed

@@ -36,7 +36,7 @@ function createListener(event, options = {}) {
             resultObject.enable(false);
         },
     };
-    resultObject.enable(opts.defaultEnabled);
+    resultObject.enable(!!opts.defaultEnabled);
     return resultObject;
 }
 function OnListener(event, fnExp) {

package/components/listener.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"listener.js","mappings":";;AAAA;;;;;;;;~~AAgBA~~,MAAM,cAAc,GAAoB;IACtC,MAAM,EAAE,QAAQ;IAChB,cAAc,EAAE,IAAI;CACrB,CAAC;SAEc,cAAc,~~CAAC~~,KAAa,~~EAAE~~,UAA2B,EAAE;~~IACzE~~,MAAM,IAAI,mCACL,cAAc,GACd,OAAO,CACX,CAAC;IAEF,IAAI,QAAa,CAAC;IAClB,MAAM,OAAO,GAAG,CAAC,KAAY;QAC3B,QAAQ,CAAC,KAAK,CAAC,CAAC;KACjB,CAAC;IAEF,MAAM,YAAY,GAAG;QACnB,EAAE,EAAE,CAAC,eAAoB;YACvB,QAAQ,GAAG,eAAe,CAAC;SAC5B;QAED,SAAS,EAAE,IAAI,CAAC,cAAc;QAE9B,MAAM,EAAE,CAAC,KAAc;YACrB,YAAY,CAAC,SAAS,GAAG,KAAK,CAAC;YAE/B,IAAI,KAAK,EAAE;gBACT,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;aAClC;iBAAM;gBACL,mBAAmB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;aACrC;SACF;QAED,OAAO,EAAE;YACP,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC5B;KACF,CAAC;IAEF,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;~~IACzC~~,OAAO,YAAY,CAAC;AACtB,CAAC;~~SAEe~~,UAAU,CAAI,KAAa,EAAE,KAA4B;IACvE,OAAO,CAAC,KAAU,EAAE,UAAkB;QACpC,MAAM,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,GACpE,KAAK,CAAC;QAER,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,mBAAmB,GAAG;;gBAC1B,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,~~CAAC~~,CAAC;~~gBAC9B~~,MAAA,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,0CAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;gBACjD,OAAO,mBAAmB,IAAI,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC9D,CAAC;SACH;QAED,KAAK,CAAC,iBAAiB,GAAG;YACxB,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;YACvC,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,~~CAAC~~,CAAC;~~YAC9B~~,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;YAEhC,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,GAAG,QAAQ,CAAC;YAEvC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAC/B,OAAO,iBAAiB,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC1D,CAAC;QAEF,KAAK,CAAC,oBAAoB,GAAG;;YAC3B,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,~~CAAC~~,CAAC;~~YAE9B~~,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,EAAE;gBACvC,MAAA,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,0CAAE,OAAO,EAAE,CAAC;gBACvC,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,GAAG,IAAI,CAAC;aACpC;YAED,OAAO,oBAAoB,IAAI,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAChE,CAAC;KACH,CAAC;AACJ;;;;","names":[],"sources":["src/components/utils/listener.ts"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { getElement } from '@stencil/core';\n\nexport type ListenerOptions = {\n target?: 'window';\n defaultEnabled?: boolean;\n};\n\nconst defaultOptions: ListenerOptions = {\n target: 'window',\n defaultEnabled: true,\n};\n\nexport function createListener(event: string, options: ListenerOptions = {}) {\n const opts = {\n ...defaultOptions,\n ...options,\n };\n\n let callback: any;\n const onEvent = (event: Event) => {\n callback(event);\n };\n\n const resultObject = {\n on: (onEventCallback: any) => {\n callback = onEventCallback;\n },\n\n isEnabled: opts.defaultEnabled,\n\n enable: (state: boolean) => {\n resultObject.isEnabled = state;\n\n if (state) {\n addEventListener(event, onEvent);\n } else {\n removeEventListener(event, onEvent);\n }\n },\n\n destroy: () => {\n resultObject.enable(false);\n },\n };\n\n resultObject.enable(opts.defaultEnabled);\n return resultObject;\n}\n\nexport function OnListener<T>(event: string, fnExp?: (self: T) => boolean) {\n return (proto: any, methodName: string) => {\n const { componentWillLoad, componentWillRender, disconnectedCallback } =\n proto;\n\n if (fnExp) {\n proto.componentWillRender = function () {\n const host = getElement(this);\n host[`__ix__${methodName}`]?.enable(fnExp(this));\n return componentWillRender && componentWillRender.call(this);\n };\n }\n\n proto.componentWillLoad = function () {\n const listener = createListener(event);\n const host = getElement(this);\n const method = this[methodName];\n\n host[`__ix__${methodName}`] = listener;\n\n listener.on(method.bind(this));\n return componentWillLoad && componentWillLoad.call(this);\n };\n\n proto.disconnectedCallback = function () {\n const host = getElement(this);\n\n if (host && host[`__ix__${methodName}`]) {\n host[`__ix__${methodName}`]?.destroy();\n host[`__ix__${methodName}`] = null;\n }\n\n return disconnectedCallback && disconnectedCallback.call(this);\n };\n };\n}\n"],"version":3}
1	+ {"file":"listener.js","mappings":";;AAAA;;;;;;;;AAwBA,MAAM,cAAc,GAAoB;IACtC,MAAM,EAAE,QAAQ;IAChB,cAAc,EAAE,IAAI;CACrB,CAAC;SAEc,cAAc,CAC5B,KAAa,EACb,UAA2B,EAAE;IAE7B,MAAM,IAAI,mCACL,cAAc,GACd,OAAO,CACX,CAAC;IAEF,IAAI,QAAa,CAAC;IAClB,MAAM,OAAO,GAAG,CAAC,KAAY;QAC3B,QAAQ,CAAC,KAAK,CAAC,CAAC;KACjB,CAAC;IAEF,MAAM,YAAY,GAAG;QACnB,EAAE,EAAE,CAAC,eAAoB;YACvB,QAAQ,GAAG,eAAe,CAAC;SAC5B;QAED,SAAS,EAAE,IAAI,CAAC,cAAc;QAE9B,MAAM,EAAE,CAAC,KAAc;YACrB,YAAY,CAAC,SAAS,GAAG,KAAK,CAAC;YAE/B,IAAI,KAAK,EAAE;gBACT,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;aAClC;iBAAM;gBACL,mBAAmB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;aACrC;SACF;QAED,OAAO,EAAE;YACP,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC5B;KACF,CAAC;IAEF,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC3C,OAAO,YAAY,CAAC;AACtB,CAAC;SAMe,UAAU,CAAI,KAAa,EAAE,KAA4B;IACvE,OAAO,CAAC,KAAU,EAAE,UAAkB;QACpC,MAAM,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,GACpE,KAAK,CAAC;QAER,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,mBAAmB,GAAG;;gBAC1B,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAmC,CAAC;gBAChE,MAAA,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,0CAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;gBACjD,OAAO,mBAAmB,IAAI,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC9D,CAAC;SACH;QAED,KAAK,CAAC,iBAAiB,GAAG;YACxB,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;YACvC,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAmC,CAAC;YAChE,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;YAEhC,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,GAAG,QAAQ,CAAC;YAEvC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAC/B,OAAO,iBAAiB,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC1D,CAAC;QAEF,KAAK,CAAC,oBAAoB,GAAG;;YAC3B,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAmC,CAAC;YAEhE,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,EAAE;gBACvC,MAAA,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,0CAAE,OAAO,EAAE,CAAC;gBACvC,IAAI,CAAC,SAAS,UAAU,EAAE,CAAC,GAAG,IAAI,CAAC;aACpC;YAED,OAAO,oBAAoB,IAAI,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAChE,CAAC;KACH,CAAC;AACJ;;;;","names":[],"sources":["src/components/utils/listener.ts"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { getElement } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\nexport type ListenerOptions = {\n target?: 'window';\n defaultEnabled?: boolean;\n};\n\ntype HostListener = {\n on: (onEventCallback: any) => void;\n isEnabled: boolean \| undefined;\n enable: (state: boolean) => void;\n destroy: () => void;\n};\n\nconst defaultOptions: ListenerOptions = {\n target: 'window',\n defaultEnabled: true,\n};\n\nexport function createListener(\n event: string,\n options: ListenerOptions = {}\n): HostListener {\n const opts = {\n ...defaultOptions,\n ...options,\n };\n\n let callback: any;\n const onEvent = (event: Event) => {\n callback(event);\n };\n\n const resultObject = {\n on: (onEventCallback: any) => {\n callback = onEventCallback;\n },\n\n isEnabled: opts.defaultEnabled,\n\n enable: (state: boolean) => {\n resultObject.isEnabled = state;\n\n if (state) {\n addEventListener(event, onEvent);\n } else {\n removeEventListener(event, onEvent);\n }\n },\n\n destroy: () => {\n resultObject.enable(false);\n },\n };\n\n resultObject.enable(!!opts.defaultEnabled);\n return resultObject;\n}\n\ntype HTMLStencilElementWithListener = HTMLStencilElement & {\n [K in `__ix__${string}`]?: HostListener \| null;\n};\n\nexport function OnListener<T>(event: string, fnExp?: (self: T) => boolean) {\n return (proto: any, methodName: string) => {\n const { componentWillLoad, componentWillRender, disconnectedCallback } =\n proto;\n\n if (fnExp) {\n proto.componentWillRender = function () {\n const host = getElement(this) as HTMLStencilElementWithListener;\n host[`__ix__${methodName}`]?.enable(fnExp(this));\n return componentWillRender && componentWillRender.call(this);\n };\n }\n\n proto.componentWillLoad = function () {\n const listener = createListener(event);\n const host = getElement(this) as HTMLStencilElementWithListener;\n const method = this[methodName];\n\n host[`__ix__${methodName}`] = listener;\n\n listener.on(method.bind(this));\n return componentWillLoad && componentWillLoad.call(this);\n };\n\n proto.disconnectedCallback = function () {\n const host = getElement(this) as HTMLStencilElementWithListener;\n\n if (host && host[`__ix__${methodName}`]) {\n host[`__ix__${methodName}`]?.destroy();\n host[`__ix__${methodName}`] = null;\n }\n\n return disconnectedCallback && disconnectedCallback.call(this);\n };\n };\n}\n"],"version":3}

package/components/make-ref.js CHANGED Viewed

@@ -1,19 +1,14 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 function makeRef(currentChangedCallback) {
-    let resolve = null;
+    let resolve = undefined;
     let currentPromise = new Promise((res) => (resolve = res));
-    let current = null;
+    let current = undefined;
     const setRefFunction = (ref) => {
-        current = ref;
+        if (ref === undefined) {
+            return;
+        }
+        current = setRefFunction.current = ref;
         currentChangedCallback === null || currentChangedCallback === void 0 ? void 0 : currentChangedCallback(ref);
-        resolve();
+        resolve === null || resolve === void 0 ? void 0 : resolve(ref);
     };
     setRefFunction.current = current;
     setRefFunction.waitForCurrent = async () => {

package/components/make-ref.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"make-ref.js","mappings":"~~AAAA;;;;;;;;SAegB~~,OAAO,CACrB,sBAA6C;IAE7C,IAAI,OAAO,~~GAAG~~,~~IAAI~~,CAAC;~~IACnB~~,IAAI,cAAc,GAAG,IAAI,OAAO,~~CAAC~~,CAAC,GAAG,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC;~~IAC3D~~,IAAI,OAAO,~~GAAM~~,~~IAAI~~,CAAC;~~IAEtB~~,MAAM,cAAc,GAAG,CAAC,~~GAAM~~;~~QAC5B~~,OAAO,GAAG,GAAG,CAAC;~~QACd~~,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAG,GAAG,CAAC,CAAC;QAC9B,OAAO,~~EAAE~~,CAAC;~~KACX~~,CAAC;IAEF,cAAc,CAAC,OAAO,GAAG,~~OAAO~~,CAAC;~~IACjC~~,cAAc,CAAC,cAAc,GAAG;QAC9B,MAAM,cAAc,CAAC;QACrB,OAAO,OAAO,CAAC;KAChB,CAAC;IAEF,OAAO,~~cAAc~~,CAAC;~~AACxB~~;;;;","names":[],"sources":["src/components/utils/make-ref.ts"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport type MakeRef<T> = {\n (ref: T): void;\n current: T;\n waitForCurrent(): Promise<T>;\n};\n\nexport function makeRef<T>(\n currentChangedCallback?: (element: T) => void\n): MakeRef<T> {\n let resolve = ~~null~~;\n let currentPromise = new Promise((res) => (resolve = res));\n let current: T = ~~null~~;\n\n const setRefFunction = (ref: T) => {\n current = ref;\n currentChangedCallback?.(ref);\n resolve();\n };\n\n setRefFunction.current = current;\n setRefFunction.waitForCurrent = async () => {\n await currentPromise;\n return current;\n };\n\n return setRefFunction;\n}\n"],"version":3}
1	+ {"file":"make-ref.js","mappings":"SAgBgB,OAAO,CACrB,sBAA6C;IAE7C,IAAI,OAAO,GAA2B,SAAS,CAAC;IAChD,IAAI,cAAc,GAAG,IAAI,OAAO,CAAI,CAAC,GAAG,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC;IAC9D,IAAI,OAAO,GAAkB,SAAS,CAAC;IAEvC,MAAM,cAAc,GAAG,CAAC,GAAkB;QACxC,IAAI,GAAG,KAAK,SAAS,EAAE;YACrB,OAAO;SACR;QACD,OAAO,GAAI,cAA6B,CAAC,OAAO,GAAG,GAAG,CAAC;QACvD,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAG,GAAG,CAAC,CAAC;QAC9B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,GAAG,CAAC,CAAC;KAChB,CAAC;IAEF,cAAc,CAAC,OAAO,GAAG,OAAmB,CAAC;IAE7C,cAAc,CAAC,cAAc,GAAG;QAC9B,MAAM,cAAc,CAAC;QACrB,OAAO,OAAO,CAAC;KAChB,CAAC;IAEF,OAAO,cAA4B,CAAC;AACtC;;;;","names":[],"sources":["src/components/utils/make-ref.ts"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport type MakeRef<T> = {\n (ref: T \| undefined): void;\n current: T \| null;\n waitForCurrent(): Promise<T>;\n};\n\ntype Resolve<T> = (value: T) => void;\n\nexport function makeRef<T>(\n currentChangedCallback?: (element: T) => void\n): MakeRef<T> {\n let resolve: Resolve<T> \| undefined = undefined;\n let currentPromise = new Promise<T>((res) => (resolve = res));\n let current: T \| undefined = undefined;\n\n const setRefFunction = (ref: T \| undefined) => {\n if (ref === undefined) {\n return;\n }\n current = (setRefFunction as MakeRef<T>).current = ref;\n currentChangedCallback?.(ref);\n resolve?.(ref);\n };\n\n setRefFunction.current = current as T \| null;\n\n setRefFunction.waitForCurrent = async () => {\n await currentPromise;\n return current;\n };\n\n return setRefFunction as MakeRef<T>;\n}\n"],"version":3}

package/components/map-navigation-overlay.js CHANGED Viewed

@@ -46,14 +46,14 @@ const MapNavigationOverlay = /*@__PURE__*/ proxyCustomElement(class MapNavigatio
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'ce3a4a2521b63c93dc1b44db381d4f8469015695' }, h("div", { key: '6763f67ec6e925d14300405d3fca2d72a77314a0', class: "overlay-header" }, h("div", { key: 'efa95e00e4e8a9d2a7fd9ec7404d469214e3b42c', class: {
+        return (h(Host, { key: 'b563492ffa21ac174c57197db042bc89cd8c57be' }, h("div", { key: 'bb5b6da79e9d62e79d8b4cce1d80d25194185c2d', class: "overlay-header" }, h("div", { key: '84c295e8782c8a7eff3bfd74d765b51bb549ae8a', class: {
                 'color-indicator': true,
                 'd-none': ((_a = this.iconColor) !== null && _a !== void 0 ? _a : this.color) === undefined,
             }, style: {
                 'background-color': ((_b = this.iconColor) !== null && _b !== void 0 ? _b : this.color)
                     ? `var(--theme-${(_c = this.iconColor) !== null && _c !== void 0 ? _c : this.color})`
                     : '',
-            } }), h("div", { key: '0692c3e12b96fe4ca45031b1a249461630a164dd', class: "overlay-header-content" }, h("ix-icon", { key: '74221507a80a1178850c3ddbd6a2f14e6641a148', size: "32", name: this.icon }), h("span", { key: '129df0f6b48f9f0a70253b6a4977bcd9e9e9614b', class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { key: '0efdf528ab8f3f63e361adb24fd0d2753a8448b6', class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), h("slot", { key: '0a9fb2f073f950622738bc17b04efcc00fd91d05' })));
+            } }), h("div", { key: '7387c721ea7eeeaca4313494b91d156003d32872', class: "overlay-header-content" }, h("ix-icon", { key: '051568dbe4f3be2de20487816624f32ec93d153c', size: "32", name: this.icon }), h("span", { key: '5e0ab71b0f168668bb4137c41cbbcb6c68f6614a', class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { key: 'c6a820c3a5ed1b7a4b76894da5b4e35af385a1a1', class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), h("slot", { key: '492577cbb69ff262b9cbfeb39a30cac628beb117' })));
     }
     get hostElement() { return this; }
     static get style() { return IxMapNavigationOverlayStyle0; }

package/components/menu-avatar-item.js CHANGED Viewed

@@ -20,7 +20,7 @@ const MenuAvatarItem = /*@__PURE__*/ proxyCustomElement(class MenuAvatarItem ext
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (h("ix-dropdown-item", { key: '061c822ea44418b9a4d2d54d2ba2511003a01ee5', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (h("ix-dropdown-item", { key: 'c4025c590bebeebd3a3bdf90cd2fd5a0cb1472a4', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
     }
     get hostElement() { return this; }
     static get style() { return IxMenuAvatarItemStyle0; }

package/components/menu-expand-icon.js CHANGED Viewed

@@ -36,7 +36,7 @@ const MenuExpandIcon = /*@__PURE__*/ proxyCustomElement(class MenuExpandIcon ext
         return this.getSmallScreenIcon();
     }
     render() {
-        return (h(Host, { key: '04c0e5b43f6de34672561d67612587ccf57b8de2', class: {
+        return (h(Host, { key: '47eabfc90f05f809a8df541e3ae79f3f7d32bb5f', class: {
                 expanded: this.expanded,
             } }, this.getMenuIcon()));
     }