npm - @siemens/ix - Versions diffs - 4.2.0 → 4.3.0 - Mend

@siemens/ix 4.2.0 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (928) hide show

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

@@ -4,8 +4,9 @@ var index = require('./index-C8Xo8L1k.js');
 var a11y = require('./a11y-B_6chCvu.js');
 var listener = require('./listener-OBCpw0Y2.js');
 var makeRef = require('./make-ref-BaH6_YJk.js');
+var validation = require('./validation-DTmSqO2d.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-slider-track-marker--background);--trace-color:var(--theme-slider-trace--background);--tick-color:var(--theme-slider-track-marker--background);--tick-color--active:var(--theme-slider-trace-marker--background);--track-color:var(--theme-slider-track--background)}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}: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-slider-thumb--background);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-slider-thumb--background);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-slider-thumb--background--hover)}:host input[type=range]:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--active)}: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{}: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-slider-trace--background--invalid);--tick-color--active:var(--theme-slider-trace-marker--background--invalid)}:host(.error) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.error) input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.disabled){pointer-events:none;--track-color:var(--theme-slider-track--background--disabled);--trace-color:var(--theme-slider-trace--background--disabled);--tick-color:var(--theme-slider-track-marker--background--disabled);--tick-color--active:var(--theme-slider-trace-marker--background--disabled)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--disabled)}";
+const sliderCss = ":host{display:flex;flex-direction:column;min-height:2rem;justify-content:center;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-slider-track-marker--background);--trace-color:var(--theme-slider-trace--background);--tick-color:var(--theme-slider-track-marker--background);--tick-color--active:var(--theme-slider-trace-marker--background);--track-color:var(--theme-slider-track--background)}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}: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:1.5rem;margin:0}:host input[type=range].trace::before{content:\"\";position:absolute;display:block;z-index:-1;width:calc((var(--trace-end) - var(--trace-start)) * 100%);left:calc(var(--trace-start) * 100%);height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%);border-radius:clamp(0rem, (0.01 - var(--trace-start)) * 999rem, 0.125rem) clamp(0rem, (var(--trace-end) - 0.99) * 999rem, 0.125rem) clamp(0rem, (var(--trace-end) - 0.99) * 999rem, 0.125rem) clamp(0rem, (0.01 - var(--trace-start)) * 999rem, 0.125rem)}:host .slider-container{width:100%}:host .slider-container .slider{width:100%}:host .slider-container .slider input[type=range]{width:100%}: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(100% * 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:50%;background-color:var(--theme-slider-thumb--background);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:50%;background-color:var(--theme-slider-thumb--background);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{background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--active)}: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{}:host .ticks{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none}:host .ticks circle.tick{--tick-size:6px;--tick-radius:calc(var(--tick-size) / 2);r:var(--tick-radius);fill:var(--tick-color);transform:translate(calc(var(--tick-value) * (100% - var(--thumb-size)) + var(--thumb-size) / 2), 50%)}:host .ticks .tick.tick-at-min{transform:translate(var(--tick-radius), 50%)}:host .ticks .tick.tick-at-max{transform:translate(calc(100% - var(--tick-radius)), 50%)}:host .ticks .tick.tick-active{fill: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:100%;top:50%;transform:translateY(-50%);left:0px;border-radius:2px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;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(.error),:host(.invalid){--trace-color:var(--theme-slider-trace--background--invalid);--tick-color--active:var(--theme-slider-trace-marker--background--invalid)}:host(.error) input[type=range]::-webkit-slider-thumb,:host(.invalid) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]::-moz-range-thumb,:host(.invalid) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]:hover::-webkit-slider-thumb,:host(.invalid) input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:hover::-moz-range-thumb,:host(.invalid) input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:active::-webkit-slider-thumb,:host(.invalid) input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.error) input[type=range]:active::-moz-range-thumb,:host(.invalid) input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.disabled){pointer-events:none;--track-color:var(--theme-slider-track--background--disabled);--trace-color:var(--theme-slider-trace--background--disabled);--tick-color:var(--theme-slider-track-marker--background--disabled);--tick-color--active:var(--theme-slider-trace-marker--background--disabled)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.warning){--trace-color:var(--theme-color-warning-40);--tick-color--active:var(--theme-color-warning)}:host(.warning) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-warning)}:host(.warning) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-warning)}:host(.info){--trace-color:var(--theme-color-info-40);--tick-color--active:var(--theme-color-info)}:host(.info) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-info)}:host(.info) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-info)}:host(.valid){--trace-color:var(--theme-color-success-40);--tick-color--active:var(--theme-color-success)}:host(.valid) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-success)}:host(.valid) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-success)}";
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
@@ -40,6 +41,18 @@ const Slider = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.valueChange = index.createEvent(this, "valueChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.formInternals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.formInternals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.formInternals;
+        }
+        /**
+         * Show helper, info, warning, error and valid text as tooltip
+         * @since 4.3.0
+         */
+        this.showTextAsTooltip = false;
         /**
          * Legal number intervals
          *
@@ -75,9 +88,18 @@ const Slider = class {
         this.rangeMax = 100;
         this.rangeTraceReference = 0;
         this.showTooltip = false;
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+        this.touched = false;
+        this.controlRef = makeRef.makeRef();
         this.thumbRef = makeRef.makeRef();
         this.tooltipRef = makeRef.makeRef();
     }
+    get hasLabels() {
+        return !!this.hostElement.querySelector('[slot="label-start"], [slot="label-end"]');
+    }
     get tooltip() {
         return this.tooltipRef.current;
     }
@@ -96,6 +118,12 @@ const Slider = class {
         }
         (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.hideTooltip();
     }
+    onClassField({ isInvalid, isInfo, isValid, isWarning, isInvalidByRequired, }) {
+        this.isInvalid = isInvalid || isInvalidByRequired;
+        this.isInfo = isInfo;
+        this.isValid = isValid;
+        this.isWarning = isWarning;
+    }
     componentWillLoad() {
         this.a11yAttributes = a11y.a11yHostAttributes(this.hostElement, [
             'role',
@@ -104,12 +132,27 @@ const Slider = class {
             'aria-valuenow',
         ]);
         this.updateRangeVariables();
+        this.setFormValueIfChanged(this.value);
     }
     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);
+        if (this.value !== undefined) {
+            this.setFormValueIfChanged(this.value);
+        }
+    }
+    updateFormInternalValue(value) {
+        this.setFormValueIfChanged(value);
+        this.valueChange.emit(value);
+    }
+    setFormValueIfChanged(value) {
+        const valueStr = value.toString();
+        if (this.lastFormValue !== valueStr) {
+            this.formInternals.setFormValue(valueStr);
+            this.lastFormValue = valueStr;
+        }
     }
     onInput(event) {
         event.stopPropagation();
@@ -122,6 +165,9 @@ const Slider = class {
                 this.rangeInput = oldValue;
                 this.slider.value = oldValue.toString();
             }
+            else {
+                this.updateFormInternalValue(value);
+            }
         }
     }
     emitInputEvent() {
@@ -139,7 +185,16 @@ const Slider = class {
     onPointerUp() {
         this.showTooltip = false;
     }
+    /** @internal */
+    hasValidValue() {
+        return Promise.resolve(true);
+    }
+    /** @internal */
+    isTouched() {
+        return Promise.resolve(this.touched);
+    }
     render() {
+        var _a;
         const range = this.rangeMax - this.rangeMin;
         let traceReferenceInPercentage = (this.rangeTraceReference - this.rangeMin) / range;
         let valueInPercentage = (this.rangeInput - this.rangeMin) / range;
@@ -150,42 +205,46 @@ const Slider = class {
             traceStart = valueInPercentage;
             traceEnd = traceReferenceInPercentage;
         }
-        return (index.h(index.Host, { key: '03faa36448299850133ed4e7c1dbfd5f7a28a91b', class: {
+        return (index.h(index.Host, { key: 'dcce2da89192816ddc61f9f1950a399ebdf53766', class: {
                 disabled: this.disabled,
                 error: !!this.error,
-            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, index.h("div", { key: '686f462a50a42a4a29a20d22d3637af74a3799ae', class: "slider" }, index.h("div", { key: '8ef5374cd9e421bb2265b1c0b0b7f2c1f2ecf6ff', class: "track" }, index.h("div", { key: '969da1a4f687d3a254c3353fa0f36ee5ce61130a', ref: this.thumbRef, class: "thumb", style: {
-                left: `calc(${valueInPercentage} * 100% - 8px)`,
-            } }), index.h("div", { key: '7daba2cb0cf28c3d4b130eeebedae72827109cea', class: "ticks" }, this.marker
-            ? this.marker.map((markerValue) => {
-                if (markerValue > this.max || markerValue < this.min) {
-                    return;
-                }
-                let left = (markerValue - this.rangeMin) / range;
-                return (index.h("div", { class: {
-                        tick: true,
-                        'tick-active': this.isMarkerActive(markerValue) && this.trace,
-                    }, style: {
-                        '--tick-value': `${left}`,
-                    } }));
-            })
-            : null)), index.h("input", Object.assign({ key: '2bcc70bf378b44230c3dc7223e6f24707a6a3265', 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: {
+                invalid: this.isInvalid,
+                info: this.isInfo,
+                valid: this.isValid,
+                warning: this.isWarning,
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, index.h("ix-field-wrapper", { key: 'a3ce51bbc6f18cfbc99c3ef821016c6421217ffe', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.controlRef }, index.h("div", { key: '602a467d24592696b8f5ebaf13f1b7d5e3451e38', class: "slider-container" }, index.h("div", { key: 'b9ded80de026dfc23f6892ef5fab71bcf9444011', class: "slider" }, index.h("div", { key: '78472ae8734b51390efeac850ffe2400e8fd67be', class: "track" }, index.h("div", { key: '0183018c9421d77caa857d6e8ff83dce0b7714f1', ref: this.thumbRef, class: "thumb", style: {
+                left: `calc(${valueInPercentage} * (100% - 1rem))`,
+            } }), index.h("svg", { key: '3a43071be5fb88e7ae8d0f8abd34f7cef203fb54', class: "ticks", xmlns: "http://www.w3.org/2000/svg" }, (_a = this.marker) === null || _a === void 0 ? void 0 : _a.filter((markerValue) => markerValue >= this.min && markerValue <= this.max).map((markerValue) => {
+            const markerPosition = (markerValue - this.rangeMin) / range;
+            return (index.h("circle", { class: {
+                    tick: true,
+                    'tick-active': this.isMarkerActive(markerValue) && this.trace,
+                    'tick-at-min': markerPosition === 0,
+                    'tick-at-max': markerPosition === 1,
+                }, cx: "0", cy: "0", style: {
+                    '--tick-value': `${markerPosition}`,
+                } }));
+        }))), index.h("input", Object.assign({ key: '1f1304342e72682bc040994e96297a31a61f4d00', id: "slider", ref: this.controlRef, 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), onFocus: () => {
+                this.showTooltip = true;
+                this.touched = true;
+            }, onBlur: () => {
+                this.showTooltip = false;
+            }, style: {
                 '--value': `${valueInPercentage}`,
                 '--trace-reference': `${traceReferenceInPercentage}`,
                 '--trace-start': `${traceStart}`,
                 '--trace-end': `${traceEnd}`,
             }, class: {
-                trace: this.trace && traceReferenceInPercentage !== valueInPercentage,
+                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: 'c887ce7b3d18a92de4cf359fb9f8706393a82529', ref: this.tooltipRef, class: {
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), index.h("ix-tooltip", { key: 'e0c3c6b098a2112cbcc27a90a8cdb696148109dc', ref: this.tooltipRef, class: {
                 'hide-tooltip': !this.showTooltip,
-            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), index.h("div", { key: '8de8c23aa94fc924842631eb4d312efc5ee7cc6f', class: "label" }, index.h("div", { key: '402d7e1bd4bdd648e361b88f211d7d80e5c907b3', class: "label-start" }, index.h("slot", { key: 'f9a3a0ecc744b3ab91dda8d425309ce78c57e1f1', name: "label-start" })), index.h("div", { key: '188c06d13b00c0124603b6a0513cfa24e5467b62', class: "label-end" }, index.h("slot", { key: 'cc4e9bd389f10ab7e293a80844012877070b2750', name: "label-end" }))), this.error ? (index.h("ix-typography", { class: 'label-error', textColor: "alarm" }, this.error)) : null));
+            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), this.hasLabels && (index.h("div", { key: '0a04945ac1055fbcd7e4b05b1188071e5e58180b', class: "label" }, index.h("div", { key: 'e1d1f0963b6e56947afeb9e371c1404b9b0fb819' }, index.h("slot", { key: '16e408212c6193e840f399343cfe2d3a8e260e30', name: "label-start" })), index.h("div", { key: '569530a9d3f987a0993ea8f79709b5f2252e0956' }, index.h("slot", { key: 'aba45e17633571d07a3dc95d46502dd6ebdc0aae', name: "label-end" })))), this.error ? (index.h("ix-typography", { textColor: "alarm" }, this.error)) : null))));
     }
+    static get formAssociated() { return true; }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "showTooltip": ["onShowTooltipChange"],
@@ -195,6 +254,9 @@ const Slider = class {
         "traceReference": ["updateRangeVariables"]
     }; }
 };
+__decorate([
+    validation.HookValidationLifecycle()
+], Slider.prototype, "onClassField", null);
 __decorate([
     listener.OnListener('pointerup', (self) => self.showTooltip)
 ], Slider.prototype, "onPointerUp", null);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-slider.entry.cjs.js","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@use '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 display: flex;\n flex-direction: column;\n min-height: 2rem;\n\n // Slider specific calculations\n --thumb-size: 1rem;\n --value: 0;\n --trace-start: 0;\n --trace-end: 0;\n --trace-reference: 0;\n\n // Theme colors:\n --trace-reference-color: var(--theme-slider-track-marker--background);\n --trace-color: var(--theme-slider-trace--background);\n --tick-color: var(--theme-slider-track-marker--background);\n --tick-color--active: var(--theme-slider-trace-marker--background);\n --track-color: var(--theme-slider-track--background);\n\n @include component.ix-component;\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-slider-thumb--background);\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-slider-thumb--background--hover);\n }\n\n @include thumb-active() {\n transform: scale(1.2);\n\n background-color: var(--theme-slider-thumb--background--active);\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-slider-trace--background--invalid);\n --tick-color--active: var(--theme-slider-trace-marker--background--invalid);\n\n @include thumb {\n background-color: var(--theme-slider-thumb--background--invalid);\n }\n\n @include thumb-hover() {\n background-color: var(--theme-slider-thumb--background--invalid--hover);\n }\n\n @include thumb-active() {\n background-color: var(--theme-slider-thumb--background--invalid--active);\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n\n --track-color: var(--theme-slider-track--background--disabled);\n --trace-color: var(--theme-slider-trace--background--disabled);\n --tick-color: var(--theme-slider-track-marker--background--disabled);\n --tick-color--active: var(--theme-slider-trace-marker--background--disabled);\n\n @include thumb {\n background-color: var(--theme-slider-thumb--background--disabled);\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';\nimport { makeRef } from '../utils/make-ref';\nimport type { SliderMarker } from './slider.types';\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 @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 private readonly thumbRef = makeRef<HTMLDivElement>();\n private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n get tooltip() {\n return this.tooltipRef.current;\n }\n\n get pseudoThumb() {\n return this.thumbRef.current;\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 && this.pseudoThumb) {\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 = parseFloat(this.slider.value);\n\n if (!isNaN(value)) {\n const oldValue = this.rangeInput;\n this.rangeInput = value;\n\n const { defaultPrevented } = this.emitInputEvent();\n\n if (defaultPrevented) {\n this.rangeInput = oldValue;\n this.slider.value = oldValue.toString();\n }\n }\n }\n\n private emitInputEvent() {\n return 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 ref={this.thumbRef}\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 ref={this.tooltipRef}\n class={{\n 'hide-tooltip': !this.showTooltip,\n }}\n animationFrame={true}\n for={this.thumbRef.waitForCurrent()}\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'} textColor=\"alarm\">\n {this.error}\n </ix-typography>\n ) : null}\n </Host>\n );\n }\n}\n"],"names":["makeRef","a11yHostAttributes","h","Host","OnListener"],"mappings":"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"}
1	+ {"version":3,"file":"ix-slider.entry.cjs.js","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@use '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 display: flex;\n flex-direction: column;\n min-height: 2rem;\n justify-content: center;\n\n --thumb-size: 1rem;\n --value: 0;\n --trace-start: 0;\n --trace-end: 0;\n --trace-reference: 0;\n\n // Theme colors:\n --trace-reference-color: var(--theme-slider-track-marker--background);\n --trace-color: var(--theme-slider-trace--background);\n --tick-color: var(--theme-slider-track-marker--background);\n --tick-color--active: var(--theme-slider-trace-marker--background);\n --track-color: var(--theme-slider-track--background);\n\n @include component.ix-component;\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: 1.5rem;\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 width: calc((var(--trace-end) - var(--trace-start)) 100%);\n left: calc(var(--trace-start) * 100%);\n height: 4px;\n background-color: var(--trace-color);\n top: 50%;\n transform: translateY(-50%);\n border-radius: clamp(\n 0rem,\n calc((0.01 - var(--trace-start)) * 999rem),\n 0.125rem\n )\n clamp(0rem, calc((var(--trace-end) - 0.99) * 999rem), 0.125rem)\n clamp(0rem, calc((var(--trace-end) - 0.99) * 999rem), 0.125rem)\n clamp(0rem, calc((0.01 - var(--trace-start)) * 999rem), 0.125rem);\n }\n\n .slider-container {\n width: 100%;\n\n .slider {\n width: 100%;\n\n input[type='range'] {\n width: 100%;\n }\n }\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(100% * var(--trace-reference));\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: 50%;\n background-color: var(--theme-slider-thumb--background);\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 background-color: var(--theme-slider-thumb--background--hover);\n }\n\n @include thumb-active() {\n background-color: var(--theme-slider-thumb--background--active);\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 position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n }\n\n .ticks circle.tick {\n --tick-size: 6px;\n --tick-radius: calc(var(--tick-size) / 2);\n r: var(--tick-radius);\n fill: var(--tick-color);\n transform: translate(\n calc(\n var(--tick-value) (100% - var(--thumb-size)) + var(--thumb-size) / 2\n ),\n 50%\n );\n }\n\n .ticks .tick.tick-at-min {\n transform: translate(var(--tick-radius), 50%);\n }\n\n .ticks .tick.tick-at-max {\n transform: translate(calc(100% - var(--tick-radius)), 50%);\n }\n\n .ticks .tick.tick-active {\n fill: 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: 100%;\n top: 50%;\n transform: translateY(-50%);\n left: 0px;\n border-radius: 2px;\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 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\n:host(.error),\n:host(.invalid) {\n --trace-color: var(--theme-slider-trace--background--invalid);\n --tick-color--active: var(--theme-slider-trace-marker--background--invalid);\n\n @include thumb {\n background-color: var(--theme-slider-thumb--background--invalid);\n }\n\n @include thumb-hover() {\n background-color: var(--theme-slider-thumb--background--invalid--hover);\n }\n\n @include thumb-active() {\n background-color: var(--theme-slider-thumb--background--invalid--active);\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n\n --track-color: var(--theme-slider-track--background--disabled);\n --trace-color: var(--theme-slider-trace--background--disabled);\n --tick-color: var(--theme-slider-track-marker--background--disabled);\n --tick-color--active: var(--theme-slider-trace-marker--background--disabled);\n\n @include thumb {\n background-color: var(--theme-slider-thumb--background--disabled);\n }\n}\n\n:host(.warning) {\n --trace-color: var(--theme-color-warning-40);\n --tick-color--active: var(--theme-color-warning);\n\n @include thumb() {\n background-color: var(--theme-color-warning);\n }\n}\n\n:host(.info) {\n --trace-color: var(--theme-color-info-40);\n --tick-color--active: var(--theme-color-info);\n\n @include thumb() {\n background-color: var(--theme-color-info);\n }\n}\n\n:host(.valid) {\n --trace-color: var(--theme-color-success-40);\n --tick-color--active: var(--theme-color-success);\n\n @include thumb() {\n background-color: var(--theme-color-success);\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 AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { OnListener } from '../utils/listener';\nimport { makeRef } from '../utils/make-ref';\nimport {\n ValidationResults,\n HookValidationLifecycle,\n FieldWrapperInterface,\n IxFormValidationState,\n} from '../utils/input';\nimport type { SliderMarker } from './slider.types';\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 @form-ready\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 formAssociated: true,\n})\nexport class Slider implements FieldWrapperInterface, IxFormValidationState {\n @AttachInternals() formInternals!: ElementInternals;\n @Element() hostElement!: HTMLIxSliderElement;\n\n /\n Show text below the field component\n * @since 4.3.0\n /\n @Prop() helperText?: string;\n\n /\n Label for the field component\n * @since 4.3.0\n /\n @Prop() label?: string;\n\n /\n Error text for the field component\n * @since 4.3.0\n /\n @Prop() invalidText?: string;\n\n /\n Info text for the field component\n * @since 4.3.0\n /\n @Prop() infoText?: string;\n\n /\n Warning text for the field component\n * @since 4.3.0\n /\n @Prop() warningText?: string;\n\n /\n Valid text for the field component\n * @since 4.3.0\n /\n @Prop() validText?: string;\n\n /\n Show helper, info, warning, error and valid text as tooltip\n * @since 4.3.0\n /\n @Prop() showTextAsTooltip: boolean = false;\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 @deprecated Will be removed in 5.0.0. Use invalid class instead.\n /\n @Prop() error?: boolean \| string;\n\n /\n Will emit the value when it changes\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 @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n\n private a11yAttributes?: A11yAttributes;\n private lastFormValue?: string;\n private touched = false;\n private readonly controlRef = makeRef<HTMLElement>();\n private readonly thumbRef = makeRef<HTMLDivElement>();\n private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n private get hasLabels() {\n return !!this.hostElement.querySelector(\n '[slot=\"label-start\"], [slot=\"label-end\"]'\n );\n }\n\n get tooltip() {\n return this.tooltipRef.current;\n }\n\n get pseudoThumb() {\n return this.thumbRef.current;\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 && this.pseudoThumb) {\n this.tooltip?.showTooltip(this.pseudoThumb);\n return;\n }\n\n this.tooltip?.hideTooltip();\n }\n\n @HookValidationLifecycle()\n onClassField({\n isInvalid,\n isInfo,\n isValid,\n isWarning,\n isInvalidByRequired,\n }: ValidationResults) {\n this.isInvalid = isInvalid \|\| isInvalidByRequired;\n this.isInfo = isInfo;\n this.isValid = isValid;\n this.isWarning = isWarning;\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 this.setFormValueIfChanged(this.value);\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 if (this.value !== undefined) {\n this.setFormValueIfChanged(this.value);\n }\n }\n\n private updateFormInternalValue(value: number) {\n this.setFormValueIfChanged(value);\n this.valueChange.emit(value);\n }\n\n private setFormValueIfChanged(value: number) {\n const valueStr = value.toString();\n if (this.lastFormValue !== valueStr) {\n this.formInternals.setFormValue(valueStr);\n this.lastFormValue = valueStr;\n }\n }\n\n private onInput(event: InputEvent) {\n event.stopPropagation();\n const value = parseFloat(this.slider.value);\n\n if (!isNaN(value)) {\n const oldValue = this.rangeInput;\n this.rangeInput = value;\n\n const { defaultPrevented } = this.emitInputEvent();\n\n if (defaultPrevented) {\n this.rangeInput = oldValue;\n this.slider.value = oldValue.toString();\n } else {\n this.updateFormInternalValue(value);\n }\n }\n }\n\n private emitInputEvent() {\n return 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 /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(true);\n }\n\n /* @internal /\n @Method()\n isTouched(): Promise<boolean> {\n return Promise.resolve(this.touched);\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 invalid: this.isInvalid,\n info: this.isInfo,\n valid: this.isValid,\n warning: this.isWarning,\n }}\n onPointerDown={() => setTimeout(() => (this.showTooltip = true))}\n >\n <ix-field-wrapper\n label={this.label}\n helperText={this.helperText}\n invalidText={this.invalidText}\n infoText={this.infoText}\n warningText={this.warningText}\n validText={this.validText}\n showTextAsTooltip={this.showTextAsTooltip}\n isValid={this.isValid}\n isInfo={this.isInfo}\n isWarning={this.isWarning}\n isInvalid={this.isInvalid}\n controlRef={this.controlRef}\n >\n <div class=\"slider-container\">\n <div class=\"slider\">\n <div class=\"track\">\n <div\n ref={this.thumbRef}\n class=\"thumb\"\n style={{\n left: `calc(${valueInPercentage} (100% - 1rem))`,\n }}\n ></div>\n <svg class=\"ticks\" xmlns=\"http://www.w3.org/2000/svg\">\n {this.marker\n ?.filter(\n (markerValue) =>\n markerValue >= this.min && markerValue <= this.max\n )\n .map((markerValue) => {\n const markerPosition =\n (markerValue - this.rangeMin) / range;\n\n return (\n <circle\n class={{\n tick: true,\n 'tick-active':\n this.isMarkerActive(markerValue) && this.trace,\n 'tick-at-min': markerPosition === 0,\n 'tick-at-max': markerPosition === 1,\n }}\n cx=\"0\"\n cy=\"0\"\n style={{\n '--tick-value': `${markerPosition}`,\n }}\n ></circle>\n );\n })}\n </svg>\n </div>\n\n <input\n id=\"slider\"\n ref={this.controlRef}\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 onFocus={() => {\n this.showTooltip = true;\n this.touched = true;\n }}\n onBlur={() => {\n this.showTooltip = false;\n }}\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 &&\n traceReferenceInPercentage !== valueInPercentage,\n 'hide-trace-reference':\n this.trace &&\n (this.traceReference <= this.min \|\|\n this.traceReference >= this.max),\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 ref={this.tooltipRef}\n class={{\n 'hide-tooltip': !this.showTooltip,\n }}\n animationFrame={true}\n for={this.thumbRef.waitForCurrent()}\n >\n {this.rangeInput}\n </ix-tooltip>\n </div>\n {this.hasLabels && (\n <div class=\"label\">\n <div>\n <slot name=\"label-start\"></slot>\n </div>\n <div>\n <slot name=\"label-end\"></slot>\n </div>\n </div>\n )}\n {this.error ? (\n <ix-typography textColor=\"alarm\">{this.error}</ix-typography>\n ) : null}\n </div>\n </ix-field-wrapper>\n </Host>\n );\n }\n}\n"],"names":["makeRef","a11yHostAttributes","h","Host","HookValidationLifecycle","OnListener"],"mappings":"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"}

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

@@ -38,6 +38,13 @@ const SplitButton = class {
          * Placement of the dropdown
          */
         this.placement = 'bottom-start';
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
         this.toggle = false;
         this.triggerElementRef = makeRef.makeRef();
     }
@@ -57,7 +64,7 @@ const SplitButton = class {
                 'left-button-border': !hasOutline,
             } });
         const dropdownButtonAttributes = Object.assign(Object.assign({}, baseAttributes), { disabled: this.isDisabledIcon });
-        return (index.h(index.Host, { key: '18955e55bbab4f5899f27cf2b38892c60bece302' }, index.h("div", { key: '8cc32b2686c3e02ee1f2a43d4a5f310cd2930dad', class: { 'btn-group': true, 'middle-gap': !hasOutline } }, this.label ? (index.h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }), this.label)) : (index.h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }))), index.h("ix-icon-button", Object.assign({ key: 'ae7a2875314967f3100d1abcef3528a9822b0503' }, dropdownButtonAttributes, { ref: this.triggerElementRef, class: 'anchor', icon: (_a = this.splitIcon) !== null && _a !== void 0 ? _a : index$1.iconContextMenu, "aria-label": this.ariaLabelSplitIconButton }))), index.h("ix-dropdown", { key: 'd81abc1f01f55f2bc85740898e7f59173e62e182', closeBehavior: this.closeBehavior, trigger: this.triggerElementRef.waitForCurrent() }, index.h("slot", { key: '19c2623131a8ab3799e5a9bb75cc356bf500fffd' }))));
+        return (index.h(index.Host, { key: '034329433940b847951719d6df094e7e799c9b2b' }, index.h("div", { key: 'e08144dd52c338d0cb3a271a95442709a4bd10ba', class: { 'btn-group': true, 'middle-gap': !hasOutline } }, this.label ? (index.h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }), this.label)) : (index.h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }))), index.h("ix-icon-button", Object.assign({ key: '4b7776b9328af463c873eb524e8808966b61fff1' }, dropdownButtonAttributes, { ref: this.triggerElementRef, class: 'anchor', icon: (_a = this.splitIcon) !== null && _a !== void 0 ? _a : index$1.iconContextMenu, "aria-label": this.ariaLabelSplitIconButton }))), index.h("ix-dropdown", { key: 'fbc53f2d73b27ed465a8dc4ae42357a61a6300c7', closeBehavior: this.closeBehavior, trigger: this.triggerElementRef.waitForCurrent(), enableTopLayer: this.enableTopLayer }, index.h("slot", { key: 'e776d44c8f78e89bed7f065edd55168563b0f23c' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-split-button.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-split-button.entry.cjs.js","sources":["src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=shadow","src/components/split-button/split-button.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@use 'mixins/shadow-dom/component';\n@use 'legacy/components/button-group';\n\n:host {\n display: inline-block;\n\n @include component.ix-component;\n\n .btn-group {\n position: relative;\n display: inline-flex;\n vertical-align: middle;\n width: 100%;\n\n > ix-button:nth-child(1),\n > ix-icon-button:nth-child(1) {\n width: calc(100% - 2rem);\n --ix-button-border-radius-right: 0;\n }\n\n > ix-icon-button:nth-child(2) {\n width: 2rem;\n --ix-button-border-radius-left: 0;\n }\n }\n\n .middle-gap {\n gap: 0.125rem;\n }\n\n .left-button-border {\n border-top-width: 0.125rem;\n border-right-width: 0;\n border-left-width: 0.125rem;\n border-bottom-width: 0.125rem;\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} from '@stencil/core';\nimport { ~~AlignedPlacement~~ } from '../dropdown/~~placement~~';\nimport { ~~iconContextMenu~~ } from '~~@siemens~~/~~ix-icons/icons~~';\nimport { ~~CloseBehavior~~ } from '../~~dropdown~~/~~dropdown~~-~~controller~~';\nimport type { SplitButtonVariant } from './split-button.types';\~~nimport { makeRef } from '../utils/make-ref';\~~n\n@Component({\n tag: 'ix-split-button',\n styleUrl: 'split-button.scss',\n shadow: true,\n})\nexport class SplitButton {\n @Element() hostElement!: HTMLIxSplitButtonElement;\n\n /\n Color variant of button\n /\n @Prop() variant: SplitButtonVariant = 'primary';\n\n /\n Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n /\n @Prop() closeBehavior: CloseBehavior = 'both';\n\n /\n Button label\n /\n @Prop() label?: string;\n\n /\n ARIA label for the button (use if no label and icon button)\n \n @since 3.2.0\n /\n @Prop() ariaLabelButton?: string;\n\n /\n Button icon\n /\n @Prop() icon?: string;\n\n /\n Icon of the button on the right\n /\n @Prop() splitIcon?: string;\n\n /\n ARIA label for the split icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelSplitIconButton?: string;\n\n /\n Disabled\n /\n @Prop() disabled = false;\n\n /\n Disables only the main button while keeping the dropdown trigger enabled\n \n @since 4.1.0\n /\n @Prop() disableButton = false;\n\n /\n Disables only the dropdown trigger while keeping the main button enabled\n \n @since 4.1.0\n /\n @Prop() disableDropdownButton = false;\n\n /\n Placement of the dropdown\n /\n @Prop() placement: AlignedPlacement = 'bottom-start';\n\n @State() toggle = false;\n\n /\n Button clicked\n */\n @Event() buttonClick!: EventEmitter<MouseEvent>;\n\n private readonly triggerElementRef = makeRef<HTMLElement>();\n\n private get isDisabledButton() {\n return this.disabled \|\| this.disableButton;\n }\n\n private get isDisabledIcon() {\n return this.disabled \|\| this.disableDropdownButton;\n }\n\n render() {\n const hasOutline = this.variant.toLocaleLowerCase().includes('secondary');\n const baseAttributes = {\n variant: this.variant,\n };\n\n const buttonAttributes = {\n ...baseAttributes,\n disabled: this.isDisabledButton,\n class: {\n 'left-button-border': !hasOutline,\n },\n };\n\n const dropdownButtonAttributes = {\n ...baseAttributes,\n disabled: this.isDisabledIcon,\n };\n\n return (\n <Host>\n <div class={{ 'btn-group': true, 'middle-gap': !hasOutline }}>\n {this.label ? (\n <ix-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\n aria-label={this.ariaLabelButton}\n >\n {this.label}\n </ix-button>\n ) : (\n <ix-icon-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\n aria-label={this.ariaLabelButton}\n ></ix-icon-button>\n )}\n <ix-icon-button\n {...dropdownButtonAttributes}\n ref={this.triggerElementRef}\n class={'anchor'}\n icon={this.splitIcon ?? iconContextMenu}\n aria-label={this.ariaLabelSplitIconButton}\n ></ix-icon-button>\n </div>\n\n <ix-dropdown\n closeBehavior={this.closeBehavior}\n trigger={this.triggerElementRef.waitForCurrent()}\n >\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"names":["makeRef","h","Host","iconContextMenu"],"mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,ikDAAikD;;MC8B3kD,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,SAAS;AAE/C;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAkB,MAAM;AA+B7C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;;;AAIG;AACK,QAAA,IAAa,CAAA,aAAA,GAAG,KAAK;AAE7B;;;;AAIG;AACK,QAAA,IAAqB,CAAA,qBAAA,GAAG,KAAK;AAErC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAqB,cAAc;~~AAE3C~~,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAON,QAAA,IAAiB,CAAA,iBAAA,GAAGA,eAAO,EAAe;~~AAmE5D~~;~~AAjEC~~,IAAA,IAAY,gBAAgB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa;;AAG5C,IAAA,IAAY,cAAc,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,qBAAqB;;IAGpD,MAAM,GAAA;;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC;AACzE,QAAA,MAAM,cAAc,GAAG;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB;QAED,MAAM,gBAAgB,GACjB,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,cAAc,CACjB,EAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,KAAK,EAAE;gBACL,oBAAoB,EAAE,CAAC,UAAU;AAClC,aAAA,EAAA,CACF;QAED,MAAM,wBAAwB,GACzB,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,cAAc,CACjB,EAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,cAAc,EAAA,CAC9B;QAED,QACEC,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,UAAU,EAAE,EAAA,EACzD,IAAI,CAAC,KAAK,IACTA,OAAA,CAAA,WAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACM,gBAAgB,EAAA,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAA,YAAA,EAC5B,IAAI,CAAC,eAAe,EAE/B,CAAA,EAAA,IAAI,CAAC,KAAK,CACD,KAEZA,OAAA,CAAA,gBAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACM,gBAAgB,EAAA,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAC5B,YAAA,EAAA,IAAI,CAAC,eAAe,IAChB,CACnB,EACDA,OACM,CAAA,gBAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,wBAAwB,EAC5B,EAAA,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAIE,uBAAe,EAAA,YAAA,EAC3B,IAAI,CAAC,wBAAwB,EAAA,CAAA,CACzB,CACd,EAENF,OAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,EAAA,~~EAEhDA~~,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACD,CACT;;;;;;;;"}
1	+ {"version":3,"file":"ix-split-button.entry.cjs.js","sources":["src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=shadow","src/components/split-button/split-button.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@use 'mixins/shadow-dom/component';\n@use 'legacy/components/button-group';\n\n:host {\n display: inline-block;\n\n @include component.ix-component;\n\n .btn-group {\n position: relative;\n display: inline-flex;\n vertical-align: middle;\n width: 100%;\n\n > ix-button:nth-child(1),\n > ix-icon-button:nth-child(1) {\n width: calc(100% - 2rem);\n --ix-button-border-radius-right: 0;\n }\n\n > ix-icon-button:nth-child(2) {\n width: 2rem;\n --ix-button-border-radius-left: 0;\n }\n }\n\n .middle-gap {\n gap: 0.125rem;\n }\n\n .left-button-border {\n border-top-width: 0.125rem;\n border-right-width: 0;\n border-left-width: 0.125rem;\n border-bottom-width: 0.125rem;\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 { iconContextMenu } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { CloseBehavior } from '../dropdown/dropdown-controller';\nimport { AlignedPlacement } from '../dropdown/placement';\nimport { makeRef } from '../utils/make-ref';\nimport type { SplitButtonVariant } from './split-button.types';\n\n@Component({\n tag: 'ix-split-button',\n styleUrl: 'split-button.scss',\n shadow: true,\n})\nexport class SplitButton {\n @Element() hostElement!: HTMLIxSplitButtonElement;\n\n /\n Color variant of button\n /\n @Prop() variant: SplitButtonVariant = 'primary';\n\n /\n Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n /\n @Prop() closeBehavior: CloseBehavior = 'both';\n\n /\n Button label\n /\n @Prop() label?: string;\n\n /\n ARIA label for the button (use if no label and icon button)\n \n @since 3.2.0\n /\n @Prop() ariaLabelButton?: string;\n\n /\n Button icon\n /\n @Prop() icon?: string;\n\n /\n Icon of the button on the right\n /\n @Prop() splitIcon?: string;\n\n /\n ARIA label for the split icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelSplitIconButton?: string;\n\n /\n Disabled\n /\n @Prop() disabled = false;\n\n /\n Disables only the main button while keeping the dropdown trigger enabled\n \n @since 4.1.0\n /\n @Prop() disableButton = false;\n\n /\n Disables only the dropdown trigger while keeping the main button enabled\n \n @since 4.1.0\n /\n @Prop() disableDropdownButton = false;\n\n /\n Placement of the dropdown\n /\n @Prop() placement: AlignedPlacement = 'bottom-start';\n\n /\n Enable Popover API rendering for dropdown.\n \n @default false\n * @since 4.3.0\n /\n @Prop() enableTopLayer: boolean = false;\n\n @State() toggle = false;\n\n /\n Button clicked\n */\n @Event() buttonClick!: EventEmitter<MouseEvent>;\n\n private readonly triggerElementRef = makeRef<HTMLElement>();\n\n private get isDisabledButton() {\n return this.disabled \|\| this.disableButton;\n }\n\n private get isDisabledIcon() {\n return this.disabled \|\| this.disableDropdownButton;\n }\n\n render() {\n const hasOutline = this.variant.toLocaleLowerCase().includes('secondary');\n const baseAttributes = {\n variant: this.variant,\n };\n\n const buttonAttributes = {\n ...baseAttributes,\n disabled: this.isDisabledButton,\n class: {\n 'left-button-border': !hasOutline,\n },\n };\n\n const dropdownButtonAttributes = {\n ...baseAttributes,\n disabled: this.isDisabledIcon,\n };\n\n return (\n <Host>\n <div class={{ 'btn-group': true, 'middle-gap': !hasOutline }}>\n {this.label ? (\n <ix-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\n aria-label={this.ariaLabelButton}\n >\n {this.label}\n </ix-button>\n ) : (\n <ix-icon-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\n aria-label={this.ariaLabelButton}\n ></ix-icon-button>\n )}\n <ix-icon-button\n {...dropdownButtonAttributes}\n ref={this.triggerElementRef}\n class={'anchor'}\n icon={this.splitIcon ?? iconContextMenu}\n aria-label={this.ariaLabelSplitIconButton}\n ></ix-icon-button>\n </div>\n\n <ix-dropdown\n closeBehavior={this.closeBehavior}\n trigger={this.triggerElementRef.waitForCurrent()}\n enableTopLayer={this.enableTopLayer}\n >\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"names":["makeRef","h","Host","iconContextMenu"],"mappings":"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"}

package/dist/cjs/ix-tab-item.ix-tabs.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-tab-item.ix-tabs.entry.cjs.js","sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx","src/components/utils/requestAnimationFrame.ts","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.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\n@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px vars.$large-space;\n line-height: 20px;\n font-size: 14px;\n font-weight: bold;\n background-color: var(--theme-tab--background);\n color: var(--theme-tab--color);\n\n @include component.ix-component;\n\n &::after {\n content: '';\n position: absolute;\n background-color: var(--theme-tab-indicator--background);\n width: 100%;\n height: var(--theme-tab-indicator--height);\n left: 0;\n }\n\n .text {\n @include text-truncation.ellipsis;\n\n span,\n span::before {\n pointer-events: none;\n }\n\n vertical-align: middle;\n }\n\n .circle {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 3rem;\n width: 3rem;\n background-color: var(--theme-animated-tab-indicator--background);\n border-radius: 50%;\n border: 2px solid var(--theme-animated-tab-circle--border-color);\n color: var(--theme-an…icon--color);\n cursor: pointer;\n\n &.selected:not(.disabled) {\n background-color: var(--theme-animated-tab-circle--background--selected);\n color: var(--theme-animated-tab-icon--color--selected);\n border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n &:hover {\n background-color: var(\n --theme-animated-tab-circle--background--selected\n );\n }\n }\n\n &:hover {\n background-color: var(--theme-animated-tab-circle--background--hover);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &.disabled {\n background-color: var(--theme-animated-tab-circle--background--disabled);\n border-color: var(--theme-animated-tab-circle--border-color--disabled);\n }\n }\n\n .counter {\n position: absolute;\n z-index: 1;\n height: 16px;\n width: auto;\n background-color: var(--theme-color-1);\n border: 1px solid var(--theme-tab-pill--border-color);\n border-radius: 100px;\n bottom: 6px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: vars.$tiny-space;\n padding-right: vars.$tiny-space;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-pill-outline--color);\n cursor: pointer;\n\n &.selected {\n border-color: var(--theme-tab-pill--border-color--selected);\n }\n\n &.disabled {\n border-color: var(--theme-tab-pill--border-color--disabled);\n }\n }\n\n .hidden {\n display: none;\n }\n}\n\n:host(.circle) {\n height: 72px;\n}\n\n:host(.top) {\n &::after {\n top: 0;\n }\n}\n\n:host(.bottom) {\n &::after {\n bottom: 0;\n }\n}\n\n:host(.stretched) {\n flex-basis: 100%;\n width: 100%;\n @include text-truncation.ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n background-color: var(--theme-tab--background--hover);\n color: var(--theme-tab-color-hover);\n cursor: pointer;\n\n &::after {\n background-color: var(--theme-tab-indicator--background--hover);\n }\n}\n\n:host(:active:not(.circle)) {\n background-color: var(--theme-tab--background--active);\n color: var(--theme-tab-color--active);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--active);\n }\n}\n\n:host(:focus-visible) {\n outline: 0px solid var(--focus--border-color);\n\n .circle {\n outline: 1px solid var(--focus--border-color);\n }\n}\n\n:host(:focus-visible:not(.circle)) {\n outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n pointer-events: none;\n color: var(--theme-tab--color--disabled);\n background-color: var(--theme-tab--background--disabled);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--disabled);\n }\n}\n\n:host(.selected:not(.disabled)) {\n background-color: var(--theme-tab--background--selected);\n color: var(--theme-tab--color--selected);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--selected);\n }\n}\n\n:host(.icon) {\n padding: vars.$large-space vars.$small-space;\n}\n\n:host(.small-tab) {\n height: 32px;\n padding: vars.$default-space;\n}\n\n:host(.small-tab.icon) {\n padding: vars.$default-space vars.$tiny-space;\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { TabClickDetail } from './tab-item.types';\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n shadow: true,\n})\nexport class TabItem {\n /\n Set selected tab\n /\n @Prop() selected = false;\n\n /\n Set disabled tab\n /\n @Prop() disabled = false;\n\n /\n Set small size tab\n /\n @Prop() small = false;\n\n /\n Set icon only tab\n /\n @Prop() icon = false;\n\n /\n Set rounded tab\n /\n @Prop() rounded = false;\n\n /\n Set counter value\n /\n @Prop() counter?: number;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set selected placement\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n Emitted when the tab is clicked.\n /\n @Event() tabClick!: EventEmitter<TabClickDetail>;\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' \| 'stretched';\n placement: 'bottom' \| 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n onClick={(event: MouseEvent) => {\n if (event.defaultPrevented) return;\n\n const clientEvent = this.tabClick.emit({\n nativeEvent: event,\n });\n\n if (clientEvent.defaultPrevented) {\n event.stopPropagation();\n }\n }}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n","/\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\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/\n Prevents angular from change detection when requesting an animation frame\n \n Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n /\nexport const requestAnimationFrameNoNgZone = (\n callback: (...args: any[]) => void\n) => {\n if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n return __zone_symbol__requestAnimationFrame(callback);\n }\n if (typeof requestAnimationFrame === 'function') {\n return requestAnimationFrame(callback);\n }\n return setTimeout(callback);\n};\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n width: auto;\n display: flex;\n align-items: center;\n position: relative;\n\n @include component.ix-component;\n\n .tab-items {\n overflow: hidden;\n scroll-behavior: smooth;\n width: 100%;\n\n .items-content {\n display: flex;\n align-items: center;\n }\n }\n\n .arrow {\n // unset button styles first\n all: unset;\n\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n top: 0;\n bottom: 0;\n left: 0;\n margin: auto 0;\n border-radius: 4px;\n color: var(--theme-btn-tertiary--color);\n background-color: var(--theme-btn-tertiary--background);\n z-index: 2;\n\n &:hover {\n color: var(--theme-btn-tertiary--color--hover);\n background-color: var(--theme-btn-tertiary--background--hover);\n }\n\n &:active {\n color: var(--theme-btn-tertiary--color--active);\n background-color: var(--theme-btn-tertiary--background--active);\n }\n\n &.right {\n left: auto;\n right: 0;\n }\n }\n\n .overflow-shadow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n\n &.shadow-left {\n mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n }\n\n &.shadow-right {\n mask-image: linear-gradient(\n 90deg,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n\n &.shadow-both {\n mask-image: linear-gradient(\n 90deg,\n transparent 0px,\n black 45px,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n iconChevronLeftSmall,\n iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs {\n @Element() hostElement!: HTMLIxTabsElement;\n\n /\n Set tab items to small size\n /\n @Prop() small = false;\n\n /\n Set rounded tabs\n /\n @Prop() rounded = false;\n\n /\n Set default selected tab by index\n /\n @Prop({ mutable: true }) selected = 0;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set placement style\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n ARIA label for the chevron left icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronLeftIconButton?: string;\n\n /\n ARIA label for the chevron right icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronRightIconButton?: string;\n\n /\n `selected` property changed\n /\n @Event() selectedChange!: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() scrollActionAmount = 0;\n @State() showArrowPrevious = false;\n @State() showArrowNext = false;\n\n private windowStartSize = window.innerWidth;\n private resizeObserver?: ResizeObserver;\n\n private clickAction: {\n timeout: NodeJS.Timeout \| null;\n isClick: boolean;\n } = {\n timeout: null,\n isClick: true,\n };\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.totalItems = 0;\n this.totalItems = this.getTabs().length;\n\n if (this.windowStartSize === 0)\n return (this.windowStartSize = window.innerWidth);\n this.move(this.windowStartSize - window.innerWidth);\n this.windowStartSize = window.innerWidth;\n }\n\n private getTabs() {\n return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n }\n\n private getTab(tabIndex: number) {\n return this.getTabs()[tabIndex];\n }\n\n private getTabsWrapper() {\n return this.hostElement.shadowRoot?.querySelector('.items-content');\n }\n\n private initResizeObserver() {\n const parentElement = this.hostElement.parentElement;\n if (!parentElement) return;\n this.resizeObserver = new ResizeObserver(() => {\n this.renderArrows();\n });\n this.resizeObserver.observe(parentElement);\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper &&\n tabWrapper.scrollWidth >\n Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n this.layout === 'auto'\n );\n } catch (error) {\n return false;\n }\n }\n\n private showPreviousArrow() {\n try {\n return this.showArrows() === true && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n\n if (!tabWrapper) {\n return false;\n }\n\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() === true &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private move(amount: number, click = false) {\n const tabsWrapper = this.getTabsWrapper();\n\n if (!tabsWrapper) {\n return;\n }\n\n const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n const maxScrollWidth =\n -this.currentScrollAmount +\n tabsWrapperVisibleWidth -\n tabsWrapper.scrollWidth;\n\n amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n amount += this.currentScrollAmount;\n amount = Math.min(amount, 0);\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabsWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n @Watch('selected')\n onSelectedChange(newValue: number) {\n if (!this.showArrows()) return;\n\n const tabRect = this.getTab(newValue).getBoundingClientRect();\n const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n const arrowWidth = 32;\n\n if (tabRect.left < arrowWidth) {\n this.move(-tabRect.left + arrowWidth, true);\n } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n }\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (!this.clickAction.isClick \|\| this.dragStop()) {\n return;\n }\n\n const { defaultPrevented } = this.selectedChange.emit(index);\n if (defaultPrevented) {\n return;\n }\n\n this.setSelected(index);\n }\n\n private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n if (!this.showArrows()) return;\n if (event.button > 0) return;\n\n this.clickAction.timeout =\n this.clickAction.timeout === null\n ? setTimeout(() => (this.clickAction.isClick = false), 300)\n : null;\n\n const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n const mousedownPositionX = event.clientX;\n const move = (event: MouseEvent) =>\n this.dragMove(event, tabPositionX, mousedownPositionX);\n const windowClick = () => {\n window.removeEventListener('mousemove', move, false);\n window.removeEventListener('click', windowClick, false);\n this.dragStop();\n };\n window.addEventListener('click', windowClick);\n window.addEventListener('mousemove', move, false);\n }\n\n private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n this.move(event.clientX + tabX - mousedownX);\n }\n\n private dragStop() {\n if (this.clickAction.timeout) {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n }\n\n if (this.clickAction.isClick) return false;\n\n this.currentScrollAmount = this.scrollActionAmount;\n this.clickAction.isClick = true;\n\n return true;\n }\n\n componentWillLoad() {\n const tabs = this.getTabs();\n\n tabs.map((element, index) => {\n if (this.small) element.setAttribute('small', 'true');\n\n if (this.rounded) element.setAttribute('rounded', 'true');\n\n element.setAttribute('layout', this.layout);\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n\n element.setAttribute('placement', this.placement);\n });\n\n this.initResizeObserver();\n }\n\n componentDidRender() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n tabs.map((element, index) => {\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n });\n }\n\n componentWillRender() {\n this.renderArrows();\n }\n\n private renderArrows() {\n requestAnimationFrameNoNgZone(() => {\n this.showArrowNext = this.showNextArrow();\n this.showArrowPrevious = this.showPreviousArrow();\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element) => {\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n @Listen('tabClick')\n onTabClick(event: CustomEvent) {\n if (event.defaultPrevented) {\n return;\n }\n\n const target = event.target;\n const tabs = this.getTabs();\n\n tabs.forEach((tab, index) => {\n if (!tab.disabled && tab === target) {\n this.clickTab(index);\n }\n });\n }\n\n render() {\n return (\n <Host>\n {this.showArrowPrevious && (\n <button\n class=\"arrow\"\n onClick={() => this.move(this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronLeftIconButton}\n >\n <ix-icon name={iconChevronLeftSmall}></ix-icon>\n </button>\n )}\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showArrowPrevious,\n 'shadow-right': this.showArrowNext,\n 'shadow-both': this.showArrowNext && this.showArrowPrevious,\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n {this.showArrowNext && (\n <button\n class=\"arrow right\"\n onClick={() => this.move(-this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronRightIconButton}\n >\n <ix-icon name={iconChevronRightSmall}></ix-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"names":["h","Host","iconChevronLeftSmall","iconChevronRightSmall"],"mappings":"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"}
1	+ {"version":3,"file":"ix-tab-item.ix-tabs.entry.cjs.js","sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.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\n@use './common-variables' as vars;\n@use 'mixins/text-truncation';\n@use 'mixins/hover';\n@use 'mixins/shadow-dom/component';\n\n:host {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px vars.$large-space;\n line-height: 20px;\n font-size: 14px;\n font-weight: bold;\n background-color: var(--theme-tab--background);\n color: var(--theme-tab--color);\n\n @include component.ix-component;\n\n &::after {\n content: '';\n position: absolute;\n background-color: var(--theme-tab-indicator--background);\n width: 100%;\n height: var(--theme-tab-indicator--height);\n left: 0;\n }\n\n .text {\n @include text-truncation.ellipsis;\n\n span,\n span::before {\n pointer-events: none;\n }\n\n vertical-align: middle;\n }\n\n .circle {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 3rem;\n width: 3rem;\n background-color: var(--theme-animated-tab-indicator--background);\n border-radius: 50%;\n border: 2px solid var(--theme-animated-tab-circle--border-color);\n color: var(--theme-an…icon--color);\n cursor: pointer;\n\n &.selected:not(.disabled) {\n background-color: var(--theme-animated-tab-circle--background--selected);\n color: var(--theme-animated-tab-icon--color--selected);\n border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n &:hover {\n background-color: var(\n --theme-animated-tab-circle--background--selected\n );\n }\n }\n\n &:hover {\n background-color: var(--theme-animated-tab-circle--background--hover);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &.disabled {\n background-color: var(--theme-animated-tab-circle--background--disabled);\n border-color: var(--theme-animated-tab-circle--border-color--disabled);\n }\n }\n\n .counter {\n position: absolute;\n z-index: 1;\n height: 16px;\n width: auto;\n background-color: var(--theme-color-1);\n border: 1px solid var(--theme-tab-pill--border-color);\n border-radius: 100px;\n bottom: 6px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: vars.$tiny-space;\n padding-right: vars.$tiny-space;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-pill-outline--color);\n cursor: pointer;\n\n &.selected {\n border-color: var(--theme-tab-pill--border-color--selected);\n }\n\n &.disabled {\n border-color: var(--theme-tab-pill--border-color--disabled);\n }\n }\n\n .hidden {\n display: none;\n }\n}\n\n:host(.circle) {\n height: 72px;\n}\n\n:host(.top) {\n &::after {\n top: 0;\n }\n}\n\n:host(.bottom) {\n &::after {\n bottom: 0;\n }\n}\n\n:host(.stretched) {\n flex-basis: 100%;\n width: 100%;\n @include text-truncation.ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n background-color: var(--theme-tab--background--hover);\n color: var(--theme-tab-color-hover);\n cursor: pointer;\n\n &::after {\n background-color: var(--theme-tab-indicator--background--hover);\n }\n}\n\n:host(:active:not(.circle)) {\n background-color: var(--theme-tab--background--active);\n color: var(--theme-tab-color--active);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--active);\n }\n}\n\n:host(:focus-visible) {\n outline: 0px solid var(--focus--border-color);\n\n .circle {\n outline: 1px solid var(--focus--border-color);\n }\n}\n\n:host(:focus-visible:not(.circle)) {\n outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n pointer-events: none;\n color: var(--theme-tab--color--disabled);\n background-color: var(--theme-tab--background--disabled);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--disabled);\n }\n}\n\n:host(.selected:not(.disabled)) {\n background-color: var(--theme-tab--background--selected);\n color: var(--theme-tab--color--selected);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--selected);\n }\n}\n\n:host(.icon) {\n padding: vars.$large-space vars.$small-space;\n}\n\n:host(.small-tab) {\n height: 32px;\n padding: vars.$default-space;\n}\n\n:host(.small-tab.icon) {\n padding: vars.$default-space vars.$tiny-space;\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { TabClickDetail } from './tab-item.types';\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n shadow: true,\n})\nexport class TabItem {\n /\n Set selected tab\n /\n @Prop() selected = false;\n\n /\n Set disabled tab\n /\n @Prop() disabled = false;\n\n /\n Set small size tab\n /\n @Prop() small = false;\n\n /\n Set icon only tab\n /\n @Prop() icon = false;\n\n /\n Set rounded tab\n /\n @Prop() rounded = false;\n\n /\n Set counter value\n /\n @Prop() counter?: number;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set selected placement\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n Emitted when the tab is clicked.\n /\n @Event() tabClick!: EventEmitter<TabClickDetail>;\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' \| 'stretched';\n placement: 'bottom' \| 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n onClick={(event: MouseEvent) => {\n if (event.defaultPrevented) return;\n\n const clientEvent = this.tabClick.emit({\n nativeEvent: event,\n });\n\n if (clientEvent.defaultPrevented) {\n event.stopPropagation();\n }\n }}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n width: auto;\n display: flex;\n align-items: center;\n position: relative;\n\n @include component.ix-component;\n\n .tab-items {\n overflow: hidden;\n scroll-behavior: smooth;\n width: 100%;\n\n .items-content {\n display: flex;\n align-items: center;\n }\n }\n\n .arrow {\n // unset button styles first\n all: unset;\n\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n top: 0;\n bottom: 0;\n left: 0;\n margin: auto 0;\n border-radius: 4px;\n color: var(--theme-btn-tertiary--color);\n background-color: var(--theme-btn-tertiary--background);\n z-index: 2;\n\n &:hover {\n color: var(--theme-btn-tertiary--color--hover);\n background-color: var(--theme-btn-tertiary--background--hover);\n }\n\n &:active {\n color: var(--theme-btn-tertiary--color--active);\n background-color: var(--theme-btn-tertiary--background--active);\n }\n\n &.right {\n left: auto;\n right: 0;\n }\n }\n\n .overflow-shadow {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n pointer-events: all;\n\n &.shadow-left {\n mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n }\n\n &.shadow-right {\n mask-image: linear-gradient(\n 90deg,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n\n &.shadow-both {\n mask-image: linear-gradient(\n 90deg,\n transparent 0px,\n black 45px,\n black calc(100% - 45px),\n transparent 100%\n );\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n iconChevronLeftSmall,\n iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\ntype ManagedClass =\n (typeof TAB_MANAGED_CLASSES)[keyof typeof TAB_MANAGED_CLASSES];\n\nconst TAB_MANAGED_CLASSES = {\n SELECTED: 'selected',\n DISABLED: 'disabled',\n SMALL_TAB: 'small-tab',\n ICON: 'icon',\n STRETCHED: 'stretched',\n BOTTOM: 'bottom',\n TOP: 'top',\n CIRCLE: 'circle',\n HYDRATED: 'hydrated',\n} as const;\n\nconst MANAGED_CLASSES_SET = new Set(\n Object.values(TAB_MANAGED_CLASSES) as ManagedClass[]\n);\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs {\n @Element() hostElement!: HTMLIxTabsElement;\n\n /\n Set tab items to small size\n /\n @Prop() small = false;\n\n /\n Set rounded tabs\n /\n @Prop() rounded = false;\n\n /\n Set default selected tab by index\n /\n @Prop({ mutable: true }) selected = 0;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set placement style\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n ARIA label for the chevron left icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronLeftIconButton?: string;\n\n /\n ARIA label for the chevron right icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronRightIconButton?: string;\n\n /\n `selected` property changed\n /\n @Event() selectedChange!: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() scrollActionAmount = 0;\n @State() showArrowPrevious = false;\n @State() showArrowNext = false;\n\n private windowStartSize = window.innerWidth;\n private resizeObserver?: ResizeObserver;\n private readonly ARROW_WIDTH = 32;\n private classObserver?: MutationObserver;\n private updateScheduled = false;\n\n private clickAction: {\n timeout: NodeJS.Timeout \| null;\n isClick: boolean;\n } = {\n timeout: null,\n isClick: true,\n };\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.totalItems = 0;\n this.totalItems = this.getTabs().length;\n\n if (this.windowStartSize === 0)\n return (this.windowStartSize = window.innerWidth);\n this.move(this.windowStartSize - window.innerWidth);\n this.windowStartSize = window.innerWidth;\n }\n\n private getTabs() {\n return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n }\n\n private getTab(tabIndex: number) {\n return this.getTabs()[tabIndex];\n }\n\n private getTabsWrapper() {\n return this.hostElement.shadowRoot?.querySelector('.items-content');\n }\n\n private getTabsContainer() {\n return this.hostElement.shadowRoot?.querySelector('.tab-items');\n }\n\n private initResizeObserver() {\n const parentElement = this.hostElement.parentElement;\n if (!parentElement) return;\n this.resizeObserver = new ResizeObserver(() => {\n this.renderArrows();\n });\n this.resizeObserver.observe(parentElement);\n }\n\n private observeSlotChanges() {\n this.classObserver?.disconnect();\n\n this.classObserver = new MutationObserver(() => {\n this.scheduleTabUpdate();\n });\n\n this.classObserver.observe(this.hostElement, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['class'],\n });\n }\n\n private scheduleTabUpdate() {\n if (this.updateScheduled) return;\n this.updateScheduled = true;\n\n requestAnimationFrame(() => {\n this.updateTabAttributes();\n this.updateScheduled = false;\n });\n }\n\n private setTabAttributes(element: HTMLIxTabItemElement, index: number) {\n const isSelected = index === this.selected;\n const isDisabled = element.disabled;\n\n if (this.small) element.setAttribute('small', 'true');\n\n if (this.rounded) element.setAttribute('rounded', 'true');\n\n element.setAttribute('layout', this.layout);\n element.setAttribute('selected', isSelected.toString());\n element.setAttribute('placement', this.placement);\n element.toggleAttribute('disabled', isDisabled);\n\n this.applyRequiredClasses(element, isSelected, isDisabled);\n }\n\n private applyRequiredClasses(\n element: HTMLIxTabItemElement,\n isSelected: boolean,\n isDisabled: boolean\n ) {\n const requiredClasses = new Set(\n this.buildRequiredClasses(isSelected, isDisabled)\n );\n const { classList } = element;\n\n for (const cls of requiredClasses) {\n classList.add(cls);\n }\n\n for (const managedClass of MANAGED_CLASSES_SET) {\n if (!requiredClasses.has(managedClass)) {\n classList.remove(managedClass);\n }\n }\n }\n\n private buildRequiredClasses(\n isSelected: boolean,\n isDisabled: boolean\n ): string[] {\n const classConditions = {\n [TAB_MANAGED_CLASSES.HYDRATED]: true,\n [TAB_MANAGED_CLASSES.SELECTED]: isSelected,\n [TAB_MANAGED_CLASSES.DISABLED]: isDisabled,\n [TAB_MANAGED_CLASSES.SMALL_TAB]: this.small,\n [TAB_MANAGED_CLASSES.STRETCHED]: this.layout === 'stretched',\n [TAB_MANAGED_CLASSES.BOTTOM]: this.placement === 'bottom',\n [TAB_MANAGED_CLASSES.TOP]: this.placement === 'top',\n [TAB_MANAGED_CLASSES.CIRCLE]: this.rounded,\n };\n\n return Object.entries(classConditions)\n .filter(([, condition]) => condition)\n .map(([className]) => className);\n }\n\n private ensureSelectedIndex() {\n if (this.totalItems === 0) {\n console.warn('ix-tabs: No tabs available for selection');\n this.selected = -1;\n return;\n }\n\n if (this.selected < this.totalItems) {\n return;\n }\n\n const originalIndex = this.selected;\n const previousIndex = originalIndex - 1;\n\n if (previousIndex >= 0 && previousIndex < this.totalItems) {\n this.updateSelected(previousIndex);\n return;\n }\n\n if (this.totalItems > 0) {\n this.updateSelected(0);\n }\n }\n\n private updateSelected(index: number) {\n this.selected = index;\n this.selectedChange.emit(index);\n }\n\n private updateTabAttributes() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n this.ensureSelectedIndex();\n\n for (const [index, element] of tabs.entries()) {\n this.setTabAttributes(element, index);\n }\n\n this.renderArrows();\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper &&\n tabWrapper.scrollWidth >\n Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n this.layout === 'auto'\n );\n } catch (error) {\n return false;\n }\n }\n\n private showPreviousArrow() {\n try {\n return this.showArrows() === true && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n\n if (!tabWrapper) {\n return false;\n }\n\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() === true &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private move(amount: number, click = false) {\n const tabsWrapper = this.getTabsWrapper();\n\n if (!tabsWrapper) {\n return;\n }\n\n const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n const maxScrollWidth =\n -this.currentScrollAmount +\n tabsWrapperVisibleWidth -\n tabsWrapper.scrollWidth;\n\n amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n amount += this.currentScrollAmount;\n amount = Math.min(amount, 0);\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabsWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n @Watch('selected')\n onSelectedChange(newValue: number) {\n if (!this.showArrows()) return;\n\n const tab = this.getTab(newValue);\n const container = this.getTabsContainer();\n\n if (!tab \|\| !container) return;\n\n const containerRect = container.getBoundingClientRect();\n const tabRect = tab.getBoundingClientRect();\n const tabLeftRelative = tabRect.left - containerRect.left;\n const tabRightRelative = tabLeftRelative + tabRect.width;\n\n if (tabLeftRelative < this.ARROW_WIDTH) {\n this.move(-tabLeftRelative + this.ARROW_WIDTH, true);\n } else if (tabRightRelative > containerRect.width - this.ARROW_WIDTH) {\n this.move(\n containerRect.width - tabRightRelative - this.ARROW_WIDTH,\n true\n );\n }\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (!this.clickAction.isClick \|\| this.dragStop()) {\n return;\n }\n\n const { defaultPrevented } = this.selectedChange.emit(index);\n if (defaultPrevented) {\n return;\n }\n\n this.setSelected(index);\n }\n\n private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n if (!this.showArrows()) return;\n if (event.button > 0) return;\n\n this.clickAction.timeout =\n this.clickAction.timeout === null\n ? setTimeout(() => (this.clickAction.isClick = false), 300)\n : null;\n\n const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n const mousedownPositionX = event.clientX;\n const move = (event: MouseEvent) =>\n this.dragMove(event, tabPositionX, mousedownPositionX);\n const windowClick = () => {\n window.removeEventListener('mousemove', move, false);\n window.removeEventListener('click', windowClick, false);\n this.dragStop();\n };\n window.addEventListener('click', windowClick);\n window.addEventListener('mousemove', move, false);\n }\n\n private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n this.move(event.clientX + tabX - mousedownX);\n }\n\n private dragStop() {\n if (this.clickAction.timeout) {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n }\n\n if (this.clickAction.isClick) return false;\n\n this.currentScrollAmount = this.scrollActionAmount;\n this.clickAction.isClick = true;\n\n return true;\n }\n\n componentWillLoad() {\n this.initResizeObserver();\n }\n\n componentDidRender() {\n this.updateTabAttributes();\n }\n\n componentWillRender() {\n this.renderArrows();\n }\n\n private renderArrows() {\n requestAnimationFrameNoNgZone(() => {\n this.showArrowNext = this.showNextArrow();\n this.showArrowPrevious = this.showPreviousArrow();\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element) => {\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n\n this.observeSlotChanges();\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.classObserver?.disconnect();\n }\n\n @Listen('tabClick')\n onTabClick(event: CustomEvent) {\n if (event.defaultPrevented) {\n return;\n }\n\n const target = event.target;\n const tabs = this.getTabs();\n\n tabs.forEach((tab, index) => {\n if (!tab.disabled && tab === target) {\n this.clickTab(index);\n }\n });\n }\n\n render() {\n return (\n <Host>\n {this.showArrowPrevious && (\n <button\n class=\"arrow\"\n onClick={() => this.move(this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronLeftIconButton}\n >\n <ix-icon name={iconChevronLeftSmall}></ix-icon>\n </button>\n )}\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showArrowPrevious,\n 'shadow-right': this.showArrowNext,\n 'shadow-both': this.showArrowNext && this.showArrowPrevious,\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n {this.showArrowNext && (\n <button\n class=\"arrow right\"\n onClick={() => this.move(-this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronRightIconButton}\n >\n <ix-icon name={iconChevronRightSmall}></ix-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"names":["h","Host","requestAnimationFrameNoNgZone","iconChevronLeftSmall","iconChevronRightSmall"],"mappings":"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"}