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

@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048

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

package/dist/collection/components/toggle/toggle.css CHANGED Viewed

@@ -102,7 +102,6 @@
   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;
@@ -110,7 +109,7 @@
   height: 1.125rem;
   width: 1.125rem;
   left: 4px;
-  bottom: 2px;
+  bottom: 3px;
   background-color: var(--theme-switch-thumb-off--background);
   transition: var(--theme-default-time);
   border-radius: 50%;
@@ -136,36 +135,26 @@
   background-color: var(--theme-switch-thumb-on--background);
   transform: translateX(1.35rem);
 }
-:host input + .switch > .slider {
-  border-color: var(--theme-switch-off--border-color);
-}
 :host input + .switch:hover > .slider {
   background-color: var(--theme-switch-off--background--hover);
-  border-color: var(--theme-switch-off--border-color--hover);
 }
 :host input + .switch:hover > .slider:before {
   background-color: var(--theme-switch-thumb-off--background--hover);
 }
 :host input + .switch:active > .slider {
   background-color: var(--theme-switch-off--background--active);
-  border-color: var(--theme-switch-off--border-color--active);
 }
 :host input + .switch:active > .slider:before {
   background-color: var(--theme-switch-thumb-off--background--active);
 }
-:host input:checked + .switch > .slider {
-  border-color: var(--theme-switch-on--border-color);
-}
 :host input:checked + .switch:hover > .slider {
   background-color: var(--theme-switch-on--background--hover);
-  border-color: var(--theme-switch-on--border-color--hover);
 }
 :host input:checked + .switch:hover > .slider:before {
   background-color: var(--theme-switch-thumb-on--background--hover);
 }
 :host input:checked + .switch:active > .slider {
   background-color: var(--theme-switch-on--background--active);
-  border-color: var(--theme-switch-on--border-color--active);
 }
 :host input:checked + .switch:active > .slider:before {
   background-color: var(--theme-switch-thumb-on--background--active);
@@ -199,124 +188,4 @@
 }
 :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);
 }

package/dist/collection/components/toggle/toggle.js CHANGED Viewed

@@ -8,13 +8,8 @@
  */
 import { Fragment, h, Host, } from "@stencil/core";
 import { a11yBoolean } from "../utils/a11y";
-/**
- * @form-ready 2.4.0
- * */
 export class Toggle {
     constructor() {
-        this.name = undefined;
-        this.value = 'on';
         this.checked = false;
         this.disabled = false;
         this.indeterminate = false;
@@ -22,7 +17,6 @@ export class Toggle {
         this.textOff = 'Off';
         this.textIndeterminate = 'Mixed';
         this.hideText = false;
-        this.required = false;
     }
     onCheckedChange(newChecked) {
         if (this.indeterminate) {
@@ -31,36 +25,13 @@ export class Toggle {
         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: '0afa08e1803352f2bb3360c11fcda2745531e20d', class: {
+        return (h(Host, { key: '5e6df44041a09e40e0633022e3261b9cc38db141', class: {
                 disabled: this.disabled,
-            }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { key: '37ba0cf086ed01c01e61ff0bb24367759b537cd7', 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: '83d6712432de4b45396b11f7f21cf7072fd19fcd', class: "switch", tabIndex: -1 }, h("span", { key: 'f3f91c36a2043f039813b43bbc6285d67239d050', 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: 'ef94845255dde9150edd3fdaa1b534775f12bdb1', 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: '951669fc7caac59eed9d4ea0b85b5eecad423e0a', class: "switch", tabIndex: -1 }, h("span", { key: '9e6827bb3258743340fb1c04593a1d4fa8ac27eb', 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 is() { return "ix-toggle"; }
     static get encapsulation() { return "shadow"; }
-    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["toggle.scss"]
@@ -73,41 +44,6 @@ export class Toggle {
     }
     static get properties() {
         return {
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Name of the checkbox component"
-                },
-                "attribute": "name",
-                "reflect": true
-            },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Value of the checkbox component"
-                },
-                "attribute": "value",
-                "reflect": true,
-                "defaultValue": "'on'"
-            },
             "checked": {
                 "type": "boolean",
                 "mutable": true,
@@ -233,24 +169,6 @@ export class Toggle {
                 "attribute": "hide-text",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Required state of the checkbox component.\n\nIf true, checkbox needs to be checked to be valid"
-                },
-                "attribute": "required",
-                "reflect": true,
-                "defaultValue": "false"
             }
         };
     }
@@ -270,81 +188,8 @@ export class Toggle {
                     "resolved": "boolean",
                     "references": {}
                 }
-            }, {
-                "method": "valueChange",
-                "name": "valueChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
             }];
     }
-    static get methods() {
-        return {
-            "hasValidValue": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }]
-                }
-            },
-            "getAssociatedFormElement": {
-                "complexType": {
-                    "signature": "() => Promise<HTMLFormElement | null>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLFormElement": {
-                            "location": "global",
-                            "id": "global::HTMLFormElement"
-                        }
-                    },
-                    "return": "Promise<HTMLFormElement>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }]
-                }
-            }
-        };
-    }
     static get elementRef() { return "hostElement"; }
