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

package/dist/collection/components/forms/counter/counter.js

@@ -0,0 +1,989 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, } from "@stencil/core";
+import { formatLocaleNumber, inheritAttributes, isValueEmpty, debounceEvent, rIC, Logger, OneOf, Type, setFormValue, } from "../../../utils/index";
+import { defaultConfig, ListenToConfig } from "../../../global/index";
+import { Field } from "../input/field.util";
+import { INPUT_COLORS } from "../input/input.interfaces";
+import { i18nDsCounter } from "./counter.i18n";
+import { clampValue, stepMinus, stepPlus } from "./counter.utils";
+const STEP_FALLBACK = 1;
+// Must match the CSS animation duration in counter.host.scss (`.value-slide` `animation-duration`).
+const VALUE_ANIMATION_MS = 260;
+/**
+ * Counter renders a numeric value flanked by decrease and increase buttons.
+ *
+ * @part counter - The container element holding the buttons and value.
+ * @part value - The span rendering the current value.
+ * @part decrease - The decrease (`-`) button.
+ * @part increase - The increase (`+`) button.
+ */
+export class Counter {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.initialValue = 0;
+        this.stepWarned = false;
+        this.counterId = `ds-counter-${CounterIds++}`;
+        this.decreaseHasFocus = false;
+        this.increaseHasFocus = false;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        /**
+         * The value the animation is transitioning away from. Set for the duration of `VALUE_ANIMATION_MS`
+         * after a step, then cleared so the outgoing digit is removed from the DOM again.
+         */
+        this.previousValue = null;
+        /**
+         * Direction of the current value step, driving which way the outgoing/incoming digits slide.
+         */
+        this.valueDirection = null;
+        /**
+         * PUBLIC PROPERTY API
+         * ─────────────────────────────────────────────────────
+         */
+        /**
+         * The current numeric value of the counter. A counter can never be empty: every write is resolved onto
+         * `[min, max]`, with an empty value (`null`/`undefined`/`NaN`) falling back to `min`. The resolution is
+         * silent — no `dsChange` is emitted — because a programmatic write must never look like user input (a
+         * `ControlValueAccessor`'s `writeValue()` may not call back into `onChange()`). A framework binding that
+         * writes an out-of-range value therefore keeps that value on its side while the element shows the clamped
+         * one, until the next user interaction emits a real `dsChange`.
+         */
+        this.value = 0;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.counterId;
+        /**
+         * The label of the counter, which is displayed above the control.
+         */
+        this.label = '';
+        /**
+         * The description of the counter, which is displayed below the control.
+         */
+        this.description = '';
+        /**
+         * Defines the color of the counter. 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 counter is in an invalid state.
+         */
+        this.invalidText = '';
+        /**
+         * The minimum value the counter can take.
+         */
+        this.min = 0;
+        /**
+         * The maximum value the counter can take.
+         */
+        this.max = 10;
+        /**
+         * The granularity by which the value increases or decreases per click. Must
+         * be a positive number (integer or decimal). If a non-positive value is
+         * provided, a warning is logged and `1` is used at click time.
+         */
+        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. Both buttons are disabled while
+         * the form value continues to be submitted.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the user must have a value before submitting a form. Because
+         * the counter always has a numeric value, this only affects the "optional"
+         * suffix on the label.
+         */
+        this.required = true;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
+        /**
+         * EVENT HANDLERS
+         * ─────────────────────────────────────────────────────
+         */
+        this.handleIncrease = () => {
+            if (this.disabled || this.readonly)
+                return;
+            const next = stepPlus(this.value, this.effectiveStep());
+            if (next > this.max)
+                return;
+            this.commit(next);
+            this.dsIncrease.emit(next);
+        };
+        this.handleDecrease = () => {
+            if (this.disabled || this.readonly)
+                return;
+            const next = stepMinus(this.value, this.effectiveStep());
+            if (next < this.min)
+                return;
+            this.commit(next);
+            this.dsDecrease.emit(next);
+        };
+        this.handleKeyDown = (ev) => {
+            if (this.disabled || this.readonly)
+                return;
+            if (ev.key === 'ArrowUp') {
+                ev.preventDefault();
+                this.handleIncrease();
+            }
+            else if (ev.key === 'ArrowDown') {
+                ev.preventDefault();
+                this.handleDecrease();
+            }
+        };
+        this.handleFocusDecrease = (ev) => {
+            this.decreaseHasFocus = true;
+            this.handleFocus(ev);
+        };
+        this.handleFocusIncrease = (ev) => {
+            this.increaseHasFocus = true;
+            this.handleFocus(ev);
+        };
+        this.handleFocus = (ev) => {
+            ev.stopPropagation();
+            if (!this.disabled && !this.readonly) {
+                this.dsFocus.emit();
+            }
+        };
+        this.handleBlurDecrease = (ev) => {
+            ev.stopPropagation();
+            this.decreaseHasFocus = false;
+            rIC(() => this.handleBlur());
+        };
+        this.handleBlurIncrease = (ev) => {
+            ev.stopPropagation();
+            this.increaseHasFocus = false;
+            rIC(() => this.handleBlur());
+        };
+        this.handleBlur = () => {
+            if (!(this.decreaseHasFocus || this.increaseHasFocus)) {
+                if (!this.disabled && !this.readonly) {
+                    this.dsBlur.emit();
+                }
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    valueChanged() {
+        // Resolve an empty value — e.g. from a framework binding resetting to "no value" (Angular's
+        // `FormControl.reset()`, which calls `writeValue(null)` straight through onto this property) — 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(this.value)) {
+            this.value = clampValue(this.min, this.min, this.max);
+            return;
+        }
+        // `connectedCallback` and the `min`/`max` watchers already clamp; doing it here too makes every write
+        // path consistent instead of leaving runtime `value` assignments as the one that escapes the range.
+        const clamped = clampValue(this.value, this.min, this.max);
+        if (clamped !== this.value) {
+            this.value = clamped;
+            return;
+        }
+        this.syncFormValue(this.value);
+    }
+    minChanged() {
+        this.clampToRange();
+    }
+    maxChanged() {
+        this.clampToRange();
+    }
+    debounceChanged() {
+        this.dsChange = debounceEvent(this.dsChange, this.debounce);
+    }
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback() {
+        this.debounceChanged();
+        this.value = clampValue(this.value, this.min, this.max);
+        this.initialValue = this.value;
+        this.syncFormValue(this.value);
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+    }
+    disconnectedCallback() {
+        clearTimeout(this.valueAnimationTimer);
+    }
+    /**
+     * 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 the counter. Prefers the increase button; falls back to
+     * decrease if the increase is disabled (value at max).
+     */
+    async setFocus() {
+        var _a, _b;
+        const increaseDisabled = this.disabled || this.readonly || this.value >= this.max;
+        const target = increaseDisabled ? this.decreaseButtonEl : this.increaseButtonEl;
+        (_b = (_a = target === null || target === void 0 ? void 0 : target.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+    /**
+     * Returns the underlying interactive element used under the hood. Returns
+     * the increase button (or decrease, if increase is disabled).
+     */
+    async getInputElement() {
+        const increaseDisabled = this.disabled || this.readonly || this.value >= this.max;
+        return increaseDisabled ? this.decreaseButtonEl : this.increaseButtonEl;
+    }
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    clampToRange() {
+        const clamped = clampValue(this.value, this.min, this.max);
+        if (clamped !== this.value) {
+            this.value = clamped;
+        }
+    }
+    syncFormValue(value) {
+        setFormValue(this.internals, String(value));
+    }
+    effectiveStep() {
+        if (!Number.isFinite(this.step) || this.step <= 0) {
+            if (!this.stepWarned) {
+                console.warn(`[ds-counter] \`step\` must be a positive number, got ${this.step}. Falling back to ${STEP_FALLBACK}.`);
+                this.stepWarned = true;
+            }
+            return STEP_FALLBACK;
+        }
+        return this.step;
+    }
+    commit(next) {
+        this.animateValueChange(next);
+        this.value = next;
+        this.dsInput.emit(next);
+        this.dsChange.emit(next);
+    }
+    // Slides the outgoing digit out and the incoming one in from the opposite side (up on increase,
+    // down on decrease) — see counter.host.scss `.value-slide`. Purely cosmetic: the previous value is
+    // kept around just long enough to animate, then dropped so it doesn't linger in the DOM/a11y tree.
+    animateValueChange(next) {
+        if (next === this.value)
+            return;
+        this.previousValue = this.value;
+        this.valueDirection = next > this.value ? 'increase' : 'decrease';
+        clearTimeout(this.valueAnimationTimer);
+        this.valueAnimationTimer = setTimeout(() => {
+            this.previousValue = null;
+            this.valueDirection = null;
+        }, VALUE_ANIMATION_MS);
+    }
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render() {
+        const decreaseLabel = i18nDsCounter[this.language].decrease;
+        const increaseLabel = i18nDsCounter[this.language].increase;
+        const decreaseDisabled = this.disabled || this.readonly || this.value <= this.min;
+        const increaseDisabled = this.disabled || this.readonly || this.value >= this.max;
+        return (h(Field, { key: '635a8c44149e5f08cc6682d2196698d8fd4b3dba', 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 }, h("div", Object.assign({ key: '7e0eb54dc1a2825c44892046b507e71008f2d0ad', id: "counter", part: "counter", onKeyDown: this.handleKeyDown }, this.inheritedAttributes), h("ds-button", { key: 'b04c95d286b09bfc778a8e92e16c0ceb5fbaefd0', ref: el => (this.decreaseButtonEl = el), part: "decrease", "data-testid": "ds-counter-decrease", color: this.invalid
+                ? 'danger'
+                : this.color === 'danger' || this.color === 'warning' || this.color === 'success'
+                    ? this.color
+                    : 'ghost', size: "sm", square: true, icon: "minus", a11yLabel: decreaseLabel, a11yTitle: decreaseLabel, disabled: decreaseDisabled, onClick: this.handleDecrease, onDsFocus: this.handleFocusDecrease, onDsBlur: this.handleBlurDecrease }), h("span", { key: '4faef5385c53c5abadd242fd837583af3221434f', id: "value", part: "value", "data-testid": "ds-counter-value" }, this.previousValue !== null && (h("span", { key: `prev-${this.previousValue}`, "aria-hidden": "true", class: {
+                'value-slide': true,
+                'value-out': true,
+                'is-increase': this.valueDirection === 'increase',
+                'is-decrease': this.valueDirection === 'decrease',
+            } }, formatLocaleNumber(this.previousValue))), h("span", { key: `current-${this.value}`, class: {
+                'value-slide': true,
+                'value-in': this.previousValue !== null,
+                'is-increase': this.valueDirection === 'increase',
+                'is-decrease': this.valueDirection === 'decrease',
+            } }, formatLocaleNumber(this.value))), h("ds-button", { key: 'ca7098858e2df051efbaea9fffeff61886098cd0', ref: el => (this.increaseButtonEl = el), part: "increase", "data-testid": "ds-counter-increase", color: this.invalid
+                ? 'danger'
+                : this.color === 'danger' || this.color === 'warning' || this.color === 'success'
+                    ? this.color
+                    : 'ghost', size: "sm", square: true, icon: "plus", a11yLabel: increaseLabel, a11yTitle: increaseLabel, disabled: increaseDisabled, onClick: this.handleIncrease, onDsFocus: this.handleFocusIncrease, onDsBlur: this.handleBlurIncrease }))));
+    }
+    static get is() { return "ds-counter"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["counter.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["counter.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 current numeric value of the counter. A counter can never be empty: every write is resolved onto\n`[min, max]`, with an empty value (`null`/`undefined`/`NaN`) falling back to `min`. The resolution is\nsilent \u2014 no `dsChange` is emitted \u2014 because a programmatic write must never look like user input (a\n`ControlValueAccessor`'s `writeValue()` may not call back into `onChange()`). A framework binding that\nwrites an out-of-range value therefore keeps that value on its side while the element shows the clamped\none, until the next user interaction emits a real `dsChange`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "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.counterId"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the counter, 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 counter, 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/forms/input/input.interfaces.ts::InputColor",
+                            "referenceLocation": "InputColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color of the counter. The default value is `primary`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "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 counter 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 the counter can take."
+                },
+                "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 the counter can take."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "10"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The granularity by which the value increases or decreases per click. Must\nbe a positive number (integer or decimal). If a non-positive value is\nprovided, a warning is logged and `1` is used at click time."
+                },
+                "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. Both buttons are disabled while\nthe form value continues to be submitted."
+                },
+                "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 have a value before submitting a form. Because\nthe counter always has a numeric value, this only affects the \"optional\"\nsuffix on the label."
+                },
+                "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": {},
+            "previousValue": {},
+            "valueDirection": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsInput",
+                "name": "dsInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the value changes via a step. Fires alongside `dsChange`."
+                },
+                "complexType": {
+                    "original": "CounterInputDetail",
+                    "resolved": "number",
+                    "references": {
+                        "CounterInputDetail": {
+                            "location": "import",
+                            "path": "./counter.interfaces",
+                            "id": "src/components/forms/counter/counter.interfaces.ts::CounterInputDetail",
+                            "referenceLocation": "CounterInputDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted once per successful step. Debounceable via the `debounce` prop."
+                },
+                "complexType": {
+                    "original": "CounterChangeDetail",
+                    "resolved": "number",
+                    "references": {
+                        "CounterChangeDetail": {
+                            "location": "import",
+                            "path": "./counter.interfaces",
+                            "id": "src/components/forms/counter/counter.interfaces.ts::CounterChangeDetail",
+                            "referenceLocation": "CounterChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsIncrease",
+                "name": "dsIncrease",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after a successful increase step, in addition to `dsChange`/`dsInput`."
+                },
+                "complexType": {
+                    "original": "CounterIncreaseDetail",
+                    "resolved": "number",
+                    "references": {
+                        "CounterIncreaseDetail": {
+                            "location": "import",
+                            "path": "./counter.interfaces",
+                            "id": "src/components/forms/counter/counter.interfaces.ts::CounterIncreaseDetail",
+                            "referenceLocation": "CounterIncreaseDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsDecrease",
+                "name": "dsDecrease",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after a successful decrease step, in addition to `dsChange`/`dsInput`."
+                },
+                "complexType": {
+                    "original": "CounterDecreaseDetail",
+                    "resolved": "number",
+                    "references": {
+                        "CounterDecreaseDetail": {
+                            "location": "import",
+                            "path": "./counter.interfaces",
+                            "id": "src/components/forms/counter/counter.interfaces.ts::CounterDecreaseDetail",
+                            "referenceLocation": "CounterDecreaseDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsFocus",
+                "name": "dsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when focus enters the widget (either button)."
+                },
+                "complexType": {
+                    "original": "CounterFocusDetail",
+                    "resolved": "void",
+                    "references": {
+                        "CounterFocusDetail": {
+                            "location": "import",
+                            "path": "./counter.interfaces",
+                            "id": "src/components/forms/counter/counter.interfaces.ts::CounterFocusDetail",
+                            "referenceLocation": "CounterFocusDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsBlur",
+                "name": "dsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when focus leaves the widget entirely. Tabbing between the two\nbuttons does not emit \u2014 see `handleFocusout`."
+                },
+                "complexType": {
+                    "original": "CounterBlurDetail",
+                    "resolved": "void",
+                    "references": {
+                        "CounterBlurDetail": {
+                            "location": "import",
+                            "path": "./counter.interfaces",
+                            "id": "src/components/forms/counter/counter.interfaces.ts::CounterBlurDetail",
+                            "referenceLocation": "CounterBlurDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    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 counter. Prefers the increase button; falls back to\ndecrease if the increase is disabled (value at max).",
+                    "tags": []
+                }
+            },
+            "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 underlying interactive element used under the hood. Returns\nthe increase button (or decrease, if increase is disabled).",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "min",
+                "methodName": "minChanged"
+            }, {
+                "propName": "max",
+                "methodName": "maxChanged"
+            }, {
+                "propName": "debounce",
+                "methodName": "debounceChanged"
+            }];
+    }
+    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('counter'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Counter.prototype, "createLogger", null);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Counter.prototype, "value", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Counter.prototype, "name", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Counter.prototype, "label", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Counter.prototype, "description", void 0);
+__decorate([
+    OneOf(INPUT_COLORS),
+    __metadata("design:type", String)
+], Counter.prototype, "color", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Counter.prototype, "invalid", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Counter.prototype, "invalidText", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Counter.prototype, "min", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Counter.prototype, "max", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Counter.prototype, "step", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Counter.prototype, "debounce", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Counter.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Counter.prototype, "readonly", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Counter.prototype, "required", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Counter.prototype, "autoInvalidOff", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Counter.prototype, "configChanged", null);
+let CounterIds = 0;