@haiilo/catalyst 10.4.0 → 10.7.0

package/dist/collection/components/cat-date-inline/cat-date-inline.css

@@ -0,0 +1,166 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.picker {
+  display: flex;
+  flex-direction: column;
+  min-width: 19.5rem;
+  max-width: 30rem;
+}
+.picker.picker-weeks {
+  min-width: 17.5rem;
+  max-width: 28rem;
+}
+.picker.picker-small {
+  min-width: 16rem;
+  max-width: 23rem;
+}
+.picker.picker-small.picker-weeks {
+  min-width: 14rem;
+  max-width: 21rem;
+}
+
+.picker-head {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.picker-head h3 {
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: var(--cat-font-weight-head, 600);
+  font-feature-settings: "pnum";
+  flex: 1;
+  text-align: center;
+  margin: 0;
+}
+.picker-small .picker-head {
+  gap: 0.25rem;
+}
+.picker-small .picker-head h3 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-weight: var(--cat-font-weight-head, 600);
+  font-feature-settings: "pnum";
+}
+
+.picker-grid {
+  display: grid;
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+  grid-template-rows: 2rem repeat(6, 1fr);
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-areas: "h h h h h h h" "d d d d d d d" "d d d d d d d" "d d d d d d d" "d d d d d d d" "d d d d d d d" "d d d d d d d";
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+  margin: 1rem 0 0.5rem;
+}
+.picker-weeks .picker-grid {
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+  grid-template-columns: 2rem repeat(7, 1fr);
+  grid-template-areas: ". h h h h h h h" "w d d d d d d d" "w d d d d d d d" "w d d d d d d d" "w d d d d d d d" "w d d d d d d d" "w d d d d d d d";
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+}
+.picker-small .picker-grid {
+  margin: 0.5rem 0;
+}
+
+.picker-grid-head {
+  grid-area: h;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  place-items: end center;
+  padding-bottom: 0.5rem;
+}
+
+.picker-grid-weeks {
+  grid-area: w;
+  display: grid;
+  grid-template-rows: repeat(6, 1fr);
+  place-items: center right;
+  padding-right: 0.5rem;
+}
+
+.picker-grid-days {
+  grid-area: d;
+  display: grid;
+  grid-template-rows: repeat(6, 1fr);
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.picker-grid-head > *,
+.picker-grid-weeks > * {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 600;
+  color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;
+  text-decoration: none;
+}
+
+.date-other {
+  opacity: 0.5;
+}
+
+.date-disabled {
+  opacity: 0.25;
+}
+
+.picker-foot {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  width: min-content;
+  min-width: 100%;
+  justify-content: space-between;
+}
+.picker-small .picker-foot {
+  gap: 0.5rem;
+}
+
+.cursor-help {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  font-weight: var(--cat-font-weight-body, 400);
+  color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;
+  text-align: center;
+  flex: 1;
+}
+.cursor-help:first-child {
+  text-align: left;
+}
+.cursor-help:last-child {
+  text-align: right;
+}
+.cursor-help:only-child {
+  text-align: center;
+}
+.picker-small .cursor-help {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: var(--cat-font-weight-body, 400);
+}
+
+.cursor-aria {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.date-range {
+  --cat-border-radius-m: 0;
+}

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

@@ -0,0 +1,11 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('cat-date-inline', () => {
+    beforeAll(() => (console.error = jest.fn()));
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<cat-date-inline></cat-date-inline>');
+        const element = await page.find('cat-date-inline');
+        expect(element).toHaveClass('hydrated');
+    });
+});
+//# sourceMappingURL=cat-date-inline.e2e.js.map

package/dist/collection/components/cat-date-inline/cat-date-inline.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cat-date-inline.e2e.js","sourceRoot":"","sources":["../../../src/components/cat-date-inline/cat-date-inline.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IAE7C,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,qCAAqC,CAAC,CAAC;QAE7D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACnD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cat-date-inline', () => {\n  beforeAll(() => (console.error = jest.fn()));\n\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cat-date-inline></cat-date-inline>');\n\n    const element = await page.find('cat-date-inline');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

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

