@siemens/ix 2.3.0 → 2.4.1

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   * On tab click\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.js

@@ -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: 'd78a0e8848762853905f0a00ad0e29eb8010f058' }, h("div", { key: '81f8018608a4ead1b07a2c8dbc275f3e6b1a4f9f', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: '74ac11767dded217d438e58f3d9af659b5f7913c', name: 'chevron-left-small' })), h("div", { key: '22172b312ee82c63c590780030766262d5655be3', class: {
+        return (h(Host, { key: '014b3afcc4165f3c3aa0800ea6f12c15d138b48b' }, this.showArrowPrevious && (h("div", { key: '6c98e2c2957c96970d42d5abdf959f325e1c05b8', class: "arrow", onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: '55f46b38e62a863415fa5d51da48a1be19303b78', name: 'chevron-left-small' }))), h("div", { key: 'c0528e9e703746cc1acc63c1b68c4d9ee3a01a04', class: {
                 'tab-items': true,
                 'overflow-shadow': true,
-                'shadow-left': this.showPreviousArrow(),
-                'shadow-right': this.showNextArrow(),
-                'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
-            } }, h("div", { key: '31a8df74124a12d6abc6e3af8c45e2f59c9e8e7f', class: "items-content" }, h("slot", { key: '0a37dea0573b5123c6de66831c028401d1da86b4' }))), h("div", { key: 'cd946069a8dbb2708bc90923c2bb8a897eeaf3b5', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: '3542fc3e7cba8477f2367492620dc16cdaecbad8', name: 'chevron-right-small' }))));
+                'shadow-left': this.showArrowPrevious,
+                'shadow-right': this.showArrowNext,
+                'shadow-both': this.showArrowNext && this.showArrowPrevious,
+            } }, h("div", { key: 'bb6174f8e9a9543ee928a70de23500edbedaeb04', class: "items-content" }, h("slot", { key: 'ba881f7c4784685ebdb1f0a2581c4691f2a8f1b9' }))), this.showArrowNext && (h("div", { key: '743123a5b14ed6a473c21b742f54cbf4ae4405da', class: "arrow right", onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: 'd67ab90bf1b620791ca9e84f7ace8b7a04a7a772', 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: 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  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":"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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/*\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.js

@@ -20,17 +20,17 @@ export class Tile {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: '16fa86cdf2448b3335401be00cba0284fd166959', class: {
+        return (h(Host, { key: 'cfe05def01cd57c9743a8fccbecbd41b643a9fe2', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, h("div", { key: '0aaf6e763e1bd75f919d1067208af8a33be06937', class: {
+            } }, h("div", { key: 'e37a76b559db0e0a9f8cc48aafad34ab9fcbc6c3', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: '70178ba49417bf674cc8798f6824aa37864668f7', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '823a4907cbe143ef6586a5482f31c8729644bf76', class: "tile-subheader" }, h("slot", { key: '6e240f390b24fec6630bed00539479d11d89b096', name: "subheader" })), h("div", { key: '7d83cbe84804423f654e4f9dd0fe3f2ca261a3c4', class: "tile-content" }, h("slot", { key: '100276ea9333c7dd7d183dbd7fb2651475b397cf' })), h("div", { key: 'f73dcff2a9730339deed5c82c0978ff4122dd6a5', class: {
+            } }, 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: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, h("slot", { key: 'a550b2cc798c1bc8a57adea6c6fcd4863ad9ac57', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, h("slot", { key: '184e7b7313f40d2478541e6f599bb462d1c0f286', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     static get is() { return "ix-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/time-picker/time-picker.js

@@ -109,7 +109,7 @@ export class TimePicker {
             },
         ];
         timepickerInformation = timepickerInformation.filter((item) => !item.hidden);
-        return (h(Host, { key: 'c09337ff6d0366929f77fe9bbdd89eb43bcc71ea' }, h("ix-date-time-card", { key: '80c29872490f5968979a802b92113377ec9df678', standaloneAppearance: this.standaloneAppearance, corners: this.corners }, h("div", { key: '35981c4cde62451368ee30fc4bcc19f894939cda', class: "header", slot: "header" }, h("ix-typography", { key: 'cd88a3f06e8907419acc45cd71d9954b7365096c', variant: "default-title" }, this.textTime || 'Time')), h("div", { key: 'fd5d74523fd649fedac87ac0887fb643fd9795ce', class: "clock" }, timepickerInformation.map((descriptor, index) => (h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden } }, h("ix-icon-button", { size: "16", onClick: () => (this._time = this._time.plus({
+        return (h(Host, { key: '406efcc8a6f13b2d14a29cc274087cdd0c163ae3' }, h("ix-date-time-card", { key: 'c412795818b4f9ff9529091efebbd90e4e02ac26', standaloneAppearance: this.standaloneAppearance, corners: this.corners }, h("div", { key: '3a4f02bf5d419d0cc8fe5d70043eddbdf03e3232', class: "header", slot: "header" }, h("ix-typography", { key: '2db318fff112ad225395288703c6962923c616e1', variant: "default-title" }, this.textTime || 'Time')), h("div", { key: 'b32d03ca5a29b81c48efc0ca00588013a3c0f927', class: "clock" }, timepickerInformation.map((descriptor, index) => (h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden } }, h("ix-icon-button", { size: "16", onClick: () => (this._time = this._time.plus({
                 [descriptor.unit]: 1,
             })), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: descriptor.unit, type: "number", placeholder: descriptor.placeholder, value: this._formattedTime
                 ? this._formattedTime[descriptor.unit]
@@ -129,11 +129,11 @@ export class TimePicker {
             })), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), index !== timepickerInformation.length - 1 && (h("div", { class: {
                 'column-seperator': true,
                 hidden: descriptor.hidden,
-            } }, ":"))))), h("div", { key: '819d9ce8cdfc94e7c4a1d2f7190587f052a9d246', class: {
+            } }, ":"))))), h("div", { key: '9645b4495494b7d1624e4aa258285e33bc8e44c0', class: {
                 columns: true,
                 'default-space': true,
                 hidden: this._timeRef === undefined,
-            } }, h("ix-icon-button", { key: '6ec3654d6a81bb2420695dd3292677395bd6adc2', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("div", { key: '09b1dd7076112d4dc5168a968ed0ebebaa67e69f', class: "time-reference" }, this._timeRef), h("ix-icon-button", { key: 'ff24cdad6df286cc2da51958c2b51fe43f1e4fea', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" }))), h("div", { key: '82602709c4107324d9498426cb30959fe81bacc4', class: { button: true, hidden: !this.standaloneAppearance } }, h("ix-button", { key: '64da9baed02906baad694bbe066bc355197d293e', onClick: () => {
+            } }, h("ix-icon-button", { key: 'dd5b9d9c3bbda4b376175518966991a13aa9c1d7', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("div", { key: 'ac27351872bc8cfdf41f14c86a49b2478e6cd120', class: "time-reference" }, this._timeRef), h("ix-icon-button", { key: 'e0d6654abbaa5330a9d6839523e0203c7dd7f38b', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" }))), h("div", { key: '294335c73b4e006724519cb05be7a9199b478dcb', class: { button: true, hidden: !this.standaloneAppearance } }, h("ix-button", { key: '120892208969407ff86e721eb1a2d886bbd83c89', onClick: () => {
                 this.timeSelect.emit(this._time.toFormat(this.format));
                 this.done.emit(this._time.toFormat(this.format));
             } }, this.textSelectTime)))));

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

@@ -77,10 +77,10 @@ export class ToastContainer {
         };
     }
     render() {
-        return (h(Host, { key: '22ee0d6985d0b35a3d623dfc318c22cb0a2720ae', class: {
+        return (h(Host, { key: '4c3986ebc5843f0d1846527f602851d82bd525d7', class: {
                 'toast-container--bottom-right': this.position === 'bottom-right',
                 'toast-container--top-right': this.position === 'top-right',
-            } }, h("slot", { key: '9cfd7c6607fde4dd11f6b4c026f017b31acba8d9' })));
+            } }, h("slot", { key: '6d9c87e3bfddb1b1bf0fbebdd06efad5347b5390' })));
     }
     static get is() { return "ix-toast-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,11 +51,11 @@ export class Toast {
             animationPlayState: this.touched ? 'paused' : 'running',
         };
         progressBarClass.push('toast-progress-bar--animated');
-        return (h(Host, { key: '8af2933e92ceaae263f3cc38ad519c6fc8865b3e', class: "animate__animated animate__fadeIn" }, h("div", { key: '7a09d06a2d6643be19660ad2dc8b226208a7b478', class: "toast-body", onPointerLeave: () => {
+        return (h(Host, { key: '165e8ce47907c08afaef29ec7741efaddaf59d0f', class: "animate__animated animate__fadeIn" }, h("div", { key: 'fff7c4afb35bf57eead0fa4b484e0843dcf6c163', 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: 'b19932c2f9e60287f53302f8d273df2f0a087375', class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title" }, this.toastTitle)) : null, h("div", { key: 'b10ee8ffae9b69060c74b405c41a5533ceff5806', class: "toast-message" }, h("slot", { key: '8e7931e442b82ef3760f4b13c08f2fb29cb3dbe5' }))), h("div", { key: 'bd7de69a43138138f60e9938a07e0f3d58262cf7', class: "toast-close" }, h("ix-icon-button", { key: '93137526cf1606c0f72b55f722495c4bb659c1c3', 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: '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.close();
             }, onTransitionEnd: () => {
                 if (this.progress === 0) {

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

@@ -26,9 +26,9 @@ export class Toggle {
         this.checkedChange.emit(this.checked);
     }
     render() {
-        return (h(Host, { key: 'ffc42b6828208dcf6483abfda90ae88dd43ee408', class: {
+        return (h(Host, { key: '46cf23f4ae6803763da9344dfd9374aa2e307e14', class: {
                 disabled: this.disabled,
-            }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { key: '35954eafdb6301bb6e7063a8978f2bfcc7076de0', 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: '0aed058713bc742c3408accee2e3551313a1ad31', class: "switch", tabIndex: -1 }, h("span", { key: '62fbfca9e3adb625006e981f4ae655d2989d9aef', 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: '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));
     }
     static get is() { return "ix-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,9 +62,9 @@ export class ToggleButton {
                 'aria-pressed': a11yBoolean(this.pressed),
             },
         };
-        return (h(Host, { key: 'f8633f71b51df3509bc679922b432bd5c530d580', class: {
+        return (h(Host, { key: 'bec8a150fd761e11ed81ae3803a8e62d6a250ec7', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: '005a4497d2d37783c6dcf2824c471b56515396ed' }, baseButtonProps), h("slot", { key: '9cafada091aa59fd6b447a2821f58ebd504875cd' }))));
+            } }, h(BaseButton, Object.assign({ key: 'b0e6ee7a113ea8d9b417b8de62cf816fb78b49ca' }, baseButtonProps), h("slot", { key: 'ce9fd3a28d4c7048d14618bd7813f4c84a4ac255' }))));
     }
     static get is() { return "ix-toggle-button"; }
     static get encapsulation() { return "shadow"; }