-    static get watchers() {
-        return [{
-                "propName": "checked",
-                "methodName": "watchCheckedChange"
-            }];
-    }
-    static get attachInternalsMemberName() { return "formInternals"; }
 }
 //# sourceMappingURL=toggle.js.map

package/dist/collection/components/toggle/toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,~~eAAe,EACf,~~SAAS,EACT,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,~~MAAM,EACN,~~IAAI,~~EACJ~~,~~KAAK,GACN,~~MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;~~AAG5C;;KAEK;AAOL~~,MAAM,OAAO,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,CAAC;YACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC7B,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,uBAAuB;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAGD,kBAAkB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,gBAAgB;IAEhB,aAAa;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC;IAED,gBAAgB;IAEhB,wBAAwB;QACtB,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;YAElD,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,EAAE,EAAE,CAClB,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,~~MAA2B~~,CAAC,OAAO,CAAC,~~GAE3D~~;YACT,8DAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC;gBAChC,6DAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB;YACP,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACrB,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CACrC,CACR,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,CACZ,CAAC,CAAC,CAAC,IAAI,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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\nimport {\n ~~AttachInternals,\n~~ Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n ~~Method,\n~~ Prop,\n ~~Watch,\n~~} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\~~nimport { IxFormComponent } from '../utils/field';\~~n\n/\n @~~form-ready 2.4.0\n * /\n@~~Component({\n tag: 'ix-toggle',\n styleUrl: 'toggle.scss',\n shadow: true,\n ~~formAssociated: true,\n~~})\nexport class Toggle ~~implements IxFormComponent<string>~~ {\n @~~AttachInternals() formInternals!: ElementInternals;\n\n @~~Element() hostElement!: HTMLIxToggleElement;\n\n /\n Name of the checkbox component\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n Value of the checkbox component\n /\n @Prop({ reflect: true }) value: string = 'on';\n\n /\n Whether the slide-toggle element is checked or not.\n /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /\n Whether the slide-toggle element is disabled or not.\n /\n @Prop() disabled = false;\n\n /\n If true the control is in indeterminate state\n /\n @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n /\n Text for on state\n /\n @Prop() textOn = 'On';\n\n /\n Text for off state\n /\n @Prop() textOff = 'Off';\n\n /\n Text for indeterminate state\n /\n @Prop() textIndeterminate = 'Mixed';\n\n /\n Hide `on` and `off` text\n /\n @Prop() hideText = false;\n\n /\n Required state of the checkbox component.\n \n If true, checkbox needs to be checked to be valid\n /\n @Prop({ reflect: true }) required = false;\n\n /\n An event will be dispatched each time the slide-toggle changes its value.\n /\n @Event() checkedChange!: EventEmitter<boolean>;\n\n ~~/* @internal /\n @Event() valueChange!: EventEmitter<string>;\n\n~~ onCheckedChange(newChecked: boolean) {\n if (this.indeterminate) {\n this.indeterminate = false;\n }\n this.checked = newChecked;\n this.checkedChange.emit(this.checked);\n }\n\n componentWillLoad() {\n this.updateFormInternalValue();\n }\n\n updateFormInternalValue(): void {\n if (this.checked) {\n this.formInternals.setFormValue(this.value);\n } else {\n this.formInternals.setFormValue(null);\n }\n }\n\n @Watch('checked')\n watchCheckedChange() {\n this.updateFormInternalValue();\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(this.checked);\n }\n\n /* @internal */\n @Method()\n getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return Promise.resolve(this.formInternals.form);\n }\n\n render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n }}\n onClick={() => this.onCheckedChange(!this.checked)}\n >\n <input\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n checked={this.checked}\n role=\"switch\"\n tabindex={0}\n type=\"checkbox\"\n aria-checked={a11yBoolean(this.checked)}\n onChange={(event) =>\n this.onCheckedChange((event.target as ~~HTMLInputElement~~).checked)\n }\n ></input>\n <label class=\"switch\" tabIndex={-1}>\n <span class=\"slider\"></span>\n </label>\n {!this.hideText ? (\n <Fragment>\n {!this.indeterminate ? (\n <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n {this.checked ? this.textOn : this.textOff}\n </span>\n ) : (\n <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n {this.textIndeterminate}\n </span>\n )}\n </Fragment>\n ) : null}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO5C,MAAM,OAAO,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,CAAC;YACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC7B,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;YAElD,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,EAAE,EAAE,CAClB,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAAc,CAAC,OAAO,CAAC,GAE9C;YACT,8DAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC;gBAChC,6DAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB;YACP,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACrB,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CACrC,CACR,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,CACZ,CAAC,CAAC,CAAC,IAAI,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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\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"]}

