@siemens/ix 2.0.0-beta.0 → 2.0.0

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/spinner/spinner.css

@@ -14,7 +14,19 @@
  * 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-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.
+ */
 :host(.xx-small) {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: block;
   position: relative;
   width: 0.75rem;
@@ -32,6 +44,30 @@
 :host(.xx-small) *::before {
   box-sizing: border-box;
 }
+:host(.xx-small) ::-webkit-scrollbar-button {
+  display: none;
+}
+:host(.xx-small) ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host(.xx-small) ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host(.xx-small) ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host(.xx-small) ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host(.xx-small) ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host(.xx-small) ::-webkit-scrollbar-corner {
+  display: none;
+}
 @keyframes rotate {
   100% {
     transform: rotate(360deg);
@@ -104,6 +140,10 @@
 }
 
 :host(.x-small) {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: block;
   position: relative;
   width: 1.25rem;
@@ -121,6 +161,30 @@
 :host(.x-small) *::before {
   box-sizing: border-box;
 }
+:host(.x-small) ::-webkit-scrollbar-button {
+  display: none;
+}
+:host(.x-small) ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host(.x-small) ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host(.x-small) ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host(.x-small) ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host(.x-small) ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host(.x-small) ::-webkit-scrollbar-corner {
+  display: none;
+}
 @keyframes rotate {
   100% {
     transform: rotate(360deg);
@@ -193,6 +257,10 @@
 }
 
 :host(.small) {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: block;
   position: relative;
   width: 1.5rem;
@@ -210,6 +278,30 @@
 :host(.small) *::before {
   box-sizing: border-box;
 }
+:host(.small) ::-webkit-scrollbar-button {
+  display: none;
+}
+:host(.small) ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host(.small) ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host(.small) ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host(.small) ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host(.small) ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host(.small) ::-webkit-scrollbar-corner {
+  display: none;
+}
 @keyframes rotate {
   100% {
     transform: rotate(360deg);
@@ -282,6 +374,10 @@
 }
 
 :host(.medium) {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: block;
   position: relative;
   width: 2rem;
@@ -299,6 +395,30 @@
 :host(.medium) *::before {
   box-sizing: border-box;
 }
+:host(.medium) ::-webkit-scrollbar-button {
+  display: none;
+}
+:host(.medium) ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host(.medium) ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host(.medium) ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host(.medium) ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host(.medium) ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host(.medium) ::-webkit-scrollbar-corner {
+  display: none;
+}
 @keyframes rotate {
   100% {
     transform: rotate(360deg);
@@ -371,6 +491,10 @@
 }
 
 :host(.large) {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: block;
   position: relative;
   width: 6rem;
@@ -388,6 +512,30 @@
 :host(.large) *::before {
   box-sizing: border-box;
 }
+:host(.large) ::-webkit-scrollbar-button {
+  display: none;
+}
+:host(.large) ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host(.large) ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host(.large) ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host(.large) ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host(.large) ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host(.large) ::-webkit-scrollbar-corner {
+  display: none;
+}
 @keyframes rotate {
   100% {
     transform: rotate(360deg);