@siemens/ix 2.0.0-beta.1 → 2.0.1

package/dist/collection/components/slider/slider.js

@@ -0,0 +1,380 @@
+/*
+ * 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 { h, Host, } from '@stencil/core';
+import { a11yHostAttributes } from '../utils/a11y';
+function between(min, value, max) {
+  if (value < min) {
+    return min;
+  }
+  else if (value > max) {
+    return max;
+  }
+  else {
+    return value;
+  }
+}
+/**
+ * @since 2.0.0
+ *
+ * @slot label-start - Element will be displayed at the start of the slider
+ * @slot label-end - Element will be displayed at the end of the slider
+ */
+export class IxSlider {
+  constructor() {
+    this.step = undefined;
+    this.min = 0;
+    this.max = 100;
+    this.value = 0;
+    this.marker = undefined;
+    this.trace = false;
+    this.traceReference = 0;
+    this.disabled = false;
+    this.error = undefined;
+    this.rangeInput = 0;
+    this.rangeMin = 0;
+    this.rangeMax = 100;
+    this.rangeTraceReference = 0;
+    this.showTooltip = false;
+  }
+  get tooltip() {
+    return this.hostElement.shadowRoot.querySelector('ix-tooltip');
+  }
+  get pseudoThumb() {
+    return this.hostElement.shadowRoot.querySelector('.thumb');
+  }
+  get slider() {
+    return this.hostElement.shadowRoot.getElementById('slider');
+  }
+  onShowTooltipChange() {
+    if (this.showTooltip) {
+      this.tooltip.showTooltip(this.pseudoThumb);
+      return;
+    }
+    this.tooltip.hideTooltip();
+  }
+  componentWillLoad() {
+    this.a11yAttributes = a11yHostAttributes(this.hostElement, [
+      'role',
+      'aria-valuemin',
+      'aria-valuemax',
+      'aria-valuenow',
+    ]);
+    this.updateRangeVariables();
+  }
+  updateRangeVariables() {
+    this.rangeInput = between(this.min, this.value, this.max);
+    this.rangeTraceReference = between(this.min, this.traceReference, this.max);
+    this.rangeMin = Math.min(this.min, this.max);
+    this.rangeMax = Math.max(this.min, this.max);
+  }
+  onInput(event) {
+    event.stopPropagation();
+    const value = parseInt(this.slider.value);
+    if (!isNaN(value)) {
+      this.rangeInput = value;
+      this.emitInputEvent();
+    }
+  }
+  emitInputEvent() {
+    this.valueChange.emit(this.rangeInput);
+  }
+  isMarkerActive(markerValue) {
+    const start = Math.min(this.traceReference, this.rangeInput);
+    const end = Math.max(this.traceReference, this.rangeInput);
+    const value = markerValue;
+    return value >= start && value <= end;
+  }
+  // Listen globally on window because sometimes the event listener
+  // of the DOM element input itself is not called if the release
+  // click is not inside the element anymore
+  onPointerUp() {
+    this.showTooltip = false;
+  }
+  render() {
+    const range = this.rangeMax - this.rangeMin;
+    let traceReferenceInPercentage = (this.rangeTraceReference - this.rangeMin) / range;
+    let valueInPercentage = (this.rangeInput - this.rangeMin) / range;
+    const distance = valueInPercentage - traceReferenceInPercentage;
+    let traceStart = traceReferenceInPercentage;
+    let traceEnd = valueInPercentage;
+    if (distance <= 0) {
+      traceStart = valueInPercentage;
+      traceEnd = traceReferenceInPercentage;
+    }
+    return (h(Host, { class: {
+        disabled: this.disabled,
+        error: !!this.error,
+      }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("div", { class: "slider" }, h("div", { class: "track" }, h("div", { class: "thumb", style: {
+        left: `calc(${valueInPercentage} * 100% - 8px)`,
+      } }), h("div", { class: "ticks" }, this.marker
+      ? this.marker.map((markerValue) => {
+        if (markerValue > this.max || markerValue < this.min) {
+          return;
+        }
+        let left = (markerValue - this.rangeMin) / range;
+        return (h("div", { class: {
+            tick: true,
+            'tick-active': this.isMarkerActive(markerValue) && this.trace,
+          }, style: {
+            '--tick-value': `${left}`,
+          } }));
+      })
+      : null)), h("input", Object.assign({ id: "slider", type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), style: {
+        '--value': `${valueInPercentage}`,
+        '--trace-reference': `${traceReferenceInPercentage}`,
+        '--trace-start': `${traceStart}`,
+        '--trace-end': `${traceEnd}`,
+      }, class: {
+        trace: this.trace && traceReferenceInPercentage !== valueInPercentage,
+      }, onFocus: () => {
+        this.showTooltip = true;
+      }, onBlur: () => {
+        this.showTooltip = false;
+      }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), h("ix-tooltip", { class: {
+        'hide-tooltip': !this.showTooltip,
+      }, animationFrame: true }, this.rangeInput)), h("div", { class: "label" }, h("div", { class: "label-start" }, h("slot", { name: "label-start" })), h("div", { class: "label-end" }, h("slot", { name: "label-end" }))), this.error ? (h("ix-typography", { class: 'label-error', color: "alarm" }, this.error)) : null));
+  }
+  static get is() { return "ix-slider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["slider.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["slider.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step"
+            }],
+          "text": "Legal number intervals"
+        },
+        "attribute": "step",
+        "reflect": false
+      },
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum slider value"
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum slider value"
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "100"
+      },
+      "value": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Current value of the slider"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "marker": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SliderMarker",
+          "resolved": "number[]",
+          "references": {
+            "SliderMarker": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/slider/slider.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define tick marker on the slider. Marker has to be within slider min/max"
+        }
+      },
+      "trace": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show a trace line"
+        },
+        "attribute": "trace",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "traceReference": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define the start point of the trace line"
+        },
+        "attribute": "trace-reference",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show control as disabled"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "error": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | string",
+          "resolved": "boolean | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show error state and message"
+        },
+        "attribute": "error",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "rangeInput": {},
+      "rangeMin": {},
+      "rangeMax": {},
+      "rangeTraceReference": {},
+      "showTooltip": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "valueChange",
+        "name": "valueChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "showTooltip",
+        "methodName": "onShowTooltipChange"
+      }, {
+        "propName": "value",
+        "methodName": "updateRangeVariables"
+      }, {
+        "propName": "max",
+        "methodName": "updateRangeVariables"
+      }, {
+        "propName": "min",
+        "methodName": "updateRangeVariables"
+      }, {
+        "propName": "traceReference",
+        "methodName": "updateRangeVariables"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "pointerup",
+        "method": "onPointerUp",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}
+//# sourceMappingURL=slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.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 { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\n\nexport type SliderMarker = Array<number>;\n\nfunction between(min: number, value: number, max: number) {\n  if (value < min) {\n    return min;\n  } else if (value > max) {\n    return max;\n  } else {\n    return value;\n  }\n}\n\n/**\n * @since 2.0.0\n *\n * @slot label-start - Element will be displayed at the start of the slider\n * @slot label-end - Element will be displayed at the end of the slider\n */\n@Component({\n  tag: 'ix-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IxSlider {\n  @Element() hostElement!: HTMLIxSliderElement;\n\n  /**\n   * Legal number intervals\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step\n   */\n  @Prop() step: number;\n\n  /**\n   * Minimum slider value\n   */\n  @Prop() min = 0;\n\n  /**\n   * Maximum slider value\n   */\n  @Prop() max = 100;\n\n  /**\n   * Current value of the slider\n   */\n  @Prop() value = 0;\n\n  /**\n   * Define tick marker on the slider. Marker has to be within slider min/max\n   */\n  @Prop() marker: SliderMarker;\n\n  /**\n   * Show a trace line\n   */\n  @Prop() trace = false;\n\n  /**\n   * Define the start point of the trace line\n   */\n  @Prop() traceReference = 0;\n\n  /**\n   * Show control as disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Show error state and message\n   */\n  @Prop() error: boolean | string;\n\n  /**\n   *\n   */\n  @Event() valueChange: EventEmitter<number>;\n\n  @State() rangeInput = 0;\n  @State() rangeMin = 0;\n  @State() rangeMax = 100;\n  @State() rangeTraceReference = 0;\n  @State() showTooltip = false;\n\n  private a11yAttributes: A11yAttributes;\n\n  get tooltip() {\n    return this.hostElement.shadowRoot.querySelector('ix-tooltip');\n  }\n\n  get pseudoThumb() {\n    return this.hostElement.shadowRoot.querySelector('.thumb') as HTMLElement;\n  }\n\n  get slider() {\n    return this.hostElement.shadowRoot.getElementById(\n      'slider'\n    ) as HTMLInputElement;\n  }\n\n  @Watch('showTooltip')\n  onShowTooltipChange() {\n    if (this.showTooltip) {\n      this.tooltip.showTooltip(this.pseudoThumb);\n      return;\n    }\n\n    this.tooltip.hideTooltip();\n  }\n\n  componentWillLoad() {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement, [\n      'role',\n      'aria-valuemin',\n      'aria-valuemax',\n      'aria-valuenow',\n    ]);\n    this.updateRangeVariables();\n  }\n\n  @Watch('value')\n  @Watch('max')\n  @Watch('min')\n  @Watch('traceReference')\n  private updateRangeVariables() {\n    this.rangeInput = between(this.min, this.value, this.max);\n    this.rangeTraceReference = between(this.min, this.traceReference, this.max);\n    this.rangeMin = Math.min(this.min, this.max);\n    this.rangeMax = Math.max(this.min, this.max);\n  }\n\n  private onInput(event: InputEvent) {\n    event.stopPropagation();\n    const value = parseInt(this.slider.value);\n\n    if (!isNaN(value)) {\n      this.rangeInput = value;\n      this.emitInputEvent();\n    }\n  }\n\n  private emitInputEvent() {\n    this.valueChange.emit(this.rangeInput);\n  }\n\n  private isMarkerActive(markerValue: number) {\n    const start = Math.min(this.traceReference, this.rangeInput);\n    const end = Math.max(this.traceReference, this.rangeInput);\n    const value = markerValue;\n\n    return value >= start && value <= end;\n  }\n\n  // Listen globally on window because sometimes the event listener\n  // of the DOM element input itself is not called if the release\n  // click is not inside the element anymore\n  @Listen('pointerup', {\n    target: 'window',\n  })\n  onPointerUp() {\n    this.showTooltip = false;\n  }\n\n  render() {\n    const range = this.rangeMax - this.rangeMin;\n\n    let traceReferenceInPercentage =\n      (this.rangeTraceReference - this.rangeMin) / range;\n\n    let valueInPercentage = (this.rangeInput - this.rangeMin) / range;\n\n    const distance = valueInPercentage - traceReferenceInPercentage;\n\n    let traceStart = traceReferenceInPercentage;\n    let traceEnd = valueInPercentage;\n\n    if (distance <= 0) {\n      traceStart = valueInPercentage;\n      traceEnd = traceReferenceInPercentage;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          error: !!this.error,\n        }}\n        onPointerDown={() => setTimeout(() => (this.showTooltip = true))}\n      >\n        <div class=\"slider\">\n          <div class=\"track\">\n            <div\n              class=\"thumb\"\n              style={{\n                left: `calc(${valueInPercentage} * 100% - 8px)`,\n              }}\n            ></div>\n            <div class=\"ticks\">\n              {this.marker\n                ? this.marker.map((markerValue) => {\n                    if (markerValue > this.max || markerValue < this.min) {\n                      return;\n                    }\n\n                    let left = (markerValue - this.rangeMin) / range;\n\n                    return (\n                      <div\n                        class={{\n                          tick: true,\n                          'tick-active':\n                            this.isMarkerActive(markerValue) && this.trace,\n                        }}\n                        style={{\n                          '--tick-value': `${left}`,\n                        }}\n                      ></div>\n                    );\n                  })\n                : null}\n            </div>\n          </div>\n\n          <input\n            id=\"slider\"\n            type=\"range\"\n            list={this.marker ? 'markers' : undefined}\n            step={this.step}\n            min={this.min}\n            max={this.max}\n            value={this.rangeInput}\n            tabindex={this.disabled ? -1 : 0}\n            onInput={(event) => this.onInput(event)}\n            style={{\n              '--value': `${valueInPercentage}`,\n              '--trace-reference': `${traceReferenceInPercentage}`,\n              '--trace-start': `${traceStart}`,\n              '--trace-end': `${traceEnd}`,\n            }}\n            class={{\n              trace:\n                this.trace && traceReferenceInPercentage !== valueInPercentage,\n            }}\n            onFocus={() => {\n              this.showTooltip = true;\n            }}\n            onBlur={() => {\n              this.showTooltip = false;\n            }}\n            role=\"slider\"\n            aria-valuenow={this.rangeInput}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n            {...this.a11yAttributes}\n          />\n\n          <ix-tooltip\n            class={{\n              'hide-tooltip': !this.showTooltip,\n            }}\n            animationFrame={true}\n          >\n            {this.rangeInput}\n          </ix-tooltip>\n        </div>\n        <div class=\"label\">\n          <div class=\"label-start\">\n            <slot name=\"label-start\"></slot>\n          </div>\n          <div class=\"label-end\">\n            <slot name=\"label-end\"></slot>\n          </div>\n        </div>\n        {this.error ? (\n          <ix-typography class={'label-error'} color=\"alarm\">\n            {this.error}\n          </ix-typography>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,35 @@
+/*
+ * 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 { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ page, mount }) => {
+  await mount(`<ix-slider></ix-slider>`);
+  const slider = page.locator('ix-slider');
+  await expect(slider).toHaveClass(/hydrated/);
+});
+test('should show tooltip by focus', async ({ page, mount }) => {
+  await mount(`<ix-slider value="20"></ix-slider>`);
+  const slider = page.locator('ix-slider');
+  await expect(slider).toHaveClass(/hydrated/);
+  const input = slider.locator('input');
+  const tooltip = slider.locator('ix-tooltip');
+  await input.focus();
+  await expect(tooltip).toBeVisible();
+  const left = (await tooltip.boundingBox()).x;
+  await input.press('ArrowRight');
+  await input.press('ArrowRight');
+  await page.waitForTimeout(500);
+  await expect(tooltip).toBeVisible();
+  const leftAfterKeyboardNavigation = (await tooltip.boundingBox()).x;
+  expect(leftAfterKeyboardNavigation).toBeGreaterThan(left);
+  await input.blur();
+  await page.waitForTimeout(500);
+  await expect(tooltip).not.toBeVisible();
+});
+//# sourceMappingURL=slider.ct.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.ct.js","sourceRoot":"","sources":["../../../../src/components/slider/test/slider.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CAAC,yBAAyB,CAAC,CAAC;EAEvC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAC/C,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,8BAA8B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;EAC7D,MAAM,KAAK,CAAC,oCAAoC,CAAC,CAAC;EAElD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAE7C,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EAEtC,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;EAC7C,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC;EACpB,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;EACpC,MAAM,IAAI,GAAG,CAAC,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;EAE7C,MAAM,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;EAChC,MAAM,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;EAEhC,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;EAC/B,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;EACpC,MAAM,2BAA2B,GAAG,CAAC,MAAM,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;EAEpE,MAAM,CAAC,2BAA2B,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;EAE1D,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;EACnB,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;EAC/B,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;AAC1C,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ page, mount }) => {\n  await mount(`<ix-slider></ix-slider>`);\n\n  const slider = page.locator('ix-slider');\n  await expect(slider).toHaveClass(/hydrated/);\n});\n\ntest('should show tooltip by focus', async ({ page, mount }) => {\n  await mount(`<ix-slider value=\"20\"></ix-slider>`);\n\n  const slider = page.locator('ix-slider');\n  await expect(slider).toHaveClass(/hydrated/);\n\n  const input = slider.locator('input');\n\n  const tooltip = slider.locator('ix-tooltip');\n  await input.focus();\n  await expect(tooltip).toBeVisible();\n  const left = (await tooltip.boundingBox()).x;\n\n  await input.press('ArrowRight');\n  await input.press('ArrowRight');\n\n  await page.waitForTimeout(500);\n  await expect(tooltip).toBeVisible();\n  const leftAfterKeyboardNavigation = (await tooltip.boundingBox()).x;\n\n  expect(leftAfterKeyboardNavigation).toBeGreaterThan(left);\n\n  await input.blur();\n  await page.waitForTimeout(500);\n  await expect(tooltip).not.toBeVisible();\n});\n"]}

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

@@ -19,9 +19,6 @@ export class SplitButton {
     this.placement = 'bottom-start';
     this.toggle = false;
   }
-  get splitItems() {
-    return Array.from(this.hostElement.querySelectorAll('ix-split-button-item'));
-  }
   linkTriggerRef() {
     if (this.triggerElement && this.dropdownElement) {
       this.dropdownElement.trigger = this.triggerElement;

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

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","sourceRoot":"","sources":["../../../src/components/split-button/split-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAWvB,MAAM,OAAO,WAAW;;mBAMgB,SAAS;mBAK7B,KAAK;iBAKP,KAAK;;gBAUN,EAAE;qBAKG,cAAc;oBAKf,KAAK;qBAKc,cAAc;kBAElC,KAAK;;EAUvB,IAAI,UAAU;IACZ,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAC1D,CAAC;EACJ,CAAC;EAEO,cAAc;IACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE;MAC/C,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;KACpD;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,KAAK,EAAE;QACL,oBAAoB,EAAE,CAAC,IAAI,CAAC,OAAO;OACpC;KACF,CAAC;IACF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;QAC3D,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,iCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,KAEvC,IAAI,CAAC,KAAK,CACD,CACb,CAAC,CAAC,CAAC,CACF,sCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,IACxB,CACnB;QACD,sCACM,gBAAgB,IACpB,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,CAAC,SAAS,IACJ,CACd;MAEN,mBAAa,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;QACjD,eAAa,CACD,CACT,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  shadow: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'primary';\n\n  /**\n   * Button outline variant\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Button label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon = '';\n\n  /**\n   * Icon of the button on the right\n   */\n  @Prop() splitIcon = 'context-menu';\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick: EventEmitter<MouseEvent>;\n\n  private triggerElement: HTMLElement;\n  private dropdownElement: HTMLIxDropdownElement;\n\n  get splitItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-split-button-item')\n    );\n  }\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    const buttonAttributes = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      disabled: this.disabled,\n      class: {\n        'left-button-border': !this.outline,\n      },\n    };\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n          {this.label ? (\n            <ix-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            >\n              {this.label}\n            </ix-button>\n          ) : (\n            <ix-icon-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            ></ix-icon-button>\n          )}\n          <ix-icon-button\n            {...buttonAttributes}\n            ref={(r) => (this.triggerElement = r)}\n            class={'anchor'}\n            icon={this.splitIcon}\n          ></ix-icon-button>\n        </div>\n\n        <ix-dropdown ref={(r) => (this.dropdownElement = r)}>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"split-button.js","sourceRoot":"","sources":["../../../src/components/split-button/split-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAWvB,MAAM,OAAO,WAAW;;mBAMgB,SAAS;mBAK7B,KAAK;iBAKP,KAAK;;gBAUN,EAAE;qBAKG,cAAc;oBAKf,KAAK;qBAKc,cAAc;kBAElC,KAAK;;EAUf,cAAc;IACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE;MAC/C,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;KACpD;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,KAAK,EAAE;QACL,oBAAoB,EAAE,CAAC,IAAI,CAAC,OAAO;OACpC;KACF,CAAC;IACF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;QAC3D,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,iCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,KAEvC,IAAI,CAAC,KAAK,CACD,CACb,CAAC,CAAC,CAAC,CACF,sCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,IACxB,CACnB;QACD,sCACM,gBAAgB,IACpB,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,CAAC,SAAS,IACJ,CACd;MAEN,mBAAa,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;QACjD,eAAa,CACD,CACT,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  shadow: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'primary';\n\n  /**\n   * Button outline variant\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Button label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon = '';\n\n  /**\n   * Icon of the button on the right\n   */\n  @Prop() splitIcon = 'context-menu';\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick: EventEmitter<MouseEvent>;\n\n  private triggerElement: HTMLElement;\n  private dropdownElement: HTMLIxDropdownElement;\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    const buttonAttributes = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      disabled: this.disabled,\n      class: {\n        'left-button-border': !this.outline,\n      },\n    };\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n          {this.label ? (\n            <ix-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            >\n              {this.label}\n            </ix-button>\n          ) : (\n            <ix-icon-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            ></ix-icon-button>\n          )}\n          <ix-icon-button\n            {...buttonAttributes}\n            ref={(r) => (this.triggerElement = r)}\n            class={'anchor'}\n            icon={this.splitIcon}\n          ></ix-icon-button>\n        </div>\n\n        <ix-dropdown ref={(r) => (this.dropdownElement = r)}>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -7,6 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, } from '@stencil/core';
+/**
+ * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.
+ */
 export class SplitButtonItem {
   constructor() {
     this.icon = undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"split-button-item.js","sourceRoot":"","sources":["../../../src/components/split-button-item/split-button-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,eAAe;;;;;EAkB1B,MAAM;IACJ,OAAO,CACL,wBACE,eAAe,QACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;QACjB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;MACtB,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,CACrB,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-split-button-item',\n  styleUrl: 'split-button-item.css',\n  shadow: true,\n})\nexport class SplitButtonItem {\n  /**\n   * Dropdown icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Dropdown item clicked\n   */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  @Element() hostElement: HTMLIxSplitButtonItemElement;\n\n  render() {\n    return (\n      <ix-dropdown-item\n        suppressChecked\n        icon={this.icon}\n        label={this.label}\n        onItemClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"]}
+{"version":3,"file":"split-button-item.js","sourceRoot":"","sources":["../../../src/components/split-button-item/split-button-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAEvB;;GAEG;AAMH,MAAM,OAAO,eAAe;;;;;EAkB1B,MAAM;IACJ,OAAO,CACL,wBACE,eAAe,QACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;QACjB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;MACtB,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,CACrB,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Prop,\n} from '@stencil/core';\n\n/**\n * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.\n */\n@Component({\n  tag: 'ix-split-button-item',\n  styleUrl: 'split-button-item.css',\n  shadow: true,\n})\nexport class SplitButtonItem {\n  /**\n   * Dropdown icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Dropdown item clicked\n   */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  @Element() hostElement: HTMLIxSplitButtonItemElement;\n\n  render() {\n    return (\n      <ix-dropdown-item\n        suppressChecked\n        icon={this.icon}\n        label={this.label}\n        onItemClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"]}

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

@@ -7,9 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host, } from '@stencil/core';
-let windowStartSize = window.innerWidth;
 export class Tabs {
   constructor() {
+    this.windowStartSize = window.innerWidth;
     this.clickAction = {
       timeout: null,
       isClick: true,
@@ -29,10 +29,10 @@ export class Tabs {
   onWindowResize() {
     this.totalItems = 0;
     this.totalItems = this.getTabs().length;
-    if (windowStartSize === 0)
-      return (windowStartSize = window.innerWidth);
-    this.move(windowStartSize - window.innerWidth);
-    windowStartSize = window.innerWidth;
+    if (this.windowStartSize === 0)
+      return (this.windowStartSize = window.innerWidth);
+    this.move(this.windowStartSize - window.innerWidth);
+    this.windowStartSize = window.innerWidth;
   }
   getTabs() {
     return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));
@@ -186,13 +186,13 @@ export class Tabs {
     });
   }
   render() {
-    return (h(Host, null, h("div", { class: "arrow", style: this.stylePreviousArrow, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { name: "chevron-left-small" })), h("div", { class: {
+    return (h(Host, null, h("div", { class: "arrow", style: this.stylePreviousArrow, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { name: 'chevron-left-small' })), h("div", { class: {
         'tab-items': true,
         'overflow-shadow': true,
         'shadow-left': this.showPreviousArrow(),
         'shadow-right': this.showNextArrow(),
         'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
-      } }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "arrow right", style: this.styleNextArrow, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { name: "chevron-right-small" }))));
+      } }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "arrow right", style: this.styleNextArrow, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { name: 'chevron-right-small' }))));
   }
   static get is() { return "ix-tabs"; }
   static get encapsulation() { return "shadow"; }

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';\n\nlet windowStartSize = window.innerWidth;\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() styleNextArrow = {};\n  @State() stylePreviousArrow = {};\n\n  @State() scrollActionAmount = 0;\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 (windowStartSize === 0) return (windowStartSize = window.innerWidth);\n    this.move(windowStartSize - window.innerWidth);\n    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  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.forEach((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      element.setAttribute('placement', this.placement);\n    });\n  }\n\n  componentWillRender() {\n    requestAnimationFrame(() => {\n      const showNextArrow = this.showNextArrow();\n      const previousArrow = this.showPreviousArrow();\n      this.styleNextArrow = this.getArrowStyle(showNextArrow);\n      this.stylePreviousArrow = this.getArrowStyle(previousArrow);\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          style={this.stylePreviousArrow}\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          style={this.styleNextArrow}\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} from '@stencil/core';\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() styleNextArrow = {};\n  @State() stylePreviousArrow = {};\n\n  @State() scrollActionAmount = 0;\n\n  private windowStartSize = window.innerWidth;\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  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.forEach((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      element.setAttribute('placement', this.placement);\n    });\n  }\n\n  componentWillRender() {\n    requestAnimationFrame(() => {\n      const showNextArrow = this.showNextArrow();\n      const previousArrow = this.showPreviousArrow();\n      this.styleNextArrow = this.getArrowStyle(showNextArrow);\n      this.stylePreviousArrow = this.getArrowStyle(previousArrow);\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          style={this.stylePreviousArrow}\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          style={this.styleNextArrow}\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"]}