@sula-tech/webcomponents 0.20.1 → 0.22.0

package/dist/collection/components/sula-calendar/sula-calendar.js

@@ -0,0 +1,792 @@
+import { Host, h } from "@stencil/core";
+import { SulaTextfieldStatus } from "../sula-textfield/model/sula-textfield.model";
+import { SulaCalendarStatus } from "./model/sula-calendar.model";
+const DATE_PATTERN = /^(\d{2})\/(\d{2})\/(\d{4})$/;
+const DAYS_IN_WEEK = 7;
+const FALLBACK_LOCALE = 'pt-BR';
+export class SulaCalendar {
+    constructor() {
+        /**
+         * Selected date in the `DD/MM/YYYY` format. In range mode the format is `DD/MM/YYYY - DD/MM/YYYY`
+         */
+        this.value = '';
+        /**
+         * The calendar is disabled
+         */
+        this.disabled = false;
+        /**
+         * The calendar field status
+         */
+        this.status = SulaCalendarStatus.Default;
+        /**
+         * Locale used to format month and weekday names
+         */
+        this.locale = 'pt-BR';
+        /**
+         * Enables selecting a date range (start and end dates) instead of a single date
+         */
+        this.range = false;
+        /**
+         * Allows typing the date directly in the field. When false, the date can only be picked in the calendar
+         */
+        this.allowTyping = true;
+        /**
+         * Renders only the calendar panel, without the input field
+         */
+        this.inline = false;
+        /**
+         * Renders a smaller chip-like trigger showing only the selected date (`DD/MM/YY`), instead of the input field
+         */
+        this.compact = false;
+        /**
+         * First day of the week, where 0 is Sunday and 6 is Saturday
+         */
+        this.firstDayOfWeek = 0;
+        /**
+         * Closes the calendar panel after a date is selected
+         */
+        this.closeOnSelect = true;
+        this.showCalendar = false;
+        this.openUpward = false;
+        this.hoverDate = null;
+        this.handleFieldClick = () => {
+            this.open();
+        };
+        this.handleCompactClick = (event) => {
+            event.stopPropagation();
+            if (this.showCalendar) {
+                this.close();
+            }
+            else {
+                this.open();
+            }
+        };
+        this.handleFieldKeydown = (event) => {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.open();
+            }
+        };
+        this.handleInputChanged = (event) => {
+            var _a;
+            event.stopPropagation();
+            const typedValue = (_a = event.detail) !== null && _a !== void 0 ? _a : '';
+            this.value = typedValue;
+            if (this.range) {
+                const { start, end } = this.getRange();
+                if (start && end && start.getTime() <= end.getTime()) {
+                    this.rangeSelected.emit({ start: this.formatDate(start), end: this.formatDate(end) });
+                }
+                return;
+            }
+            this.valueChanged.emit(typedValue);
+        };
+        this.handlePreviousMonth = (event) => {
+            event.stopPropagation();
+            this.changeMonth(-1);
+        };
+        this.handleNextMonth = (event) => {
+            event.stopPropagation();
+            this.changeMonth(1);
+        };
+        this.handleSelectDay = (event, day) => {
+            event.stopPropagation();
+            if (day.isDisabled || this.disabled)
+                return;
+            if (this.range) {
+                this.selectRangeDay(day.date);
+                return;
+            }
+            const formatted = this.formatDate(day.date);
+            this.value = formatted;
+            this.dateSelected.emit(formatted);
+            this.valueChanged.emit(formatted);
+            if (this.closeOnSelect && !this.inline) {
+                this.close();
+            }
+        };
+        this.handleGridLeave = () => {
+            this.hoverDate = null;
+        };
+    }
+    handleValueChange() {
+        this.hoverDate = null;
+        // keeps the view on the current month while an incomplete date is being typed
+        if (this.selectedDate) {
+            this.syncViewWithValue();
+        }
+    }
+    handleDocumentClick(event) {
+        if (!this.showCalendar || !this.node)
+            return;
+        if (!event.composedPath().includes(this.node)) {
+            this.close();
+        }
+    }
+    handleDocumentKeydown(event) {
+        if (this.showCalendar && event.key === 'Escape') {
+            this.close();
+        }
+    }
+    componentWillLoad() {
+        this.syncViewWithValue();
+    }
+    componentDidRender() {
+        if (this.showCalendar) {
+            this.calculatePanelPosition();
+        }
+    }
+    get selectedDate() {
+        return this.getRange().start;
+    }
+    getRange() {
+        var _a;
+        if (!this.range) {
+            return { start: this.parseDate(this.value), end: null };
+        }
+        const [startText, endText] = ((_a = this.value) !== null && _a !== void 0 ? _a : '').split('-');
+        return { start: this.parseDate(startText), end: this.parseDate(endText) };
+    }
+    syncViewWithValue() {
+        var _a;
+        const reference = (_a = this.selectedDate) !== null && _a !== void 0 ? _a : new Date();
+        this.viewMonth = reference.getMonth();
+        this.viewYear = reference.getFullYear();
+    }
+    parseDate(value) {
+        const match = DATE_PATTERN.exec((value !== null && value !== void 0 ? value : '').trim());
+        if (!match)
+            return null;
+        const day = Number(match[1]);
+        const month = Number(match[2]);
+        const year = Number(match[3]);
+        const date = new Date(year, month - 1, day, 0, 0, 0, 0);
+        const isValid = date.getDate() === day && date.getMonth() === month - 1 && date.getFullYear() === year;
+        return isValid ? date : null;
+    }
+    formatDate(date) {
+        const day = `${date.getDate()}`.padStart(2, '0');
+        const month = `${date.getMonth() + 1}`.padStart(2, '0');
+        return `${day}/${month}/${date.getFullYear()}`;
+    }
+    capitalize(text) {
+        return text.charAt(0).toUpperCase() + text.slice(1);
+    }
+    isSameDay(first, second) {
+        return first.getDate() === second.getDate() && first.getMonth() === second.getMonth() && first.getFullYear() === second.getFullYear();
+    }
+    isOutOfRange(date, min, max) {
+        return (!!min && date.getTime() < min.getTime()) || (!!max && date.getTime() > max.getTime());
+    }
+    get weekStart() {
+        const value = Math.trunc(Number(this.firstDayOfWeek));
+        return Number.isFinite(value) ? ((value % DAYS_IN_WEEK) + DAYS_IN_WEEK) % DAYS_IN_WEEK : 0;
+    }
+    // an invalid `locale` would make Intl throw and break the whole render
+    createFormatter(options) {
+        try {
+            return new Intl.DateTimeFormat(this.locale, options);
+        }
+        catch (_a) {
+            return new Intl.DateTimeFormat(FALLBACK_LOCALE, options);
+        }
+    }
+    getMonthLabel() {
+        const date = new Date(this.viewYear, this.viewMonth, 1);
+        const month = this.createFormatter({ month: 'short' }).format(date).replace(/\./g, '');
+        return `${this.capitalize(month)} ${this.viewYear}`;
+    }
+    getWeekdays() {
+        const shortFormatter = this.createFormatter({ weekday: 'short' });
+        const longFormatter = this.createFormatter({ weekday: 'long' });
+        return Array.from({ length: DAYS_IN_WEEK }, (_, index) => {
+            // 2024-01-07 is a Sunday, used as a stable reference to build the weekday sequence
+            const date = new Date(2024, 0, 7 + ((index + this.weekStart) % DAYS_IN_WEEK));
+            return {
+                short: this.capitalize(shortFormatter.format(date).replace(/\./g, '')),
+                long: this.capitalize(longFormatter.format(date)),
+            };
+        });
+    }
+    getWeeks() {
+        const today = new Date();
+        const { start, end } = this.getRange();
+        const previewEnd = this.range && !!start && !end ? this.hoverDate : null;
+        const rangeEnd = end !== null && end !== void 0 ? end : previewEnd;
+        const hasRange = this.range && !!start && !!rangeEnd;
+        const from = hasRange && start.getTime() > rangeEnd.getTime() ? rangeEnd : start;
+        const to = hasRange && start.getTime() > rangeEnd.getTime() ? start : rangeEnd;
+        const firstOfMonth = new Date(this.viewYear, this.viewMonth, 1);
+        const min = this.parseDate(this.minDate);
+        const max = this.parseDate(this.maxDate);
+        const offset = (firstOfMonth.getDay() - this.weekStart + DAYS_IN_WEEK) % DAYS_IN_WEEK;
+        const daysInMonth = new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
+        const totalCells = Math.ceil((offset + daysInMonth) / DAYS_IN_WEEK) * DAYS_IN_WEEK;
+        const weeks = [];
+        for (let cell = 0; cell < totalCells; cell++) {
+            const date = new Date(this.viewYear, this.viewMonth, cell - offset + 1);
+            const day = {
+                date,
+                day: date.getDate(),
+                isCurrentMonth: date.getMonth() === this.viewMonth && date.getFullYear() === this.viewYear,
+                isSelected: (!!start && this.isSameDay(date, start)) || (this.range && !!end && this.isSameDay(date, end)),
+                isRangeStart: hasRange && this.isSameDay(date, from),
+                isRangeEnd: hasRange && this.isSameDay(date, to),
+                isInRange: hasRange && date.getTime() > from.getTime() && date.getTime() < to.getTime(),
+                isRangePreview: !!previewEnd && this.isSameDay(date, previewEnd) && !this.isSameDay(date, start),
+                isToday: this.isSameDay(date, today),
+                isDisabled: this.isOutOfRange(date, min, max),
+            };
+            if (cell % DAYS_IN_WEEK === 0)
+                weeks.push([]);
+            weeks[weeks.length - 1].push(day);
+        }
+        return weeks;
+    }
+    calculatePanelPosition() {
+        var _a, _b;
+        if (!this.node || this.inline)
+            return;
+        const rect = this.node.getBoundingClientRect();
+        const panelHeight = (_b = (_a = this.panelNode) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        this.openUpward = spaceBelow < panelHeight && spaceAbove > spaceBelow;
+    }
+    open() {
+        if (this.disabled || this.showCalendar)
+            return;
+        this.showCalendar = true;
+        this.calendarOpened.emit();
+    }
+    close() {
+        if (!this.showCalendar)
+            return;
+        this.showCalendar = false;
+        this.hoverDate = null;
+        this.calendarClosed.emit();
+    }
+    getCompactLabel() {
+        const { start, end } = this.getRange();
+        const short = (date) => this.formatDate(date).replace(/\/\d{2}(\d{2})$/, '/$1');
+        if (!start)
+            return this.placeholder || this.label || '';
+        return this.range && end ? `${short(start)} - ${short(end)}` : short(start);
+    }
+    changeMonth(step) {
+        const date = new Date(this.viewYear, this.viewMonth + step, 1);
+        this.viewMonth = date.getMonth();
+        this.viewYear = date.getFullYear();
+        this.monthChanged.emit({ month: this.viewMonth, year: this.viewYear });
+    }
+    selectRangeDay(date) {
+        const { start, end } = this.getRange();
+        // first click, or a click after a complete range, starts a new range
+        if (!start || end) {
+            this.value = this.formatDate(date);
+            return;
+        }
+        const [from, to] = date.getTime() < start.getTime() ? [date, start] : [start, date];
+        const range = { start: this.formatDate(from), end: this.formatDate(to) };
+        this.value = `${range.start} - ${range.end}`;
+        this.rangeSelected.emit(range);
+        if (this.closeOnSelect && !this.inline) {
+            this.close();
+        }
+    }
+    handleDayHover(day) {
+        if (!this.range || day.isDisabled)
+            return;
+        this.hoverDate = day.date;
+    }
+    getTextfieldStatus() {
+        return this.status === SulaCalendarStatus.Error ? SulaTextfieldStatus.Error : SulaTextfieldStatus.Default;
+    }
+    renderHeader() {
+        return (h("div", { class: "flex h-28 w-full flex-row items-center justify-between gap-12 px-4" }, h("button", { type: "button", class: "flex h-28 w-28 items-center justify-center rounded-xs hover:bg-states-empty-bg-hover", "aria-label": "M\u00EAs anterior", onClick: this.handlePreviousMonth }, h("sula-icon", { icon: "ph ph-caret-left", customClass: "text-base text-text-secondary" })), h("span", { class: "text-label-medium-regular text-text-primary", "aria-live": "polite" }, this.getMonthLabel()), h("button", { type: "button", class: "flex h-28 w-28 items-center justify-center rounded-xs hover:bg-states-empty-bg-hover", "aria-label": "Pr\u00F3ximo m\u00EAs", onClick: this.handleNextMonth }, h("sula-icon", { icon: "ph ph-caret-right", customClass: "text-base text-text-secondary" }))));
+    }
+    renderDay(day) {
+        return (h("div", { role: "gridcell", "aria-selected": day.isSelected ? 'true' : 'false', "aria-disabled": day.isDisabled ? 'true' : null, "aria-current": day.isToday ? 'date' : null, class: "relative flex w-full items-center justify-center", onMouseEnter: () => this.handleDayHover(day) }, (day.isInRange || day.isRangeStart !== day.isRangeEnd) && (h("span", { "data-range-background": true, "aria-hidden": "true", class: {
+                'absolute inset-y-0 bg-surface-on-body-brand': true,
+                'inset-x-0': day.isInRange,
+                'right-0 w-1/2': day.isRangeStart && !day.isRangeEnd,
+                'left-0 w-1/2': day.isRangeEnd && !day.isRangeStart,
+            } })), h("button", { type: "button", disabled: day.isDisabled, "aria-label": this.formatDate(day.date), onClick: (event) => this.handleSelectDay(event, day), class: {
+                'relative flex h-36 w-36 items-center justify-center rounded-xxl text-label-small-regular transition-colors': true,
+                'bg-brand-primary text-neutral-neutral-1': day.isSelected,
+                'border border-brand-primary text-text-primary': day.isRangePreview && !day.isSelected,
+                'text-text-primary hover:bg-states-empty-bg-hover': !day.isSelected && day.isCurrentMonth && !day.isDisabled,
+                'text-text-secondary opacity-50 hover:bg-states-empty-bg-hover': !day.isSelected && !day.isCurrentMonth && !day.isDisabled,
+                'cursor-not-allowed text-text-disabled line-through': day.isDisabled,
+            } }, day.day)));
+    }
+    renderPanel() {
+        return (h("div", { ref: node => (this.panelNode = node), role: this.inline ? 'group' : 'dialog', "aria-label": "Calend\u00E1rio", class: {
+                'calendar-panel flex flex-col items-center rounded-lg border border-line-general bg-surface-body p-24': true,
+                'w-full': !this.compact || this.inline,
+                'absolute left-0 z-50': !this.inline,
+                'calendar-panel--compact': this.compact && !this.inline,
+                'bottom-full mb-8': !this.inline && this.openUpward,
+                'top-full mt-8': !this.inline && !this.openUpward,
+            } }, h("div", { class: "flex w-full flex-col items-center gap-24" }, this.renderHeader(), h("div", { class: "flex w-full flex-col", role: "grid" }, h("div", { class: "grid grid-cols-7", role: "row" }, this.getWeekdays().map(weekday => (h("div", { role: "columnheader", title: weekday.long, class: "flex h-22 w-full items-center justify-center text-label-small-regular text-text-secondary" }, weekday.short)))), h("div", { role: "rowgroup", class: "grid gap-y-8 pt-8", onMouseLeave: this.handleGridLeave }, this.getWeeks().map(week => (h("div", { class: "grid grid-cols-7", role: "row" }, week.map(day => this.renderDay(day))))))))));
+    }
+    render() {
+        return (h(Host, { key: '03f17f7e0e68a7229d3aca0eff13974e32653d87', ref: node => (this.node = node) }, h("div", { key: '1a480da01747dedffbfe78831404433cbbd75b18', class: { 'relative': true, 'w-full': !this.compact || this.inline, 'inline-block': this.compact && !this.inline } }, !this.inline && this.compact && (h("button", { key: '8f2bf98089507e52f21add599c865e460adefc24', type: "button", disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.showCalendar ? 'true' : 'false', "aria-label": this.label, onClick: this.handleCompactClick, class: {
+                'flex h-40 items-center justify-center gap-8 rounded-xxl bg-surface-on-body px-16 py-2 text-label-medium-bold text-text-primary': true,
+                'cursor-not-allowed opacity-50': this.disabled,
+            } }, h("sula-icon", { key: 'c27d9bca935147017996159a75b163c5f082cd96', icon: "ph ph-calendar-dots", customClass: "text-2xl text-text-secondary" }), h("span", { key: '239d70e9d79003484221a43efafdb503cff36fb2', class: "whitespace-nowrap" }, this.getCompactLabel()), h("sula-icon", { key: '13940e9f9c38e8a2be2bccdbf2b701f6db2b7cae', icon: this.showCalendar ? 'ph ph-caret-up' : 'ph ph-caret-down', customClass: "text-base text-text-primary" }))), !this.inline && !this.compact && (h("div", { key: '2cde57cb84d986160f4e6e5209f3e0537bfe4d1d', onClick: this.handleFieldClick, onKeyDown: this.handleFieldKeydown }, h("sula-textfield", { key: '1aea48c63cd5fb65c833b6673690d9672d8b2e5b', label: this.label, value: this.value, placeholder: this.placeholder, disabled: this.disabled, helpText: this.helpText, status: this.getTextfieldStatus(), icon: "ph ph-calendar-blank", maskPattern: this.range ? '99/99/9999 - 99/99/9999' : '99/99/9999', readOnly: !this.allowTyping, onValueChanged: this.handleInputChanged }))), (this.inline || this.showCalendar) && this.renderPanel())));
+    }
+    static get is() { return "sula-calendar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-calendar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-calendar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The calendar field label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected date in the `DD/MM/YYYY` format. In range mode the format is `DD/MM/YYYY - DD/MM/YYYY`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The calendar field placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The calendar is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "helpText": {
+                "type": "string",
+                "attribute": "help-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The help text displayed below the field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "status": {
+                "type": "string",
+                "attribute": "status",
+                "mutable": false,
+                "complexType": {
+                    "original": "SulaCalendarStatus",
+                    "resolved": "SulaCalendarStatus.Default | SulaCalendarStatus.Error",
+                    "references": {
+                        "SulaCalendarStatus": {
+                            "location": "import",
+                            "path": "./model/sula-calendar.model",
+                            "id": "src/components/sula-calendar/model/sula-calendar.model.ts::SulaCalendarStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The calendar field status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaCalendarStatus.Default"
+            },
+            "locale": {
+                "type": "string",
+                "attribute": "locale",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Locale used to format month and weekday names"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'pt-BR'"
+            },
+            "minDate": {
+                "type": "string",
+                "attribute": "min-date",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Earliest selectable date in the `DD/MM/YYYY` format"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "maxDate": {
+                "type": "string",
+                "attribute": "max-date",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Latest selectable date in the `DD/MM/YYYY` format"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "range": {
+                "type": "boolean",
+                "attribute": "range",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables selecting a date range (start and end dates) instead of a single date"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "allowTyping": {
+                "type": "boolean",
+                "attribute": "allow-typing",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows typing the date directly in the field. When false, the date can only be picked in the calendar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "inline": {
+                "type": "boolean",
+                "attribute": "inline",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders only the calendar panel, without the input field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "attribute": "compact",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders a smaller chip-like trigger showing only the selected date (`DD/MM/YY`), instead of the input field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "firstDayOfWeek": {
+                "type": "number",
+                "attribute": "first-day-of-week",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "First day of the week, where 0 is Sunday and 6 is Saturday"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "closeOnSelect": {
+                "type": "boolean",
+                "attribute": "close-on-select",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Closes the calendar panel after a date is selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showCalendar": {},
+            "openUpward": {},
+            "viewMonth": {},
+            "viewYear": {},
+            "hoverDate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dateSelected",
+                "name": "dateSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a date is selected, with the date in the `DD/MM/YYYY` format"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "rangeSelected",
+                "name": "rangeSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted in range mode when both the start and end dates are selected, either by picking or by typing. In range mode `valueChanged` is not emitted"
+                },
+                "complexType": {
+                    "original": "SulaCalendarRange",
+                    "resolved": "SulaCalendarRange",
+                    "references": {
+                        "SulaCalendarRange": {
+                            "location": "import",
+                            "path": "./model/sula-calendar.model",
+                            "id": "src/components/sula-calendar/model/sula-calendar.model.ts::SulaCalendarRange"
+                        }
+                    }
+                }
+            }, {
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the value changes, either by typing or by selecting a date. Not emitted in range mode, use `rangeSelected` instead"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "monthChanged",
+                "name": "monthChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the displayed month changes"
+                },
+                "complexType": {
+                    "original": "SulaCalendarMonthChange",
+                    "resolved": "SulaCalendarMonthChange",
+                    "references": {
+                        "SulaCalendarMonthChange": {
+                            "location": "import",
+                            "path": "./model/sula-calendar.model",
+                            "id": "src/components/sula-calendar/model/sula-calendar.model.ts::SulaCalendarMonthChange"
+                        }
+                    }
+                }
+            }, {
+                "method": "calendarOpened",
+                "name": "calendarOpened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the calendar panel is opened"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "calendarClosed",
+                "name": "calendarClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the calendar panel is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleDocumentKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=sula-calendar.js.map