@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

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

@@ -1,974 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { __decorate, __metadata } from "tslib";
-import { h, } from "@stencil/core";
-import isNaN from "lodash/isNaN";
-import { inheritAttributes, debounceEvent, hasValue, isValueEmpty, Logger, OneOf, Type, watchInvalidTextSlot, } from "../../utils/index";
-import { defaultConfig, ListenToConfig } from "../../global/index";
-import { Field } from "../input/field.util";
-import { INPUT_COLORS } from "../input/input.interfaces";
-import { SLIDER_BRAND_COLORS, } from "./slider.interfaces";
-import { clampValue, resolveInitialValue } from "./slider.utils";
-import { SliderPickerController } from "./slider.picker";
-/**
- * Slider renders a noUiSlider-backed slider with validation and label/description messaging.
- *
- * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
- * @part slider - The noUiSlider target element.
- */
-export class Slider {
-    constructor() {
-        this.inheritedAttributes = {};
-        this.initialValue = NaN;
-        this.sliderId = `ds-slider-${SliderIds++}`;
-        this.focused = false;
-        this.language = defaultConfig.language;
-        this.region = defaultConfig.region;
-        this.hasInvalidTextSlotContent = false;
-        /**
-         * PUBLIC PROPERTY API
-         * ─────────────────────────────────────────────────────
-         */
-        /**
-         * The value of the slider. Unlike a text input, a slider can never be
-         * empty; when unset it defaults to `min`. Internally starts as `NaN` (this
-         * codebase's established "empty number" sentinel, see `isValueEmpty`) until
-         * `connectedCallback` resolves it — never actually rendered or emitted.
-         */
-        this.value = NaN;
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.sliderId;
-        /**
-         * The label of the slider, which is displayed above the control.
-         */
-        this.label = '';
-        /**
-         * The description of the slider, which is displayed below the control.
-         */
-        this.description = '';
-        /**
-         * Defines the color of the slider. The default value is `primary`.
-         */
-        this.color = 'primary';
-        /**
-         * If `true` the component gets an invalid style.
-         */
-        this.invalid = false;
-        /**
-         * The text to display when the slider is in an invalid state.
-         */
-        this.invalidText = '';
-        /**
-         * The minimum value of the slider.
-         */
-        this.min = 0;
-        /**
-         * The maximum value of the slider.
-         */
-        this.max = 100;
-        /**
-         * The granularity the value must adhere to, as a string so `"any"` (free,
-         * continuous dragging with no step snapping) can be expressed alongside
-         * numeric step sizes.
-         */
-        this.step = '1';
-        /**
-         * Set the amount of time, in milliseconds, to wait to trigger the `dsChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
-         */
-        this.debounce = 0;
-        /**
-         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
-         */
-        this.disabled = false;
-        /**
-         * If `true` the element can not be mutated. noUiSlider has no native concept of
-         * `readonly`, so this is treated as equivalent to `disabled`.
-         */
-        this.readonly = false;
-        /**
-         * If `true`, the user must fill in a value before submitting a form.
-         */
-        this.required = true;
-        /**
-         * If `true`, disables the automatic `invalid`/`invalidText` behavior that the `@baloise/ds-angular` integration
-         * applies when the bound `NgControl` is touched and invalid. Only affects the Angular integration; it is a no-op
-         * in other framework integrations.
-         */
-        this.autoInvalidOff = false;
-        /**
-         * EVENT HANDLERS
-         * ─────────────────────────────────────────────────────
-         */
-        this.handleFocus = (ev) => {
-            this.focused = true;
-            if (!this.disabled && !this.readonly) {
-                this.dsFocus.emit(ev);
-            }
-        };
-        this.handleBlur = (ev) => {
-            this.focused = false;
-            if (!this.disabled && !this.readonly) {
-                this.dsBlur.emit(ev);
-            }
-        };
-        this.handleClick = (ev) => {
-            if (!this.disabled && !this.readonly) {
-                this.dsClick.emit(ev);
-            }
-        };
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    valueChanged(newVal) {
-        var _a;
-        // A slider can never be empty (see the `value` prop doc): resolve `null`/`undefined`/`NaN` — e.g. from
-        // a framework binding resetting to "no value" (Angular's `FormControl.reset()`, React's `value={null}`,
-        // Vue's `v-model` bound to `null`) — onto `min`, the same fallback `connectedCallback` applies to the
-        // initial value. Re-assigning `this.value` re-enters this watcher; the second pass is no longer empty,
-        // so it terminates there instead of looping.
-        if (isValueEmpty(newVal)) {
-            this.value = clampValue(this.min, this.min, this.max);
-            return;
-        }
-        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setValue(newVal);
-        this.syncFormValue(newVal);
-    }
-    invalidChanged() {
-        var _a;
-        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setInvalid(this.invalid || this.hasInvalidTextSlotContent);
-    }
-    minChanged() {
-        var _a;
-        if (!isNaN(this.value)) {
-            this.value = clampValue(this.value, this.min, this.max);
-        }
-        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.updateRange(this.min, this.max, this.step);
-    }
-    stepChanged() {
-        var _a;
-        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.updateRange(this.min, this.max, this.step);
-    }
-    debounceChanged() {
-        this.dsChange = debounceEvent(this.dsChange, this.debounce);
-    }
-    disabledChanged() {
-        this.syncDisabledState();
-    }
-    readonlyChanged() {
-        this.syncDisabledState();
-    }
-    /**
-     * LIFECYCLE
-     * ─────────────────────────────────────────────────────
-     */
-    connectedCallback() {
-        this.debounceChanged();
-        this.value = clampValue(resolveInitialValue(this.value, this.min), this.min, this.max);
-        this.initialValue = this.value;
-        this.syncFormValue(this.value);
-        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
-            var _a;
-            this.hasInvalidTextSlotContent = hasContent;
-            (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setInvalid(this.invalid || hasContent);
-        });
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
-    }
-    componentDidLoad() {
-        var _a, _b;
-        if (!this.sliderEl)
-            return;
-        this.picker = new SliderPickerController({
-            targetEl: this.sliderEl,
-            labelId: 'label',
-            min: this.min,
-            max: this.max,
-            step: this.step,
-            value: this.value,
-            disabled: this.disabled || this.readonly,
-            invalid: this.invalid || this.hasInvalidTextSlotContent,
-            onInput: value => {
-                this.dsInput.emit(value);
-            },
-            onChange: value => {
-                this.setValue(value);
-            },
-        });
-        (_a = this.picker.handleEl) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', this.handleFocus);
-        (_b = this.picker.handleEl) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', this.handleBlur);
-    }
-    disconnectedCallback() {
-        var _a, _b;
-        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.destroy();
-        this.picker = undefined;
-        (_b = this.disconnectInvalidTextSlotWatcher) === null || _b === void 0 ? void 0 : _b.call(this);
-    }
-    /**
-     * PUBLIC LISTENERS
-     * ─────────────────────────────────────────────────────
-     */
-    listenToClick(ev) {
-        if ((this.disabled || this.readonly) && ev.target === this.el) {
-            ev.preventDefault();
-            ev.stopPropagation();
-        }
-    }
-    listenToReset(ev) {
-        const form = ev.target;
-        if (form === null || form === void 0 ? void 0 : form.contains(this.el)) {
-            this.value = this.initialValue;
-        }
-    }
-    /**
-     * @internal define config for the component
-     */
-    async configChanged(state) {
-        this.language = state.language;
-        this.region = state.region;
-    }
-    /**
-     * PUBLIC METHODS
-     * ─────────────────────────────────────────────────────
-     */
-    /**
-     * Sets focus on `ds-slider`'s slider handle. Use this method instead of the global
-     * `element.focus()`.
-     */
-    async setFocus() {
-        var _a;
-        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /**
-     * Sets blur on `ds-slider`'s slider handle. Use this method instead of the global
-     * `element.blur()`.
-     * @internal
-     */
-    async setBlur() {
-        var _a;
-        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    /**
-     * Returns the noUiSlider handle element used under the hood.
-     */
-    async getInputElement() {
-        var _a;
-        return (_a = this.picker) === null || _a === void 0 ? void 0 : _a.handleEl;
-    }
-    /**
-     * PRIVATE METHODS
-     * ─────────────────────────────────────────────────────
-     */
-    setValue(newValue) {
-        if (this.value === newValue)
-            return;
-        this.value = newValue;
-        this.dsChange.emit(newValue);
-    }
-    syncFormValue(value) {
-        this.internals.setFormValue(String(value));
-    }
-    syncDisabledState() {
-        var _a;
-        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setDisabled(this.disabled || this.readonly);
-    }
-    /**
-     * RENDER
-     * ─────────────────────────────────────────────────────
-     */
-    render() {
-        return (h(Field, { key: 'f61d68124132b16c4318977001ddd364cf088ad1', disabled: this.disabled || this.readonly, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
-                'is-brand-yellow': hasValue(this.brandColor) && this.brandColor === 'yellow',
-                'is-brand-purple': hasValue(this.brandColor) && this.brandColor === 'purple',
-                'is-brand-red': hasValue(this.brandColor) && this.brandColor === 'red',
-                'is-brand-green': hasValue(this.brandColor) && this.brandColor === 'green',
-            } }, h("div", Object.assign({ key: 'a97cbe5cd5c7f35be86b6e5eeccfb91cef8f2c78', id: "slider", part: "slider", ref: el => (this.sliderEl = el), onClick: this.handleClick }, this.inheritedAttributes))));
-    }
-    static get is() { return "ds-slider"; }
-    static get encapsulation() { return "shadow"; }
-    static get formAssociated() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["slider.host.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["slider.host.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the slider. Unlike a text input, a slider can never be\nempty; when unset it defaults to `min`. Internally starts as `NaN` (this\ncodebase's established \"empty number\" sentinel, see `isValueEmpty`) until\n`connectedCallback` resolves it \u2014 never actually rendered or emitted."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "value",
-                "defaultValue": "NaN"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the control, which is submitted with the form data."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "name",
-                "defaultValue": "this.sliderId"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The label of the slider, which is displayed above the control."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
-            },
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The description of the slider, which is displayed below the control."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "description",
-                "defaultValue": "''"
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "InputColor",
-                    "resolved": "\"danger\" | \"primary\" | \"success\" | \"warning\"",
-                    "references": {
-                        "InputColor": {
-                            "location": "import",
-                            "path": "../input/input.interfaces",
-                            "id": "src/components/input/input.interfaces.ts::InputColor",
-                            "referenceLocation": "InputColor"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines the color of the slider. The default value is `primary`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "color",
-                "defaultValue": "'primary'"
-            },
-            "brandColor": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "SliderBrandColor",
-                    "resolved": "\"green\" | \"purple\" | \"red\" | \"yellow\" | undefined",
-                    "references": {
-                        "SliderBrandColor": {
-                            "location": "import",
-                            "path": "./slider.interfaces",
-                            "id": "src/components/slider/slider.interfaces.ts::SliderBrandColor",
-                            "referenceLocation": "SliderBrandColor"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Recolors the connect (the filled progress track) with a brand color instead of the default\ngrey/primary style. Left of the handle uses the darker `-4` shade, right of it the lighter\n`-2` shade. Empty (default) keeps the current grey/primary look."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "brand-color"
-            },
-            "invalid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the component gets an invalid style."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "invalid",
-                "defaultValue": "false"
-            },
-            "invalidText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The text to display when the slider is in an invalid state."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "invalid-text",
-                "defaultValue": "''"
-            },
-            "min": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The minimum value of the slider."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min",
-                "defaultValue": "0"
-            },
-            "max": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The maximum value of the slider."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max",
-                "defaultValue": "100"
-            },
-            "step": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The granularity the value must adhere to, as a string so `\"any\"` (free,\ncontinuous dragging with no step snapping) can be expressed alongside\nnumeric step sizes."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "step",
-                "defaultValue": "'1'"
-            },
-            "debounce": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Set the amount of time, in milliseconds, to wait to trigger the `dsChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "debounce",
-                "defaultValue": "0"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "readonly": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the element can not be mutated. noUiSlider has no native concept of\n`readonly`, so this is treated as equivalent to `disabled`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "readonly",
-                "defaultValue": "false"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the user must fill in a value before submitting a form."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "true"
-            },
-            "autoInvalidOff": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, disables the automatic `invalid`/`invalidText` behavior that the `@baloise/ds-angular` integration\napplies when the bound `NgControl` is touched and invalid. Only affects the Angular integration; it is a no-op\nin other framework integrations."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "auto-invalid-off",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "language": {},
-            "region": {},
-            "hasInvalidTextSlotContent": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dsInput",
-                "name": "dsInput",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted on each keyboard/pointer movement, before the value is committed."
-                },
-                "complexType": {
-                    "original": "SliderInputDetail",
-                    "resolved": "number",
-                    "references": {
-                        "SliderInputDetail": {
-                            "location": "import",
-                            "path": "./slider.interfaces",
-                            "id": "src/components/slider/slider.interfaces.ts::SliderInputDetail",
-                            "referenceLocation": "SliderInputDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsFocus",
-                "name": "dsFocus",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input has focus."
-                },
-                "complexType": {
-                    "original": "SliderFocusDetail",
-                    "resolved": "FocusEvent",
-                    "references": {
-                        "SliderFocusDetail": {
-                            "location": "import",
-                            "path": "./slider.interfaces",
-                            "id": "src/components/slider/slider.interfaces.ts::SliderFocusDetail",
-                            "referenceLocation": "SliderFocusDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsBlur",
-                "name": "dsBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input loses focus."
-                },
-                "complexType": {
-                    "original": "SliderBlurDetail",
-                    "resolved": "FocusEvent",
-                    "references": {
-                        "SliderBlurDetail": {
-                            "location": "import",
-                            "path": "./slider.interfaces",
-                            "id": "src/components/slider/slider.interfaces.ts::SliderBlurDetail",
-                            "referenceLocation": "SliderBlurDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsClick",
-                "name": "dsClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input is clicked."
-                },
-                "complexType": {
-                    "original": "SliderClickDetail",
-                    "resolved": "MouseEvent",
-                    "references": {
-                        "SliderClickDetail": {
-                            "location": "import",
-                            "path": "./slider.interfaces",
-                            "id": "src/components/slider/slider.interfaces.ts::SliderClickDetail",
-                            "referenceLocation": "SliderClickDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsChange",
-                "name": "dsChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the value is committed (noUiSlider `change`, not `blur` \u2014 see\nADR-0010/ADR-0007). Fires once per discrete drag/step, independent of focus."
-                },
-                "complexType": {
-                    "original": "SliderChangeDetail",
-                    "resolved": "number",
-                    "references": {
-                        "SliderChangeDetail": {
-                            "location": "import",
-                            "path": "./slider.interfaces",
-                            "id": "src/components/slider/slider.interfaces.ts::SliderChangeDetail",
-                            "referenceLocation": "SliderChangeDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "configChanged": {
-                "complexType": {
-                    "signature": "(state: DsConfigState) => Promise<void>",
-                    "parameters": [{
-                            "name": "state",
-                            "type": "DsConfigState",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "DsConfigState": {
-                            "location": "import",
-                            "path": "@global",
-                            "id": "src/global/index.ts::DsConfigState",
-                            "referenceLocation": "DsConfigState"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "define config for the component"
-                        }]
-                }
-            },
-            "setFocus": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets focus on `ds-slider`'s slider handle. Use this method instead of the global\n`element.focus()`.",
-                    "tags": []
-                }
-            },
-            "setBlur": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets blur on `ds-slider`'s slider handle. Use this method instead of the global\n`element.blur()`.",
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }]
-                }
-            },
-            "getInputElement": {
-                "complexType": {
-                    "signature": "() => Promise<HTMLElement | undefined>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    },
-                    "return": "Promise<HTMLElement | undefined>"
-                },
-                "docs": {
-                    "text": "Returns the noUiSlider handle element used under the hood.",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "valueChanged"
-            }, {
-                "propName": "invalid",
-                "methodName": "invalidChanged"
-            }, {
-                "propName": "min",
-                "methodName": "minChanged"
-            }, {
-                "propName": "max",
-                "methodName": "minChanged"
-            }, {
-                "propName": "step",
-                "methodName": "stepChanged"
-            }, {
-                "propName": "debounce",
-                "methodName": "debounceChanged"
-            }, {
-                "propName": "disabled",
-                "methodName": "disabledChanged"
-            }, {
-                "propName": "readonly",
-                "methodName": "readonlyChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "listenToClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "reset",
-                "method": "listenToReset",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }];
-    }
-    static get attachInternalsMemberName() { return "internals"; }
-}
-__decorate([
-    Logger('slider'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], Slider.prototype, "createLogger", null);
-__decorate([
-    Type('number'),
-    __metadata("design:type", Number)
-], Slider.prototype, "value", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Slider.prototype, "name", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Slider.prototype, "label", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Slider.prototype, "description", void 0);
-__decorate([
-    OneOf(INPUT_COLORS),
-    __metadata("design:type", String)
-], Slider.prototype, "color", void 0);
-__decorate([
-    OneOf(SLIDER_BRAND_COLORS),
-    __metadata("design:type", String)
-], Slider.prototype, "brandColor", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Slider.prototype, "invalid", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Slider.prototype, "invalidText", void 0);
-__decorate([
-    Type('number'),
-    __metadata("design:type", Number)
-], Slider.prototype, "min", void 0);
-__decorate([
-    Type('number'),
-    __metadata("design:type", Number)
-], Slider.prototype, "max", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Slider.prototype, "step", void 0);
-__decorate([
-    Type('number'),
-    __metadata("design:type", Number)
-], Slider.prototype, "debounce", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Slider.prototype, "disabled", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Slider.prototype, "readonly", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Slider.prototype, "required", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Slider.prototype, "autoInvalidOff", void 0);
-__decorate([
-    ListenToConfig(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], Slider.prototype, "configChanged", null);
-let SliderIds = 0;