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

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

@@ -0,0 +1,961 @@
+/*!
+ * (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, Logger, OneOf, Type } from "../../utils/index";
+import { defaultConfig, ListenToConfig } from "../../global/index";
+import { Field } from "../input/field.util";
+import { INPUT_COLORS } from "../input/input.interfaces";
+import { INPUT_SLIDER_BRAND_COLORS, } from "./input-slider.interfaces";
+import { clampValue, resolveInitialValue } from "./input-slider.utils";
+import { InputSliderPickerController } from "./input-slider.picker";
+/**
+ * Input slider renders a noUiSlider-backed slider with validation and label/description messaging.
+ *
+ * @part slider - The noUiSlider target element.
+ */
+export class InputSlider {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.initialValue = NaN;
+        this.inputSliderId = `ds-input-slider-${InputSliderIds++}`;
+        this.focused = false;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        /**
+         * 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.inputSliderId;
+        /**
+         * 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';
+        /**
+         * Recolors the connect (the filled progress track) with a brand color instead of the default
+         * grey/primary style. Left of the handle uses the darker `-4` shade, right of it the lighter
+         * `-2` shade. Empty (default) keeps the current grey/primary look.
+         */
+        this.brandColor = '';
+        /**
+         * 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`, in Angular reactive forms the control will not be set invalid
+         */
+        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 = 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);
+    }
+    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);
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        if (!this.sliderEl)
+            return;
+        this.picker = new InputSliderPickerController({
+            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,
+            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;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.picker = undefined;
+    }
+    /**
+     * 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-input-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-input-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: '673117fa1520455f38ee39c6f2218468e6ca8150', 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: 'b760944d8141876484054f1454b453e087bc7eda', id: "slider", part: "slider", ref: el => (this.sliderEl = el), onClick: this.handleClick }, this.inheritedAttributes))));
+    }
+    static get is() { return "ds-input-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input-slider.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input-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.inputSliderId"
+            },
+            "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": "InputSliderBrandColor",
+                    "resolved": "\"\" | \"green\" | \"purple\" | \"red\" | \"yellow\"",
+                    "references": {
+                        "InputSliderBrandColor": {
+                            "location": "import",
+                            "path": "./input-slider.interfaces",
+                            "id": "src/components/input-slider/input-slider.interfaces.ts::InputSliderBrandColor",
+                            "referenceLocation": "InputSliderBrandColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "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",
+                "defaultValue": "''"
+            },
+            "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`, in Angular reactive forms the control will not be set invalid"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "auto-invalid-off",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "language": {},
+            "region": {}
+        };
+    }
+    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": "InputSliderInputDetail",
+                    "resolved": "number",
+                    "references": {
+                        "InputSliderInputDetail": {
+                            "location": "import",
+                            "path": "./input-slider.interfaces",
+                            "id": "src/components/input-slider/input-slider.interfaces.ts::InputSliderInputDetail",
+                            "referenceLocation": "InputSliderInputDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsFocus",
+                "name": "dsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input has focus."
+                },
+                "complexType": {
+                    "original": "InputSliderFocusDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "InputSliderFocusDetail": {
+                            "location": "import",
+                            "path": "./input-slider.interfaces",
+                            "id": "src/components/input-slider/input-slider.interfaces.ts::InputSliderFocusDetail",
+                            "referenceLocation": "InputSliderFocusDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsBlur",
+                "name": "dsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "InputSliderBlurDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "InputSliderBlurDetail": {
+                            "location": "import",
+                            "path": "./input-slider.interfaces",
+                            "id": "src/components/input-slider/input-slider.interfaces.ts::InputSliderBlurDetail",
+                            "referenceLocation": "InputSliderBlurDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsClick",
+                "name": "dsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input is clicked."
+                },
+                "complexType": {
+                    "original": "InputSliderClickDetail",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "InputSliderClickDetail": {
+                            "location": "import",
+                            "path": "./input-slider.interfaces",
+                            "id": "src/components/input-slider/input-slider.interfaces.ts::InputSliderClickDetail",
+                            "referenceLocation": "InputSliderClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "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-0006/ADR-0007). Fires once per discrete drag/step, independent of focus."
+                },
+                "complexType": {
+                    "original": "InputSliderChangeDetail",
+                    "resolved": "number",
+                    "references": {
+                        "InputSliderChangeDetail": {
+                            "location": "import",
+                            "path": "./input-slider.interfaces",
+                            "id": "src/components/input-slider/input-slider.interfaces.ts::InputSliderChangeDetail",
+                            "referenceLocation": "InputSliderChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    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-input-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-input-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('input-slider'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], InputSlider.prototype, "createLogger", null);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], InputSlider.prototype, "value", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], InputSlider.prototype, "name", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], InputSlider.prototype, "label", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], InputSlider.prototype, "description", void 0);
+__decorate([
+    OneOf(INPUT_COLORS),
+    __metadata("design:type", String)
+], InputSlider.prototype, "color", void 0);
+__decorate([
+    OneOf(INPUT_SLIDER_BRAND_COLORS),
+    __metadata("design:type", String)
+], InputSlider.prototype, "brandColor", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], InputSlider.prototype, "invalid", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], InputSlider.prototype, "invalidText", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], InputSlider.prototype, "min", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], InputSlider.prototype, "max", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], InputSlider.prototype, "step", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], InputSlider.prototype, "debounce", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], InputSlider.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], InputSlider.prototype, "readonly", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], InputSlider.prototype, "required", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], InputSlider.prototype, "autoInvalidOff", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], InputSlider.prototype, "configChanged", null);
+let InputSliderIds = 0;