@@ -0,0 +1,505 @@
+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";
+/**
+ * An inline date picker component to select a date.
+ */
+export class CatDateInline {
+    constructor() {
+        this.language = i18n.getLocale();
+        this.locale = getLocale(this.language);
+        // additonally store the focus date to ensure correct focus after potential re-render
+        this.focusDate = null;
+        this.viewDate = this.locale.now();
+        this.noClear = false;
+        this.noHint = false;
+        this.noToday = false;
+        this.noWeeks = false;
+        this.size = 'm';
+        this.min = undefined;
+        this.max = undefined;
+        this.range = false;
+        this.value = undefined;
+    }
+    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() {
+        // select the initial value
+        const [startDate, endDate] = this.getValue();
+        this.select(startDate);
+        if (this.range && endDate) {
+            this.select(endDate);
+        }
+    }
+    componentDidRender() {
+        if (this.focusDate) {
+            // re-focus the previously focused date after re-render
+            this.hostElement.shadowRoot
+                ?.querySelector(`[data-date="${this.locale.toLocalISO(this.focusDate)}"]`)
+                ?.doFocus();
+            this.focusDate = null;
+        }
+    }
+    onKeyDown(e) {
+        if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
+            return;
+        }
+        const focusedDate = this.focusedDate;
+        if (!focusedDate) {
+            e.preventDefault();
+            const [startDate] = this.getValue();
+            this.focus(startDate || this.locale.now());
+        }
+        else if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            this.focus(e.shiftKey ? addMonth(focusedDate, -1) : addDays(focusedDate, -1));
+        }
+        else if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            this.focus(e.shiftKey ? addMonth(focusedDate, 1) : addDays(focusedDate, 1));
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.focus(addDays(focusedDate, -7));
+        }
+        else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.focus(addDays(focusedDate, 7));
+        }
+    }
+    /**
+     * Select a date in the picker.
+     *
+     * @param date The date to select.
+     */
+    async select(date) {
+        if (!date) {
+            return this.clear();
+        }
+        const oldValue = this.value;
+        const [minDate, maxDate] = this.getMinMaxDate();
+        const newDate = clampDate(minDate, new Date(date.getFullYear(), date.getMonth(), date.getDate()), maxDate);
+        this.focus(newDate);
+        if (this.range) {
+            const [startDate, endDate] = this.getValue();
+            if (!startDate || endDate || newDate < startDate) {
+                this.value = this.toRangeValue(newDate, null);
+            }
+            else {
+                this.value = this.toRangeValue(startDate, newDate);
+            }
+        }
+        else {
+            this.value = this.locale.toLocalISO(newDate);
+        }
+        if (oldValue !== this.value) {
+            this.catChange.emit(this.value);
+        }
+    }
+    /**
+     * Clear the picker.
+     */
+    async clear() {
+        const oldValue = this.value;
+        this.value = undefined;
+        if (oldValue !== this.value) {
+            this.catChange.emit(this.value);
+        }
+    }
+    /**
+     * Resets the view of the picker.
+     */
+    async resetView() {
+        const [minDate, maxDate] = this.getMinMaxDate();
+        const [dateStart] = this.getValue();
+        this.viewDate = dateStart ?? clampDate(minDate, this.locale.now(), maxDate);
+    }
+    render() {
+        const [minDate, maxDate] = this.getMinMaxDate();
+        const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
+        const [dateStart, dateEnd] = this.getValue();
+        return (h(Host, { key: '2b21e43ebc9a69988b475f2eae1eb2f2aeee97cb' }, h("div", { key: '3f256483614d09440bee07be4e8996bc1c187d2b', class: { picker: true, 'picker-small': this.size === 's', 'picker-weeks': !this.noWeeks } }, h("div", { key: 'c9d82a518d78439164e99240fa13afabcc81e267', class: "picker-head" }, h("cat-button", { key: 'bcc803acb0ac2d7947fa53615ca105d77063e9f9', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), h("cat-button", { key: '3626bbe3e1a79c08d7a6257cb78ce398ceb1b750', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), h("h3", { key: '92462a6702792afd573c91f0c12e2bae599378ae' }, this.getHeadline()), h("cat-button", { key: '4ce63e1451b820098feea0ff2f45d9b7d0b5cc28', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), h("cat-button", { key: '97adedac70ce8f19ba0725ca6a1bb836a1d8c0c3', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), h("div", { key: '9bbc58c07f911e928cd231a784604abada3698ea', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: '2eff946487bfdbce49521b513d6065bd42c78ac0', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => (h("abbr", { title: this.locale.days.long[i] }, this.locale.days.short[i])))), !this.noWeeks && (h("div", { class: "picker-grid-weeks" }, dateGrid
+            .filter((_, i) => i % 7 === 0)
+            .map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: '48f7b239e8ccb0d56b4f7c80d8892b79c2908990', class: "picker-grid-days" }, dateGrid.map(day => {
+            const isStartDate = isSameDay(dateStart, day);
+            const isEndDate = isSameDay(dateEnd, day);
+            const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
+            const isToday = isSameDay(this.locale.now(), day);
+            return (h("cat-button", { class: {
+                    'cat-date-item': true,
+                    'date-other': !isSameMonth(this.viewDate, day),
+                    'date-today': isToday,
+                    'date-start': this.range && isStartDate,
+                    'date-range': this.range && isRange,
+                    'date-end': this.range && isEndDate,
+                    'date-focusable': this.canFocus(day),
+                    'date-disabled': !this.canClick(day)
+                }, size: this.size, nativeAttributes: !this.canFocus(day) ? { tabindex: '-1' } : {}, variant: isStartDate || isEndDate ? 'filled' : isToday ? 'outlined' : 'text', a11yLabel: this.locale.toLocalStr(day), active: isStartDate || isEndDate || isRange, color: isStartDate || isEndDate || isToday ? 'primary' : 'secondary', disabled: !this.canClick(day), onClick: () => this.select(day), "data-date": this.locale.toLocalISO(day) }, day.getDate()));
+        }))), h("div", { key: 'e6c30b78568d92d3a17936fdff4c7fec1ac4965f', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (h("cat-button", { size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), !this.noHint && h("p", { class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (h("cat-button", { size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), h("p", { key: 'e31cabf38ed3545ddd4acc32c2540eb5706bc17c', class: "cursor-aria", "aria-live": "polite" })));
+    }
+    focus(date) {
+        const [minDate, maxDate] = this.getMinMaxDate();
+        this.focusDate = clampDate(minDate, date, maxDate);
+        this.viewDate = new Date(this.focusDate.getFullYear(), this.focusDate.getMonth());
+        this.hostElement.shadowRoot
+            ?.querySelector(`[data-date="${this.locale.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;
+        }
+    }
+    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()}`;
+    }
+    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.locale.now();
+        const [minDate] = this.getMinMaxDate();
+        const focusedDate = this.focusedDate;
+        const [startDate] = this.getValue();
+        if (focusedDate && isSameMonth(focusedDate, this.viewDate)) {
+            return isSameMonth(focusedDate, date) && isSameDay(focusedDate, date);
+        }
+        else if (startDate && isSameMonth(startDate, this.viewDate)) {
+            return isSameMonth(startDate, date) && isSameDay(startDate, date);
+        }
+        else if (isSameMonth(this.viewDate, now) && (!minDate || minDate <= now)) {
+            return isSameMonth(this.viewDate, date) && isSameDay(now, date);
+        }
+        const minDay = isSameMonth(date, minDate) ? minDate?.getDate() ?? 1 : 1;
+        return isSameMonth(this.viewDate, date) && date.getDate() === minDay;
+    }
+    canClick(date) {
+        const [minDate, maxDate] = this.getMinMaxDate();
+        return (!minDate || minDate <= date) && (!maxDate || maxDate >= date);
+    }
+    getMinMaxDate() {
+        const minDate = this.locale.fromLocalISO(this.min);
+        const maxDate = this.locale.fromLocalISO(this.max);
+        return [minDate, maxDate];
+    }
+    getValue() {
+        if (this.range) {
+            const [startDate, endDate] = JSON.parse(this.value || '[]');
+            return [this.locale.fromLocalISO(startDate), this.locale.fromLocalISO(endDate)];
+        }
+        else {
+            return [this.locale.fromLocalISO(this.value), null];
+        }
+    }
+    toRangeValue(startDate, endDate) {
+        return JSON.stringify([startDate, endDate].map(date => (date ? this.locale.toLocalISO(date) : null)));
+    }
+    static get is() { return "cat-date-inline"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cat-date-inline.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cat-date-inline.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "noClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the clear button."
+                },
+                "attribute": "no-clear",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noHint": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the arrow navigation hint."
+                },
+                "attribute": "no-hint",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noToday": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the today button."
+                },
+                "attribute": "no-today",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noWeeks": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the week numbers."
+                },
+                "attribute": "no-weeks",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'm'",
+                    "resolved": "\"m\" | \"s\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the date picker."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'m'"
+            },
+            "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
+            },
+            "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
+            },
+            "range": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow the selection of a range of dates, i.e. start and end date."
+                },
+                "attribute": "range",
+                "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
+            }
+        };
+    }
+    static get states() {
+        return {
+            "viewDate": {}
+        };
+    }
+    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": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "select": {
+                "complexType": {
+                    "signature": "(date: Date | null) => Promise<void>",
+                    "parameters": [{
+                            "name": "date",
+                            "type": "Date | null",
+                            "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."
+                        }]
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear the picker.",
+                    "tags": []
+                }
+            },
+            "resetView": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the view of the picker.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=cat-date-inline.js.map