@siemens/ix 2.3.0 → 2.4.1

package/dist/cjs/ix-slider.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2d325c82.js');
+const index = require('./index-529f21c1.js');
 const a11y = require('./a11y-d3ce56d1.js');
-const listener = require('./listener-86a645ec.js');
+const listener = require('./listener-bc3e7c0c.js');
 
-const sliderCss = ":host{display:flex;flex-direction:column;min-height:2rem;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-color-8);--trace-color:var(--theme-color-dynamic);--tick-color:var(--theme-color-8);--tick-color--active:var(--theme-color-dynamic);--track-color:var(--theme-color-component-4);}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1rem;margin:0}:host input[type=range].trace::before{content:\"\";position:absolute;display:block;z-index:-1;width:calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));left:calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%)}:host input[type=range].trace::after{content:\"\";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host .ticks{display:flex;position:relative;top:50%;transform:translateY(-50%)}:host .ticks .tick{display:block;position:absolute;width:8px;height:8px;background-color:var(--tick-color);border-radius:100px;top:50%;transform:translateY(-50%);left:calc(var(--tick-value) * 100% - 4px)}:host .ticks .tick.tick-active{background-color:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:calc(100% - 1rem);margin-left:0.5rem;top:50%;transform:translateY(-50%);left:0px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;left:0px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host .label-start{margin-left:0.5rem}:host .label-end{margin-right:0.5rem}:host .label-error{margin-left:0.5rem}:host(.error){--trace-color:var(--theme-color-alarm-40);--tick-color--active:var(--theme-color-alarm)}:host(.error) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-alarm)}:host(.error) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-alarm)}:host(.disabled){pointer-events:none;--track-color:var(--theme-color-component-3);--trace-color:var(--theme-color-3);--tick-color:var(--theme-color-7);--tick-color--active:var(--theme-color-7)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-7)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-7)}";
+const sliderCss = ":host{display:flex;flex-direction:column;min-height:2rem;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-color-8);--trace-color:var(--theme-color-dynamic);--tick-color:var(--theme-color-8);--tick-color--active:var(--theme-color-dynamic);--track-color:var(--theme-color-component-4);}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1rem;margin:0}:host input[type=range].trace::before{content:\"\";position:absolute;display:block;z-index:-1;width:calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));left:calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%)}:host input[type=range].trace:not(.hide-trace-reference)::after{content:\"\";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host .ticks{display:flex;position:relative;top:50%;transform:translateY(-50%)}:host .ticks .tick{display:block;position:absolute;width:8px;height:8px;background-color:var(--tick-color);border-radius:100px;top:50%;transform:translateY(-50%);left:calc(var(--tick-value) * 100% - 4px)}:host .ticks .tick.tick-active{background-color:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:calc(100% - 1rem);margin-left:0.5rem;top:50%;transform:translateY(-50%);left:0px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;left:0px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host .label-start{margin-left:0.5rem}:host .label-end{margin-right:0.5rem}:host .label-error{margin-left:0.5rem}:host(.error){--trace-color:var(--theme-color-alarm-40);--tick-color--active:var(--theme-color-alarm)}:host(.error) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-alarm)}:host(.error) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-alarm)}:host(.disabled){pointer-events:none;--track-color:var(--theme-color-component-3);--trace-color:var(--theme-color-3);--tick-color:var(--theme-color-7);--tick-color--active:var(--theme-color-7)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-7)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-7)}";
 const IxSliderStyle0 = sliderCss;
 
 /*
@@ -42,7 +42,7 @@ const Slider = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.valueChange = index.createEvent(this, "valueChange", 7);
-        this.step = undefined;
+        this.step = 1;
         this.min = 0;
         this.max = 100;
         this.value = 0;
@@ -58,20 +58,24 @@ const Slider = class {
         this.showTooltip = false;
     }
     get tooltip() {
-        return this.hostElement.shadowRoot.querySelector('ix-tooltip');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ix-tooltip');
     }
     get pseudoThumb() {
-        return this.hostElement.shadowRoot.querySelector('.thumb');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.thumb');
     }
     get slider() {
-        return this.hostElement.shadowRoot.getElementById('slider');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('slider');
     }
     onShowTooltipChange() {
+        var _a, _b;
         if (this.showTooltip) {
-            this.tooltip.showTooltip(this.pseudoThumb);
+            (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.showTooltip(this.pseudoThumb);
             return;
         }
-        this.tooltip.hideTooltip();
+        (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.hideTooltip();
     }
     componentWillLoad() {
         this.a11yAttributes = a11y.a11yHostAttributes(this.hostElement, [
@@ -122,12 +126,12 @@ const Slider = class {
             traceStart = valueInPercentage;
             traceEnd = traceReferenceInPercentage;
         }
-        return (index.h(index.Host, { key: 'fc1ccd48aeefe6a53f7299db447b5c5e6fb6b13d', class: {
+        return (index.h(index.Host, { key: 'c7e6a14875ee17d49fe5e42459b81fb561802ebc', class: {
                 disabled: this.disabled,
                 error: !!this.error,
-            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, index.h("div", { key: '4e3d3b0d5e1b2a2882ce0073336e4cd13ac1a4b8', class: "slider" }, index.h("div", { key: 'f8457c6d8efad8d172abe49f9037cb71f9ba226f', class: "track" }, index.h("div", { key: 'cf141d91936a74657f8788f5f7c688e37ebf7a16', class: "thumb", style: {
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, index.h("div", { key: 'bed770beec56a4798df1c0b8546fd78ef6c1f749', class: "slider" }, index.h("div", { key: 'b2337e7802806933356cc7930bcb5a0e025796b8', class: "track" }, index.h("div", { key: 'd5d40d3e44d50112733e5c9137b807e3a25dcafa', class: "thumb", style: {
                 left: `calc(${valueInPercentage} * 100% - 8px)`,
-            } }), index.h("div", { key: 'b54ae34bda82b7f0277ae361c5139845830dc85d', class: "ticks" }, this.marker
+            } }), index.h("div", { key: '041f4368d4b80929a03abfbe617d8f5bb15957d0', class: "ticks" }, this.marker
             ? this.marker.map((markerValue) => {
                 if (markerValue > this.max || markerValue < this.min) {
                     return;
@@ -140,20 +144,23 @@ const Slider = class {
                         '--tick-value': `${left}`,
                     } }));
             })
-            : null)), index.h("input", Object.assign({ key: '219884ecfc35a76f0722782af2607c64b19a57aa', 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: {
+            : null)), index.h("input", Object.assign({ key: 'ef61a64f69ebc8816778dfd95dee2402b0ed9144', 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,
+                'hide-trace-reference': this.trace &&
+                    (this.traceReference <= this.min ||
+                        this.traceReference >= this.max),
             }, onFocus: () => {
                 this.showTooltip = true;
             }, onBlur: () => {
                 this.showTooltip = false;
-            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), index.h("ix-tooltip", { key: '387dc09d28b3c45f08470ba651c659e8c528a44d', class: {
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), index.h("ix-tooltip", { key: '4dfe584376f3df426be2e049703adfb4c2bf39ab', class: {
                 'hide-tooltip': !this.showTooltip,
-            }, animationFrame: true }, this.rangeInput)), index.h("div", { key: 'f8fdb048411a622870b4b0698c7124f7e175dedf', class: "label" }, index.h("div", { key: '2bbb6c7418953b907b1ef604a8d775c1e69d6626', class: "label-start" }, index.h("slot", { key: 'ce4a5aedbfafe7b5b71d47421bae0ab385548920', name: "label-start" })), index.h("div", { key: '98b40f2b68164592307f7f9817c913dffcb08139', class: "label-end" }, index.h("slot", { key: 'bcd3497745bf949da88cd373ecf8cd3f74488ffe', name: "label-end" }))), this.error ? (index.h("ix-typography", { class: 'label-error', color: "alarm" }, this.error)) : null));
+            }, animationFrame: true }, this.rangeInput)), index.h("div", { key: '9c42a9aa11e4c59c2fa9f0b132d6ac3a2b4f8f72', class: "label" }, index.h("div", { key: '22ed6e4412f84449c68109dd5619054a65d8790f', class: "label-start" }, index.h("slot", { key: '676a5d1b03b6a398bda253f01396c06ccb7cdb04', name: "label-start" })), index.h("div", { key: '7ec74b8f1f5a4a6e0eb4dd2b1bd8c32aa098f47c', class: "label-end" }, index.h("slot", { key: '1a4b99aebbe60d9db5e4ed5c26907aecf2a38568', name: "label-end" }))), this.error ? (index.h("ix-typography", { class: 'label-error', color: "alarm" }, this.error)) : null));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-slider.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-slider.entry.cjs.js","mappings":"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","names":["a11yHostAttributes","h","Host","OnListener"],"sources":["src/components/slider/slider.scss?tag=ix-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"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@import 'mixins/shadow-dom/component';\n\n@mixin track {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']::-webkit-slider-runnable-track {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']::-moz-range-track {\n    @content;\n  }\n}\n\n@mixin clear-browser-thumb {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range' i]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-top: -6px;\n  }\n\n  // Firefox\n  input[type='range' i]::-moz-range-thumb {\n    border: none;\n    border-radius: 0;\n  }\n}\n\n@mixin thumb {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-hover {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:hover::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:hover::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-active {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:active::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:active::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-focus {\n  input[type='range']:focus {\n    outline: none;\n  }\n\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:focus-visible::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:focus-visible::-moz-range-thumb {\n    @content;\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  min-height: 2rem;\n  --thumb-size: 1rem;\n  --value: 0;\n  --trace-start: 0;\n  --trace-end: 0;\n  --trace-reference: 0;\n  --trace-reference-color: var(--theme-color-8);\n  --trace-color: var(--theme-color-dynamic);\n  --tick-color: var(--theme-color-8);\n  --tick-color--active: var(--theme-color-dynamic);\n  --track-color: var(--theme-color-component-4);\n\n  input[type='range'] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0;\n    appearance: none;\n    background: transparent;\n    cursor: pointer;\n    width: 100%;\n    height: 1rem;\n    margin: 0;\n  }\n\n  // Trace line\n  input[type='range'].trace::before {\n    content: '';\n    position: absolute;\n    display: block;\n    z-index: -1;\n\n    width: calc(\n      calc(7px + calc(100% * var(--trace-end)) - calc(16px * var(--trace-end))) -\n        calc(\n          7px + calc(100% * var(--trace-start)) -\n            calc(16px * var(--trace-start))\n        )\n    );\n\n    left: calc(\n      7px + calc(100% * var(--trace-start)) - calc(16px * var(--trace-start))\n    );\n\n    height: 4px;\n    background-color: var(--trace-color);\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  // Trace reference\n  input[type='range'].trace::after {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 2px;\n    height: 16px;\n    background-color: var(--trace-reference-color);\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(\n      7px + calc(100% * var(--trace-reference)) -\n        calc(16px * var(--trace-reference))\n    );\n  }\n\n  @include track() {\n    background: transparent;\n    height: 0.25rem;\n  }\n\n  @include clear-browser-thumb();\n\n  @include thumb() {\n    border-radius: 100px;\n    background-color: var(--theme-color-dynamic);\n    height: var(--thumb-size);\n    width: var(--thumb-size);\n    transition: all var(--theme-default-time) ease-in-out;\n    z-index: 10;\n  }\n\n  @include thumb-hover() {\n    transform: scale(1.2);\n    background-color: var(--theme-color-dynamic);\n  }\n\n  @include thumb-active() {\n    transform: scale(1.2);\n\n    background-color: var(--theme-color-dynamic);\n  }\n\n  @include thumb-focus() {\n    outline: 1px solid var(--theme-color-focus-bdr);\n    outline-offset: 0.125rem;\n  }\n\n  /* style datalist */\n  .ticks {\n    display: flex;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .ticks .tick {\n    display: block;\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background-color: var(--tick-color);\n    border-radius: 100px;\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(var(--tick-value) * 100% - 4px);\n  }\n\n  .ticks .tick.tick-active {\n    background-color: var(--tick-color--active);\n  }\n\n  .slider {\n    position: relative;\n    display: block;\n    width: 100%;\n    height: 1.5rem;\n  }\n\n  .track {\n    position: absolute;\n    background-color: var(--track-color);\n    height: 4px;\n    width: calc(100% - 1rem);\n    margin-left: 0.5rem;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0px;\n  }\n\n  .thumb {\n    display: block;\n    position: absolute;\n    background-color: transparent;\n    height: 1rem;\n    width: 1rem;\n    border-radius: 100px;\n    left: 0px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .hide-tooltip {\n    display: none;\n  }\n\n  .label {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    margin-top: 0.5rem;\n\n    min-height: 0px;\n  }\n\n  .label-start {\n    margin-left: 0.5rem;\n  }\n\n  .label-end {\n    margin-right: 0.5rem;\n  }\n\n  .label-error {\n    margin-left: 0.5rem;\n  }\n}\n\n:host(.error) {\n  --trace-color: var(--theme-color-alarm-40);\n  --tick-color--active: var(--theme-color-alarm);\n\n  @include thumb() {\n    background-color: var(--theme-color-alarm);\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  --track-color: var(--theme-color-component-3);\n  --trace-color: var(--theme-color-3);\n  --tick-color: var(--theme-color-7);\n  --tick-color--active: var(--theme-color-7);\n\n  @include thumb() {\n    background-color: var(--theme-color-7);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { OnListener } from '../utils/listener';\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 Slider {\n  @Element() hostElement!: HTMLIxSliderElement;\n\n  /**\n   * Legal number intervals\n   *\n   * @link 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  @OnListener<Slider>('pointerup', (self) => self.showTooltip)\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"],"version":3}
+{"file":"ix-slider.entry.cjs.js","mappings":"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","names":["a11yHostAttributes","h","Host","OnListener"],"sources":["src/components/slider/slider.scss?tag=ix-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"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@import 'mixins/shadow-dom/component';\n\n@mixin track {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']::-webkit-slider-runnable-track {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']::-moz-range-track {\n    @content;\n  }\n}\n\n@mixin clear-browser-thumb {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range' i]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-top: -6px;\n  }\n\n  // Firefox\n  input[type='range' i]::-moz-range-thumb {\n    border: none;\n    border-radius: 0;\n  }\n}\n\n@mixin thumb {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-hover {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:hover::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:hover::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-active {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:active::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:active::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-focus {\n  input[type='range']:focus {\n    outline: none;\n  }\n\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:focus-visible::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:focus-visible::-moz-range-thumb {\n    @content;\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  min-height: 2rem;\n  --thumb-size: 1rem;\n  --value: 0;\n  --trace-start: 0;\n  --trace-end: 0;\n  --trace-reference: 0;\n  --trace-reference-color: var(--theme-color-8);\n  --trace-color: var(--theme-color-dynamic);\n  --tick-color: var(--theme-color-8);\n  --tick-color--active: var(--theme-color-dynamic);\n  --track-color: var(--theme-color-component-4);\n\n  input[type='range'] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0;\n    appearance: none;\n    background: transparent;\n    cursor: pointer;\n    width: 100%;\n    height: 1rem;\n    margin: 0;\n  }\n\n  // Trace line\n  input[type='range'].trace::before {\n    content: '';\n    position: absolute;\n    display: block;\n    z-index: -1;\n\n    width: calc(\n      calc(7px + calc(100% * var(--trace-end)) - calc(16px * var(--trace-end))) -\n        calc(\n          7px + calc(100% * var(--trace-start)) -\n            calc(16px * var(--trace-start))\n        )\n    );\n\n    left: calc(\n      7px + calc(100% * var(--trace-start)) - calc(16px * var(--trace-start))\n    );\n\n    height: 4px;\n    background-color: var(--trace-color);\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  // Trace reference\n  input[type='range'].trace:not(.hide-trace-reference)::after {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 2px;\n    height: 16px;\n    background-color: var(--trace-reference-color);\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(\n      7px + calc(100% * var(--trace-reference)) -\n        calc(16px * var(--trace-reference))\n    );\n  }\n\n  @include track() {\n    background: transparent;\n    height: 0.25rem;\n  }\n\n  @include clear-browser-thumb();\n\n  @include thumb() {\n    border-radius: 100px;\n    background-color: var(--theme-color-dynamic);\n    height: var(--thumb-size);\n    width: var(--thumb-size);\n    transition: all var(--theme-default-time) ease-in-out;\n    z-index: 10;\n  }\n\n  @include thumb-hover() {\n    transform: scale(1.2);\n    background-color: var(--theme-color-dynamic);\n  }\n\n  @include thumb-active() {\n    transform: scale(1.2);\n\n    background-color: var(--theme-color-dynamic);\n  }\n\n  @include thumb-focus() {\n    outline: 1px solid var(--theme-color-focus-bdr);\n    outline-offset: 0.125rem;\n  }\n\n  /* style datalist */\n  .ticks {\n    display: flex;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .ticks .tick {\n    display: block;\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background-color: var(--tick-color);\n    border-radius: 100px;\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(var(--tick-value) * 100% - 4px);\n  }\n\n  .ticks .tick.tick-active {\n    background-color: var(--tick-color--active);\n  }\n\n  .slider {\n    position: relative;\n    display: block;\n    width: 100%;\n    height: 1.5rem;\n  }\n\n  .track {\n    position: absolute;\n    background-color: var(--track-color);\n    height: 4px;\n    width: calc(100% - 1rem);\n    margin-left: 0.5rem;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0px;\n  }\n\n  .thumb {\n    display: block;\n    position: absolute;\n    background-color: transparent;\n    height: 1rem;\n    width: 1rem;\n    border-radius: 100px;\n    left: 0px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .hide-tooltip {\n    display: none;\n  }\n\n  .label {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    margin-top: 0.5rem;\n\n    min-height: 0px;\n  }\n\n  .label-start {\n    margin-left: 0.5rem;\n  }\n\n  .label-end {\n    margin-right: 0.5rem;\n  }\n\n  .label-error {\n    margin-left: 0.5rem;\n  }\n}\n\n:host(.error) {\n  --trace-color: var(--theme-color-alarm-40);\n  --tick-color--active: var(--theme-color-alarm);\n\n  @include thumb() {\n    background-color: var(--theme-color-alarm);\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  --track-color: var(--theme-color-component-3);\n  --trace-color: var(--theme-color-3);\n  --tick-color: var(--theme-color-7);\n  --tick-color--active: var(--theme-color-7);\n\n  @include thumb() {\n    background-color: var(--theme-color-7);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { OnListener } from '../utils/listener';\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 Slider {\n  @Element() hostElement!: HTMLIxSliderElement;\n\n  /**\n   * Legal number intervals\n   *\n   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step\n   */\n  @Prop() step: number = 1;\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  @OnListener<Slider>('pointerup', (self) => self.showTooltip)\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              'hide-trace-reference':\n                this.trace &&\n                (this.traceReference <= this.min ||\n                  this.traceReference >= this.max),\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"],"version":3}

package/dist/cjs/ix-split-button-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2d325c82.js');
+const index = require('./index-529f21c1.js');
 const makeRef = require('./make-ref-c25629b7.js');
 
 const splitButtonItemCss = ":host{display:contents}";
@@ -21,7 +21,7 @@ const SplitButtonItem = class {
         return this.wrapperRef.waitForCurrent();
     }
     render() {
-        return (index.h(index.Host, { key: 'ef07b2d6b51ae7356319d47e610517676651f2ae' }, index.h("ix-dropdown-item", { key: '83b4d7597071c2337aae657211c2c093fabe5eb1', ref: this.wrapperRef, suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
+        return (index.h(index.Host, { key: 'dd2f9ba13231244d5eb7071c68f19ec2029b411a' }, index.h("ix-dropdown-item", { key: '0024bb200f0924ba9e7cdced2cc4958fb8da43df', ref: this.wrapperRef, suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
             }, onClick: (e) => this.itemClick.emit(e) })));

package/dist/cjs/ix-split-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2d325c82.js');
+const index = require('./index-529f21c1.js');
 
 const splitButtonCss = ".btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1){width:calc(100% - 2rem)}:host .btn-group>ix-button:nth-child(2){width:2rem}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";
 const IxSplitButtonStyle0 = splitButtonCss;
@@ -40,7 +40,7 @@ const SplitButton = class {
                 'left-button-border': !this.outline,
             },
         };
-        return (index.h(index.Host, { key: 'bb21ed75adde121f259f91f81bd31759c44506b3' }, index.h("div", { key: '4d01032c03219872efd5d810cc2aa6a2299b5035', class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (index.h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (index.h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }))), index.h("ix-icon-button", Object.assign({ key: 'fc6b09e850a040b1c94bef3c5c94990a0bc3536e' }, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), index.h("ix-dropdown", { key: 'b15691847893a1bd3f62798fb59fa7448b5f233c', ref: (r) => (this.dropdownElement = r), closeBehavior: this.closeBehavior }, index.h("slot", { key: 'bdc62653adb7255a13584883d2ef3b798170d949' }))));
+        return (index.h(index.Host, { key: 'e452c205dc4ff169a9c01b757e913506be6cc217' }, index.h("div", { key: '926ce0fb8cca44d56d2d975a17858de163f67154', class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (index.h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (index.h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }))), index.h("ix-icon-button", Object.assign({ key: 'acc87b0c8506fc0d7e1e4314bbf9d6edd4a2428a' }, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), index.h("ix-dropdown", { key: '2bbd1e58b11b0f8c733c969a05a9ad14d8e99c94', ref: (r) => (this.dropdownElement = r), closeBehavior: this.closeBehavior }, index.h("slot", { key: '1da482f78a3ac0d6b54ee6c903ce11827c2bf7b1' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-tab-item_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2d325c82.js');
+const index = require('./index-529f21c1.js');
 
 const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host .text span,:host .text span::before{pointer-events:none}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
 const IxTabItemStyle0 = tabItemCss;
@@ -33,7 +33,7 @@ const TabItem = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '77688f6b83f53ba0de891d2ed529c7b82941930a', class: this.tabItemClasses({
+        return (index.h(index.Host, { key: 'd066fe09ebb7ac33ef162eafed96189de7215022', class: this.tabItemClasses({
                 selected: this.selected,
                 disabled: this.disabled,
                 small: this.small,
@@ -48,12 +48,12 @@ const TabItem = class {
                 if (clientEvent.defaultPrevented) {
                     event.stopPropagation();
                 }
-            } }, index.h("div", { key: 'd1790baee81972038f8a09c0e7a0ee3124e828a6', class: {
+            } }, index.h("div", { key: '944c3beb003abae7f64ed18c3d77fa8d3a576be3', class: {
                 circle: this.rounded,
                 text: !this.rounded,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, index.h("slot", { key: '7dcd5bcd496e9955b45f00b570fb935a0e9a8969' })), index.h("div", { key: '435deec3155b879b5f8a397124bf9a198283c2bd', class: {
+            } }, index.h("slot", { key: 'ff6b883c8b1ec2e53fe9faa705bbcdb0345ef27b' })), index.h("div", { key: '292419b01ae7e18db509ad09a83ffa5bbc6480a5', class: {
                 counter: true,
                 selected: this.selected,
                 hidden: !(this.rounded && this.counter !== undefined),
@@ -108,12 +108,8 @@ const Tabs = class {
         this.currentScrollAmount = 0;
         this.scrollAmount = 100;
         this.scrollActionAmount = 0;
-    }
-    get arrowLeftElement() {
-        return this.hostElement.shadowRoot.querySelector('[data-arrow-left]');
-    }
-    get arrowRightElement() {
-        return this.hostElement.shadowRoot.querySelector('[data-arrow-right]');
+        this.showArrowPrevious = false;
+        this.showArrowNext = false;
     }
     onWindowResize() {
         this.totalItems = 0;
@@ -130,13 +126,24 @@ const Tabs = class {
         return this.getTabs()[tabIndex];
     }
     getTabsWrapper() {
-        return this.hostElement.shadowRoot.querySelector('.items-content');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.items-content');
+    }
+    initResizeObserver() {
+        const parentElement = this.hostElement.parentElement;
+        if (!parentElement)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.renderArrows();
+        });
+        this.resizeObserver.observe(parentElement);
     }
     showArrows() {
         try {
             const tabWrapper = this.getTabsWrapper();
-            return (tabWrapper.scrollWidth >
-                Math.ceil(tabWrapper.getBoundingClientRect().width) &&
+            return (tabWrapper &&
+                tabWrapper.scrollWidth >
+                    Math.ceil(tabWrapper.getBoundingClientRect().width) &&
                 this.layout === 'auto');
         }
         catch (error) {
@@ -145,7 +152,7 @@ const Tabs = class {
     }
     showPreviousArrow() {
         try {
-            return this.showArrows() && this.scrollActionAmount < 0;
+            return this.showArrows() === true && this.scrollActionAmount < 0;
         }
         catch (error) {
             return false;
@@ -154,8 +161,11 @@ const Tabs = class {
     showNextArrow() {
         try {
             const tabWrapper = this.getTabsWrapper();
+            if (!tabWrapper) {
+                return false;
+            }
             const tabWrapperRect = tabWrapper.getBoundingClientRect();
-            return (this.showArrows() &&
+            return (this.showArrows() === true &&
                 this.scrollActionAmount >
                     (tabWrapper.scrollWidth - tabWrapperRect.width) * -1);
         }
@@ -163,39 +173,47 @@ const Tabs = class {
             return false;
         }
     }
-    getArrowStyle(condition) {
-        return {
-            opacity: condition ? '1' : '0',
-            zIndex: condition ? '1' : '-1',
-        };
-    }
     move(amount, click = false) {
-        const tabWrapper = this.getTabsWrapper();
-        const maxScrollWidth = (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;
-        amount = this.currentScrollAmount + amount;
-        amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;
+        const tabsWrapper = this.getTabsWrapper();
+        if (!tabsWrapper) {
+            return;
+        }
+        const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;
+        const maxScrollWidth = -this.currentScrollAmount +
+            tabsWrapperVisibleWidth -
+            tabsWrapper.scrollWidth;
+        amount = amount < maxScrollWidth ? maxScrollWidth : amount;
+        amount += this.currentScrollAmount;
+        amount = Math.min(amount, 0);
         const styles = [
             `transform: translateX(${amount}px);`,
             click ? 'transition: all ease-in-out 400ms;' : '',
         ].join('');
-        tabWrapper.setAttribute('style', styles);
+        tabsWrapper.setAttribute('style', styles);
         if (click)
             this.currentScrollAmount = this.scrollActionAmount = amount;
         else
             this.scrollActionAmount = amount;
     }
-    moveTabToView(tabIndex) {
+    onSelectedChange(newValue) {
+        var _a;
         if (!this.showArrows())
             return;
-        const tab = this.getTab(tabIndex).getBoundingClientRect();
-        const amount = tab.x * -1;
-        this.move(amount, true);
+        const tabRect = this.getTab(newValue).getBoundingClientRect();
+        const wrapperWidth = (_a = this.getTabsWrapper()) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        const arrowWidth = 32;
+        if (tabRect.left < arrowWidth) {
+            this.move(-tabRect.left + arrowWidth, true);
+        }
+        else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {
+            this.move(wrapperWidth - tabRect.right - arrowWidth, true);
+        }
     }
     setSelected(index) {
         this.selected = index;
     }
     clickTab(index) {
-        if (this.dragStop()) {
+        if (!this.clickAction.isClick || this.dragStop()) {
             return;
         }
         const { defaultPrevented } = this.selectedChange.emit(index);
@@ -203,7 +221,6 @@ const Tabs = class {
             return;
         }
         this.setSelected(index);
-        this.moveTabToView(index);
     }
     dragStart(element, event) {
         if (!this.showArrows())
@@ -217,18 +234,22 @@ const Tabs = class {
         const tabPositionX = parseFloat(window.getComputedStyle(element).left);
         const mousedownPositionX = event.clientX;
         const move = (event) => this.dragMove(event, tabPositionX, mousedownPositionX);
-        window.addEventListener('mouseup', () => {
+        const windowClick = () => {
             window.removeEventListener('mousemove', move, false);
+            window.removeEventListener('click', windowClick, false);
             this.dragStop();
-        });
+        };
+        window.addEventListener('click', windowClick);
         window.addEventListener('mousemove', move, false);
     }
     dragMove(event, tabX, mousedownX) {
         this.move(event.clientX + tabX - mousedownX);
     }
     dragStop() {
-        clearTimeout(this.clickAction.timeout);
-        this.clickAction.timeout = null;
+        if (this.clickAction.timeout) {
+            clearTimeout(this.clickAction.timeout);
+            this.clickAction.timeout = null;
+        }
         if (this.clickAction.isClick)
             return false;
         this.currentScrollAmount = this.scrollActionAmount;
@@ -246,6 +267,7 @@ const Tabs = class {
             element.setAttribute('selected', index === this.selected ? 'true' : 'false');
             element.setAttribute('placement', this.placement);
         });
+        this.initResizeObserver();
     }
     componentDidRender() {
         const tabs = this.getTabs();
@@ -255,11 +277,12 @@ const Tabs = class {
         });
     }
     componentWillRender() {
+        this.renderArrows();
+    }
+    renderArrows() {
         requestAnimationFrameNoNgZone(() => {
-            const showNextArrow = this.showNextArrow();
-            const previousArrow = this.showPreviousArrow();
-            Object.assign(this.arrowLeftElement.style, this.getArrowStyle(previousArrow));
-            Object.assign(this.arrowRightElement.style, this.getArrowStyle(showNextArrow));
+            this.showArrowNext = this.showNextArrow();
+            this.showArrowPrevious = this.showPreviousArrow();
         });
     }
     componentDidLoad() {
@@ -268,6 +291,10 @@ const Tabs = class {
             element.addEventListener('mousedown', (event) => this.dragStart(element, event));
         });
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     onTabClick(event) {
         if (event.defaultPrevented) {
             return;
@@ -281,15 +308,18 @@ const Tabs = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'd78a0e8848762853905f0a00ad0e29eb8010f058' }, index.h("div", { key: '81f8018608a4ead1b07a2c8dbc275f3e6b1a4f9f', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, index.h("ix-icon", { key: '74ac11767dded217d438e58f3d9af659b5f7913c', name: 'chevron-left-small' })), index.h("div", { key: '22172b312ee82c63c590780030766262d5655be3', class: {
+        return (index.h(index.Host, { key: '014b3afcc4165f3c3aa0800ea6f12c15d138b48b' }, this.showArrowPrevious && (index.h("div", { key: '6c98e2c2957c96970d42d5abdf959f325e1c05b8', class: "arrow", onClick: () => this.move(this.scrollAmount, true) }, index.h("ix-icon", { key: '55f46b38e62a863415fa5d51da48a1be19303b78', name: 'chevron-left-small' }))), index.h("div", { key: 'c0528e9e703746cc1acc63c1b68c4d9ee3a01a04', class: {
                 'tab-items': true,
                 'overflow-shadow': true,
-                'shadow-left': this.showPreviousArrow(),
-                'shadow-right': this.showNextArrow(),
-                'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
-            } }, index.h("div", { key: '31a8df74124a12d6abc6e3af8c45e2f59c9e8e7f', class: "items-content" }, index.h("slot", { key: '0a37dea0573b5123c6de66831c028401d1da86b4' }))), index.h("div", { key: 'cd946069a8dbb2708bc90923c2bb8a897eeaf3b5', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, index.h("ix-icon", { key: '3542fc3e7cba8477f2367492620dc16cdaecbad8', name: 'chevron-right-small' }))));
+                'shadow-left': this.showArrowPrevious,
+                'shadow-right': this.showArrowNext,
+                'shadow-both': this.showArrowNext && this.showArrowPrevious,
+            } }, index.h("div", { key: 'bb6174f8e9a9543ee928a70de23500edbedaeb04', class: "items-content" }, index.h("slot", { key: 'ba881f7c4784685ebdb1f0a2581c4691f2a8f1b9' }))), this.showArrowNext && (index.h("div", { key: '743123a5b14ed6a473c21b742f54cbf4ae4405da', class: "arrow right", onClick: () => this.move(-this.scrollAmount, true) }, index.h("ix-icon", { key: 'd67ab90bf1b620791ca9e84f7ace8b7a04a7a772', name: 'chevron-right-small' })))));
     }
     get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "selected": ["onSelectedChange"]
+    }; }
 };
 Tabs.style = IxTabsStyle0;