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

package/dist/collection/components/date/date.js

@@ -0,0 +1,1241 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h } from "@stencil/core";
+import { inheritAttributes, FormControl, FocusHandler, debounceEvent, Logger, isEscapeKey, OneOf, Type, raf, } from "../../utils/index";
+import { defaultConfig, ListenToConfig } from "../../global/index";
+import { Field } from "../input/field.util";
+import { ClearButton } from "../input/clear-button.util";
+import { INPUT_AUTOCOMPLETES } from "../input/input.interfaces";
+import { DATE_COLORS, } from "./date.interfaces";
+import { createDateMask, getDisplayFormat, isoToDisplay } from "./date.mask";
+import { checkIsWithinRange, DatePickerController } from "./date.picker";
+import { i18nDsTriggerButton } from "../input/trigger-button.i18n";
+/**
+ * Date renders a masked date input field with an interactive calendar popup for date selection.
+ *
+ * @part input - The native HTML input element.
+ * @part clear - The clear button that removes the selected date.
+ * @part trigger - The calendar icon button that opens the date picker popup.
+ */
+export class DsDate {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.control = new FormControl(this);
+        this.focusHandler = new FocusHandler();
+        this.updatingFromMask = false;
+        this.dateId = `ds-date-${DateIds++}`;
+        this.focused = false;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.isOpen = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The value of the date input in ISO format (YYYY-MM-DD).
+         */
+        this.value = null;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.dateId;
+        /**
+         * The label of the date input, which is displayed above the field.
+         */
+        this.label = '';
+        /**
+         * The description of the date input, which is displayed below the field.
+         */
+        this.description = '';
+        /**
+         * Defines the color of the date input. 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 input is in an invalid state.
+         */
+        this.invalidText = '';
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = true;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form.
+         */
+        this.disabled = false;
+        /**
+         * If `true` the element can not be mutated, meaning the user can not edit the control.
+         */
+        this.readonly = false;
+        /**
+         * Instructional text that shows before the input has a value.
+         */
+        this.placeholder = '';
+        /**
+         * This Boolean attribute lets you specify that the control should have input focus when the page loads.
+         */
+        this.autofocus = false;
+        /**
+         * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        this.autocomplete = 'off';
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the `dsChange` event after each keystroke.
+         */
+        this.debounce = 0;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid.
+         */
+        this.autoInvalidOff = false;
+        /**
+         * Shows a loading indicator at the end of the input and replaces the trigger button.
+         */
+        this.loading = false;
+        /**
+         * The minimum ISO date string allowed (YYYY-MM-DD). Dates before this are disabled in the calendar and rejected from typed input.
+         */
+        this.min = undefined;
+        /**
+         * The maximum ISO date string allowed (YYYY-MM-DD). Dates after this are disabled in the calendar and rejected from typed input.
+         */
+        this.max = undefined;
+        /**
+         * Earliest year available for selection. Takes precedence over `min` when both are set.
+         */
+        this.minYearProp = undefined;
+        /**
+         * Latest year available for selection. Takes precedence over `max` when both are set.
+         */
+        this.maxYearProp = undefined;
+        /**
+         * The ISO date string (YYYY-MM-DD) where the calendar opens when no value is set.
+         * The date is not selected — only the view navigates to it.
+         */
+        this.defaultDate = undefined;
+        /**
+         * If `true`, the calendar trigger icon and popup are hidden. The component behaves as a plain masked text input with no date picker UX.
+         */
+        this.freeSolo = false;
+        /**
+         * Callback to determine which dates in the calendar are selectable.
+         * Receives an ISO date string (YYYY-MM-DD) and should return `true` to allow the date or `false` to disable it.
+         * Typed input that resolves to a disallowed date is also rejected.
+         */
+        this.allowedDates = undefined;
+        this.handleClick = (ev) => {
+            this.control.onClick(ev);
+        };
+        this.handleFocus = (ev) => {
+            var _a;
+            (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.setLazy(false);
+            this.control.onFocus(ev);
+        };
+        this.handleBlur = (ev) => {
+            var _a, _b;
+            (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.clearIfIncomplete();
+            (_b = this.dateMask) === null || _b === void 0 ? void 0 : _b.setLazy(!this.value);
+            this.control.onBlur(ev);
+        };
+        this.handleTriggerClick = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.isOpen = !this.isOpen;
+        };
+        this.handleClearClick = () => {
+            var _a, _b;
+            this.updatingFromMask = true;
+            this.value = null;
+            this.control.inputValue = null;
+            (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.syncFromISO(null);
+            (_b = this.datePicker) === null || _b === void 0 ? void 0 : _b.clear({ silent: true });
+            this.dsChange.emit(null);
+            this.updatingFromMask = false;
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    isOpenChanged(open) {
+        var _a, _b, _c;
+        if (open) {
+            this.focusHandler.enable({ target: this.popupHostEl, restoreElement: (_a = this.triggerEl) !== null && _a !== void 0 ? _a : null });
+            (_b = this.datePicker) === null || _b === void 0 ? void 0 : _b.open();
+        }
+        else {
+            (_c = this.datePicker) === null || _c === void 0 ? void 0 : _c.close();
+            this.focusHandler.disable();
+            this.focusHandler.restoreFocus(this.triggerEl);
+        }
+    }
+    valueChanged() {
+        var _a, _b;
+        if (!this.updatingFromMask) {
+            (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.syncFromISO(this.value);
+            (_b = this.datePicker) === null || _b === void 0 ? void 0 : _b.syncFromValue(this.value);
+        }
+    }
+    debounceChanged() {
+        this.dsChange = debounceEvent(this.dsChange, this.debounce);
+    }
+    freeSoloChanged(isFree) {
+        if (isFree && this.isOpen)
+            this.isOpen = false;
+    }
+    minChanged() {
+        var _a;
+        (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.updateMin(this.min, this.minYearProp);
+    }
+    maxChanged() {
+        var _a;
+        (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.updateMax(this.max, this.maxYearProp);
+    }
+    /**
+     * PUBLIC LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToClick(ev) {
+        var _a;
+        this.control.listenOnClick(ev);
+        // Close popup on outside-click using composedPath for shadow-DOM awareness.
+        if (this.isOpen) {
+            const path = ev.composedPath();
+            const insideCalendar = path.includes((_a = this.popupHostEl) !== null && _a !== void 0 ? _a : this.el);
+            if (!insideCalendar) {
+                raf(() => {
+                    this.isOpen = false;
+                });
+            }
+        }
+    }
+    listenToKeyDown(ev) {
+        if (!this.isOpen)
+            return;
+        if (isEscapeKey(ev)) {
+            ev.stopPropagation();
+            this.isOpen = false;
+        }
+    }
+    listenToReset(ev) {
+        var _a;
+        this.control.listenOnReset(ev);
+        (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.clear({ silent: true });
+        // FormControl schedules a setTimeout that writes the raw ISO value into nativeEl,
+        // bypassing IMask. IMask's internal _value is already correct but the DOM is wrong.
+        // We queue a fix that directly restores the display format to the DOM input.
+        setTimeout(() => {
+            var _a;
+            const nativeEl = this.control.nativeEl;
+            if (nativeEl) {
+                nativeEl.value = isoToDisplay(this.value, getDisplayFormat(this.region));
+            }
+            (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.syncFromValue(this.value);
+        });
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        this.debounceChanged();
+        this.control.connectedCallback();
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
+    }
+    componentDidLoad() {
+        this.control.componentDidLoad();
+        this.initMask();
+        if (this.popupHostEl && this.el.shadowRoot) {
+            this.datePicker = new DatePickerController({
+                popupHostEl: this.popupHostEl,
+                shadowRoot: this.el.shadowRoot,
+                language: this.language,
+                region: this.region,
+                min: this.min,
+                max: this.max,
+                minYear: this.minYearProp,
+                maxYear: this.maxYearProp,
+                defaultDate: this.defaultDate,
+                allowedDates: this.allowedDates,
+                initialValue: this.value,
+                onSelect: iso => {
+                    var _a, _b;
+                    this.updatingFromMask = true;
+                    this.value = iso;
+                    this.control.inputValue = iso;
+                    (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.syncFromISO(iso);
+                    this.dsChange.emit(iso);
+                    this.updatingFromMask = false;
+                    this.isOpen = false;
+                    (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.focus();
+                },
+                onClose: () => {
+                    this.isOpen = false;
+                },
+            });
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.focusHandler.disconnect();
+        (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.dateMask = undefined;
+        (_b = this.datePicker) === null || _b === void 0 ? void 0 : _b.destroy();
+        this.datePicker = undefined;
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        var _a, _b;
+        this.language = state.language;
+        this.region = state.region;
+        (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.updateFormat(getDisplayFormat(state.region));
+        (_b = this.datePicker) === null || _b === void 0 ? void 0 : _b.updateLocale(state.language, state.region);
+    }
+    /**
+     * Sets focus on the native `input` in `ds-date`.
+     */
+    async setFocus() {
+        return this.control.setFocus();
+    }
+    /**
+     * Sets blur on the native `input` in `ds-date`.
+     * @internal
+     */
+    async setBlur() {
+        return this.control.setBlur();
+    }
+    /**
+     * Returns the native `<input>` element used under the hood.
+     */
+    async getInputElement() {
+        return this.control.nativeEl;
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    initMask() {
+        const inputEl = this.control.nativeEl;
+        if (!inputEl)
+            return;
+        this.dateMask = createDateMask({
+            inputEl,
+            format: getDisplayFormat(this.region),
+            initialValue: this.value,
+            onAccept: isoValue => {
+                this.dsInput.emit(isoValue);
+            },
+            onComplete: isoValue => {
+                var _a;
+                if (!checkIsWithinRange(isoValue, this.min, this.max, this.minYearProp, this.maxYearProp, this.allowedDates)) {
+                    raf(() => { var _a; return (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.syncFromISO(null); });
+                    return;
+                }
+                this.updatingFromMask = true;
+                this.value = isoValue;
+                this.control.inputValue = isoValue;
+                (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.syncFromValue(isoValue);
+                this.dsChange.emit(isoValue);
+                this.updatingFromMask = false;
+            },
+        });
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const displayValue = isoToDisplay(this.value, getDisplayFormat(this.region));
+        const triggerLabel = i18nDsTriggerButton[this.language].openCalendar;
+        const chooseDateLabel = i18nDsTriggerButton[this.language].chooseDate;
+        return (h(Field, { key: '859a54d8d31278c3fec25f00ac9929181cd7a7b5', disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: "input" }, h("input", Object.assign({ key: '4ad6e0bae869a59beb72ed72e5d90e58efbab930', id: "input", part: "input", name: this.name, type: "text", inputMode: "numeric", ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, value: displayValue, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes)), h(ClearButton, { key: 'cb317335e4e6053cc2dc3f45c59bb7c8b3418bd4', value: this.value, disabled: this.disabled, readonly: this.readonly, language: this.language, onClick: this.handleClearClick }), !this.freeSolo && !this.disabled && !this.readonly && (h("button", { key: 'ba6176e8c753d5055e0cd67eb0d8f973e4c06ce3', id: "trigger", part: "trigger", type: "button", ref: el => (this.triggerEl = el), "aria-label": triggerLabel, title: triggerLabel, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": "popup", onClick: this.handleTriggerClick }, h("ds-icon", { key: 'e5753c5a882058c816cf1feb1d73d2fb2043d027', name: "date" }))), !this.freeSolo && (h("div", { key: 'ceafaa1297f32cf6d6614ecbe21230c5bee7327d', id: "popup", role: "dialog", "aria-modal": "true", "aria-label": chooseDateLabel, "aria-hidden": this.isOpen ? 'false' : 'true', inert: this.isOpen ? undefined : true, ref: el => (this.popupHostEl = el) }))));
+    }
+    static get is() { return "ds-date"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the date input in ISO format (YYYY-MM-DD)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "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.dateId"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the date input, which is displayed above the field."
+                },
+                "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 date input, which is displayed below the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DateColor",
+                    "resolved": "\"\" | \"danger\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "DateColor": {
+                            "location": "import",
+                            "path": "./date.interfaces",
+                            "id": "src/components/date/date.interfaces.ts::DateColor",
+                            "referenceLocation": "DateColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color of the date input. 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": false,
+                "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 input is in an invalid state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid-text",
+                "defaultValue": "''"
+            },
+            "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"
+            },
+            "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."
+                },
+                "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, meaning the user can not edit the control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Instructional text that shows before the input has a value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This Boolean attribute lets you specify that the control should have input focus when the page loads."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputAutocomplete",
+                    "resolved": "\"\" | \"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"cc-additional-name\" | \"cc-csc\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-number\" | \"cc-type\" | \"country\" | \"country-name\" | \"current-password\" | \"email\" | \"family-name\" | \"given-name\" | \"honorific-prefix\" | \"honorific-suffix\" | \"impp\" | \"language\" | \"name\" | \"new-password\" | \"nickname\" | \"off\" | \"on\" | \"one-time-code\" | \"organization\" | \"organization-title\" | \"photo\" | \"postal-code\" | \"sex\" | \"street-address\" | \"tel\" | \"tel-area-code\" | \"tel-country-code\" | \"tel-extension\" | \"tel-local\" | \"tel-national\" | \"transaction-amount\" | \"transaction-currency\" | \"url\" | \"username\"",
+                    "references": {
+                        "InputAutocomplete": {
+                            "location": "import",
+                            "path": "../input/input.interfaces",
+                            "id": "src/components/input/input.interfaces.ts::InputAutocomplete",
+                            "referenceLocation": "InputAutocomplete"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the value of the control can be automatically completed by the browser."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "'off'"
+            },
+            "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debounce",
+                "defaultValue": "0"
+            },
+            "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"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a loading indicator at the end of the input and replaces the trigger button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum ISO date string allowed (YYYY-MM-DD). Dates before this are disabled in the calendar and rejected from typed input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "undefined"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum ISO date string allowed (YYYY-MM-DD). Dates after this are disabled in the calendar and rejected from typed input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "undefined"
+            },
+            "minYearProp": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | undefined",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Earliest year available for selection. Takes precedence over `min` when both are set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-year",
+                "defaultValue": "undefined"
+            },
+            "maxYearProp": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | undefined",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Latest year available for selection. Takes precedence over `max` when both are set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-year",
+                "defaultValue": "undefined"
+            },
+            "defaultDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ISO date string (YYYY-MM-DD) where the calendar opens when no value is set.\nThe date is not selected \u2014 only the view navigates to it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-date",
+                "defaultValue": "undefined"
+            },
+            "freeSolo": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the calendar trigger icon and popup are hidden. The component behaves as a plain masked text input with no date picker UX."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "free-solo",
+                "defaultValue": "false"
+            },
+            "allowedDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "((dateString: string) => boolean) | undefined",
+                    "resolved": "((dateString: string) => boolean) | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback to determine which dates in the calendar are selectable.\nReceives an ISO date string (YYYY-MM-DD) and should return `true` to allow the date or `false` to disable it.\nTyped input that resolves to a disallowed date is also rejected."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {},
+            "language": {},
+            "region": {},
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsBlur",
+                "name": "dsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "DateBlurDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "DateBlurDetail": {
+                            "location": "import",
+                            "path": "./date.interfaces",
+                            "id": "src/components/date/date.interfaces.ts::DateBlurDetail",
+                            "referenceLocation": "DateBlurDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsKeyPress",
+                "name": "dsKeyPress",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a keyboard key has been pressed."
+                },
+                "complexType": {
+                    "original": "DateKeyPressDetail",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "DateKeyPressDetail": {
+                            "location": "import",
+                            "path": "./date.interfaces",
+                            "id": "src/components/date/date.interfaces.ts::DateKeyPressDetail",
+                            "referenceLocation": "DateKeyPressDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsFocus",
+                "name": "dsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input receives focus."
+                },
+                "complexType": {
+                    "original": "DateFocusDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "DateFocusDetail": {
+                            "location": "import",
+                            "path": "./date.interfaces",
+                            "id": "src/components/date/date.interfaces.ts::DateFocusDetail",
+                            "referenceLocation": "DateFocusDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsClick",
+                "name": "dsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input is clicked."
+                },
+                "complexType": {
+                    "original": "DateClickDetail",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "DateClickDetail": {
+                            "location": "import",
+                            "path": "./date.interfaces",
+                            "id": "src/components/date/date.interfaces.ts::DateClickDetail",
+                            "referenceLocation": "DateClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsInput",
+                "name": "dsInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a keyboard input occurred (ISO value or null if incomplete)."
+                },
+                "complexType": {
+                    "original": "DateInputDetail",
+                    "resolved": "null | string",
+                    "references": {
+                        "DateInputDetail": {
+                            "location": "import",
+                            "path": "./date.interfaces",
+                            "id": "src/components/date/date.interfaces.ts::DateInputDetail",
+                            "referenceLocation": "DateInputDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the date value has changed (ISO value or null)."
+                },
+                "complexType": {
+                    "original": "DateChangeDetail",
+                    "resolved": "null | string",
+                    "references": {
+                        "DateChangeDetail": {
+                            "location": "import",
+                            "path": "./date.interfaces",
+                            "id": "src/components/date/date.interfaces.ts::DateChangeDetail",
+                            "referenceLocation": "DateChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    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` in `ds-date`.",
+                    "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` in `ds-date`.",
+                    "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": "isOpen",
+                "methodName": "isOpenChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "debounce",
+                "methodName": "debounceChanged"
+            }, {
+                "propName": "freeSolo",
+                "methodName": "freeSoloChanged"
+            }, {
+                "propName": "min",
+                "methodName": "minChanged"
+            }, {
+                "propName": "minYearProp",
+                "methodName": "minChanged"
+            }, {
+                "propName": "max",
+                "methodName": "maxChanged"
+            }, {
+                "propName": "maxYearProp",
+                "methodName": "maxChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "listenToClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "listenToKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "reset",
+                "method": "listenToReset",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+__decorate([
+    Logger('date'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], DsDate.prototype, "createLogger", null);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], DsDate.prototype, "value", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsDate.prototype, "name", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsDate.prototype, "label", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsDate.prototype, "description", void 0);
+__decorate([
+    OneOf(DATE_COLORS),
+    __metadata("design:type", String)
+], DsDate.prototype, "color", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDate.prototype, "invalid", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsDate.prototype, "invalidText", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDate.prototype, "required", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDate.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDate.prototype, "readonly", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsDate.prototype, "placeholder", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDate.prototype, "autofocus", void 0);
+__decorate([
+    OneOf(INPUT_AUTOCOMPLETES),
+    __metadata("design:type", String)
+], DsDate.prototype, "autocomplete", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], DsDate.prototype, "debounce", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDate.prototype, "autoInvalidOff", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDate.prototype, "loading", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], DsDate.prototype, "min", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], DsDate.prototype, "max", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Object)
+], DsDate.prototype, "minYearProp", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Object)
+], DsDate.prototype, "maxYearProp", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], DsDate.prototype, "defaultDate", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDate.prototype, "freeSolo", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], DsDate.prototype, "configChanged", null);
+let DateIds = 0;