@siemens/ix 2.4.0 → 2.5.0

package/dist/collection/components/tab-item/tab-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-item.js","sourceRoot":"","sources":["../../../src/components/tab-item/tab-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAW9E,MAAM,OAAO,OAAO;;wBAIC,KAAK;wBAKL,KAAK;qBAKR,KAAK;oBAKN,KAAK;uBAKF,KAAK;;sBAUgB,MAAM;yBAKP,QAAQ;;IAStC,cAAc,CAAC,KAQtB;QACC,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,WAAW,EAAE,KAAK,CAAC,KAAK;YACxB,IAAI,EAAE,KAAK,CAAC,KAAK;YACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;YACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;YACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;YAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;SACrB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,MAAM,EAAE,IAAI,CAAC,OAAO;aACrB,CAAC,EACF,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;gBAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACrC,WAAW,EAAE,KAAK;iBACnB,CAAC,CAAC;gBAEH,IAAI,WAAW,CAAC,gBAAgB,EAAE,CAAC;oBACjC,KAAK,CAAC,eAAe,EAAE,CAAC;gBAC1B,CAAC;YACH,CAAC;YAED,4DACE,KAAK,EAAE;oBACL,MAAM,EAAE,IAAI,CAAC,OAAO;oBACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;oBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;gBAED,8DAAa,CACT;YACN,4DACE,KAAK,EAAE;oBACL,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;oBACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,IAEA,IAAI,CAAC,OAAO,CACT,CACD,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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type TabClickDetail = {\n  nativeEvent: MouseEvent;\n};\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  shadow: true,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * Emitted when the tab is clicked.\n   *\n   * @since 2.0.0\n   */\n  @Event() tabClick: EventEmitter<TabClickDetail>;\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n        onClick={(event: MouseEvent) => {\n          const clientEvent = this.tabClick.emit({\n            nativeEvent: event,\n          });\n\n          if (clientEvent.defaultPrevented) {\n            event.stopPropagation();\n          }\n        }}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tab-item.js","sourceRoot":"","sources":["../../../src/components/tab-item/tab-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAW9E,MAAM,OAAO,OAAO;;wBAIC,KAAK;wBAKL,KAAK;qBAKR,KAAK;oBAKN,KAAK;uBAKF,KAAK;;sBAUgB,MAAM;yBAKP,QAAQ;;IAStC,cAAc,CAAC,KAQtB;QACC,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,WAAW,EAAE,KAAK,CAAC,KAAK;YACxB,IAAI,EAAE,KAAK,CAAC,KAAK;YACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;YACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;YACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;YAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;SACrB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,MAAM,EAAE,IAAI,CAAC,OAAO;aACrB,CAAC,EACF,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;gBAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACrC,WAAW,EAAE,KAAK;iBACnB,CAAC,CAAC;gBAEH,IAAI,WAAW,CAAC,gBAAgB,EAAE,CAAC;oBACjC,KAAK,CAAC,eAAe,EAAE,CAAC;gBAC1B,CAAC;YACH,CAAC;YAED,4DACE,KAAK,EAAE;oBACL,MAAM,EAAE,IAAI,CAAC,OAAO;oBACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;oBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;gBAED,8DAAa,CACT;YACN,4DACE,KAAK,EAAE;oBACL,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;oBACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,IAEA,IAAI,CAAC,OAAO,CACT,CACD,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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type TabClickDetail = {\n  nativeEvent: MouseEvent;\n};\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  shadow: true,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter?: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * Emitted when the tab is clicked.\n   *\n   * @since 2.0.0\n   */\n  @Event() tabClick!: EventEmitter<TabClickDetail>;\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n        onClick={(event: MouseEvent) => {\n          const clientEvent = this.tabClick.emit({\n            nativeEvent: event,\n          });\n\n          if (clientEvent.defaultPrevented) {\n            event.stopPropagation();\n          }\n        }}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs/tabs.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/tabs/tabs.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -24,12 +24,8 @@ export class Tabs {
         this.currentScrollAmount = 0;
         this.scrollAmount = 100;
         this.scrollActionAmount = 0;
-    }
-    get arrowLeftElement() {
-        return this.hostElement.shadowRoot.querySelector('[data-arrow-left]');
-    }
-    get arrowRightElement() {
-        return this.hostElement.shadowRoot.querySelector('[data-arrow-right]');
+        this.showArrowPrevious = false;
+        this.showArrowNext = false;
     }
     onWindowResize() {
         this.totalItems = 0;
@@ -46,13 +42,24 @@ export class Tabs {
         return this.getTabs()[tabIndex];
     }
     getTabsWrapper() {
-        return this.hostElement.shadowRoot.querySelector('.items-content');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.items-content');
+    }
+    initResizeObserver() {
+        const parentElement = this.hostElement.parentElement;
+        if (!parentElement)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.renderArrows();
+        });
+        this.resizeObserver.observe(parentElement);
     }
     showArrows() {
         try {
             const tabWrapper = this.getTabsWrapper();
-            return (tabWrapper.scrollWidth >
-                Math.ceil(tabWrapper.getBoundingClientRect().width) &&
+            return (tabWrapper &&
+                tabWrapper.scrollWidth >
+                    Math.ceil(tabWrapper.getBoundingClientRect().width) &&
                 this.layout === 'auto');
         }
         catch (error) {
@@ -61,7 +68,7 @@ export class Tabs {
     }
     showPreviousArrow() {
         try {
-            return this.showArrows() && this.scrollActionAmount < 0;
+            return this.showArrows() === true && this.scrollActionAmount < 0;
         }
         catch (error) {
             return false;
@@ -70,8 +77,11 @@ export class Tabs {
     showNextArrow() {
         try {
             const tabWrapper = this.getTabsWrapper();
+            if (!tabWrapper) {
+                return false;
+            }
             const tabWrapperRect = tabWrapper.getBoundingClientRect();
-            return (this.showArrows() &&
+            return (this.showArrows() === true &&
                 this.scrollActionAmount >
                     (tabWrapper.scrollWidth - tabWrapperRect.width) * -1);
         }
@@ -79,39 +89,47 @@ export class Tabs {
             return false;
         }
     }
-    getArrowStyle(condition) {
-        return {
-            opacity: condition ? '1' : '0',
-            zIndex: condition ? '1' : '-1',
-        };
-    }
     move(amount, click = false) {
-        const tabWrapper = this.getTabsWrapper();
-        const maxScrollWidth = (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;
-        amount = this.currentScrollAmount + amount;
-        amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;
+        const tabsWrapper = this.getTabsWrapper();
+        if (!tabsWrapper) {
+            return;
+        }
+        const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;
+        const maxScrollWidth = -this.currentScrollAmount +
+            tabsWrapperVisibleWidth -
+            tabsWrapper.scrollWidth;
+        amount = amount < maxScrollWidth ? maxScrollWidth : amount;
+        amount += this.currentScrollAmount;
+        amount = Math.min(amount, 0);
         const styles = [
             `transform: translateX(${amount}px);`,
             click ? 'transition: all ease-in-out 400ms;' : '',
         ].join('');
-        tabWrapper.setAttribute('style', styles);
+        tabsWrapper.setAttribute('style', styles);
         if (click)
             this.currentScrollAmount = this.scrollActionAmount = amount;
         else
             this.scrollActionAmount = amount;
     }
-    moveTabToView(tabIndex) {
+    onSelectedChange(newValue) {
+        var _a;
         if (!this.showArrows())
             return;
-        const tab = this.getTab(tabIndex).getBoundingClientRect();
-        const amount = tab.x * -1;
-        this.move(amount, true);
+        const tabRect = this.getTab(newValue).getBoundingClientRect();
+        const wrapperWidth = (_a = this.getTabsWrapper()) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        const arrowWidth = 32;
+        if (tabRect.left < arrowWidth) {
+            this.move(-tabRect.left + arrowWidth, true);
+        }
+        else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {
+            this.move(wrapperWidth - tabRect.right - arrowWidth, true);
+        }
     }
     setSelected(index) {
         this.selected = index;
     }
     clickTab(index) {
-        if (this.dragStop()) {
+        if (!this.clickAction.isClick || this.dragStop()) {
             return;
         }
         const { defaultPrevented } = this.selectedChange.emit(index);
@@ -119,7 +137,6 @@ export class Tabs {
             return;
         }
         this.setSelected(index);
-        this.moveTabToView(index);
     }
     dragStart(element, event) {
         if (!this.showArrows())
@@ -133,18 +150,22 @@ export class Tabs {
         const tabPositionX = parseFloat(window.getComputedStyle(element).left);
         const mousedownPositionX = event.clientX;
         const move = (event) => this.dragMove(event, tabPositionX, mousedownPositionX);
-        window.addEventListener('mouseup', () => {
+        const windowClick = () => {
             window.removeEventListener('mousemove', move, false);
+            window.removeEventListener('click', windowClick, false);
             this.dragStop();
-        });
+        };
+        window.addEventListener('click', windowClick);
         window.addEventListener('mousemove', move, false);
     }
     dragMove(event, tabX, mousedownX) {
         this.move(event.clientX + tabX - mousedownX);
     }
     dragStop() {
-        clearTimeout(this.clickAction.timeout);
-        this.clickAction.timeout = null;
+        if (this.clickAction.timeout) {
+            clearTimeout(this.clickAction.timeout);
+            this.clickAction.timeout = null;
+        }
         if (this.clickAction.isClick)
             return false;
         this.currentScrollAmount = this.scrollActionAmount;
@@ -162,6 +183,7 @@ export class Tabs {
             element.setAttribute('selected', index === this.selected ? 'true' : 'false');
             element.setAttribute('placement', this.placement);
         });
+        this.initResizeObserver();
     }
     componentDidRender() {
         const tabs = this.getTabs();
@@ -171,11 +193,12 @@ export class Tabs {
         });
     }
     componentWillRender() {
+        this.renderArrows();
+    }
+    renderArrows() {
         requestAnimationFrameNoNgZone(() => {
-            const showNextArrow = this.showNextArrow();
-            const previousArrow = this.showPreviousArrow();
-            Object.assign(this.arrowLeftElement.style, this.getArrowStyle(previousArrow));
-            Object.assign(this.arrowRightElement.style, this.getArrowStyle(showNextArrow));
+            this.showArrowNext = this.showNextArrow();
+            this.showArrowPrevious = this.showPreviousArrow();
         });
     }
     componentDidLoad() {
@@ -184,6 +207,10 @@ export class Tabs {
             element.addEventListener('mousedown', (event) => this.dragStart(element, event));
         });
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     onTabClick(event) {
         if (event.defaultPrevented) {
             return;
@@ -197,13 +224,13 @@ export class Tabs {
         });
     }
     render() {
-        return (h(Host, { key: 'a851dd22c0036611316b4c86dee7683c2cf13367' }, h("div", { key: '3cdc8ce203a7fdcb431bc8514e97e1dc99ccf42f', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: 'a9a56482c144ccdfdbcb037ef4a1f3ba87907f59', name: 'chevron-left-small' })), h("div", { key: 'c94814d93009f941f491ee27aab2d1f0a58641ef', class: {
+        return (h(Host, { key: 'e10ac5f7e421ca20215339ef7e72c309da7132cd' }, this.showArrowPrevious && (h("div", { key: 'e800708e789600cc2784b8c1515e3dc03b002ee9', class: "arrow", onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: 'd4c5fbc8e63d595c8fb92bf04d3462ea19446229', name: 'chevron-left-small' }))), h("div", { key: '908f08797515f007fb3320e157fa03a67cadcb25', class: {
                 'tab-items': true,
                 'overflow-shadow': true,
-                'shadow-left': this.showPreviousArrow(),
-                'shadow-right': this.showNextArrow(),
-                'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
-            } }, h("div", { key: 'e3b6d3d72736895e294b284e57ded8d225376405', class: "items-content" }, h("slot", { key: '66fad8fbd1c2c599e3614377d0ef917b11653a2c' }))), h("div", { key: '27512bc8fb342ac6247dd69261bdbdab2a8d42dc', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: '99ab01071111e8fca336712967e7e2c0a8643450', name: 'chevron-right-small' }))));
+                'shadow-left': this.showArrowPrevious,
+                'shadow-right': this.showArrowNext,
+                'shadow-both': this.showArrowNext && this.showArrowPrevious,
+            } }, h("div", { key: 'd63da9e8e146f3f7dc4376cb476a1ccfbe674e6a', class: "items-content" }, h("slot", { key: '781307adc791f851938edafb44a3be14a56e5eb8' }))), this.showArrowNext && (h("div", { key: '5ec04a7c0a53b73fdd1de1fdf89e4f48aa105c11', class: "arrow right", onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: 'cc7249abe9bfc978461dea999922251a743bdf84', name: 'chevron-right-small' })))));
     }
     static get is() { return "ix-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -316,7 +343,9 @@ export class Tabs {
             "totalItems": {},
             "currentScrollAmount": {},
             "scrollAmount": {},
-            "scrollActionAmount": {}
+            "scrollActionAmount": {},
+            "showArrowPrevious": {},
+            "showArrowNext": {}
         };
     }
     static get events() {
@@ -341,6 +370,12 @@ export class Tabs {
             }];
     }
     static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "selected",
+                "methodName": "onSelectedChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "resize",

package/dist/collection/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.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  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\n\n@Component({\n  tag: 'ix-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true,\n})\nexport class Tabs {\n  @Element() hostElement!: HTMLIxTabsElement;\n\n  /**\n   * Set tab items to small size\n   */\n  @Prop() small = false;\n\n  /**\n   * Set rounded tabs\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set default selected tab by index\n   */\n  @Prop({ mutable: true }) selected = 0;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set placement style\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * `selected` property changed\n   *\n   * @since 2.0.0\n   */\n  @Event() selectedChange: EventEmitter<number>;\n\n  @State() totalItems = 0;\n  @State() currentScrollAmount = 0;\n  @State() scrollAmount = 100;\n\n  @State() scrollActionAmount = 0;\n\n  private windowStartSize = window.innerWidth;\n\n  private get arrowLeftElement() {\n    return this.hostElement.shadowRoot.querySelector(\n      '[data-arrow-left]'\n    ) as HTMLElement;\n  }\n\n  private get arrowRightElement() {\n    return this.hostElement.shadowRoot.querySelector(\n      '[data-arrow-right]'\n    ) as HTMLElement;\n  }\n\n  private clickAction: {\n    timeout: NodeJS.Timeout;\n    isClick: boolean;\n  } = {\n    timeout: null,\n    isClick: true,\n  };\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.totalItems = 0;\n    this.totalItems = this.getTabs().length;\n\n    if (this.windowStartSize === 0)\n      return (this.windowStartSize = window.innerWidth);\n    this.move(this.windowStartSize - window.innerWidth);\n    this.windowStartSize = window.innerWidth;\n  }\n\n  private getTabs() {\n    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n  }\n\n  private getTab(tabIndex: number) {\n    return this.getTabs()[tabIndex];\n  }\n\n  private getTabsWrapper() {\n    return this.hostElement.shadowRoot.querySelector('.items-content');\n  }\n\n  private showArrows() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      return (\n        tabWrapper.scrollWidth >\n          Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n        this.layout === 'auto'\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showPreviousArrow() {\n    try {\n      return this.showArrows() && this.scrollActionAmount < 0;\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showNextArrow() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n      return (\n        this.showArrows() &&\n        this.scrollActionAmount >\n          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private getArrowStyle(condition: boolean) {\n    return {\n      opacity: condition ? '1' : '0',\n      zIndex: condition ? '1' : '-1',\n    };\n  }\n\n  private move(amount: number, click = false) {\n    const tabWrapper = this.getTabsWrapper();\n    const maxScrollWidth =\n      (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;\n\n    amount = this.currentScrollAmount + amount;\n    amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;\n\n    const styles = [\n      `transform: translateX(${amount}px);`,\n      click ? 'transition: all ease-in-out 400ms;' : '',\n    ].join('');\n\n    tabWrapper.setAttribute('style', styles);\n\n    if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n    else this.scrollActionAmount = amount;\n  }\n\n  private moveTabToView(tabIndex: number) {\n    if (!this.showArrows()) return;\n\n    const tab = this.getTab(tabIndex).getBoundingClientRect();\n    const amount = tab.x * -1;\n    this.move(amount, true);\n  }\n\n  private setSelected(index: number) {\n    this.selected = index;\n  }\n\n  private clickTab(index: number) {\n    if (this.dragStop()) {\n      return;\n    }\n\n    const { defaultPrevented } = this.selectedChange.emit(index);\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.setSelected(index);\n    this.moveTabToView(index);\n  }\n\n  private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n    if (!this.showArrows()) return;\n    if (event.button > 0) return;\n\n    this.clickAction.timeout =\n      this.clickAction.timeout === null\n        ? setTimeout(() => (this.clickAction.isClick = false), 300)\n        : null;\n\n    const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n    const mousedownPositionX = event.clientX;\n    const move = (event: MouseEvent) =>\n      this.dragMove(event, tabPositionX, mousedownPositionX);\n\n    window.addEventListener('mouseup', () => {\n      window.removeEventListener('mousemove', move, false);\n      this.dragStop();\n    });\n    window.addEventListener('mousemove', move, false);\n  }\n\n  private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n    this.move(event.clientX + tabX - mousedownX);\n  }\n\n  private dragStop() {\n    clearTimeout(this.clickAction.timeout);\n    this.clickAction.timeout = null;\n\n    if (this.clickAction.isClick) return false;\n\n    this.currentScrollAmount = this.scrollActionAmount;\n    this.clickAction.isClick = true;\n\n    return true;\n  }\n\n  componentWillLoad() {\n    const tabs = this.getTabs();\n\n    tabs.map((element, index) => {\n      if (this.small) element.setAttribute('small', 'true');\n\n      if (this.rounded) element.setAttribute('rounded', 'true');\n\n      element.setAttribute('layout', this.layout);\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n\n      element.setAttribute('placement', this.placement);\n    });\n  }\n\n  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.map((element, index) => {\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n    });\n  }\n\n  componentWillRender() {\n    requestAnimationFrameNoNgZone(() => {\n      const showNextArrow = this.showNextArrow();\n      const previousArrow = this.showPreviousArrow();\n\n      Object.assign(\n        this.arrowLeftElement.style,\n        this.getArrowStyle(previousArrow)\n      );\n      Object.assign(\n        this.arrowRightElement.style,\n        this.getArrowStyle(showNextArrow)\n      );\n    });\n  }\n\n  componentDidLoad() {\n    const tabs = this.getTabs();\n    tabs.forEach((element) => {\n      element.addEventListener('mousedown', (event) =>\n        this.dragStart(element, event)\n      );\n    });\n  }\n\n  @Listen('tabClick')\n  onTabClick(event: CustomEvent) {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const target = event.target;\n    const tabs = this.getTabs();\n\n    tabs.forEach((tab, index) => {\n      if (!tab.disabled && tab === target) {\n        this.clickTab(index);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"arrow\"\n          data-arrow-left\n          onClick={() => this.move(this.scrollAmount, true)}\n        >\n          <ix-icon name={'chevron-left-small'}></ix-icon>\n        </div>\n        <div\n          class={{\n            'tab-items': true,\n            'overflow-shadow': true,\n            'shadow-left': this.showPreviousArrow(),\n            'shadow-right': this.showNextArrow(),\n            'shadow-both': this.showNextArrow() && this.showPreviousArrow(),\n          }}\n        >\n          <div class=\"items-content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div\n          class=\"arrow right\"\n          data-arrow-right\n          onClick={() => this.move(-this.scrollAmount, true)}\n        >\n          <ix-icon name={'chevron-right-small'}></ix-icon>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\n\n@Component({\n  tag: 'ix-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true,\n})\nexport class Tabs {\n  @Element() hostElement!: HTMLIxTabsElement;\n\n  /**\n   * Set tab items to small size\n   */\n  @Prop() small = false;\n\n  /**\n   * Set rounded tabs\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set default selected tab by index\n   */\n  @Prop({ mutable: true }) selected = 0;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set placement style\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * `selected` property changed\n   *\n   * @since 2.0.0\n   */\n  @Event() selectedChange!: EventEmitter<number>;\n\n  @State() totalItems = 0;\n  @State() currentScrollAmount = 0;\n  @State() scrollAmount = 100;\n  @State() scrollActionAmount = 0;\n  @State() showArrowPrevious = false;\n  @State() showArrowNext = false;\n\n  private windowStartSize = window.innerWidth;\n  private resizeObserver?: ResizeObserver;\n\n  private clickAction: {\n    timeout: NodeJS.Timeout | null;\n    isClick: boolean;\n  } = {\n    timeout: null,\n    isClick: true,\n  };\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.totalItems = 0;\n    this.totalItems = this.getTabs().length;\n\n    if (this.windowStartSize === 0)\n      return (this.windowStartSize = window.innerWidth);\n    this.move(this.windowStartSize - window.innerWidth);\n    this.windowStartSize = window.innerWidth;\n  }\n\n  private getTabs() {\n    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n  }\n\n  private getTab(tabIndex: number) {\n    return this.getTabs()[tabIndex];\n  }\n\n  private getTabsWrapper() {\n    return this.hostElement.shadowRoot?.querySelector('.items-content');\n  }\n\n  private initResizeObserver() {\n    const parentElement = this.hostElement.parentElement;\n    if (!parentElement) return;\n    this.resizeObserver = new ResizeObserver(() => {\n      this.renderArrows();\n    });\n    this.resizeObserver.observe(parentElement);\n  }\n\n  private showArrows() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      return (\n        tabWrapper &&\n        tabWrapper.scrollWidth >\n          Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n        this.layout === 'auto'\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showPreviousArrow() {\n    try {\n      return this.showArrows() === true && this.scrollActionAmount < 0;\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showNextArrow() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n\n      if (!tabWrapper) {\n        return false;\n      }\n\n      const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n      return (\n        this.showArrows() === true &&\n        this.scrollActionAmount >\n          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private move(amount: number, click = false) {\n    const tabsWrapper = this.getTabsWrapper();\n\n    if (!tabsWrapper) {\n      return;\n    }\n\n    const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n    const maxScrollWidth =\n      -this.currentScrollAmount +\n      tabsWrapperVisibleWidth -\n      tabsWrapper.scrollWidth;\n\n    amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n    amount += this.currentScrollAmount;\n    amount = Math.min(amount, 0);\n\n    const styles = [\n      `transform: translateX(${amount}px);`,\n      click ? 'transition: all ease-in-out 400ms;' : '',\n    ].join('');\n\n    tabsWrapper.setAttribute('style', styles);\n\n    if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n    else this.scrollActionAmount = amount;\n  }\n\n  @Watch('selected')\n  onSelectedChange(newValue: number) {\n    if (!this.showArrows()) return;\n\n    const tabRect = this.getTab(newValue).getBoundingClientRect();\n    const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n    const arrowWidth = 32;\n\n    if (tabRect.left < arrowWidth) {\n      this.move(-tabRect.left + arrowWidth, true);\n    } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n      this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n    }\n  }\n\n  private setSelected(index: number) {\n    this.selected = index;\n  }\n\n  private clickTab(index: number) {\n    if (!this.clickAction.isClick || this.dragStop()) {\n      return;\n    }\n\n    const { defaultPrevented } = this.selectedChange.emit(index);\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.setSelected(index);\n  }\n\n  private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n    if (!this.showArrows()) return;\n    if (event.button > 0) return;\n\n    this.clickAction.timeout =\n      this.clickAction.timeout === null\n        ? setTimeout(() => (this.clickAction.isClick = false), 300)\n        : null;\n\n    const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n    const mousedownPositionX = event.clientX;\n    const move = (event: MouseEvent) =>\n      this.dragMove(event, tabPositionX, mousedownPositionX);\n    const windowClick = () => {\n      window.removeEventListener('mousemove', move, false);\n      window.removeEventListener('click', windowClick, false);\n      this.dragStop();\n    };\n    window.addEventListener('click', windowClick);\n    window.addEventListener('mousemove', move, false);\n  }\n\n  private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n    this.move(event.clientX + tabX - mousedownX);\n  }\n\n  private dragStop() {\n    if (this.clickAction.timeout) {\n      clearTimeout(this.clickAction.timeout);\n      this.clickAction.timeout = null;\n    }\n\n    if (this.clickAction.isClick) return false;\n\n    this.currentScrollAmount = this.scrollActionAmount;\n    this.clickAction.isClick = true;\n\n    return true;\n  }\n\n  componentWillLoad() {\n    const tabs = this.getTabs();\n\n    tabs.map((element, index) => {\n      if (this.small) element.setAttribute('small', 'true');\n\n      if (this.rounded) element.setAttribute('rounded', 'true');\n\n      element.setAttribute('layout', this.layout);\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n\n      element.setAttribute('placement', this.placement);\n    });\n\n    this.initResizeObserver();\n  }\n\n  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.map((element, index) => {\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n    });\n  }\n\n  componentWillRender() {\n    this.renderArrows();\n  }\n\n  private renderArrows() {\n    requestAnimationFrameNoNgZone(() => {\n      this.showArrowNext = this.showNextArrow();\n      this.showArrowPrevious = this.showPreviousArrow();\n    });\n  }\n\n  componentDidLoad() {\n    const tabs = this.getTabs();\n    tabs.forEach((element) => {\n      element.addEventListener('mousedown', (event) =>\n        this.dragStart(element, event)\n      );\n    });\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  @Listen('tabClick')\n  onTabClick(event: CustomEvent) {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const target = event.target;\n    const tabs = this.getTabs();\n\n    tabs.forEach((tab, index) => {\n      if (!tab.disabled && tab === target) {\n        this.clickTab(index);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.showArrowPrevious && (\n          <div class=\"arrow\" onClick={() => this.move(this.scrollAmount, true)}>\n            <ix-icon name={'chevron-left-small'}></ix-icon>\n          </div>\n        )}\n        <div\n          class={{\n            'tab-items': true,\n            'overflow-shadow': true,\n            'shadow-left': this.showArrowPrevious,\n            'shadow-right': this.showArrowNext,\n            'shadow-both': this.showArrowNext && this.showArrowPrevious,\n          }}\n        >\n          <div class=\"items-content\">\n            <slot></slot>\n          </div>\n        </div>\n        {this.showArrowNext && (\n          <div\n            class=\"arrow right\"\n            onClick={() => this.move(-this.scrollAmount, true)}\n          >\n            <ix-icon name={'chevron-right-small'}></ix-icon>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs/test/tabs.ct.js

@@ -1,13 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -81,4 +73,38 @@ test('should not change tab by tabs event', async ({ mount, page }) => {
     await expect(firstTab).toHaveClass(/selected/);
     await expect(lastTab).not.toHaveClass(/selected/);
 });
+test('should update layout on resize', async ({ mount, page }) => {
+    await mount(`
+    <ix-tabs>
+      <ix-tab-item>Item 1</ix-tab-item>
+      <ix-tab-item>Item 2</ix-tab-item>
+      <ix-tab-item>Item 3</ix-tab-item>
+    </ix-tabs>
+    `);
+    const tabs = page.locator('ix-tabs');
+    await page.setViewportSize({ width: 200, height: 100 });
+    const arrowNext = tabs.locator('.arrow.right');
+    await expect(arrowNext).toBeVisible();
+    await page.setViewportSize({ width: 1000, height: 100 });
+    await expect(arrowNext).not.toBeVisible();
+});
+test('should scroll selected tab into view', async ({ mount, page }) => {
+    await mount(`
+    <ix-tabs>
+      <ix-tab-item>Item 1</ix-tab-item>
+      <ix-tab-item>Item 2</ix-tab-item>
+      <ix-tab-item>Item 3</ix-tab-item>
+      <ix-tab-item>Item 4</ix-tab-item>
+      <ix-tab-item>Item 5</ix-tab-item>
+      <ix-tab-item>Item 6</ix-tab-item>
+    </ix-tabs>
+  `);
+    await page.setViewportSize({ width: 300, height: 100 });
+    const clickedTab = page.locator('ix-tab-item').nth(3);
+    const lastTab = page.locator('ix-tab-item').last();
+    await clickedTab.click();
+    await page.waitForTimeout(500);
+    await expect(clickedTab).toBeInViewport();
+    await expect(lastTab).not.toBeInViewport();
+});
 //# sourceMappingURL=tabs.ct.js.map

package/dist/collection/components/tabs/test/tabs.ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.ct.js","sourceRoot":"","sources":["../../../../src/components/tabs/test/tabs.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH;;;;;;;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;;;;;;GAMX,CAAC,CAAC;IACH,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IACrC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAE/C,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC3C,MAAM,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAC5C,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,mBAAmB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClD,MAAM,KAAK,CAAC;;;;;;GAMX,CAAC,CAAC;IACH,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IACrC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAE/C,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IAElB,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC3C,MAAM,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAC5C,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,0CAA0C,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACzE,MAAM,KAAK,CAAC;;;;;;GAMX,CAAC,CAAC;IACH,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAEnD,OAAO,CAAC,QAAQ,CAAC,CAAC,UAAU,EAAE,EAAE;QAC9B,UAAU,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;IAEtB,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC3C,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC/C,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AACpD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,qCAAqC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACpE,MAAM,KAAK,CAAC;;;;;;GAMX,CAAC,CAAC;IACH,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAEnD,IAAI,CAAC,QAAQ,CAAC,CAAC,UAAU,EAAE,EAAE;QAC3B,UAAU,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,CAAC,KAAK,EAAE,EAAE,CACtD,KAAK,CAAC,cAAc,EAAE,CACvB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;IAEtB,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC3C,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC/C,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AACpD,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 */\n/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n    </ix-tabs>\n  `);\n  const tabs = page.locator('ix-tabs');\n  const tab = page.locator('ix-tab-item').nth(0);\n\n  await expect(tabs).toHaveClass(/hydrated/);\n  await expect(tab).toHaveClass(/selected/);\n});\n\ntest('should change tab', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n    </ix-tabs>\n  `);\n  const tabs = page.locator('ix-tabs');\n  const tab = page.locator('ix-tab-item').nth(2);\n\n  await tab.click();\n\n  await expect(tabs).toHaveClass(/hydrated/);\n  await expect(tab).toHaveClass(/selected/);\n});\n\ntest('should not change tab by tab click event', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n    </ix-tabs>\n  `);\n  const tabs = page.locator('ix-tabs');\n  const firstTab = page.locator('ix-tab-item').nth(0);\n  const lastTab = page.locator('ix-tab-item').nth(2);\n\n  lastTab.evaluate((tabElement) => {\n    tabElement.addEventListener('tabClick', (event) => event.preventDefault());\n  });\n\n  await lastTab.click();\n\n  await expect(tabs).toHaveClass(/hydrated/);\n  await expect(firstTab).toHaveClass(/selected/);\n  await expect(lastTab).not.toHaveClass(/selected/);\n});\n\ntest('should not change tab by tabs event', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n    </ix-tabs>\n  `);\n  const tabs = page.locator('ix-tabs');\n  const firstTab = page.locator('ix-tab-item').nth(0);\n  const lastTab = page.locator('ix-tab-item').nth(2);\n\n  tabs.evaluate((tabElement) => {\n    tabElement.addEventListener('selectedChange', (event) =>\n      event.preventDefault()\n    );\n  });\n\n  await lastTab.click();\n\n  await expect(tabs).toHaveClass(/hydrated/);\n  await expect(firstTab).toHaveClass(/selected/);\n  await expect(lastTab).not.toHaveClass(/selected/);\n});\n"]}
+{"version":3,"file":"tabs.ct.js","sourceRoot":"","sources":["../../../../src/components/tabs/test/tabs.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n    </ix-tabs>\n  `);\n  const tabs = page.locator('ix-tabs');\n  const tab = page.locator('ix-tab-item').nth(0);\n\n  await expect(tabs).toHaveClass(/hydrated/);\n  await expect(tab).toHaveClass(/selected/);\n});\n\ntest('should change tab', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n    </ix-tabs>\n  `);\n  const tabs = page.locator('ix-tabs');\n  const tab = page.locator('ix-tab-item').nth(2);\n\n  await tab.click();\n\n  await expect(tabs).toHaveClass(/hydrated/);\n  await expect(tab).toHaveClass(/selected/);\n});\n\ntest('should not change tab by tab click event', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n    </ix-tabs>\n  `);\n  const tabs = page.locator('ix-tabs');\n  const firstTab = page.locator('ix-tab-item').nth(0);\n  const lastTab = page.locator('ix-tab-item').nth(2);\n\n  lastTab.evaluate((tabElement) => {\n    tabElement.addEventListener('tabClick', (event) => event.preventDefault());\n  });\n\n  await lastTab.click();\n\n  await expect(tabs).toHaveClass(/hydrated/);\n  await expect(firstTab).toHaveClass(/selected/);\n  await expect(lastTab).not.toHaveClass(/selected/);\n});\n\ntest('should not change tab by tabs event', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n    </ix-tabs>\n  `);\n  const tabs = page.locator('ix-tabs');\n  const firstTab = page.locator('ix-tab-item').nth(0);\n  const lastTab = page.locator('ix-tab-item').nth(2);\n\n  tabs.evaluate((tabElement) => {\n    tabElement.addEventListener('selectedChange', (event) =>\n      event.preventDefault()\n    );\n  });\n\n  await lastTab.click();\n\n  await expect(tabs).toHaveClass(/hydrated/);\n  await expect(firstTab).toHaveClass(/selected/);\n  await expect(lastTab).not.toHaveClass(/selected/);\n});\n\ntest('should update layout on resize', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n    </ix-tabs>\n    `);\n  const tabs = page.locator('ix-tabs');\n  await page.setViewportSize({ width: 200, height: 100 });\n  const arrowNext = tabs.locator('.arrow.right');\n  await expect(arrowNext).toBeVisible();\n\n  await page.setViewportSize({ width: 1000, height: 100 });\n  await expect(arrowNext).not.toBeVisible();\n});\n\ntest('should scroll selected tab into view', async ({ mount, page }) => {\n  await mount(`\n    <ix-tabs>\n      <ix-tab-item>Item 1</ix-tab-item>\n      <ix-tab-item>Item 2</ix-tab-item>\n      <ix-tab-item>Item 3</ix-tab-item>\n      <ix-tab-item>Item 4</ix-tab-item>\n      <ix-tab-item>Item 5</ix-tab-item>\n      <ix-tab-item>Item 6</ix-tab-item>\n    </ix-tabs>\n  `);\n  await page.setViewportSize({ width: 300, height: 100 });\n  const clickedTab = page.locator('ix-tab-item').nth(3);\n  const lastTab = page.locator('ix-tab-item').last();\n  await clickedTab.click();\n  await page.waitForTimeout(500);\n  await expect(clickedTab).toBeInViewport();\n  await expect(lastTab).not.toBeInViewport();\n});\n"]}

package/dist/collection/components/tile/tile.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/tile/tile.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -20,17 +20,17 @@ export class Tile {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: 'cfe05def01cd57c9743a8fccbecbd41b643a9fe2', class: {
+        return (h(Host, { key: '3591d450b88fa35cabff8ad8b96a9a3e292a46e5', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, h("div", { key: 'e37a76b559db0e0a9f8cc48aafad34ab9fcbc6c3', class: {
+            } }, h("div", { key: '0da2a87420a4ec6e69cfac5f7025bd66f78bbda1', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: 'd14c60fa3a20b9312257f55edda792ea6b4a7cee', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: 'db36b0c56a63976a72573681618338f433887669', class: "tile-subheader" }, h("slot", { key: '451561552ddb35ccdc429d944252f5a0dadb8a0e', name: "subheader" })), h("div", { key: 'd793f4019d8e37ede2a0f866aff1c501b5619651', class: "tile-content" }, h("slot", { key: 'afc3df10a7b4ff6c05cf0d87ff78dbe7ecee776e' })), h("div", { key: '14cc913a9c35b73a58a8d618c6ea7cc75e1d5743', class: {
+            } }, h("slot", { key: '6eb0ce1872418533244a2057e995cb877afcac62', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: 'e89abbd5ec65c8f122a7e1b1bf2882c5d719cfa7', class: "tile-subheader" }, h("slot", { key: 'c409b93907582bd7bd484657111f7204f8b89eb3', name: "subheader" })), h("div", { key: '0155d4a76a0d570a19ad76c968347dc030bb404a', class: "tile-content" }, h("slot", { key: '01f0107469bd358e8a6f17e3eb376f631a393deb' })), h("div", { key: '992a986c36ca4b3f2408cf03d8eda3fcc4f64b94', class: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, h("slot", { key: '184e7b7313f40d2478541e6f599bb462d1c0f286', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, h("slot", { key: '9e98bd01282e4ef2aadd1c07aeb4b8f577e2b312', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     static get is() { return "ix-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tile/tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/components/tile/tile.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,IAAI;;oBAM4B,QAAQ;6BAEjB,KAAK;6BACL,KAAK;;IAEvC,sBAAsB;QACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3E,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3E,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;aAChC;YAED,4DACE,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,aAAa,EAAE,IAAI,CAAC,aAAa;iBAClC;gBAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ;YACN,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;YACN,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAa,CACT;YACN,4DACE,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,aAAa,EAAE,IAAI,CAAC,aAAa;iBAClC;gBAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,CACD,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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ix-tile',\n  styleUrl: 'tile.scss',\n  shadow: true,\n})\nexport class Tile {\n  @Element() hostElement: HTMLIxTileElement;\n\n  /**\n   * Size of the tile - one of 'small', 'medium' or 'large'\n   */\n  @Prop() size: 'small' | 'medium' | 'big' = 'medium';\n\n  @State() hasHeaderSlot: boolean = false;\n  @State() hasFooterSlot: boolean = false;\n\n  handleHeaderSlotChange() {\n    this.hasHeaderSlot = !!this.hostElement.querySelector('[slot=\"header\"]');\n  }\n\n  handleFooterSlotChange() {\n    this.hasFooterSlot = !!this.hostElement.querySelector('[slot=\"footer\"]');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'tile-small': this.size === 'small',\n          'tile-medium': this.size === 'medium',\n          'tile-big': this.size === 'big',\n        }}\n      >\n        <div\n          class={{\n            'tile-header': true,\n            'has-content': this.hasHeaderSlot,\n          }}\n        >\n          <slot\n            name=\"header\"\n            onSlotchange={() => this.handleHeaderSlotChange()}\n          ></slot>\n        </div>\n        <div class=\"tile-subheader\">\n          <slot name=\"subheader\"></slot>\n        </div>\n        <div class=\"tile-content\">\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            'tile-footer': true,\n            'has-content': this.hasFooterSlot,\n          }}\n        >\n          <slot\n            name=\"footer\"\n            onSlotchange={() => this.handleFooterSlotChange()}\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/components/tile/tile.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,IAAI;;oBAM4B,QAAQ;6BAEjB,KAAK;6BACL,KAAK;;IAEvC,sBAAsB;QACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3E,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3E,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;aAChC;YAED,4DACE,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,aAAa,EAAE,IAAI,CAAC,aAAa;iBAClC;gBAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ;YACN,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;YACN,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAa,CACT;YACN,4DACE,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,aAAa,EAAE,IAAI,CAAC,aAAa;iBAClC;gBAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ix-tile',\n  styleUrl: 'tile.scss',\n  shadow: true,\n})\nexport class Tile {\n  @Element() hostElement: HTMLIxTileElement;\n\n  /**\n   * Size of the tile - one of 'small', 'medium' or 'large'\n   */\n  @Prop() size: 'small' | 'medium' | 'big' = 'medium';\n\n  @State() hasHeaderSlot: boolean = false;\n  @State() hasFooterSlot: boolean = false;\n\n  handleHeaderSlotChange() {\n    this.hasHeaderSlot = !!this.hostElement.querySelector('[slot=\"header\"]');\n  }\n\n  handleFooterSlotChange() {\n    this.hasFooterSlot = !!this.hostElement.querySelector('[slot=\"footer\"]');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'tile-small': this.size === 'small',\n          'tile-medium': this.size === 'medium',\n          'tile-big': this.size === 'big',\n        }}\n      >\n        <div\n          class={{\n            'tile-header': true,\n            'has-content': this.hasHeaderSlot,\n          }}\n        >\n          <slot\n            name=\"header\"\n            onSlotchange={() => this.handleHeaderSlotChange()}\n          ></slot>\n        </div>\n        <div class=\"tile-subheader\">\n          <slot name=\"subheader\"></slot>\n        </div>\n        <div class=\"tile-content\">\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            'tile-footer': true,\n            'has-content': this.hasFooterSlot,\n          }}\n        >\n          <slot\n            name=\"footer\"\n            onSlotchange={() => this.handleFooterSlotChange()}\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/toast/styles/toast-container.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/toast/toast-container.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/toast/toast-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-container.js","sourceRoot":"","sources":["../../../src/components/toast/toast-container.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 { Component, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\nexport type ShowToastResult = {\n  onClose: TypedEvent<any | undefined>;\n  close: (result?: any) => void;\n};\n\n@Component({\n  tag: 'ix-toast-container',\n  styleUrl: './styles/toast-container.scss',\n  shadow: true,\n})\nexport class ToastContainer {\n  /**\n   */\n  @Prop() containerId = 'toast-container';\n\n  /**\n   */\n  @Prop() containerClass = 'toast-container';\n\n  /**\n   */\n  @Prop() position: 'bottom-right' | 'top-right' = 'bottom-right';\n\n  private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n  get hostContainer() {\n    return new Promise<HTMLElement>((resolve) => {\n      const interval = setInterval(() => {\n        const containerElement = document.getElementById(this.containerId);\n        if (containerElement) {\n          clearInterval(interval);\n          resolve(containerElement);\n        }\n      });\n    });\n  }\n\n  componentDidLoad() {\n    if (!document.getElementById(this.containerId)) {\n      const toastContainer = document.createElement('div');\n      toastContainer.id = this.containerId;\n      toastContainer.classList.add(this.containerClass);\n      toastContainer.classList.add(\n        `${this.PREFIX_POSITION_CLASS}${this.position}`\n      );\n      document.body.appendChild(toastContainer);\n    }\n  }\n\n  @Watch('position')\n  onPositionChange(newPosition: string, oldPosition: string) {\n    const toastContainer = document.getElementById(this.containerId);\n    toastContainer.classList.remove(\n      `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n    );\n    toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n  }\n\n  /**\n   * Display a toast message\n   * @param config\n   */\n  @Method()\n  async showToast(config: ToastConfig): Promise<ShowToastResult> {\n    const toast = document.createElement('ix-toast');\n    const onClose = new TypedEvent<any | undefined>();\n\n    function removeToast(result?: any) {\n      toast.remove();\n      onClose.emit(result);\n    }\n\n    toast.toastTitle = config.title;\n    toast.type = config.type;\n    toast.autoClose = config.autoClose ?? true;\n    toast.autoCloseDelay = config.autoCloseDelay ?? 5000;\n    toast.icon = config.icon;\n    toast.iconColor = config.iconColor;\n    toast.addEventListener(\n      'closeToast',\n      (event: CustomEvent<any | undefined>) => {\n        const { detail } = event;\n        removeToast(detail);\n      }\n    );\n\n    if (typeof config.message === 'string') {\n      toast.innerText = config.message;\n    } else {\n      toast.appendChild(config.message);\n    }\n\n    (await this.hostContainer).appendChild(toast);\n\n    return {\n      onClose,\n      close: (result?: any) => {\n        removeToast(result);\n      },\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'toast-container--bottom-right': this.position === 'bottom-right',\n          'toast-container--top-right': this.position === 'top-right',\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"toast-container.js","sourceRoot":"","sources":["../../../src/components/toast/toast-container.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\nexport type ShowToastResult = {\n  onClose: TypedEvent<any | undefined>;\n  close: (result?: any) => void;\n};\n\n@Component({\n  tag: 'ix-toast-container',\n  styleUrl: './styles/toast-container.scss',\n  shadow: true,\n})\nexport class ToastContainer {\n  /**\n   */\n  @Prop() containerId = 'toast-container';\n\n  /**\n   */\n  @Prop() containerClass = 'toast-container';\n\n  /**\n   */\n  @Prop() position: 'bottom-right' | 'top-right' = 'bottom-right';\n\n  private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n  get hostContainer() {\n    return new Promise<HTMLElement>((resolve) => {\n      const interval = setInterval(() => {\n        const containerElement = document.getElementById(this.containerId);\n        if (containerElement) {\n          clearInterval(interval);\n          resolve(containerElement);\n        }\n      });\n    });\n  }\n\n  componentDidLoad() {\n    if (!document.getElementById(this.containerId)) {\n      const toastContainer = document.createElement('div');\n      toastContainer.id = this.containerId;\n      toastContainer.classList.add(this.containerClass);\n      toastContainer.classList.add(\n        `${this.PREFIX_POSITION_CLASS}${this.position}`\n      );\n      document.body.appendChild(toastContainer);\n    }\n  }\n\n  @Watch('position')\n  onPositionChange(newPosition: string, oldPosition: string) {\n    const toastContainer = document.getElementById(this.containerId);\n    toastContainer.classList.remove(\n      `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n    );\n    toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n  }\n\n  /**\n   * Display a toast message\n   * @param config\n   */\n  @Method()\n  async showToast(config: ToastConfig): Promise<ShowToastResult> {\n    const toast = document.createElement('ix-toast');\n    const onClose = new TypedEvent<any | undefined>();\n\n    function removeToast(result?: any) {\n      toast.remove();\n      onClose.emit(result);\n    }\n\n    toast.toastTitle = config.title;\n    toast.type = config.type;\n    toast.autoClose = config.autoClose ?? true;\n    toast.autoCloseDelay = config.autoCloseDelay ?? 5000;\n    toast.icon = config.icon;\n    toast.iconColor = config.iconColor;\n    toast.addEventListener(\n      'closeToast',\n      (event: CustomEvent<any | undefined>) => {\n        const { detail } = event;\n        removeToast(detail);\n      }\n    );\n\n    if (typeof config.message === 'string') {\n      toast.innerText = config.message;\n    } else {\n      toast.appendChild(config.message);\n    }\n\n    (await this.hostContainer).appendChild(toast);\n\n    return {\n      onClose,\n      close: (result?: any) => {\n        removeToast(result);\n      },\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'toast-container--bottom-right': this.position === 'bottom-right',\n          'toast-container--top-right': this.position === 'top-right',\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/toast/toast-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-utils.js","sourceRoot":"","sources":["../../../src/components/toast/toast-utils.ts"],"names":[],"mappings":"AAsBA,MAAM,UAAU,iBAAiB;IAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC;IAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC7B,OAAO,CAAC,IAAI,CACV,wEAAwE,CACzE,CAAC;QACF,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAE1C,OAAO,cAAc,CAAC;IACxB,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,QAAuB;IACtD,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAChC,CAAC;AAED,SAAS,KAAK,CAAC,MAAmB;IAChC,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,OAAO,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;AACrC,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB,EAAE,EAAE;IACnC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,MAAM,IACZ,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB,EAAE,EAAE;IACpC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,OAAO,IACb,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB,EAAE,EAAE;IACtC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB,EAAE,EAAE;IACtC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,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 { ShowToastResult } from './toast-container';\nexport type ToastType = 'info' | 'success' | 'error' | 'warning';\nexport type ToastPosition = 'bottom-right' | 'top-right';\n\nexport interface ToastConfig {\n  title?: string;\n  message: string | HTMLElement;\n  type?: ToastType;\n  autoClose?: boolean;\n  autoCloseDelay?: number;\n  icon?: string;\n  iconColor?: string;\n}\n\nexport function getToastContainer() {\n  const containerList = Array.from(\n    document.querySelectorAll('ix-toast-container')\n  );\n  const [container] = containerList;\n  if (containerList.length > 1) {\n    console.warn(\n      'Multiple toast containers were found. Only the first one will be used.'\n    );\n    return container;\n  }\n  if (!container) {\n    const toastContainer = document.createElement('ix-toast-container');\n    document.body.appendChild(toastContainer);\n\n    return toastContainer;\n  }\n  return container;\n}\n\nexport function setToastPosition(position: ToastPosition) {\n  const container = getToastContainer();\n  container.position = position;\n}\n\nfunction toast(config: ToastConfig): Promise<ShowToastResult> {\n  const container = getToastContainer();\n  return container.showToast(config);\n}\n\ntoast.info = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'info',\n  });\n};\n\ntoast.error = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'error',\n  });\n};\n\ntoast.success = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'success',\n  });\n};\n\ntoast.warning = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'warning',\n  });\n};\n\nexport { toast };\n"]}
+{"version":3,"file":"toast-utils.js","sourceRoot":"","sources":["../../../src/components/toast/toast-utils.ts"],"names":[],"mappings":"AAsBA,MAAM,UAAU,iBAAiB;IAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC;IAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC7B,OAAO,CAAC,IAAI,CACV,wEAAwE,CACzE,CAAC;QACF,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAE1C,OAAO,cAAc,CAAC;IACxB,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,QAAuB;IACtD,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAChC,CAAC;AAED,SAAS,KAAK,CAAC,MAAmB;IAChC,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,OAAO,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;AACrC,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB,EAAE,EAAE;IACnC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,MAAM,IACZ,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB,EAAE,EAAE;IACpC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,OAAO,IACb,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB,EAAE,EAAE;IACtC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB,EAAE,EAAE;IACtC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { ShowToastResult } from './toast-container';\nexport type ToastType = 'info' | 'success' | 'error' | 'warning';\nexport type ToastPosition = 'bottom-right' | 'top-right';\n\nexport interface ToastConfig {\n  title?: string;\n  message: string | HTMLElement;\n  type?: ToastType;\n  autoClose?: boolean;\n  autoCloseDelay?: number;\n  icon?: string;\n  iconColor?: string;\n}\n\nexport function getToastContainer() {\n  const containerList = Array.from(\n    document.querySelectorAll('ix-toast-container')\n  );\n  const [container] = containerList;\n  if (containerList.length > 1) {\n    console.warn(\n      'Multiple toast containers were found. Only the first one will be used.'\n    );\n    return container;\n  }\n  if (!container) {\n    const toastContainer = document.createElement('ix-toast-container');\n    document.body.appendChild(toastContainer);\n\n    return toastContainer;\n  }\n  return container;\n}\n\nexport function setToastPosition(position: ToastPosition) {\n  const container = getToastContainer();\n  container.position = position;\n}\n\nfunction toast(config: ToastConfig): Promise<ShowToastResult> {\n  const container = getToastContainer();\n  return container.showToast(config);\n}\n\ntoast.info = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'info',\n  });\n};\n\ntoast.error = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'error',\n  });\n};\n\ntoast.success = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'success',\n  });\n};\n\ntoast.warning = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'warning',\n  });\n};\n\nexport { toast };\n"]}

package/dist/collection/components/toast/toast.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/toast/toast.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -51,11 +51,11 @@ export class Toast {
             animationPlayState: this.touched ? 'paused' : 'running',
         };
         progressBarClass.push('toast-progress-bar--animated');
-        return (h(Host, { key: '165e8ce47907c08afaef29ec7741efaddaf59d0f', class: "animate__animated animate__fadeIn" }, h("div", { key: 'fff7c4afb35bf57eead0fa4b484e0843dcf6c163', class: "toast-body", onPointerLeave: () => {
+        return (h(Host, { key: 'd52b6e9699ad54687af42f99642eb0c297f97a2e', class: "animate__animated animate__fadeIn" }, h("div", { key: '93a7346e3b7a6ecd2e32f7114f93db78513cb181', class: "toast-body", onPointerLeave: () => {
                 this.touched = false;
             }, onPointerEnter: () => {
                 this.touched = true;
-            } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: 'cd9db0e7591fc8cc069608cff6c3824b4063b1df', class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title" }, this.toastTitle)) : null, h("div", { key: '5c850aab1090ec83bfbb2ed4be68d665efaa403f', class: "toast-message" }, h("slot", { key: '0f857c156d576f8bc62cca7f2ab50df00fe3e794' }))), h("div", { key: '47db8f9094de72a16be06466bd694923d86492ff', class: "toast-close" }, h("ix-icon-button", { key: 'db141553999f04175cb135c9b89b7655a5eae216', icon: 'close', size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+            } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: '372fd16d6b94d8f2df0eb875d99c8c5199e80572', class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title" }, this.toastTitle)) : null, h("div", { key: '1d43ec353af91250b6788b0ee2e44352f581543c', class: "toast-message" }, h("slot", { key: '5ed42d9699d34b6948cfda2b7ed4b1e68f2bac8e' }))), h("div", { key: '40e8ad3252a34ef2cebd6c388fa13e255a1d9f03', class: "toast-close" }, h("ix-icon-button", { key: 'ad4ed057761f4e76126ba68cd012e900ad3899a0', icon: 'close', size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
                 this.close();
             }, onTransitionEnd: () => {
                 if (this.progress === 0) {