package/dist/collection/components/toggle-button/toggle-button.js CHANGED Viewed

@@ -62,9 +62,9 @@ export class ToggleButton {
                 'aria-pressed': a11yBoolean(this.pressed),
             },
         };
-        return (h(Host, { key: '03308c568a28a0c4410fe3872b1a770995627183', class: {
+        return (h(Host, { key: '7bfb2bae3e38637b194470d62d25b10d82ca40a3', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: '849c02e51091538631c0a8019fdea2b9091861b6' }, baseButtonProps), h("slot", { key: '1f4c89e2ee5e540dc3f7caae1641853d466b61b4' }))));
+            } }, h(BaseButton, Object.assign({ key: '61c614727d11cb4f2e806649e931b865c57e25c6' }, baseButtonProps), h("slot", { key: 'c1f7e51d178d87ed25abfc1179300cfb65553c2e' }))));
     }
     static get is() { return "ix-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.css CHANGED Viewed

@@ -1,17 +1,16 @@
 :host {
   display: inline-block;
   position: fixed;
-  left: 0px;
-  top: 0px;
+  left: 0;
+  top: 0;
   z-index: var(--theme-z-index-tooltip);
   max-width: 18.25rem;
+  width: -moz-max-content;
+  width: max-content;
   opacity: 0;
   visibility: collapse !important;
   overflow-wrap: break-word;
   border-radius: 0.25rem;
-  background-color: var(--theme-tootlip--background);
-  padding: 0.375rem 0.75rem 0.375rem 0.875rem;
-  box-shadow: var(--theme-shadow-4);
 }
 :host .tooltip-title {
   display: flex;
@@ -20,6 +19,17 @@
 :host .tooltip-title ::slotted(ix-icon) {
   margin-right: 0.35rem;
 }
+:host .tooltip-container {
+  display: block;
+  position: relative;
+  width: auto;
+  height: 100%;
+  background: var(--theme-tootlip--background);
+  color: var(--theme-color-std-text);
+  padding: 0.375rem 0.75rem 0.375rem 0.875rem;
+  box-shadow: var(--theme-shadow-4);
+  border-radius: inherit;
+}
 :host(.visible) {
   opacity: 1;

package/dist/collection/components/tooltip/tooltip.js CHANGED Viewed

@@ -16,11 +16,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { arrow, autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
+import { arrow, autoUpdate, computePosition, flip, hide, offset, shift, } from "@floating-ui/dom";
 import { h, Host, } from "@stencil/core";
 import { OnListener } from "../utils/listener";
 import { tooltipController } from "./tooltip-controller";
-const numberToPixel = (value) => (value != null ? `${value}px` : '');
+const numberToPixel = (value) => value != null ? `${value}px` : '';
 /**
  * @slot title-icon - Icon of tooltip title
  * @slot title-content - Content of tooltip title
@@ -71,33 +71,27 @@ export class Tooltip {
     }
     computeArrowPosition({ placement, middlewareData, }) {
         let { x, y } = middlewareData.arrow;
+        const resetPosition = {
+            top: 'unset',
+            right: 'unset',
+            bottom: 'unset',
+            left: 'unset',
+        };
         if (placement.startsWith('top')) {
-            return {
-                left: numberToPixel(x),
-                top: numberToPixel(y),
-            };
+            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(x), top: numberToPixel(y) });
         }
         if (placement.startsWith('right')) {
-            return {
-                left: numberToPixel(-6),
-                top: numberToPixel(y),
-            };
+            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(-6), top: numberToPixel(y) });
         }
         if (placement.startsWith('bottom')) {
-            return {
-                left: numberToPixel(x),
-                top: numberToPixel(-6),
-            };
+            return Object.assign(Object.assign({}, resetPosition), { left: numberToPixel(x), top: numberToPixel(-6) });
         }
         if (placement.startsWith('left')) {
-            return {
-                right: numberToPixel(-6),
-                top: numberToPixel(y),
-            };
+            return Object.assign(Object.assign({}, resetPosition), { right: numberToPixel(-6), top: numberToPixel(y) });
         }
     }
     async computeTooltipPosition(target) {
-        const computeResponse = await computePosition(target, this.hostElement, {
+        return computePosition(target, this.hostElement, {
             strategy: 'fixed',
             placement: this.placement,
             middleware: [
@@ -108,11 +102,12 @@ export class Tooltip {
                 }),
                 flip({
                     fallbackStrategy: 'initialPlacement',
+                    fallbackAxisSideDirection: 'end',
                     padding: 10,
                 }),
+                hide(),
             ],
         });
-        return computeResponse;
     }
     applyTooltipArrowPosition(computeResponse) {
         const arrowPosition = this.computeArrowPosition(computeResponse);
@@ -123,9 +118,16 @@ export class Tooltip {
             return;
         }
         return new Promise((resolve) => {
+            this.destroyAutoUpdate();
             this.disposeAutoUpdate = autoUpdate(target, this.hostElement, async () => {
                 setTimeout(async () => {
+                    var _a;
                     const computeResponse = await this.computeTooltipPosition(target);
+                    const isHidden = (_a = computeResponse.middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden;
+                    if (isHidden) {
+                        setTimeout(() => this.hideTooltip());
+                        resolve(computeResponse);
+                    }
                     if (computeResponse.middlewareData.arrow) {
                         this.applyTooltipArrowPosition(computeResponse);
                     }
@@ -243,9 +245,9 @@ export class Tooltip {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: 'b7883bd4b3b91669a26ec141c0958d639a5fc365', class: {
+        return (h(Host, { key: '5a828e4233912a571e370294e242a892d3d69885', class: {
                 visible: this.visible,
-            }, role: "tooltip" }, h("div", { key: '7fb4389e060ea8d471bf3e7527dd746ca3f3db76', class: 'tooltip-title' }, h("slot", { key: '7662951c4c88e1568fbc36b5b37a62d06e17a769', name: "title-icon" }), h("ix-typography", { key: '966e285db23cc9afe422ed13119568f538b8c82e', variant: "default-title" }, this.titleContent, h("slot", { key: 'e2a2b625877b2315f798f1b18a61d52f017c11a8', name: "title-content" }))), h("div", { key: '56c0c6a0b7cbc9f00e2b49c5ec3c49de1bda1de3', class: 'tooltip-content' }, h("slot", { key: 'be10f8350596f0420c530329ab30336bb99c654b' })), h("div", { key: '1abda75258f0c5d3a3c6c577a9f919e6a980b250', class: "arrow" })));
+            }, role: "tooltip" }, h("div", { key: '8e7a4c0e3e5d4952798979a0d913d9f7a2f7365b', class: "tooltip-container" }, h("div", { key: 'a5c9817676b2811a97ab52504903cb8191114f9c', class: 'tooltip-title' }, h("slot", { key: '78c5681e6ce5be5aeb0e90c78fdef3ed9ab18b97', name: "title-icon" }), h("ix-typography", { key: '68a85ce797a6d4ad2456ebc5f9426910f942a75a', format: "h5" }, this.titleContent, h("slot", { key: 'e02f2ad48659bf3df522014fc97950e1061ddd3d', name: "title-content" }))), h("div", { key: 'b24eead3d92140baae429a40cf354263c0c1ce99', class: 'tooltip-content' }, h("slot", { key: '384ea76937c865d41d7cd7082070a650acc1135d' })), h("div", { key: 'f139d3ce58490b58974d37c3d692184488b657e6', class: "arrow" }))));
     }
     static get is() { return "ix-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -265,21 +267,18 @@ export class Tooltip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | HTMLElement | Promise<HTMLElement>",
+                    "original": "ElementReference",
                     "resolved": "HTMLElement | Promise<HTMLElement> | string",
                     "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        },
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
+                        "ElementReference": {
+                            "location": "import",
+                            "path": "../utils/element-reference",
+                            "id": "src/components/utils/element-reference.ts::ElementReference"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`"
@@ -296,7 +295,7 @@ export class Tooltip {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Title of the tooltip"
@@ -337,7 +336,7 @@ export class Tooltip {
                             "name": "since",
                             "text": "1.5.0"
                         }],
-                    "text": "Initial placement of the tooltip. If the placement don\"t have enough space,\nthe tooltip will placed on another location."
+                    "text": "Initial placement of the tooltip.\nIf the selected placement doesn't have enough space, the tooltip will be repositioned to another location."
                 },
                 "attribute": "placement",
                 "reflect": false,
@@ -417,16 +416,21 @@ export class Tooltip {
         return {
             "showTooltip": {
                 "complexType": {
-                    "signature": "(anchorElement: any) => Promise<void>",
+                    "signature": "(anchorElement: Element) => Promise<void>",
                     "parameters": [{
                             "name": "anchorElement",
-                            "type": "any",
+                            "type": "Element",
                             "docs": ""
                         }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "Element": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/.pnpm/@stencil+core@4.17.2/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
                         }
                     },
                     "return": "Promise<void>"