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/dist/collection/components/toggle/toggle.css CHANGED Viewed

@@ -102,6 +102,7 @@
   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;
@@ -109,7 +110,7 @@
   height: 1.125rem;
   width: 1.125rem;
   left: 4px;
-  bottom: 3px;
+  bottom: 2px;
   background-color: var(--theme-switch-thumb-off--background);
   transition: var(--theme-default-time);
   border-radius: 50%;
@@ -128,33 +129,41 @@
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: 1px;
 }
-:host input:checked + .switch > .slider {
-  background-color: var(--theme-switch-on--background);
-}
 :host input:checked + .switch > .slider::before {
   background-color: var(--theme-switch-thumb-on--background);
   transform: translateX(1.35rem);
 }
+:host input + .switch > .slider {
+  border-color: var(--theme-switch-off--border-color);
+}
 :host input + .switch:hover > .slider {
   background-color: var(--theme-switch-off--background--hover);
+  border-color: var(--theme-switch-off--border-color--hover);
 }
 :host input + .switch:hover > .slider:before {
   background-color: var(--theme-switch-thumb-off--background--hover);
 }
 :host input + .switch:active > .slider {
   background-color: var(--theme-switch-off--background--active);
+  border-color: var(--theme-switch-off--border-color--active);
 }
 :host input + .switch:active > .slider:before {
   background-color: var(--theme-switch-thumb-off--background--active);
 }
+:host input:checked + .switch > .slider {
+  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);
@@ -188,4 +197,124 @@
 }
 :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,8 +8,13 @@
  */
 import { Fragment, h, Host, } from "@stencil/core";
 import { a11yBoolean } from "../utils/a11y";
+/**
+ * @form-ready 2.6.0
+ * */
 export class Toggle {
     constructor() {
+        this.name = undefined;
+        this.value = 'on';
         this.checked = false;
         this.disabled = false;
         this.indeterminate = false;
@@ -17,6 +22,7 @@ export class Toggle {
         this.textOff = 'Off';
         this.textIndeterminate = 'Mixed';
         this.hideText = false;
+        this.required = false;
     }
     onCheckedChange(newChecked) {
         if (this.indeterminate) {
@@ -25,13 +31,36 @@ 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: '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 is() { return "ix-toggle"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["toggle.scss"]
@@ -44,6 +73,41 @@ 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,
@@ -169,6 +233,24 @@ 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"
             }
         };
     }
@@ -188,8 +270,81 @@ 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,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"]}
1	+ {"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"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","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/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"]}

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: '532a11bfd02fb4c9fa767eb14c2e33b9e4118de6', class: {
+        return (h(Host, { key: 'bbfd616d068c6fbc3d701392924750632ac1b0a6', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: 'f77d84c9b82428ce00257c4c9379c61e65dc4c69' }, baseButtonProps), h("slot", { key: 'eb4a77c2092805f15cb47be18fcb99f27dadb8f2' }))));
+            } }, h(BaseButton, Object.assign({ key: '80ced9446e05dc5752143c03f8cc18b37ba24afa' }, baseButtonProps), h("slot", { key: 'dc1b54ee9fde12923f583385ebcdbcdc6fa08139' }))));
     }
     static get is() { return "ix-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,6 +19,43 @@ test('renders', async ({ mount, page }) => {
     await expect(tooltip).toHaveClass(/hydrated/);
     await expect(tooltip).toBeVisible();
 });
