@siemens/ix 1.4.0-beta.0 → 1.4.0-beta.2

package/dist/collection/components/split-button/split-button.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -9,6 +9,15 @@
 :host {
   display: inline-block;
 }
+:host .btn-group {
+  width: 100%;
+}
+:host .btn-group > button:nth-child(1) {
+  width: calc(100% - 2rem);
+}
+:host .btn-group > button:nth-child(2) {
+  width: 2rem;
+}
 :host .middle-gap {
   gap: 0.125rem;
 }

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -62,7 +62,7 @@ export class SplitButton {
           "references": {
             "Buttons": {
               "location": "import",
-              "path": "../utils/button-variants"
+              "path": "../button/button-variants"
             }
           }
         },

package/dist/collection/components/split-button-item/split-button-item.css

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

package/dist/collection/components/split-button-item/split-button-item.js

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

package/dist/collection/components/tab-item/tab-item.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -20,7 +20,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -28,7 +28,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -67,8 +67,7 @@ ix-tab-item::after {
 }
 ix-tab-item.stretched {
   flex-basis: 100%;
-  max-width: -moz-max-content;
-  max-width: max-content;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -77,7 +76,6 @@ ix-tab-item .text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: inline-flex;
   vertical-align: middle;
 }
 ix-tab-item .text span,

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

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

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -35,6 +35,7 @@ ix-tabs {
 ix-tabs .tab-items {
   overflow: hidden;
   scroll-behavior: smooth;
+  width: 100%;
 }
 ix-tabs .tab-items .items-content {
   display: flex;

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -22,6 +22,8 @@ export class Tabs {
     this.totalItems = 0;
     this.currentScrollAmount = 0;
     this.scrollAmount = 100;
+    this.styleNextArrow = {};
+    this.stylePreviousArrow = {};
     this.scrollActionAmount = 0;
   }
   onWindowResize() {
@@ -66,8 +68,7 @@ export class Tabs {
       const tabWrapperRect = tabWrapper.getBoundingClientRect();
       return (this.showArrows() &&
         this.scrollActionAmount >
-          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1 &&
-        window.innerWidth <= tabWrapper.scrollWidth);
+          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1);
     }
     catch (error) {
       return false;
@@ -153,6 +154,12 @@ export class Tabs {
       element.setAttribute('placement', this.placement);
     });
   }
+  componentWillRender() {
+    requestAnimationFrame(() => {
+      this.styleNextArrow = this.getArrowStyle(this.showNextArrow());
+      this.stylePreviousArrow = this.getArrowStyle(this.showPreviousArrow());
+    });
+  }
   componentDidLoad() {
     const tabs = this.getTabs();
     tabs.forEach((element, index) => {
@@ -163,7 +170,7 @@ export class Tabs {
     });
   }
   render() {
-    return (h(Host, null, h("div", { class: "overflow-shadow", style: this.getArrowStyle(this.showPreviousArrow()) }), h("div", { class: "arrow", style: this.getArrowStyle(this.showPreviousArrow()), onClick: () => this.move(this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-left-small" })), h("div", { class: "tab-items" }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "overflow-shadow right", style: this.getArrowStyle(this.showNextArrow()) }), h("div", { class: "arrow right", style: this.getArrowStyle(this.showNextArrow()), onClick: () => this.move(-this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-right-small" }))));
+    return (h(Host, null, h("div", { class: "overflow-shadow", style: this.stylePreviousArrow }), h("div", { class: "arrow", style: this.stylePreviousArrow, onClick: () => this.move(this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-left-small" })), h("div", { class: "tab-items" }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "overflow-shadow right", style: this.styleNextArrow }), h("div", { class: "arrow right", style: this.styleNextArrow, onClick: () => this.move(-this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-right-small" }))));
   }
   static get is() { return "ix-tabs"; }
   static get originalStyleUrls() {
@@ -275,6 +282,8 @@ export class Tabs {
       "totalItems": {},
       "currentScrollAmount": {},
       "scrollAmount": {},
+      "styleNextArrow": {},
+      "stylePreviousArrow": {},
       "scrollActionAmount": {}
     };
   }

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

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

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -59,9 +59,11 @@ export class Toast {
       progressBarClass.push('toast-progress-bar--touched');
     }
     const updateProgress = () => {
-      if (progressBarElement) {
-        progressBarElement.style.transform = `scaleX(${this.progress})`;
-      }
+      requestAnimationFrame(() => {
+        if (progressBarElement) {
+          progressBarElement.style.transform = `scaleX(${this.progress})`;
+        }
+      });
     };
     return (h(Host, { class: "animate__animated animate__fadeIn" }, h("div", { class: "toast-body", onPointerLeave: () => {
         this.progress = 0;
@@ -71,7 +73,9 @@ export class Toast {
         this.touched = true;
         this.progress = 1;
         updateProgress();
-      } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title text-default-title-single" }, this.toastTitle)) : null, h("div", { class: "toast-message text-default" }, h("slot", null))), h("div", { class: "toast-close" }, h("ix-icon-button", { icon: "close", size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, ref: (r) => (progressBarElement = r), onAnimationEnd: () => this.close(), onTransitionEnd: () => {
+      } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title text-default-title-single" }, this.toastTitle)) : null, h("div", { class: "toast-message text-default" }, h("slot", null))), h("div", { class: "toast-close" }, h("ix-icon-button", { icon: "close", size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, ref: (r) => (progressBarElement = r), onAnimationEnd: () => {
+        this.close();
+      }, onTransitionEnd: () => {
         if (this.progress === 0) {
           this.close();
         }

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

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -212,6 +212,7 @@
 }
 :host[disabled] .slider, :host.disabled .slider {
   cursor: initial;
+  opacity: 0.5;
 }
 :host[disabled] .slider:before, :host.disabled .slider:before {
   background-color: var(--theme-switch-thumb-off--background--disabled);

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

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

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

@@ -0,0 +1,43 @@
+:host {
+  display: inline-block;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  max-width: 18.25rem;
+  opacity: 0;
+  visibility: collapse;
+  overflow-wrap: break-word;
+  border-radius: 0.25rem;
+  background-color: var(--theme-tootlip--background);
+  padding: 0.375rem 0.75rem 0.375rem 0.875rem;
+  box-shadow: var(--theme-shadow-4);
+}
+:host .tooltip-title {
+  display: flex;
+  align-items: center;
+}
+:host .tooltip-title ::slotted(ix-icon) {
+  margin-right: 0.35rem;
+}
+
+:host(.visible) {
+  opacity: 1;
+  visibility: visible;
+}
+
+:host .arrow,
+:host .arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+:host .arrow {
+  visibility: hidden;
+}
+:host .arrow::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
+  background-color: var(--theme-tootlip--background);
+}

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

@@ -0,0 +1,203 @@
+/*
+ * 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.
+ */
+import { arrow, autoPlacement, autoUpdate, computePosition, offset, shift, } from '@floating-ui/dom';
+import { h, Host } from '@stencil/core';
+/**
+ * @slot title-icon - Icon of tooltip title
+ * @slot title-content - Content of tooltip title
+ *
+ * @since 1.4.0
+ */
+export class Tooltip {
+  constructor() {
+    this.onMouseEnterBind = this.showTooltip.bind(this);
+    this.onMouseLeaveBind = this.hideTooltip.bind(this);
+    this.tooltipCloseTimeInMS = 50;
+    this.for = undefined;
+    this.titleContent = undefined;
+    this.interactive = false;
+    this.visible = false;
+  }
+  get arrowElement() {
+    return this.hostElement.shadowRoot.querySelector('.arrow');
+  }
+  destroyAutoUpdate() {
+    if (this.disposeAutoUpdate) {
+      this.disposeAutoUpdate();
+    }
+  }
+  showTooltip(e) {
+    clearTimeout(this.hideTooltipTimeout);
+    this.visible = true;
+    this.computeTooltipPosition(e.target);
+  }
+  hideTooltip() {
+    this.hideTooltipTimeout = setTimeout(() => {
+      this.visible = false;
+    }, this.tooltipCloseTimeInMS);
+    this.destroyAutoUpdate();
+  }
+  async computeTooltipPosition(target) {
+    this.disposeAutoUpdate = autoUpdate(target, this.hostElement, async () => {
+      const computeResponse = await computePosition(target, this.hostElement, {
+        strategy: 'absolute',
+        placement: 'top',
+        middleware: [
+          shift(),
+          offset(8),
+          arrow({
+            element: this.arrowElement,
+          }),
+          autoPlacement({
+            alignment: 'start',
+            allowedPlacements: ['top', 'bottom', 'right', 'left'],
+          }),
+        ],
+      });
+      if (computeResponse.middlewareData.arrow) {
+        const { x, y } = computeResponse.middlewareData.arrow;
+        Object.assign(this.arrowElement.style, {
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+        });
+      }
+      const { x, y } = computeResponse;
+      Object.assign(this.hostElement.style, {
+        left: x !== null ? `${x}px` : '',
+        top: y !== null ? `${y}px` : '',
+      });
+    }, {
+      ancestorResize: true,
+      ancestorScroll: true,
+      elementResize: true,
+    });
+  }
+  queryAnchorElements() {
+    return Array.from(document.querySelectorAll(this.for));
+  }
+  registerTriggerListener() {
+    const elements = this.queryAnchorElements();
+    elements.forEach((e) => {
+      e.addEventListener('mouseenter', this.onMouseEnterBind);
+      e.addEventListener('mouseleave', this.onMouseLeaveBind);
+    });
+  }
+  registerTooltipListener() {
+    this.hostElement.addEventListener('mouseenter', () => {
+      if (this.interactive) {
+        clearTimeout(this.hideTooltipTimeout);
+      }
+    });
+    this.hostElement.addEventListener('mouseleave', () => {
+      this.hideTooltip();
+    });
+  }
+  componentDidLoad() {
+    if (this.interactive) {
+      this.tooltipCloseTimeInMS = 150;
+    }
+    this.observer = new MutationObserver(() => {
+      this.registerTriggerListener();
+    });
+    this.observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['data-ix-tooltip'],
+      childList: true,
+      subtree: true,
+    });
+    this.registerTriggerListener();
+    this.registerTooltipListener();
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+    this.destroyAutoUpdate();
+  }
+  render() {
+    const tooltipContentClass = {
+      'tooltip-content': true,
+    };
+    return (h(Host, { class: {
+        visible: this.visible,
+      } }, h("div", { class: 'tooltip-title' }, h("slot", { name: "title-icon" }), h("ix-typography", { variant: "default-title" }, this.titleContent, h("slot", { name: "title-content" }))), h("div", { class: tooltipContentClass }, h("slot", null)), h("div", { class: "arrow" })));
+  }
+  static get is() { return "ix-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tooltip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "for": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`"
+        },
+        "attribute": "for",
+        "reflect": false
+      },
+      "titleContent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Title of the tooltip"
+        },
+        "attribute": "title-content",
+        "reflect": false
+      },
+      "interactive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if the user can access the tooltip via mouse."
+        },
+        "attribute": "interactive",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "visible": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/tree/tree.css

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

package/dist/collection/components/tree/tree.js

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

package/dist/collection/components/tree-item/default-tree-item.js

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