@haiilo/catalyst 10.2.0 → 10.4.0

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

@@ -0,0 +1,923 @@
+import { Host, h } from "@stencil/core";
+import { catI18nRegistry as i18n } from "../cat-i18n/cat-i18n-registry";
+import { getLocale } from "./cat-date-locale";
+import { addDays, addMonth, clampDate, isSameDay, isSameMonth, isSameYear } from "./cat-date-math";
+export class CatDate {
+    constructor() {
+        this.language = i18n.getLocale();
+        this.locale = getLocale(this.language);
+        this.isOpen = false;
+        // additonally store the focus date to ensure correct focus after potential re-render
+        this.focusDate = null;
+        this.hasSlottedLabel = false;
+        this.hasSlottedHint = false;
+        this.viewDate = this.now;
+        this.selectionDate = null;
+        this.requiredMarker = 'optional';
+        this.horizontal = false;
+        this.autoComplete = undefined;
+        this.clearable = false;
+        this.disabled = false;
+        this.hint = undefined;
+        this.icon = undefined;
+        this.iconRight = false;
+        this.identifier = undefined;
+        this.label = '';
+        this.labelHidden = false;
+        this.max = undefined;
+        this.min = undefined;
+        this.name = undefined;
+        this.placeholder = undefined;
+        this.textPrefix = undefined;
+        this.textSuffix = undefined;
+        this.readonly = false;
+        this.required = false;
+        this.value = undefined;
+        this.errors = undefined;
+        this.errorUpdate = 0;
+        this.nativeAttributes = undefined;
+        this.placement = 'bottom-end';
+    }
+    get maxDate() {
+        const [y, m, d] = this.max?.split('-').map(Number) || [];
+        return this.max ? new Date(y, m - 1, d) : null;
+    }
+    get minDate() {
+        const [y, m, d] = this.min?.split('-').map(Number) || [];
+        return this.min ? new Date(y, m - 1, d) : null;
+    }
+    get now() {
+        const date = new Date();
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }
+    get focusedDate() {
+        const [all, year, month, day] = this.hostElement.shadowRoot
+            ?.querySelector(`[data-date]:focus`)
+            ?.dataset.date?.match(/^(\d{4})-(\d{2})-(\d{2})/) ?? [];
+        return all ? new Date(Number(year), Number(month) - 1, Number(day)) : null;
+    }
+    componentWillLoad() {
+        const [match, year, month, day] = this.value?.match(/^(\d{4})-(\d{2})-(\d{2})/) ?? [];
+        if (match) {
+            this.select(new Date(Number(year), Number(month) - 1, Number(day)));
+        }
+    }
+    componentWillRender() {
+        this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+        this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    }
+    componentDidLoad() {
+        const format = this.locale.formatStr.replace('YYYY', 'Y').replace('YY', 'y').replace('MM', 'm').replace('DD', 'd');
+        const [, p1, d1, p2, p3] = /(\w+)([^\w]+)(\w+)[^\w]+(\w+)/.exec(format) || [];
+        this.input?.mask({
+            date: true,
+            dateMin: this.min,
+            dateMax: this.max,
+            delimiter: d1,
+            datePattern: [p1, p2, p3]
+        });
+    }
+    componentDidRender() {
+        if (this.focusDate) {
+            this.hostElement.shadowRoot
+                ?.querySelector(`[data-date="${this.toLocalISO(this.focusDate)}"]`)
+                ?.doFocus();
+            this.focusDate = null;
+        }
+    }
+    onOpen() {
+        this.isOpen = true;
+        this.setAriaLive('');
+        const viewDate = this.selectionDate
+            ? new Date(this.selectionDate.getFullYear(), this.selectionDate.getMonth(), 1)
+            : this.now;
+        this.viewDate = clampDate(this.minDate, viewDate, this.maxDate);
+    }
+    onClose() {
+        this.isOpen = false;
+    }
+    onKeyDown(e) {
+        if (!this.isOpen || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
+            return;
+        }
+        const focused = this.focusedDate;
+        if (!focused) {
+            e.preventDefault();
+            this.focus(this.selectionDate || this.now);
+        }
+        else if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            this.focus(e.shiftKey ? addMonth(focused, -1) : addDays(focused, -1));
+        }
+        else if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            this.focus(e.shiftKey ? addMonth(focused, 1) : addDays(focused, 1));
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.focus(addDays(focused, -7));
+        }
+        else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.focus(addDays(focused, 7));
+        }
+    }
+    /**
+     * Select a date in the picker.
+     *
+     * @param date The date to select.
+     */
+    async select(date) {
+        const oldValue = this.value;
+        const newDate = clampDate(this.minDate, new Date(date.getFullYear(), date.getMonth(), date.getDate()), this.maxDate);
+        this.focus(newDate);
+        this.selectionDate = newDate;
+        this.value = newDate.toISOString();
+        if (oldValue !== this.value) {
+            this.catChange.emit(this.value);
+        }
+    }
+    /**
+     * Programmatically move focus to the input. Use this method instead of
+     * `input.focus()`.
+     *
+     * @param options An optional object providing options to control aspects of
+     * the focusing process.
+     */
+    async doFocus(options) {
+        this.input?.doFocus(options);
+    }
+    /**
+     * Programmatically remove focus from the input. Use this method instead of
+     * `input.blur()`.
+     */
+    async doBlur() {
+        this.input?.doBlur();
+    }
+    /**
+     * Clear the input.
+     */
+    async clear() {
+        this.input?.clear();
+    }
+    render() {
+        const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
+        return (h(Host, { key: 'ebb5f193ca43bc3306449c91d2e391cb25b3287c' }, h("cat-input", { key: '27292844d077a8d79022074a191c47e72736d2c5', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, value: this.getInputValue(), onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, h("span", { key: 'e9c9ad5b5374fcf944396a7ae45ae61775336be4', slot: "label" }, this.label, h("span", { key: '5a05917857fdc967bb122e0403f64b8b71ecf08a', class: "label-aria" }, " (", this.locale.formatStr, ")")), h("cat-dropdown", { key: 'ac1b7f5e1efae2648fa82acb31059ab41d0adb55', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true }, h("cat-button", { key: 'bfaabd6f8120333b497b262894489628beb1d886', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.selectionDate
+                ? `${this.locale.change}, ${this.getA11yLabelDay(this.selectionDate)}`
+                : this.locale.choose }), h("div", { key: '9cfb02ca034584dcdd23fadb5f41ca598552a605', class: "picker", slot: "content" }, h("div", { key: '4d09c5f3ca84346bbcc68f4c83f3413159b8b608', class: "picker-head" }, h("cat-button", { key: '9e8d1695f1a882f2388a2b57ccd8cc51e8b52483', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, this.minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), h("cat-button", { key: '5af1b092c2f0d13e5c12d49699e85ea5dded7580', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, this.minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), h("h3", { key: 'cd730386e0fc19a4b12ee2910e6de7f079133584' }, this.getHeadline()), h("cat-button", { key: 'f0c76ac04573977e255956d2e377dd197080a5b8', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, this.maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), h("cat-button", { key: 'd58917e0665df029acc6dac35e7ab05eab60f9d4', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, this.maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), h("div", { key: '5307170ba72c90fceef4276aa5feb74dc569c74d', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: 'acd6b0e720722ed3e3d013463645fe294a75b68d', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => (h("abbr", { title: this.locale.days.long[i] }, this.locale.days.short[i])))), h("div", { key: 'a8b349d48f3595b7a29a037fb48b130dfb9af438', class: "picker-grid-weeks" }, dateGrid
+            .filter((_, i) => i % 7 === 0)
+            .map(day => (h("div", null, this.getWeekNumber(day))))), h("div", { key: '1e7750157710763ad977d866bb2e511b6ec44d03', class: "picker-grid-days" }, dateGrid.map(day => (h("cat-button", { class: {
+                'cat-date-item': true,
+                'date-other': !isSameMonth(this.viewDate, day),
+                'date-today': isSameDay(this.now, day),
+                'date-selected': isSameDay(this.selectionDate, day),
+                'date-focusable': this.canFocus(day),
+                'date-disabled': !this.canClick(day)
+            }, nativeAttributes: !this.canFocus(day) ? { tabindex: '-1' } : {}, variant: isSameDay(this.selectionDate, day) ? 'filled' : isSameDay(this.now, day) ? 'outlined' : 'text', a11yLabel: this.getA11yLabelDay(day), active: isSameDay(this.selectionDate, day), color: isSameDay(this.selectionDate, day) || isSameDay(this.now, day) ? 'primary' : 'secondary', disabled: !this.canClick(day), onClick: () => this.select(day), "data-date": this.toLocalISO(day) }, day.getDate()))))), h("div", { key: 'd8874097357312b5ddd4bda5e4018d3e642aaf99', class: "picker-foot" }, this.canClick(this.now) && (h("cat-button", { size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.now) }, this.locale.today)), h("p", { key: '42d936d44ef0cb07375415ae42a95565cd7f342b', class: {
+                'cursor-help': true,
+                'cursor-right': this.canClick(this.now)
+            } }, this.locale.arrowKeys), h("p", { key: '6df5566486d5082b3c2cb79fde22cedd7608c8bf', class: "cursor-aria", "aria-live": "polite" })))))));
+    }
+    parse(value) {
+        const [, p1, d1, p2, p3] = /(\w+)([^\w]+)(\w+)[^\w]+(\w+)/.exec(this.locale.formatStr) || [];
+        const formatParts = [p1, p2, p3];
+        const parts = value.split(d1).map(s => Number(s || 'x'));
+        let year = parts[formatParts.indexOf('YYYY') || formatParts.indexOf('YY')] || this.now.getFullYear();
+        const month = parts[formatParts.indexOf('MM')];
+        const day = parts[formatParts.indexOf('DD')];
+        if (!Number.isInteger(month) || !Number.isInteger(day)) {
+            return null;
+        }
+        else if (year < 100) {
+            year += year < 50 ? 2000 : 1900;
+        }
+        return new Date(year, month - 1, day);
+    }
+    focus(date) {
+        this.focusDate = clampDate(this.minDate, date, this.maxDate);
+        this.viewDate = new Date(this.focusDate.getFullYear(), this.focusDate.getMonth());
+        this.hostElement.shadowRoot
+            ?.querySelector(`[data-date="${this.toLocalISO(this.focusDate)}"]`)
+            ?.doFocus();
+    }
+    navigate(direction, period) {
+        this.viewDate = new Date(direction === 'prev'
+            ? period === 'year'
+                ? this.viewDate.setFullYear(this.viewDate.getFullYear() - 1)
+                : this.viewDate.setMonth(this.viewDate.getMonth() - 1)
+            : period === 'year'
+                ? this.viewDate.setFullYear(this.viewDate.getFullYear() + 1)
+                : this.viewDate.setMonth(this.viewDate.getMonth() + 1));
+        // announce the new month and year
+        this.setAriaLive(this.getHeadline());
+    }
+    setAriaLive(text) {
+        const node = this.hostElement.shadowRoot?.querySelector('.cursor-aria');
+        if (node) {
+            node.innerHTML = text;
+        }
+    }
+    onInputBlur(e) {
+        if (!this.input) {
+            return;
+        }
+        const oldValue = this.value;
+        const value = this.parse(this.input.value ?? '');
+        this.selectionDate = value ? clampDate(this.minDate, value, this.maxDate) : value;
+        this.value = this.selectionDate?.toISOString();
+        if (oldValue !== this.value) {
+            this.catChange.emit(this.value);
+        }
+        this.input.value = this.getInputValue();
+        this.catBlur.emit(e);
+    }
+    dateGrid(year, month) {
+        const firstDayOfWeek = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const days = [...Array(daysInMonth).keys()];
+        const daysBefore = [...Array(firstDayOfWeek).keys()].map(day => new Date(year, month, day - firstDayOfWeek).getDate());
+        const daysAfter = [...Array(42 - days.length - daysBefore.length).keys()];
+        return [
+            ...daysBefore.map(day => new Date(year, month - 1, day + 1)),
+            ...days.map(day => new Date(year, month, day + 1)),
+            ...daysAfter.map(day => new Date(year, month + 1, day + 1))
+        ];
+    }
+    getHeadline() {
+        return `${this.locale.months.long[this.viewDate.getMonth()]} ${this.viewDate.getFullYear()}`;
+    }
+    getInputValue() {
+        const format = new Intl.DateTimeFormat(this.language, { year: 'numeric', month: '2-digit', day: '2-digit' });
+        return this.selectionDate ? format.format(this.selectionDate) : '';
+    }
+    getA11yLabelDay(date) {
+        const format = new Intl.DateTimeFormat(this.language, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            weekday: 'long'
+        });
+        return format.format(date);
+    }
+    getWeekNumber(date, iso8601 = true) {
+        const currentDate = new Date(date.getTime());
+        const dayNum = iso8601 ? currentDate.getDay() || 7 : currentDate.getDay();
+        currentDate.setDate(currentDate.getDate() + 4 - dayNum);
+        const yearStart = new Date(currentDate.getFullYear(), 0, 1);
+        return Math.ceil(((+currentDate - +yearStart) / 86400000 + 1) / 7);
+    }
+    canFocus(date) {
+        const now = this.now;
+        const focused = this.focusedDate;
+        if (focused && isSameMonth(focused, this.viewDate)) {
+            return isSameMonth(focused, date) && isSameDay(focused, date);
+        }
+        else if (this.selectionDate && isSameMonth(this.selectionDate, this.viewDate)) {
+            return isSameMonth(this.selectionDate, date) && isSameDay(this.selectionDate, date);
+        }
+        else if (isSameMonth(this.viewDate, now) && (!this.minDate || this.minDate <= now)) {
+            return isSameMonth(this.viewDate, date) && isSameDay(now, date);
+        }
+        const minDay = isSameMonth(date, this.minDate) ? this.minDate?.getDate() ?? 1 : 1;
+        return isSameMonth(this.viewDate, date) && date.getDate() === minDay;
+    }
+    canClick(date) {
+        const min = this.minDate;
+        const max = this.maxDate;
+        return (!min || min <= date) && (!max || max >= date);
+    }
+    toLocalISO(date) {
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    static get is() { return "cat-date"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cat-date.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cat-date.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "requiredMarker": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'",
+                    "resolved": "\"none!\" | \"none\" | \"optional!\" | \"optional\" | \"required!\" | \"required\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the label need a marker to shown if the input is required or optional."
+                },
+                "attribute": "required-marker",
+                "reflect": false,
+                "defaultValue": "'optional'"
+            },
+            "horizontal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the label is on top or left."
+                },
+                "attribute": "horizontal",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "autoComplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hint for form autofill feature."
+                },
+                "attribute": "auto-complete",
+                "reflect": false
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input should show a clear button."
+                },
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional hint text(s) to be displayed with the input."
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of an icon to be displayed in the input."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconRight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the icon on the right."
+                },
+                "attribute": "icon-right",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier for the input."
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the input."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "labelHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
+                },
+                "attribute": "label-hidden",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A maximum value for the date, given in local ISO 8601 date format YYYY-MM-DD."
+                },
+                "attribute": "max",
+                "reflect": false
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A minimum value for the date, given in local ISO 8601 date format YYYY-MM-DD."
+                },
+                "attribute": "min",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the form control. Submitted with the form as part of a name/value pair."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder text to display within the input."
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "textPrefix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A textual prefix to be displayed in the input."
+                },
+                "attribute": "text-prefix",
+                "reflect": false
+            },
+            "textSuffix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A textual suffix to be displayed in the input."
+                },
+                "attribute": "text-suffix",
+                "reflect": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value is not editable."
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A value is required or must be check for the form to be submittable."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the control, given in local ISO 8601 date format YYYY-MM-DD."
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "errors": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string[] | ErrorMap",
+                    "resolved": "boolean | string[] | undefined | { [key: string]: any; }",
+                    "references": {
+                        "ErrorMap": {
+                            "location": "import",
+                            "path": "../cat-form-hint/cat-form-hint",
+                            "id": "src/components/cat-form-hint/cat-form-hint.tsx::ErrorMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The validation errors for this input. Will render a hint under the input\nwith the translated error message(s) `error.${key}`. If an object is\npassed, the keys will be used as error keys and the values translation\nparameters.\nIf the value is `true`, the input will be marked as invalid without any\nhints under the input."
+                },
+                "attribute": "errors",
+                "reflect": false
+            },
+            "errorUpdate": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | number",
+                    "resolved": "boolean | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fine-grained control over when the errors are shown. Can be `false` to\nnever show errors, `true` to show errors on blur, or a number to show\nerrors on change with the given delay in milliseconds."
+                },
+                "attribute": "error-update",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "nativeAttributes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "undefined | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attributes that will be added to the native HTML input element."
+                }
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../node_modules/.pnpm/@floating-ui+dom@1.6.3/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the dropdown."
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom-end'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSlottedLabel": {},
+            "hasSlottedHint": {},
+            "viewDate": {},
+            "selectionDate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "catChange",
+                "name": "catChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value is changed."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "catFocus",
+                "name": "catFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input received focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "catBlur",
+                "name": "catBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "select": {
+                "complexType": {
+                    "signature": "(date: Date) => Promise<void>",
+                    "parameters": [{
+                            "name": "date",
+                            "type": "Date",
+                            "docs": "The date to select."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Select a date in the picker.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "date The date to select."
+                        }]
+                }
+            },
+            "doFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": "An optional object providing options to control aspects of\nthe focusing process."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically move focus to the input. Use this method instead of\n`input.focus()`.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "options An optional object providing options to control aspects of\nthe focusing process."
+                        }]
+                }
+            },
+            "doBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically remove focus from the input. Use this method instead of\n`input.blur()`.",
+                    "tags": []
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear the input.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
+        return [{
+                "name": "catOpen",
+                "method": "onOpen",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "catClose",
+                "method": "onClose",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=cat-date.js.map