+test('renders in shadow DOM', async ({ mount, page }) => {
+    await mount(``);
+    await page.evaluate(() => {
+        var _a, _b, _c;
+        customElements.define('test-component', class extends HTMLElement {
+        });
+        const testComponent = document.createElement('test-component');
+        testComponent.attachShadow({ mode: 'open' });
+        const tooltip = document.createElement('ix-tooltip');
+        tooltip.innerHTML = 'tooltip';
+        tooltip.for = '.test';
+        const button = document.createElement('ix-button');
+        button.innerHTML = 'button';
+        button.classList.add('test');
+        (_a = document.querySelector('#mount')) === null || _a === void 0 ? void 0 : _a.appendChild(testComponent);
+        (_b = testComponent.shadowRoot) === null || _b === void 0 ? void 0 : _b.appendChild(button);
+        (_c = testComponent.shadowRoot) === null || _c === void 0 ? void 0 : _c.appendChild(tooltip);
+    });
+    const tooltip = page.locator('ix-tooltip');
+    const button = page.locator('ix-button');
+    await button.hover();
+    await expect(tooltip).toHaveClass(/hydrated/);
+    await expect(tooltip).toBeVisible();
+});
+test('renders in slot', async ({ mount, page }) => {
+    await mount(`
+    <ix-blind>
+      <ix-tooltip for=".test">tooltip</ix-tooltip>
+      <ix-button class="test">button</ix-button>
+    </ix-blind>
+  `);
+    const tooltip = page.locator('ix-tooltip');
+    const button = page.locator('ix-button');
+    await button.hover();
+    await expect(tooltip).toHaveClass(/hydrated/);
+    await expect(tooltip).toBeVisible();
+});
 test.describe('a11y', () => {
     test('closes on ESC', async ({ mount, page }) => {
         await mount(`

package/dist/collection/components/tooltip/test/tooltip.ct.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.ct.js","sourceRoot":"","sources":["../../../../src/components/tooltip/test/tooltip.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxC,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IAErB,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC9C,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE;IACzB,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;QAC9C,MAAM,KAAK,CAAC;;;KAGX,CAAC,CAAC;QACH,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QACzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC3C,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,0BAA0B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACzD,MAAM,KAAK,CAAC;;;GAGX,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IACrB,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IACxC,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AACtC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,0BAA0B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACzD,MAAM,KAAK,CAAC;;;;;GAKX,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IACrB,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;IACpC,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC5B,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;AAC1C,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,kDAAkD,EAAE,KAAK,EAAE,EAC9D,KAAK,EACL,IAAI,GACL,EAAE,EAAE;IACH,MAAM,KAAK,CAAC;;;;;GAKX,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC;IAE5D,MAAM,SAAS,CAAC,KAAK,EAAE,CAAC;IACxB,MAAM,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7B,MAAM,SAAS,CAAC,KAAK,EAAE,CAAC;IACxB,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAC/B,MAAM,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAE5D,MAAM,SAAS,CAAC,KAAK,EAAE,CAAC;IACxB,MAAM,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7B,MAAM,SAAS,CAAC,KAAK,EAAE,CAAC;IACxB,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAC/B,MAAM,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAE5D,MAAM,SAAS,CAAC,KAAK,EAAE,CAAC;IACxB,MAAM,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7B,MAAM,SAAS,CAAC,KAAK,EAAE,CAAC;IACxB,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAC/B,MAAM,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAE5D,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC5B,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAE/B,MAAM,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IAChE,MAAM,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;AAClE,CAAC,CAAC,CAAC","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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n await mount(`\n <ix-tooltip for=\".test\">tooltip</ix-tooltip>\n <ix-button class=\"test\">button</ix-button>\n `);\n const tooltip = page.locator('ix-tooltip');\n const button = page.locator('ix-button');\n\n await button.hover();\n\n await expect(tooltip).toHaveClass(/hydrated/);\n await expect(tooltip).toBeVisible();\n});\n\ntest.describe('a11y', () => {\n test('closes on ESC', async ({ mount, page }) => {\n await mount(`\n <ix-tooltip for=\".test\">tooltip</ix-tooltip>\n <ix-button class=\"test\"></ix-button>\n `);\n const button = page.locator('ix-button');\n await button.hover();\n page.keyboard.down('Escape');\n const tooltip = page.locator('ix-tooltip');\n await expect(tooltip).not.toBeVisible();\n });\n});\n\ntest('show tooltip after delay', async ({ mount, page }) => {\n await mount(`\n <ix-tooltip for=\".test\" show-delay=\"1000\">tooltip</ix-tooltip>\n <ix-button class=\"test\">button</ix-button>\n `);\n const tooltip = page.locator('ix-tooltip');\n const button = page.locator('ix-button');\n\n await button.hover();\n await expect(tooltip).not.toBeVisible();\n await page.waitForTimeout(1000);\n await expect(tooltip).toBeVisible();\n});\n\ntest('hide tooltip after delay', async ({ mount, page }) => {\n await mount(`\n <div style=\"margin: 2rem\">\n <ix-tooltip for=\".test\" hide-delay=\"1000\">tooltip</ix-tooltip>\n <ix-button class=\"test\">button</ix-button>\n </div>\n `);\n const tooltip = page.locator('ix-tooltip');\n const button = page.locator('ix-button');\n\n await button.hover();\n await expect(tooltip).toBeVisible();\n await page.mouse.move(0, 0);\n await page.waitForTimeout(1000);\n await expect(tooltip).not.toBeVisible();\n});\n\ntest('avoid double visibility request by focusin event', async ({\n mount,\n page,\n}) => {\n await mount(`\n <ix-menu>\n <ix-menu-item>Item 1</ix-menu-item>\n <ix-menu-item>Item 2</ix-menu-item>\n </ix-menu>\n `);\n\n const menuItem1 = page.locator('ix-menu-item:nth-child(1)');\n const menuItem2 = page.locator('ix-menu-item:nth-child(2)');\n\n await menuItem1.hover();\n await page.waitForTimeout(5);\n await menuItem1.click();\n await page.waitForTimeout(200);\n await expect(menuItem1.locator('ix-tooltip')).toBeVisible();\n\n await menuItem2.hover();\n await page.waitForTimeout(5);\n await menuItem2.click();\n await page.waitForTimeout(200);\n await expect(menuItem2.locator('ix-tooltip')).toBeVisible();\n\n await menuItem1.hover();\n await page.waitForTimeout(5);\n await menuItem1.click();\n await page.waitForTimeout(200);\n await expect(menuItem1.locator('ix-tooltip')).toBeVisible();\n\n await page.mouse.move(0, 0);\n await page.waitForTimeout(200);\n\n await expect(menuItem1.locator('ix-tooltip')).not.toBeVisible();\n await expect(menuItem2.locator('ix-tooltip')).not.toBeVisible();\n});\n"]}
1	+ {"version":3,"file":"tooltip.ct.js","sourceRoot":"","sources":["../../../../src/components/tooltip/test/tooltip.ct.ts"],"names":[],"mappings":"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","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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n await mount(`\n <ix-tooltip for=\".test\">tooltip</ix-tooltip>\n <ix-button class=\"test\">button</ix-button>\n `);\n const tooltip = page.locator('ix-tooltip');\n const button = page.locator('ix-button');\n\n await button.hover();\n\n await expect(tooltip).toHaveClass(/hydrated/);\n await expect(tooltip).toBeVisible();\n});\n\ntest('renders in shadow DOM', async ({ mount, page }) => {\n await mount(``);\n\n await page.evaluate(() => {\n customElements.define('test-component', class extends HTMLElement {});\n const testComponent = document.createElement('test-component');\n testComponent.attachShadow({ mode: 'open' });\n\n const tooltip = document.createElement('ix-tooltip');\n tooltip.innerHTML = 'tooltip';\n tooltip.for = '.test';\n\n const button = document.createElement('ix-button');\n button.innerHTML = 'button';\n button.classList.add('test');\n\n document.querySelector('#mount')?.appendChild(testComponent);\n testComponent.shadowRoot?.appendChild(button);\n testComponent.shadowRoot?.appendChild(tooltip);\n });\n\n const tooltip = page.locator('ix-tooltip');\n const button = page.locator('ix-button');\n\n await button.hover();\n\n await expect(tooltip).toHaveClass(/hydrated/);\n await expect(tooltip).toBeVisible();\n});\n\ntest('renders in slot', async ({ mount, page }) => {\n await mount(`\n <ix-blind>\n <ix-tooltip for=\".test\">tooltip</ix-tooltip>\n <ix-button class=\"test\">button</ix-button>\n </ix-blind>\n `);\n\n const tooltip = page.locator('ix-tooltip');\n const button = page.locator('ix-button');\n\n await button.hover();\n\n await expect(tooltip).toHaveClass(/hydrated/);\n await expect(tooltip).toBeVisible();\n});\n\ntest.describe('a11y', () => {\n test('closes on ESC', async ({ mount, page }) => {\n await mount(`\n <ix-tooltip for=\".test\">tooltip</ix-tooltip>\n <ix-button class=\"test\"></ix-button>\n `);\n const button = page.locator('ix-button');\n await button.hover();\n page.keyboard.down('Escape');\n const tooltip = page.locator('ix-tooltip');\n await expect(tooltip).not.toBeVisible();\n });\n});\n\ntest('show tooltip after delay', async ({ mount, page }) => {\n await mount(`\n <ix-tooltip for=\".test\" show-delay=\"1000\">tooltip</ix-tooltip>\n <ix-button class=\"test\">button</ix-button>\n `);\n const tooltip = page.locator('ix-tooltip');\n const button = page.locator('ix-button');\n\n await button.hover();\n await expect(tooltip).not.toBeVisible();\n await page.waitForTimeout(1000);\n await expect(tooltip).toBeVisible();\n});\n\ntest('hide tooltip after delay', async ({ mount, page }) => {\n await mount(`\n <div style=\"margin: 2rem\">\n <ix-tooltip for=\".test\" hide-delay=\"1000\">tooltip</ix-tooltip>\n <ix-button class=\"test\">button</ix-button>\n </div>\n `);\n const tooltip = page.locator('ix-tooltip');\n const button = page.locator('ix-button');\n\n await button.hover();\n await expect(tooltip).toBeVisible();\n await page.mouse.move(0, 0);\n await page.waitForTimeout(1000);\n await expect(tooltip).not.toBeVisible();\n});\n\ntest('avoid double visibility request by focusin event', async ({\n mount,\n page,\n}) => {\n await mount(`\n <ix-menu>\n <ix-menu-item>Item 1</ix-menu-item>\n <ix-menu-item>Item 2</ix-menu-item>\n </ix-menu>\n `);\n\n const menuItem1 = page.locator('ix-menu-item:nth-child(1)');\n const menuItem2 = page.locator('ix-menu-item:nth-child(2)');\n\n await menuItem1.hover();\n await page.waitForTimeout(5);\n await menuItem1.click();\n await page.waitForTimeout(200);\n await expect(menuItem1.locator('ix-tooltip')).toBeVisible();\n\n await menuItem2.hover();\n await page.waitForTimeout(5);\n await menuItem2.click();\n await page.waitForTimeout(200);\n await expect(menuItem2.locator('ix-tooltip')).toBeVisible();\n\n await menuItem1.hover();\n await page.waitForTimeout(5);\n await menuItem1.click();\n await page.waitForTimeout(200);\n await expect(menuItem1.locator('ix-tooltip')).toBeVisible();\n\n await page.mouse.move(0, 0);\n await page.waitForTimeout(200);\n\n await expect(menuItem1.locator('ix-tooltip')).not.toBeVisible();\n await expect(menuItem2.locator('ix-tooltip')).not.toBeVisible();\n});\n"]}

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

@@ -20,7 +20,8 @@ import { arrow, autoUpdate, computePosition, flip, hide, offset, shift, } from "
 import { h, Host, } from "@stencil/core";
 import { OnListener } from "../utils/listener";
 import { tooltipController } from "./tooltip-controller";
-const numberToPixel = (value) => (value != null ? `${value}px` : '');
+import { resolveSelector } from "../utils/find-element";
+const numberToPixel = (value) => value != null ? `${value}px` : '';
 /**
  * @slot title-icon - Icon of tooltip title
  * @slot title-content - Content of tooltip title
@@ -153,7 +154,7 @@ export class Tooltip {
     }
     async queryAnchorElements() {
         if (typeof this.for === 'string') {
-            return Promise.resolve(Array.from(document.querySelectorAll(this.for)));
+            return resolveSelector(this.for, this.hostElement);
         }
         if (this.for instanceof HTMLElement) {
             return Promise.resolve([this.for]);
@@ -245,9 +246,9 @@ export class Tooltip {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '5e39b9dbc226e6a61c11a737a6aebb318827edc3', class: {
+        return (h(Host, { key: '1f46e4d330357c6f1d8770cfb407d31cc244aa64', class: {
                 visible: this.visible,
-            }, role: "tooltip" }, h("div", { key: '4b9be3a9990c9b81425f2dbef9539054d01aa872', class: "tooltip-container" }, h("div", { key: 'c80f161df92379d45627338c1a11458948756ca5', class: 'tooltip-title' }, h("slot", { key: '9b63297978bd65ecd277eda2205b0639a41c2949', name: "title-icon" }), h("ix-typography", { key: 'ff0813c9f2532be81c5248230e057067cd196ae8', variant: "default-title" }, this.titleContent, h("slot", { key: 'f25947dac855dfcea0f41d39bbae53a593cfa8b0', name: "title-content" }))), h("div", { key: '7b8dd9351fbea202b9bb36bbd187683a4f2d8753', class: 'tooltip-content' }, h("slot", { key: '2b930dcd326294583931e945c1e9de83b17d3953' })), h("div", { key: 'd831b2851ec71fee69250d583387ddcac45cdf8e', class: "arrow" }))));
+            }, role: "tooltip" }, h("div", { key: '7a7896373a839c25a39fe41331223732ed40959d', class: "tooltip-container" }, h("div", { key: 'adb027026f5a668d2dbce4bceacdc1f66b7b7995', class: 'tooltip-title' }, h("slot", { key: '183340b03555b6e170f76c38e952ffa2bcad300f', name: "title-icon" }), h("ix-typography", { key: '14f5f8452aeda63a3acba3b577d2ffc81241200f', format: "h5" }, this.titleContent, h("slot", { key: '613335f4965c9e151f82a2e6b1d3f3635702dc1f', name: "title-content" }))), h("div", { key: 'c36f41b65c2e21b160bc7eee8dbee0c132d7d803', class: 'tooltip-content' }, h("slot", { key: 'f17ab01352090365d03a89d2e1c6a56823c74a5c' })), h("div", { key: '617f5fb5598ebd172591170e5400cab0e1d3f0a3', class: "arrow" }))));
     }
     static get is() { return "ix-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -267,16 +268,13 @@ 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": "src/components",
+                            "id": "src/components.d.ts::ElementReference"
                         }
                     }
                 },
@@ -433,7 +431,7 @@ export class Tooltip {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": ""
+                            "id": "../../node_modules/.pnpm/@stencil+core@4.17.2/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
                         }
                     },
                     "return": "Promise<void>"