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

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

@@ -0,0 +1,1361 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { Fragment, h } from "@stencil/core";
+import { defaultConfig, ListenToConfig } from "../../../global/index";
+import { debounceEvent, FocusHandler, FormControl, inheritAttributes, isEscapeKey, Logger, OneOf, Type, raf, watchInvalidTextSlot, } from "../../../utils/index";
+import { Field } from "../input/field.util";
+import { INPUT_AUTOCOMPLETES } from "../input/input.interfaces";
+import { DATEPICKER_COLORS, } from "./datepicker.interfaces";
+import { createDatepickerMask, getDisplayFormat, isoToDisplay } from "./datepicker.mask";
+import { checkIsWithinRange, DatepickerController } from "./datepicker.picker";
+import { i18nDsTriggerButton } from "../input/trigger-button.i18n";
+import { ClearButton } from "../input/clear-button.util";
+/**
+ * Datepicker renders a masked date input field with an interactive calendar popup for date selection.
+ *
+ * @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 clear - The clear button that removes the selected date.
+ * @part trigger - The calendar icon button that opens the date picker popup.
+ */
+export class DsDatepicker {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.control = new FormControl(this);
+        this.focusHandler = new FocusHandler();
+        this.updatingFromMask = false;
+        this.dateId = `ds-datepicker-${DateIds++}`;
+        this.focused = false;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.isOpen = false;
+        this.hasInvalidTextSlotContent = false;
+        // The native input's display text (e.g. `"01.01.200_"` mid-edit). Deliberately its own state rather
+        // than derived inline in `render()` from `value` (`isoToDisplay(this.value, ...)`): IMask owns the
+        // native input's DOM value during typing, and re-deriving from `value` on every render would let *any*
+        // unrelated re-render (or an echoed no-op `value` change from a consumer round-tripping `dsInput` back
+        // into `[value]`) stomp whatever the user is mid-typing. Kept in sync explicitly wherever the mask's
+        // displayed text can change — see `initMask()`'s `onAccept`, `handleClearClick`, the picker's
+        // `onSelect`, `listenToReset`, and the real-external-change branch of `valueChanged()`.
+        this.displayValue = '';
+        /**
+         * 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;
+        /**
+         * If `true`, the date picker is presented inline and no input field is shown.
+         */
+        this.inline = 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;
+        /**
+         * EVENT HANDLERS
+         * ─────────────────────────────────────────────────────
+         */
+        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, _c, _d;
+            (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.clearIfIncomplete();
+            this.displayValue = (_c = (_b = this.dateMask) === null || _b === void 0 ? void 0 : _b.getDisplayText()) !== null && _c !== void 0 ? _c : '';
+            (_d = this.dateMask) === null || _d === void 0 ? void 0 : _d.setLazy(!this.value);
+            this.control.onBlur(ev);
+        };
+        this.handleTriggerClick = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.isOpen = !this.isOpen;
+        };
+        this.handleClearClick = () => {
+            this.clearValue({ resetMask: true });
+        };
+    }
+    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, _c, _d;
+        // Skip when the incoming value already matches what the mask currently represents. This guards
+        // against consumers that echo `dsInput` (emitted on every keystroke, `null`/`''` while the date is
+        // incomplete) straight back into `[value]`: without this check, that round-trip would resync the
+        // mask — and, via `displayValue`, the rendered input — to the same (often empty) value and wipe out
+        // what the user is still typing. Both sides are normalized through `|| null` since consumers may
+        // echo an incomplete/absent date as `''` rather than `null` (e.g. `event.detail ?? ''`).
+        const currentISO = (_b = (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.getISO()) !== null && _b !== void 0 ? _b : null;
+        if (!this.updatingFromMask && (this.value || null) !== currentISO) {
+            (_c = this.dateMask) === null || _c === void 0 ? void 0 : _c.syncFromISO(this.value);
+            (_d = this.datePicker) === null || _d === void 0 ? void 0 : _d.syncFromValue(this.value);
+            this.displayValue = isoToDisplay(this.value, getDisplayFormat(this.region));
+        }
+    }
+    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);
+    }
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback() {
+        this.debounceChanged();
+        this.control.connectedCallback();
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
+        this.displayValue = isoToDisplay(this.value, getDisplayFormat(this.region));
+    }
+    componentDidLoad() {
+        this.control.componentDidLoad();
+        this.initMask();
+        this.mountDatePicker();
+    }
+    // Inline mode renders either the always-visible calendar (`#inline`) or, while disabled, the
+    // regular input+popup markup (`#popup` — see `render()`) — both assign `popupHostEl` via ref,
+    // so toggling `disabled` at runtime swaps which element is actually in the DOM. air-datepicker
+    // attaches to a specific node at construction, so the picker must be torn down and rebuilt
+    // against the new one rather than just reconfigured. Called once from `componentDidLoad()` and
+    // again from `componentDidRender()` whenever that swap is detected.
+    mountDatePicker() {
+        var _a;
+        if (!this.popupHostEl || !this.el.shadowRoot || this.popupHostEl === this.pickerHostEl)
+            return;
+        (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.pickerHostEl = this.popupHostEl;
+        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.displayValue = isoToDisplay(iso, getDisplayFormat(this.region));
+                this.dsChange.emit(iso);
+                if (this.inline)
+                    this.dsBlur.emit(new FocusEvent('blur'));
+                this.updatingFromMask = false;
+                this.isOpen = false;
+                (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.focus();
+            },
+            onClose: () => {
+                this.isOpen = false;
+            },
+        });
+    }
+    componentDidRender() {
+        this.mountDatePicker();
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        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;
+        (_c = this.disconnectInvalidTextSlotWatcher) === null || _c === void 0 ? void 0 : _c.call(this);
+    }
+    /**
+     * 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;
+            this.displayValue = isoToDisplay(this.value, getDisplayFormat(this.region));
+            if (nativeEl) {
+                nativeEl.value = this.displayValue;
+            }
+            (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.syncFromValue(this.value);
+        });
+    }
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        var _a, _b, _c, _d;
+        this.language = state.language;
+        this.region = state.region;
+        (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.updateFormat(getDisplayFormat(state.region));
+        this.displayValue = (_c = (_b = this.dateMask) === null || _b === void 0 ? void 0 : _b.getDisplayText()) !== null && _c !== void 0 ? _c : isoToDisplay(this.value, getDisplayFormat(state.region));
+        (_d = this.datePicker) === null || _d === void 0 ? void 0 : _d.updateLocale(state.language, state.region);
+    }
+    /**
+     * Sets focus on the native `input` in `ds-datepicker`.
+     */
+    async setFocus() {
+        return this.control.setFocus();
+    }
+    /**
+     * Sets blur on the native `input` in `ds-datepicker`.
+     * @internal
+     */
+    async setBlur() {
+        return this.control.setBlur();
+    }
+    /**
+     * Returns the native `<input>` element used under the hood.
+     */
+    async getInputElement() {
+        return this.control.nativeEl;
+    }
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Un-sets `value` and emits `dsChange`, like the clear button. `resetMask: false` skips re-syncing the
+     * mask — used from `onAccept` where the mask is already empty, avoiding a recursive `accept` and a
+     * placeholder flicker.
+     */
+    clearValue({ resetMask }) {
+        var _a, _b;
+        this.updatingFromMask = true;
+        this.value = null;
+        this.control.inputValue = null;
+        if (resetMask) {
+            (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.syncFromISO(null);
+            this.displayValue = '';
+        }
+        (_b = this.datePicker) === null || _b === void 0 ? void 0 : _b.clear({ silent: true });
+        this.dsChange.emit(null);
+        this.updatingFromMask = false;
+    }
+    initMask() {
+        const inputEl = this.control.nativeEl;
+        if (!inputEl)
+            return;
+        this.dateMask = createDatepickerMask({
+            inputEl,
+            format: getDisplayFormat(this.region),
+            initialValue: this.value,
+            onAccept: (isoValue, event) => {
+                var _a, _b, _c;
+                // Mirror the mask's own live (possibly incomplete) display text into state so a re-render
+                // triggered by anything else while the user is mid-edit reflects what's actually in the input
+                // rather than snapping back to the last committed `value`. See `displayValue`'s declaration.
+                this.displayValue = (_b = (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.getDisplayText()) !== null && _b !== void 0 ? _b : '';
+                // Keep FormControl's own bookkeeping of "what's currently in the field" in sync with the mask's
+                // live ISO (or `null` while incomplete). Without this, deleting part of a complete date (e.g. just
+                // the year) leaves `control.inputValue` stuck on the last *complete* ISO — `isEmpty()` below only
+                // catches a fully-cleared field, not a partially-edited one — so blur's `setValue(inputValue)`
+                // (see `FormControl.onBlur`) would resurrect that stale date instead of committing the clear.
+                this.control.inputValue = isoValue;
+                // Field fully cleared by backspace/DEL rather than the clear button — treat it as a clear too.
+                // Gated on `event`, which IMask only supplies for a real keystroke: any of our own internal mask
+                // resets (out-of-range revert, `clearIfIncomplete` on blur, locale/format changes, ...) fire this
+                // same `accept` with `event` `undefined`, so they can never be mistaken for the user clearing the
+                // field — no need to thread `updatingFromMask` through every place that touches the mask.
+                if (event && this.value !== null && ((_c = this.dateMask) === null || _c === void 0 ? void 0 : _c.isEmpty())) {
+                    this.clearValue({ resetMask: false });
+                }
+                this.dsInput.emit(isoValue);
+            },
+            onComplete: isoValue => {
+                var _a;
+                if (!checkIsWithinRange(isoValue, this.min, this.max, this.minYearProp, this.maxYearProp, this.allowedDates)) {
+                    // Reject the typed date and blank the mask display — a revert, not a clear, so `value`/`dsChange`
+                    // are left untouched. Safe to leave `updatingFromMask` alone: the reset happens outside any
+                    // input event, so `onAccept` sees `event === undefined` and skips its own-clear check.
+                    this.control.inputValue = this.value;
+                    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 triggerLabel = i18nDsTriggerButton[this.language].openCalendar;
+        const chooseDateLabel = i18nDsTriggerButton[this.language].chooseDate;
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        // Inline mode normally renders the calendar directly with no trigger to gate it behind. While
+        // disabled there's nothing safe to keep interactive inside it (nav buttons, day cells), so
+        // instead of disabling every control piecemeal, fall back to the regular input+popup markup —
+        // same as the non-inline disabled state, just with the popup unreachable (no trigger renders).
+        const showInlineCalendar = this.inline && !this.disabled;
+        return (h(Field, { key: '36285800f9b4adf94506b497361ee70d2a29c702', cssClasses: { 'is-inline': showInlineCalendar }, disabled: this.disabled, color: this.color, invalid: isInvalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: "input" }, showInlineCalendar && (h("div", { key: 'a036be47262a9378d1fed472a3e1a1810428d991', id: "inline", role: "group", "aria-label": chooseDateLabel, ref: el => (this.popupHostEl = el) })), !showInlineCalendar && (h(Fragment, { key: '63720ca1153f3400673badeac69bfb4c39367bf7' }, h("input", Object.assign({ key: '38199ef1db2139aff0b2fc362197649eeecde1d6', id: "input", part: "input", name: this.name, type: "text", inputMode: "numeric", ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', disabled: this.disabled, autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, value: this.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: 'c207abaae54b135f922b1cb1fa0cac000022bb4e', value: this.value, disabled: this.disabled, readonly: this.readonly, language: this.language, onClick: this.handleClearClick }), !this.freeSolo && !this.disabled && !this.readonly && (h("button", { key: '7b5f85b03e3ef8654f4a9b626a021b599dddc019', 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: '1ff02d0f239bde057ce344fa8b0f7d13db9ed6b6', name: "date" }))), !this.freeSolo && (h("div", { key: 'ca7e48eaaaecdb1cdcd4c6a368a1105abab71e3e', 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-datepicker"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["datepicker.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["datepicker.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": "DatepickerColor",
+                    "resolved": "\"danger\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "DatepickerColor": {
+                            "location": "import",
+                            "path": "./datepicker.interfaces",
+                            "id": "src/components/forms/datepicker/datepicker.interfaces.ts::DatepickerColor",
+                            "referenceLocation": "DatepickerColor"
+                        }
+                    }
+                },
+                "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/forms/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"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the date picker is presented inline and no input field is shown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inline",
+                "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": {},
+            "hasInvalidTextSlotContent": {},
+            "displayValue": {}
+        };
+    }
+    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": "DatepickerBlurDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "DatepickerBlurDetail": {
+                            "location": "import",
+                            "path": "./datepicker.interfaces",
+                            "id": "src/components/forms/datepicker/datepicker.interfaces.ts::DatepickerBlurDetail",
+                            "referenceLocation": "DatepickerBlurDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsKeyPress",
+                "name": "dsKeyPress",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a keyboard key has been pressed."
+                },
+                "complexType": {
+                    "original": "DatepickerKeyPressDetail",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "DatepickerKeyPressDetail": {
+                            "location": "import",
+                            "path": "./datepicker.interfaces",
+                            "id": "src/components/forms/datepicker/datepicker.interfaces.ts::DatepickerKeyPressDetail",
+                            "referenceLocation": "DatepickerKeyPressDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsFocus",
+                "name": "dsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input receives focus."
+                },
+                "complexType": {
+                    "original": "DatepickerFocusDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "DatepickerFocusDetail": {
+                            "location": "import",
+                            "path": "./datepicker.interfaces",
+                            "id": "src/components/forms/datepicker/datepicker.interfaces.ts::DatepickerFocusDetail",
+                            "referenceLocation": "DatepickerFocusDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsClick",
+                "name": "dsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input is clicked."
+                },
+                "complexType": {
+                    "original": "DatepickerClickDetail",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "DatepickerClickDetail": {
+                            "location": "import",
+                            "path": "./datepicker.interfaces",
+                            "id": "src/components/forms/datepicker/datepicker.interfaces.ts::DatepickerClickDetail",
+                            "referenceLocation": "DatepickerClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "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": "DatepickerInputDetail",
+                    "resolved": "null | string",
+                    "references": {
+                        "DatepickerInputDetail": {
+                            "location": "import",
+                            "path": "./datepicker.interfaces",
+                            "id": "src/components/forms/datepicker/datepicker.interfaces.ts::DatepickerInputDetail",
+                            "referenceLocation": "DatepickerInputDetail"
+                        }
+                    }
+                }
+            }, {
+                "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": "DatepickerChangeDetail",
+                    "resolved": "null | string",
+                    "references": {
+                        "DatepickerChangeDetail": {
+                            "location": "import",
+                            "path": "./datepicker.interfaces",
+                            "id": "src/components/forms/datepicker/datepicker.interfaces.ts::DatepickerChangeDetail",
+                            "referenceLocation": "DatepickerChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    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-datepicker`.",
+                    "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-datepicker`.",
+                    "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",
+                "handlerOptions": {
+                    "immediate": true
+                }
+            }, {
+                "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('datepicker'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], DsDatepicker.prototype, "createLogger", null);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], DsDatepicker.prototype, "value", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsDatepicker.prototype, "name", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsDatepicker.prototype, "label", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsDatepicker.prototype, "description", void 0);
+__decorate([
+    OneOf(DATEPICKER_COLORS),
+    __metadata("design:type", String)
+], DsDatepicker.prototype, "color", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDatepicker.prototype, "invalid", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsDatepicker.prototype, "invalidText", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDatepicker.prototype, "required", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDatepicker.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDatepicker.prototype, "readonly", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], DsDatepicker.prototype, "placeholder", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDatepicker.prototype, "autofocus", void 0);
+__decorate([
+    OneOf(INPUT_AUTOCOMPLETES),
+    __metadata("design:type", String)
+], DsDatepicker.prototype, "autocomplete", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], DsDatepicker.prototype, "debounce", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDatepicker.prototype, "autoInvalidOff", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDatepicker.prototype, "inline", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDatepicker.prototype, "loading", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], DsDatepicker.prototype, "min", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], DsDatepicker.prototype, "max", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Object)
+], DsDatepicker.prototype, "minYearProp", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Object)
+], DsDatepicker.prototype, "maxYearProp", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], DsDatepicker.prototype, "defaultDate", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DsDatepicker.prototype, "freeSolo", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], DsDatepicker.prototype, "configChanged", null);
+let DateIds = 0;