@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.7

package/dist/collection/components/input/input.js

@@ -4,7 +4,7 @@
 import { __decorate, __metadata } from "tslib";
 import { h } from "@stencil/core";
 import isNil from "lodash/isNil";
-import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, hasValue, OneOf, Type, } from "../../utils/index";
 import { ACTION_KEYS, isCtrlOrCommandKey } from "../../global/index";
 import { InputMaskUtil } from "./input.mask";
 import { getMask } from "./masks";
@@ -202,7 +202,6 @@ export class Input {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         this.debounceChanged();
         this.maskChanged();
         this.control.connectedCallback();
@@ -248,7 +247,7 @@ export class Input {
     }
     getFormattedValue() {
         const value = this.getRawValue();
-        const suffix = this.suffix !== undefined && value !== undefined && value !== '' ? ' ' + this.suffix : '';
+        const suffix = hasValue(this.suffix) && hasValue(value) ? ' ' + this.suffix : '';
         return `${value}${suffix}`;
     }
     /**
@@ -258,17 +257,17 @@ export class Input {
     render() {
         var _a;
         let value;
-        if (this.mask) {
+        if (hasValue(this.mask)) {
             value = (_a = this.maskUtil.format(this.getRawValue())) !== null && _a !== void 0 ? _a : this.getRawValue();
         }
         else {
             value = this.focused ? this.getRawValue() : this.getFormattedValue();
         }
         let inputProps = {};
-        if (this.pattern) {
+        if (hasValue(this.pattern)) {
             inputProps = { pattern: this.pattern };
         }
-        return (h(Field, { key: '812474583ab9af7ac3156efe5bd7e44f904733e6', disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: '5c94b1ed5a483ccda801c984552a73c6f352cb1f', id: "input", part: "input", name: this.name, ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, accept: this.accept, inputMode: this.inputmode, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autocorrect: this.autocorrect, autofocus: this.autofocus, min: this.min, max: this.max, minLength: this.minLength, maxLength: this.maxLength, multiple: this.multiple, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: value, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onInput: ev => this.handleInput(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, inputProps, this.inheritedAttributes))));
+        return (h(Field, { key: 'babef5825e546b7b80315ed7b83240d2b82562c0', disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: '57f52c5591d793be3c19ab144f497d793bffbeed', id: "input", part: "input", name: this.name, ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, accept: this.accept, inputMode: this.inputmode, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autocorrect: this.autocorrect, autofocus: this.autofocus, min: this.min, max: this.max, minLength: this.minLength, maxLength: this.maxLength, multiple: this.multiple, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: value, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onInput: ev => this.handleInput(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, inputProps, this.inheritedAttributes))));
     }
     static get is() { return "ds-input"; }
     static get encapsulation() { return "shadow"; }
@@ -321,7 +320,7 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "this.inputId"
             },
@@ -1213,123 +1212,123 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Input.prototype, "createLogger", null);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", Object)
 ], Input.prototype, "value", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "name", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "label", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "description", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_COLORS),
+    OneOf(INPUT_COLORS),
     __metadata("design:type", String)
 ], Input.prototype, "color", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "loading", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "invalidText", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_INPUT_TYPES),
+    OneOf(INPUT_INPUT_TYPES),
     __metadata("design:type", String)
 ], Input.prototype, "type", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "accept", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "autocapitalize", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_AUTOCOMPLETES),
+    OneOf(INPUT_AUTOCOMPLETES),
     __metadata("design:type", String)
 ], Input.prototype, "autocomplete", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_AUTOCORRECTS),
+    OneOf(INPUT_AUTOCORRECTS),
     __metadata("design:type", String)
 ], Input.prototype, "autocorrect", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "autofocus", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Input.prototype, "debounce", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "placeholder", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "max", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Input.prototype, "maxLength", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "min", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Input.prototype, "minLength", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "multiple", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "pattern", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "allowedKeyPress", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "required", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "spellcheck", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "readonly", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "suffix", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_INPUT_MODES),
+    OneOf(INPUT_INPUT_MODES),
     __metadata("design:type", String)
 ], Input.prototype, "inputmode", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_MASKS),
+    OneOf(INPUT_MASKS),
     __metadata("design:type", String)
 ], Input.prototype, "mask", void 0);
 __decorate([

package/dist/collection/components/input/test/input.component.play.js

@@ -38,7 +38,7 @@ test.describe('disabled', () => {
         expect(inputSpy).toHaveReceivedEventTimes(0);
     });
 });
-test.describe('form reset', () => {
+test.describe.skip('form reset', () => {
     test('should reset to initial value', async ({ page }) => {
         await page.mount(`
       <form>

package/dist/collection/components/input/trigger-button.i18n.js

@@ -0,0 +1,45 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const i18nDsTriggerButton = {
+    de: {
+        openCalendar: 'Kalender öffnen',
+        chooseDate: 'Datum auswählen',
+    },
+    en: {
+        openCalendar: 'Open calendar',
+        chooseDate: 'Choose date',
+    },
+    fr: {
+        openCalendar: 'Ouvrir le calendrier',
+        chooseDate: 'Choisir une date',
+    },
+    it: {
+        openCalendar: 'Apri il calendario',
+        chooseDate: 'Scegli una data',
+    },
+    nl: {
+        openCalendar: 'Kalender openen',
+        chooseDate: 'Datum kiezen',
+    },
+    es: {
+        openCalendar: 'Abrir calendario',
+        chooseDate: 'Elegir fecha',
+    },
+    pl: {
+        openCalendar: 'Otwórz kalendarz',
+        chooseDate: 'Wybierz datę',
+    },
+    pt: {
+        openCalendar: 'Abrir calendário',
+        chooseDate: 'Escolher data',
+    },
+    sv: {
+        openCalendar: 'Öppna kalender',
+        chooseDate: 'Välj datum',
+    },
+    fi: {
+        openCalendar: 'Avaa kalenteri',
+        chooseDate: 'Valitse päivämäärä',
+    },
+};

package/dist/collection/components/input-slider/input-slider.host.css

@@ -0,0 +1 @@
+.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;height:100%;width:100%;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit !important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;bottom:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#fafafa;border-radius:4px;border:1px solid #d3d3d3;box-shadow:inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb}.noUi-connects{border-radius:3px}.noUi-connect{background:#3fb8af}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #d9d9d9;border-radius:3px;background:#fff;cursor:default;box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb}.noUi-active{box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb}.noUi-handle:before,.noUi-handle:after{content:"";display:block;position:absolute;height:14px;width:1px;background:#e8e7e6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:before,.noUi-vertical .noUi-handle:after{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#b8b8b8}[disabled].noUi-target,[disabled].noUi-handle,[disabled] .noUi-handle{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#ccc}.noUi-marker-sub{background:#aaa}.noUi-marker-large{background:#aaa}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0, -50%);transform:translate(0, -50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0, 50%);transform:translate(0, 50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #d9d9d9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0, -50%);transform:translate(0, -50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%, 0);transform:translate(50%, 0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0, -18px);transform:translate(0, -18px);top:auto;right:28px}:host{--_form-field-gap: var(--form-field-gap, var(--mod-form-field-gap, 0.25rem));--_form-label-color: var(--form-label-color, var(--mod-form-label-color, var(--ds-form-label-color-base)));--_form-label-family: var(--form-label-family, var(--mod-form-label-family, var(--ds-form-label-family)));--_form-label-weight: var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-label-weight)));--_form-label-line-height: var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-label-line-height)));--_form-label-size: var(--form-label-size, var(--mod-form-label-size, var(--ds-form-label-size-device)));--_form-description-color: var(--form-description-color, var(--mod-form-description-color, var(--ds-form-description-color-base)));--_form-description-family: var(--form-description-family, var(--mod-form-description-family, var(--ds-form-description-family)));--_form-description-weight: var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-description-weight)));--_form-description-line-height: var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-description-line-height)));--_form-description-size: var(--form-description-size, var(--mod-form-description-size, var(--ds-form-description-size-device)));--_input-slider-track-height: var(--input-slider-track-height, var(--mod-input-slider-track-height, 0.75rem));--_input-slider-track-radius: var(--input-slider-track-radius, var(--mod-input-slider-track-radius, var(--ds-alias-radius-rounded)));--_input-slider-track-color: var(--input-slider-track-color, var(--mod-input-slider-track-color, var(--ds-global-color-grey-2)));--_input-slider-connect-color: var(--input-slider-connect-color, var(--mod-input-slider-connect-color, var(--ds-global-color-primary-5)));--_input-slider-thumb-size: var(--input-slider-thumb-size, var(--mod-input-slider-thumb-size, 1.5rem));--_input-slider-thumb-radius: var(--input-slider-thumb-radius, var(--mod-input-slider-thumb-radius, var(--ds-alias-radius-rounded)));--_input-slider-thumb-color: var(--input-slider-thumb-color, var(--mod-input-slider-thumb-color, var(--ds-global-color-white)));--_input-slider-thumb-hover-color: var(--input-slider-thumb-hover-color, var(--mod-input-slider-thumb-hover-color, var(--ds-global-color-sky-1)));--_input-slider-thumb-active-color: var(--input-slider-thumb-active-color, var(--mod-input-slider-thumb-active-color, var(--ds-global-color-sky-1)));--_input-slider-thumb-border-color: var(--input-slider-thumb-border-color, var(--mod-input-slider-thumb-border-color, var(--ds-global-color-primary-5)));--_input-slider-thumb-border-color-hover: var(--input-slider-thumb-border-color-hover, var(--mod-input-slider-thumb-border-color-hover, var(--ds-global-color-sky-5)));--_input-slider-thumb-border-color-active: var(--input-slider-thumb-border-color-active, var(--mod-input-slider-thumb-border-color-active, var(--ds-global-color-primary-6)))}:host{position:relative;display:grid;gap:var(--_form-field-gap)}:host #container{box-sizing:border-box;clear:both;display:flex;width:100%;align-items:center;min-height:3rem;gap:.25rem}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_form-label-color);font-family:var(--_form-label-family);font-weight:var(--_form-label-weight);font-size:var(--_form-label-size);line-height:var(--_form-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_form-description-color);font-family:var(--_form-description-family);font-weight:var(--_form-description-weight);font-size:var(--_form-description-size);line-height:var(--_form-description-line-height)}:host #description ds-icon{--icon-color: var(--_form-description-color)}:host #container{padding-inline:calc(var(--_input-slider-thumb-size)/2)}:host #slider{width:100%;cursor:pointer;height:var(--_input-slider-track-height);background:var(--_input-slider-track-color);border:none;border-radius:var(--_input-slider-track-radius);box-shadow:none}:host .noUi-connects{border-radius:var(--_input-slider-track-radius)}:host .noUi-connect{background:var(--_input-slider-connect-color)}:host .noUi-handle{width:var(--_input-slider-thumb-size);height:var(--_input-slider-thumb-size);top:calc((var(--_input-slider-track-height) - var(--_input-slider-thumb-size))/2);right:calc(var(--_input-slider-thumb-size)/-2);background:var(--_input-slider-thumb-color);border:2px solid var(--_input-slider-thumb-border-color);border-radius:var(--_input-slider-thumb-radius);box-shadow:#fff 0 0 0 2px;cursor:grab}:host .noUi-handle::before,:host .noUi-handle::after{display:none}@media(hover: hover)and (pointer: fine){:host .noUi-handle:hover{background:var(--_input-slider-thumb-hover-color);border-color:var(--_input-slider-thumb-border-color-hover)}}:host .noUi-handle:active,:host .noUi-handle.noUi-active{background:var(--_input-slider-thumb-active-color);border-color:var(--_input-slider-thumb-border-color-active);cursor:grabbing}:host .noUi-handle:focus-visible{outline:none}@media(hover: hover)and (pointer: fine){:host .noUi-handle:focus-visible{box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}:host .noUi-tooltip{background:var(--ds-global-color-primary-5);color:var(--ds-global-color-white);font-size:var(--ds-alias-font-size-small);font-weight:var(--ds-alias-text-weight-bold);font-family:var(--ds-alias-text-family-body);border-radius:var(--ds-alias-radius-rounded);line-height:1;padding:.4rem .4rem;bottom:130%;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%, 4px);transition:opacity 120ms cubic-bezier(0.4, 0, 1, 1),transform 120ms cubic-bezier(0.4, 0, 1, 1),visibility 0ms linear 120ms;will-change:opacity,transform}:host .noUi-handle.noUi-active .noUi-tooltip,:host .noUi-handle:hover .noUi-tooltip,:host .noUi-handle:active .noUi-tooltip,:host .noUi-handle:focus-visible .noUi-tooltip{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%, 0);transition:opacity 200ms cubic-bezier(0, 0, 0.2, 1),transform 200ms cubic-bezier(0, 0, 0.2, 1),visibility 0ms linear 0ms}@media(prefers-reduced-motion: reduce){:host .noUi-tooltip{transition:none !important}}:host(.is-danger){--mod-form-description-color: var(--ds-form-description-color-danger);--mod-input-slider-connect-color: var(--ds-form-container-color-danger-border);--mod-input-slider-thumb-border-color: var(--ds-form-container-color-danger-border)}:host(.is-success){--mod-form-description-color: var(--ds-form-description-color-success);--mod-input-slider-connect-color: var(--ds-form-container-color-success-border);--mod-input-slider-thumb-border-color: var(--ds-form-container-color-success-border)}:host(.is-warning){--mod-form-description-color: var(--ds-form-description-color-warning);--mod-input-slider-connect-color: var(--ds-form-container-color-warning-border);--mod-input-slider-thumb-border-color: var(--ds-form-container-color-warning-border)}:host(.is-brand-yellow){--mod-input-slider-track-color: var(--ds-global-color-yellow-2);--mod-input-slider-connect-color: var(--ds-global-color-yellow-4)}:host(.is-brand-purple){--mod-input-slider-track-color: var(--ds-global-color-purple-2);--mod-input-slider-connect-color: var(--ds-global-color-purple-4)}:host(.is-brand-red){--mod-input-slider-track-color: var(--ds-global-color-red-2);--mod-input-slider-connect-color: var(--ds-global-color-red-4)}:host(.is-brand-green){--mod-input-slider-track-color: var(--ds-global-color-green-2);--mod-input-slider-connect-color: var(--ds-global-color-green-4)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #slider{pointer-events:none;cursor:default}:host(.is-disabled){--mod-form-label-color: var(--ds-form-label-color-disabled);--mod-form-description-color: var(--ds-form-description-color-disabled);--mod-input-slider-track-color: var(--ds-global-color-grey-1);--mod-input-slider-connect-color: var(--ds-global-color-grey-3);--mod-input-slider-thumb-color: var(--ds-global-color-grey-3);--mod-input-slider-thumb-border-color: var(--ds-global-color-grey-3)}:host(.is-disabled) .noUi-handle{cursor:default}

package/dist/collection/components/input-slider/input-slider.interfaces.js

@@ -0,0 +1,4 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const INPUT_SLIDER_BRAND_COLORS = ['yellow', 'purple', 'red', 'green', ''];