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

@siemens/ix 2.4.1 → 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 (1750) hide show

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: '46cf23f4ae6803763da9344dfd9374aa2e307e14', class: {
+        return (h(Host, { key: '2aafe9718c088e425a93a520063a55690dfa2f4e', class: {
                 disabled: this.disabled,
-            }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { key: '3e85c5ebee51ea769bce59bf215a050e8196cc02', 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: 'd09e1342cbb63f4e5b0f18d2071260b47405eaa4', class: "switch", tabIndex: -1 }, h("span", { key: '94d1afb922bd8da6aa62dec9aa94bf350d507bc7', 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: 'bec8a150fd761e11ed81ae3803a8e62d6a250ec7', class: {
+        return (h(Host, { key: 'bbfd616d068c6fbc3d701392924750632ac1b0a6', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: 'b0e6ee7a113ea8d9b417b8de62cf816fb78b49ca' }, baseButtonProps), h("slot", { key: 'ce9fd3a28d4c7048d14618bd7813f4c84a4ac255' }))));
+            } }, 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":"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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.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.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,12 @@ 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` : '');
+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
@@ -71,29 +72,23 @@ 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) {
@@ -108,8 +103,10 @@ export class Tooltip {
                 }),
                 flip({
                     fallbackStrategy: 'initialPlacement',
+                    fallbackAxisSideDirection: 'end',
                     padding: 10,
                 }),
+                hide(),
             ],
         });
     }
@@ -125,7 +122,13 @@ export class Tooltip {
             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);
                     }
@@ -151,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]);
@@ -243,9 +246,9 @@ export class Tooltip {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '5d57bd50e4b54e59eef7e0ec463cf9cadba6ddc4', class: {
+        return (h(Host, { key: '1f46e4d330357c6f1d8770cfb407d31cc244aa64', class: {
                 visible: this.visible,
-            }, role: "tooltip" }, h("div", { key: '004a422b325b2c26639e479f3bc6a832277c38db', class: 'tooltip-title' }, h("slot", { key: 'dfb6ebe4022d3835b11d7237438358e8dd27191d', name: "title-icon" }), h("ix-typography", { key: 'e4230c3e9c28f53d217e8653fd972749af995dde', variant: "default-title" }, this.titleContent, h("slot", { key: 'bfd75a3ae808f03a552271a9f10c896de28072e2', name: "title-content" }))), h("div", { key: 'b8c20ae1bb16343dca997ecb2ef744d8b18b6ede', class: 'tooltip-content' }, h("slot", { key: 'cb15413ddd0b35a6ceb5dd95beebc855131fb998' })), h("div", { key: '91e9df64725d3ce40f280640374f0e95f89cf67b', 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"; }
@@ -265,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"
                         }
                     }
                 },
@@ -337,7 +337,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,
@@ -431,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>"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.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 /\nimport {\n arrow,\n autoUpdate,\n computePosition,\n ComputePositionReturn,\n flip,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { OnListener } from '../utils/listener';\nimport { tooltipController } from './tooltip-controller';\nimport { IxOverlayComponent } from '../utils/overlay';\n\ntype ArrowPosition = {\n top?: string;\n left?: string;\n right?: string;\n};\n\nconst numberToPixel = (value: number) => (value != null ? `${value}px` : '');\n\n/\n @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n \n @since 1.4.0\n /\n@Component({\n tag: 'ix-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip implements IxOverlayComponent {\n /\n CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n /\n @Prop() for?: string \| HTMLElement \| Promise<HTMLElement>;\n\n /\n Title of the tooltip\n /\n @Prop() titleContent?: string;\n\n /\n Define if the user can access the tooltip via mouse.\n /\n @Prop() interactive = false;\n\n /\n Initial placement of the tooltip. If the placement don\"t have enough space,\n * the tooltip will placed on another location.\n \n @since 1.5.0\n /\n @Prop() placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n\n /* @internal /\n @Prop() showDelay = 0;\n\n /* @internal /\n @Prop() hideDelay = 50;\n\n /* @internal /\n @Prop() animationFrame = false;\n\n @State() visible = false;\n\n @Element() hostElement!: HTMLIxTooltipElement;\n\n private observer?: MutationObserver;\n private hideTooltipTimeout?: NodeJS.Timeout;\n private showTooltipTimeout?: NodeJS.Timeout;\n private disposeAutoUpdate?: () => void;\n private disposeListener?: () => void;\n\n private get arrowElement(): HTMLElement {\n return this.hostElement.shadowRoot.querySelector('.arrow');\n }\n\n private destroyAutoUpdate() {\n if (this.disposeAutoUpdate !== undefined) {\n this.disposeAutoUpdate();\n }\n }\n\n /* @internal /\n @Method()\n async showTooltip(anchorElement: Element) {\n clearTimeout(this.hideTooltipTimeout);\n await this.applyTooltipPosition(anchorElement);\n\n this.showTooltipTimeout = setTimeout(() => {\n tooltipController.present(this);\n // Need to compute and apply tooltip position after initial render,\n // because arrow has no valid bounding rect before that\n this.applyTooltipPosition(anchorElement);\n }, this.showDelay);\n }\n\n /* @internal */\n @Method()\n async hideTooltip() {\n clearTimeout(this.showTooltipTimeout);\n let hideDelay = 50;\n\n if (this.interactive && this.hideDelay === hideDelay) {\n hideDelay = 150;\n }\n\n this.hideTooltipTimeout = setTimeout(() => {\n tooltipController.dismiss(this);\n }, hideDelay);\n this.destroyAutoUpdate();\n }\n\n private computeArrowPosition({\n placement,\n middlewareData,\n }: ComputePositionReturn): ArrowPosition {\n let { x, y } = middlewareData.arrow;\n\n if (placement.startsWith('top')) {\n return {\n left: numberToPixel(x),\n top: numberToPixel(y),\n };\n }\n\n if (placement.startsWith('right')) {\n return {\n left: numberToPixel(-6),\n top: numberToPixel(y),\n };\n }\n\n if (placement.startsWith('bottom')) {\n return {\n left: numberToPixel(x),\n top: numberToPixel(-6),\n };\n }\n\n if (placement.startsWith('left')) {\n return {\n right: numberToPixel(-6),\n top: numberToPixel(y),\n };\n }\n }\n\n private async computeTooltipPosition(target: Element) {\n return computePosition(target, this.hostElement, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [\n shift(),\n offset(12),\n arrow({\n element: this.arrowElement,\n }),\n flip({\n fallbackStrategy: 'initialPlacement',\n padding: 10,\n }),\n ],\n });\n }\n\n private applyTooltipArrowPosition(computeResponse: ComputePositionReturn) {\n const arrowPosition = this.computeArrowPosition(computeResponse);\n Object.assign(this.arrowElement.style, arrowPosition);\n }\n\n private async applyTooltipPosition(target: Element) {\n if (!target) {\n return;\n }\n\n return new Promise<ComputePositionReturn>((resolve) => {\n this.destroyAutoUpdate();\n this.disposeAutoUpdate = autoUpdate(\n target,\n this.hostElement,\n async () => {\n setTimeout(async () => {\n const computeResponse = await this.computeTooltipPosition(target);\n\n if (computeResponse.middlewareData.arrow) {\n this.applyTooltipArrowPosition(computeResponse);\n }\n\n const { x, y } = computeResponse;\n Object.assign(this.hostElement.style, {\n left: x !== null ? `${x}px` : '',\n top: y !== null ? `${y}px` : '',\n });\n\n resolve(computeResponse);\n });\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n animationFrame: this.animationFrame,\n }\n );\n });\n }\n\n private clearHideTimeout() {\n if (this.interactive) {\n clearTimeout(this.hideTooltipTimeout);\n }\n }\n\n private async queryAnchorElements(): Promise<Array<HTMLElement> \| undefined> {\n if (typeof this.for === 'string') {\n return Promise.resolve(Array.from(document.querySelectorAll(this.for)));\n }\n\n if (this.for instanceof HTMLElement) {\n return Promise.resolve([this.for]);\n }\n\n if (this.for instanceof Promise) {\n const element = await this.for;\n return [element];\n }\n }\n\n private async registerTriggerListener() {\n const triggerElementList = await this.queryAnchorElements();\n\n if (this.disposeListener) {\n this.disposeListener();\n }\n\n if (!triggerElementList) {\n return;\n }\n\n triggerElementList.forEach((element) => {\n const onMouseEnter = () => {\n this.showTooltip(element);\n };\n\n const onMouseLeave = () => {\n this.hideTooltip();\n };\n\n const onFocusIn = () => {\n if (this.showTooltipTimeout !== undefined) {\n clearTimeout(this.showTooltipTimeout);\n }\n\n onMouseEnter();\n };\n\n const onFocusOut = () => {\n this.hideTooltip();\n };\n\n element.addEventListener('mouseenter', onMouseEnter);\n element.addEventListener('mouseleave', onMouseLeave);\n element.addEventListener('focusin', onFocusIn);\n element.addEventListener('focusout', onFocusOut);\n\n this.disposeListener = () => {\n element.removeEventListener('mouseenter', onMouseEnter);\n element.removeEventListener('mouseleave', onMouseLeave);\n element.removeEventListener('focusin', onFocusIn);\n element.removeEventListener('focusout', onFocusOut);\n };\n });\n }\n\n private registerTooltipListener() {\n const { hostElement } = this;\n hostElement.addEventListener('mouseenter', () => this.clearHideTimeout());\n hostElement.addEventListener('focusin', () => this.clearHideTimeout());\n\n hostElement.addEventListener('mouseleave', () => this.hideTooltip());\n hostElement.addEventListener('focusout', () => this.hideTooltip());\n }\n\n @OnListener<Tooltip>('keydown', (self) => self.visible)\n async onKeydown(event: KeyboardEvent) {\n if (event.code === 'Escape') {\n this.hideTooltip();\n }\n }\n\n componentWillLoad() {\n this.registerTriggerListener();\n }\n\n componentDidLoad() {\n this.observer = new MutationObserver(() => {\n this.registerTriggerListener();\n });\n\n this.observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['data-ix-tooltip'],\n childList: true,\n subtree: true,\n });\n\n this.registerTooltipListener();\n }\n\n connectedCallback() {\n tooltipController.connected(this);\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.destroyAutoUpdate();\n tooltipController.disconnected(this);\n }\n\n isPresent(): boolean {\n return this.visible;\n }\n\n present(): void {\n this.visible = true;\n }\n\n dismiss(): void {\n this.visible = false;\n }\n\n render() {\n return (\n <Host\n class={{\n visible: this.visible,\n }}\n role=\"tooltip\"\n >\n <div class={'tooltip-title'}>\n <slot name=\"title-icon\"></slot>\n <ix-typography variant=\"default-title\">\n {this.titleContent}\n <slot name=\"title-content\"></slot>\n </ix-typography>\n </div>\n <div class={'tooltip-content'}>\n <slot></slot>\n </div>\n <div class=\"arrow\"></div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.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 /\nimport {\n arrow,\n autoUpdate,\n computePosition,\n ComputePositionReturn,\n flip,\n hide,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { OnListener } from '../utils/listener';\nimport { tooltipController } from './tooltip-controller';\nimport { IxOverlayComponent } from '../utils/overlay';\nimport { resolveSelector } from '../utils/find-element';\nimport { ElementReference } from 'src/components';\n\ntype ArrowPosition = {\n top?: string;\n left?: string;\n right?: string;\n};\n\nconst numberToPixel = (value?: number \| null) =>\n value != null ? `${value}px` : '';\n\n/\n @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n \n @since 1.4.0\n /\n@Component({\n tag: 'ix-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip implements IxOverlayComponent {\n /\n CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n /\n @Prop() for?: ElementReference;\n\n /\n Title of the tooltip\n /\n @Prop() titleContent?: string;\n\n /\n Define if the user can access the tooltip via mouse.\n /\n @Prop() interactive = false;\n\n /\n Initial placement of the tooltip.\n * If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.\n * @since 1.5.0\n /\n @Prop() placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n\n /* @internal /\n @Prop() showDelay = 0;\n\n /* @internal /\n @Prop() hideDelay = 50;\n\n /* @internal /\n @Prop() animationFrame = false;\n\n @State() visible = false;\n\n @Element() hostElement!: HTMLIxTooltipElement;\n\n private observer?: MutationObserver;\n private hideTooltipTimeout?: NodeJS.Timeout;\n private showTooltipTimeout?: NodeJS.Timeout;\n private disposeAutoUpdate?: () => void;\n private disposeListener?: () => void;\n\n private get arrowElement(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector('.arrow')!;\n }\n\n private destroyAutoUpdate() {\n if (this.disposeAutoUpdate !== undefined) {\n this.disposeAutoUpdate();\n }\n }\n\n /* @internal /\n @Method()\n async showTooltip(anchorElement: Element) {\n clearTimeout(this.hideTooltipTimeout);\n await this.applyTooltipPosition(anchorElement);\n\n this.showTooltipTimeout = setTimeout(() => {\n tooltipController.present(this);\n // Need to compute and apply tooltip position after initial render,\n // because arrow has no valid bounding rect before that\n this.applyTooltipPosition(anchorElement);\n }, this.showDelay);\n }\n\n /* @internal */\n @Method()\n async hideTooltip() {\n clearTimeout(this.showTooltipTimeout);\n let hideDelay = 50;\n\n if (this.interactive && this.hideDelay === hideDelay) {\n hideDelay = 150;\n }\n\n this.hideTooltipTimeout = setTimeout(() => {\n tooltipController.dismiss(this);\n }, hideDelay);\n this.destroyAutoUpdate();\n }\n\n private computeArrowPosition({\n placement,\n middlewareData,\n }: ComputePositionReturn): ArrowPosition \| undefined {\n let { x, y } = middlewareData.arrow!;\n const resetPosition = {\n top: 'unset',\n right: 'unset',\n bottom: 'unset',\n left: 'unset',\n };\n\n if (placement.startsWith('top')) {\n return {\n ...resetPosition,\n left: numberToPixel(x),\n top: numberToPixel(y),\n };\n }\n\n if (placement.startsWith('right')) {\n return {\n ...resetPosition,\n left: numberToPixel(-6),\n top: numberToPixel(y),\n };\n }\n\n if (placement.startsWith('bottom')) {\n return {\n ...resetPosition,\n left: numberToPixel(x),\n top: numberToPixel(-6),\n };\n }\n\n if (placement.startsWith('left')) {\n return {\n ...resetPosition,\n right: numberToPixel(-6),\n top: numberToPixel(y),\n };\n }\n }\n\n private async computeTooltipPosition(target: Element) {\n return computePosition(target, this.hostElement, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [\n shift(),\n offset(12),\n arrow({\n element: this.arrowElement,\n }),\n flip({\n fallbackStrategy: 'initialPlacement',\n fallbackAxisSideDirection: 'end',\n padding: 10,\n }),\n hide(),\n ],\n });\n }\n\n private applyTooltipArrowPosition(computeResponse: ComputePositionReturn) {\n const arrowPosition = this.computeArrowPosition(computeResponse);\n Object.assign(this.arrowElement.style, arrowPosition);\n }\n\n private async applyTooltipPosition(target: Element) {\n if (!target) {\n return;\n }\n\n return new Promise<ComputePositionReturn>((resolve) => {\n this.destroyAutoUpdate();\n this.disposeAutoUpdate = autoUpdate(\n target,\n this.hostElement,\n async () => {\n setTimeout(async () => {\n const computeResponse = await this.computeTooltipPosition(target);\n\n const isHidden =\n computeResponse.middlewareData.hide?.referenceHidden;\n\n if (isHidden) {\n setTimeout(() => this.hideTooltip());\n resolve(computeResponse);\n }\n\n if (computeResponse.middlewareData.arrow) {\n this.applyTooltipArrowPosition(computeResponse);\n }\n\n const { x, y } = computeResponse;\n Object.assign(this.hostElement.style, {\n left: x !== null ? `${x}px` : '',\n top: y !== null ? `${y}px` : '',\n });\n\n resolve(computeResponse);\n });\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n animationFrame: this.animationFrame,\n }\n );\n });\n }\n\n private clearHideTimeout() {\n if (this.interactive) {\n clearTimeout(this.hideTooltipTimeout);\n }\n }\n\n private async queryAnchorElements(): Promise<Array<HTMLElement> \| undefined> {\n if (typeof this.for === 'string') {\n return resolveSelector(this.for, this.hostElement);\n }\n\n if (this.for instanceof HTMLElement) {\n return Promise.resolve([this.for]);\n }\n\n if (this.for instanceof Promise) {\n const element = await this.for;\n return [element];\n }\n }\n\n private async registerTriggerListener() {\n const triggerElementList = await this.queryAnchorElements();\n\n if (this.disposeListener) {\n this.disposeListener();\n }\n\n if (!triggerElementList) {\n return;\n }\n\n triggerElementList.forEach((element) => {\n const onMouseEnter = () => {\n this.showTooltip(element);\n };\n\n const onMouseLeave = () => {\n this.hideTooltip();\n };\n\n const onFocusIn = () => {\n if (this.showTooltipTimeout !== undefined) {\n clearTimeout(this.showTooltipTimeout);\n }\n\n onMouseEnter();\n };\n\n const onFocusOut = () => {\n this.hideTooltip();\n };\n\n element.addEventListener('mouseenter', onMouseEnter);\n element.addEventListener('mouseleave', onMouseLeave);\n element.addEventListener('focusin', onFocusIn);\n element.addEventListener('focusout', onFocusOut);\n\n this.disposeListener = () => {\n element.removeEventListener('mouseenter', onMouseEnter);\n element.removeEventListener('mouseleave', onMouseLeave);\n element.removeEventListener('focusin', onFocusIn);\n element.removeEventListener('focusout', onFocusOut);\n };\n });\n }\n\n private registerTooltipListener() {\n const { hostElement } = this;\n hostElement.addEventListener('mouseenter', () => this.clearHideTimeout());\n hostElement.addEventListener('focusin', () => this.clearHideTimeout());\n\n hostElement.addEventListener('mouseleave', () => this.hideTooltip());\n hostElement.addEventListener('focusout', () => this.hideTooltip());\n }\n\n @OnListener<Tooltip>('keydown', (self) => self.visible)\n async onKeydown(event: KeyboardEvent) {\n if (event.code === 'Escape') {\n this.hideTooltip();\n }\n }\n\n componentWillLoad() {\n this.registerTriggerListener();\n }\n\n componentDidLoad() {\n this.observer = new MutationObserver(() => {\n this.registerTriggerListener();\n });\n\n this.observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['data-ix-tooltip'],\n childList: true,\n subtree: true,\n });\n\n this.registerTooltipListener();\n }\n\n connectedCallback() {\n tooltipController.connected(this);\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.destroyAutoUpdate();\n tooltipController.disconnected(this);\n }\n\n isPresent(): boolean {\n return this.visible;\n }\n\n present(): void {\n this.visible = true;\n }\n\n dismiss(): void {\n this.visible = false;\n }\n\n render() {\n return (\n <Host\n class={{\n visible: this.visible,\n }}\n role=\"tooltip\"\n >\n <div class=\"tooltip-container\">\n <div class={'tooltip-title'}>\n <slot name=\"title-icon\"></slot>\n <ix-typography format=\"h5\">\n {this.titleContent}\n <slot name=\"title-content\"></slot>\n </ix-typography>\n </div>\n <div class={'tooltip-content'}>\n <slot></slot>\n </div>\n <div class=\"arrow\"></div>\n </div>\n </Host>\n );\n }\n}\n"]}