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

package/dist/collection/components/forms/number-input/number-input.js

@@ -0,0 +1,1096 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, } from "@stencil/core";
+import isEmpty from "lodash/isEmpty";
+import isNaN from "lodash/isNaN";
+import isNil from "lodash/isNil";
+import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, getDecimalSeparator, getThousandSeparator, hasValue, OneOf, Type, watchInvalidTextSlot, } from "../../../utils/index";
+import { defaultConfig, ListenToConfig } from "../../../global/index";
+import { isNotNumber, mapDecimalSeparator, toFixedNumber, toNumber, toUserFormattedNumber, validateKeyDown, } from "./number-input.utils";
+import { Field } from "../input/field.util";
+import { INPUT_COLORS } from "../input/input.interfaces";
+/**
+ * Number input renders a specialized text input for numeric values with increment/decrement buttons, formatting, and validation.
+ *
+ * @slot - The number input field content and surrounding elements.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
+ * @part input - The native HTML input element.
+ * @part prefix - The prefix wrapper (if used).
+ * @part suffix - The suffix wrapper (if used).
+ * @part decrement - The decrement button.
+ * @part increment - The increment button.
+ */
+export class NumberInput {
+    constructor() {
+        this.numberInputId = `ds-number-input-${NumberInputIds++}`;
+        this.inheritedAttributes = {};
+        this.control = new FormControl(this);
+        this.lastValue = '';
+        this.focused = false;
+        this.hasInvalidTextSlotContent = false;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.nativeInputValue = '';
+        this.inputPattern = '';
+        /**
+         * PUBLIC PROPERTY API
+         * ─────────────────────────────────────────────────────
+         */
+        /**
+         * 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;
+        /**
+         * Defines the color state of the input.
+         */
+        this.color = 'primary';
+        /**
+         * Milliseconds to wait before triggering `dsChange` after each keystroke.
+         */
+        this.debounce = 0;
+        /**
+         * Number of allowed decimal places. `0` means integers only.
+         */
+        this.decimal = 0;
+        /**
+         * The description displayed below the field.
+         */
+        this.description = '';
+        /**
+         * If `true`, the element is not mutable, focusable, or submitted with the form.
+         */
+        this.disabled = false;
+        /**
+         * When `true`, displays `0` instead of an empty field when value is null.
+         */
+        this.exactNumber = false;
+        /**
+         * If `true` the component gets an invalid style.
+         */
+        this.invalid = false;
+        /**
+         * Text shown in the description area when `invalid` is true.
+         */
+        this.invalidText = '';
+        /**
+         * The label displayed above the field.
+         */
+        this.label = '';
+        /**
+         * The maximum value.
+         */
+        this.max = '';
+        /**
+         * The minimum value.
+         */
+        this.min = '';
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.numberInputId;
+        /**
+         * When `true`, only positive numbers are accepted (blocks the minus sign).
+         */
+        this.onlyPositive = false;
+        /**
+         * Overrides the auto-generated input validation pattern.
+         */
+        this.pattern = '';
+        /**
+         * Instructional text shown when the input has no value.
+         */
+        this.placeholder = '';
+        /**
+         * If `true`, the element cannot be edited by the user.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = true;
+        /**
+         * Text appended to the formatted value after blur (e.g. `"CHF"`).
+         */
+        this.suffix = '';
+        /**
+         * The numeric value of the input. `null` means no value.
+         */
+        this.value = null;
+        /**
+         * EVENT HANDLERS
+         * ─────────────────────────────────────────────────────
+         */
+        this.handleInput = (_ev) => {
+            var _a, _b;
+            if (this.nativeInput && isNotNumber(this.nativeInput.value)) {
+                // Invalid character: restore last valid value via state (triggers Stencil re-render)
+                this.nativeInputValue = this.lastValue || '';
+                return;
+            }
+            this.lastValue = ((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.value) || '';
+            const numericValue = (_b = toNumber(this.lastValue, this.decimal)) !== null && _b !== void 0 ? _b : null;
+            this.control.inputValue = numericValue;
+            this.dsInput.emit(numericValue);
+        };
+        this.handleFocus = (ev) => {
+            // Sets focused=true, emits dsFocus
+            this.control.onFocus(ev);
+            // Show raw value without thousand-separator formatting for easier editing
+            this.nativeInputValue = mapDecimalSeparator(this.lastValue || '');
+            clearTimeout(this.selectTimeout);
+            this.selectTimeout = setTimeout(() => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.select(); });
+        };
+        this.handleBlur = (ev) => {
+            var _a;
+            // Apply locale-formatted display with suffix
+            this.lastValue = toFixedNumber(this.lastValueGetter, this.decimal);
+            this.nativeInputValue = toUserFormattedNumber(this.lastValueGetter, this.decimal, this.suffix);
+            if (this.nativeInput) {
+                this.nativeInput.value = this.nativeInputValue;
+            }
+            // Set the numeric value on the control BEFORE calling onBlur,
+            // so control.setValue() (called inside onBlur) uses the right value
+            this.control.inputValue = (_a = toNumber(this.lastValueGetter, this.decimal)) !== null && _a !== void 0 ? _a : null;
+            // Emits dsBlur and dsChange (via setValue, only if value changed)
+            this.control.onBlur(ev);
+        };
+        this.handleKeydown = (ev) => {
+            var _a;
+            if (!this.nativeInput)
+                return;
+            const oldValue = this.nativeInput.value || '';
+            const selectionStart = (_a = this.nativeInput.selectionStart) !== null && _a !== void 0 ? _a : 0;
+            const newValue = oldValue.slice(0, selectionStart) + ev.key + oldValue.slice(selectionStart);
+            if (!validateKeyDown({
+                key: ev.key,
+                ctrlKey: ev.ctrlKey,
+                metaKey: ev.metaKey,
+                decimal: this.decimal,
+                newValue,
+                oldValue,
+                selectionStart: this.nativeInput.selectionStart,
+                selectionEnd: this.nativeInput.selectionEnd,
+                onlyPositive: this.onlyPositive,
+            })) {
+                return stopEventBubbling(ev);
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    debounceChanged() {
+        this.dsChange = debounceEvent(this.dsChange, this.debounce);
+    }
+    valueChanged(newValue) {
+        const isValueNotDefined = newValue === null || isNaN(newValue);
+        const emptyValue = this.exactNumber ? '0' : '';
+        const rawStr = isValueNotDefined ? emptyValue : newValue.toFixed(this.decimal);
+        this.lastValue = rawStr;
+        if (this.focused) {
+            this.nativeInputValue = mapDecimalSeparator(rawStr);
+        }
+        else {
+            this.nativeInputValue = toUserFormattedNumber(rawStr, this.decimal, this.suffix);
+        }
+    }
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback() {
+        this.debounceChanged();
+        this.control.connectedCallback();
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+        this.inputPattern = this.createPattern();
+        this.valueChanged(this.value);
+    }
+    componentDidLoad() {
+        this.control.componentDidLoad();
+    }
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToClick(ev) {
+        this.control.listenOnClick(ev);
+    }
+    listenToReset(ev) {
+        const formElement = ev.target;
+        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
+            // control.setValue triggers @Watch('value') → valueChanged() → updates formatted display
+            // (Do NOT use control.listenOnReset — its timer overwrites the formatted display
+            //  with the raw numeric string after the re-render completes)
+            this.control.setValue(this.control.initialValue);
+        }
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+        this.region = state.region;
+        this.inputPattern = this.createPattern();
+        if (this.nativeInput) {
+            if (this.focused) {
+                this.nativeInputValue = mapDecimalSeparator(this.lastValue);
+            }
+            else {
+                this.nativeInputValue = toUserFormattedNumber(this.lastValue, this.decimal, this.suffix);
+            }
+        }
+    }
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Sets focus on the native input element.
+     */
+    async setFocus() {
+        return this.control.setFocus();
+    }
+    /**
+     * Sets blur on the native input element.
+     * @internal
+     */
+    async setBlur() {
+        return this.control.setBlur();
+    }
+    /**
+     * Returns the native `<input>` element used under the hood.
+     */
+    async getInputElement() {
+        return this.nativeInput;
+    }
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    get nativeInput() {
+        return this.control.nativeEl;
+    }
+    get lastValueGetter() {
+        if (this.exactNumber && (isNil(this.lastValue) || isEmpty(this.lastValue))) {
+            return '0';
+        }
+        return this.lastValue;
+    }
+    createPattern() {
+        if (hasValue(this.pattern))
+            return this.pattern;
+        let suffix = this.suffix || '';
+        if (hasValue(suffix))
+            suffix = ` ${suffix}`;
+        const thousandSeparator = getThousandSeparator();
+        let decimalSeparator = getDecimalSeparator();
+        if (decimalSeparator === ',')
+            decimalSeparator = '\\,';
+        const negativeSymbol = this.onlyPositive ? '' : '-';
+        return `${negativeSymbol}?\\d{1,3}(?:${thousandSeparator}\\d{3})*(?:\\${decimalSeparator}\\d{1,2})?(?:${suffix})?`;
+    }
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render() {
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        return (h(Field, { key: '51cd67447f1fe58990414983427a74ee9283392b', disabled: this.disabled, color: this.color, invalid: isInvalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: '6a49bba4d07f12f1812e0f0e179876f0e239d0b6', id: "input", part: "input", type: "text", inputMode: "decimal", pattern: this.inputPattern, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, min: this.min, max: this.max, value: this.nativeInputValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onClick: ev => this.control.onClick(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
+    }
+    static get is() { return "ds-number-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["number-input.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["number-input.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputColor",
+                    "resolved": "\"danger\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "InputColor": {
+                            "location": "import",
+                            "path": "../input/input.interfaces",
+                            "id": "src/components/forms/input/input.interfaces.ts::InputColor",
+                            "referenceLocation": "InputColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color state of the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Milliseconds to wait before triggering `dsChange` after each keystroke."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debounce",
+                "defaultValue": "0"
+            },
+            "decimal": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of allowed decimal places. `0` means integers only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "decimal",
+                "defaultValue": "0"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The description displayed below the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "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 submitted with the form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "exactNumber": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true`, displays `0` instead of an empty field when value is null."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "exact-number",
+                "defaultValue": "false"
+            },
+            "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": "Text shown in the description area when `invalid` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid-text",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label displayed above the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "''"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "''"
+            },
+            "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.numberInputId"
+            },
+            "onlyPositive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true`, only positive numbers are accepted (blocks the minus sign)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "only-positive",
+                "defaultValue": "false"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the auto-generated input validation pattern."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Instructional text shown when the input has no value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the element cannot be edited by the user."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "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": true,
+                "attribute": "required",
+                "defaultValue": "true"
+            },
+            "suffix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text appended to the formatted value after blur (e.g. `\"CHF\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suffix",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The numeric value of the input. `null` means no value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {},
+            "hasInvalidTextSlotContent": {},
+            "language": {},
+            "region": {},
+            "nativeInputValue": {},
+            "inputPattern": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsInput",
+                "name": "dsInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on each keystroke with the current numeric value (or null)."
+                },
+                "complexType": {
+                    "original": "NumberInputInputDetail",
+                    "resolved": "null | number",
+                    "references": {
+                        "NumberInputInputDetail": {
+                            "location": "import",
+                            "path": "./number-input.interfaces",
+                            "id": "src/components/forms/number-input/number-input.interfaces.ts::NumberInputInputDetail",
+                            "referenceLocation": "NumberInputInputDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes on blur."
+                },
+                "complexType": {
+                    "original": "NumberInputChangeDetail",
+                    "resolved": "null | number",
+                    "references": {
+                        "NumberInputChangeDetail": {
+                            "location": "import",
+                            "path": "./number-input.interfaces",
+                            "id": "src/components/forms/number-input/number-input.interfaces.ts::NumberInputChangeDetail",
+                            "referenceLocation": "NumberInputChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsBlur",
+                "name": "dsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "NumberInputBlurDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "NumberInputBlurDetail": {
+                            "location": "import",
+                            "path": "./number-input.interfaces",
+                            "id": "src/components/forms/number-input/number-input.interfaces.ts::NumberInputBlurDetail",
+                            "referenceLocation": "NumberInputBlurDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsFocus",
+                "name": "dsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input gains focus."
+                },
+                "complexType": {
+                    "original": "NumberInputFocusDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "NumberInputFocusDetail": {
+                            "location": "import",
+                            "path": "./number-input.interfaces",
+                            "id": "src/components/forms/number-input/number-input.interfaces.ts::NumberInputFocusDetail",
+                            "referenceLocation": "NumberInputFocusDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsClick",
+                "name": "dsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input is clicked."
+                },
+                "complexType": {
+                    "original": "NumberInputClickDetail",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "NumberInputClickDetail": {
+                            "location": "import",
+                            "path": "./number-input.interfaces",
+                            "id": "src/components/forms/number-input/number-input.interfaces.ts::NumberInputClickDetail",
+                            "referenceLocation": "NumberInputClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsKeyPress",
+                "name": "dsKeyPress",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on keypress."
+                },
+                "complexType": {
+                    "original": "NumberInputKeyPressDetail",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "NumberInputKeyPressDetail": {
+                            "location": "import",
+                            "path": "./number-input.interfaces",
+                            "id": "src/components/forms/number-input/number-input.interfaces.ts::NumberInputKeyPressDetail",
+                            "referenceLocation": "NumberInputKeyPressDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    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 the native input element.",
+                    "tags": []
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets blur on the native input element.",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getInputElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLInputElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    },
+                    "return": "Promise<HTMLInputElement>"
+                },
+                "docs": {
+                    "text": "Returns the native `<input>` element used under the hood.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "debounce",
+                "methodName": "debounceChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged",
+                "handlerOptions": {
+                    "immediate": true
+                }
+            }];
+    }
+    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('number-input'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], NumberInput.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], NumberInput.prototype, "autoInvalidOff", void 0);
+__decorate([
+    OneOf(INPUT_COLORS),
+    __metadata("design:type", String)
+], NumberInput.prototype, "color", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], NumberInput.prototype, "debounce", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], NumberInput.prototype, "decimal", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], NumberInput.prototype, "description", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], NumberInput.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], NumberInput.prototype, "exactNumber", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], NumberInput.prototype, "invalid", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], NumberInput.prototype, "invalidText", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], NumberInput.prototype, "label", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], NumberInput.prototype, "max", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], NumberInput.prototype, "min", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], NumberInput.prototype, "name", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], NumberInput.prototype, "onlyPositive", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], NumberInput.prototype, "pattern", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], NumberInput.prototype, "placeholder", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], NumberInput.prototype, "readonly", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], NumberInput.prototype, "required", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], NumberInput.prototype, "suffix", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Object)
+], NumberInput.prototype, "value", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], NumberInput.prototype, "configChanged", null);
+let NumberInputIds = 0;