xv-webcomponents 1.24.6 → 1.24.8-staging.0

package/dist/collection/components/xv-date-picker/xv-date-picker.js

@@ -0,0 +1,1210 @@
+import { Fragment, Host, h, } from "@stencil/core";
+import { addDays, addMonths, addYears, endOfMonth, endOfWeek, endOfYear, format, startOfWeek, } from "date-fns";
+import { de, enUS } from "date-fns/locale";
+import { createPopper } from "@popperjs/core";
+import { SIZE_VAR } from "../../types/enum";
+import { resolveFieldMessage } from "../../utils/utils";
+import { DAY_COLS, YEAR_PAGE, buildDayRows, buildMonthCells, buildYearCells, isUnitDisabled, selectUnit, toBounds, toKey, toValue, yearPageStart, } from "./xv-date-picker.utils";
+const LOCALES = { de, en: enUS };
+const DRILL_DOWN = { year: 'month', month: 'day', day: 'day' };
+const DRILL_UP = { day: 'month', month: 'year', year: 'year' };
+const UNIT_COLS = 3;
+export class XvDatePicker {
+    constructor() {
+        this.value = [undefined, undefined];
+        this.selection = 'single';
+        this.precision = 'day';
+        this.withTime = false;
+        this.minuteStep = 5;
+        this.weekStartsOn = 1;
+        this.showWeekNumbers = true;
+        this.required = false;
+        this.readonly = false;
+        this.disabled = false;
+        this.loading = false;
+        this.clearable = false;
+        this.size = SIZE_VAR.MD;
+        this.block = false;
+        this.placement = 'bottom-start';
+        this.offset = 8;
+        this.dates = [undefined, undefined];
+        this.open = false;
+        this.view = 'day';
+        this.anchor = new Date();
+        this.active = 'start';
+        this.dayRows = [];
+        this.unitCells = [];
+        this.weekdays = [];
+        this.focusedDate = new Date();
+        this.bounds = {};
+        this.inputs = {};
+        this.pendingCellFocus = false;
+        this.handleFieldClick = (event) => {
+            if (!this.isInteractive)
+                return;
+            const endpoint = this.endpointOf(event.target);
+            this.active = endpoint !== null && endpoint !== void 0 ? endpoint : (this.dates[0] && this.selection === 'range' ? 'end' : 'start');
+            if (!this.open)
+                this.open = true;
+            if (!endpoint)
+                this.focusEndpoint(this.active);
+        };
+        this.handleFieldKeydown = (event) => {
+            if (!this.isInteractive)
+                return;
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+                event.preventDefault();
+                const endpoint = this.endpointOf(event.target);
+                if (endpoint)
+                    this.active = endpoint;
+                this.open = true;
+                // ArrowDown is the keyboard way into the grid
+                if (event.key === 'ArrowDown')
+                    this.pendingCellFocus = true;
+                return;
+            }
+            if (event.key === 'Escape' && this.open)
+                this.open = false;
+        };
+        this.handlePanelKeydown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            event.stopPropagation();
+            this.open = false;
+            this.focusEndpoint(this.active);
+        };
+        this.handleGridKeydown = (event) => {
+            const columns = this.view === 'day' ? DAY_COLS : UNIT_COLS;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    this.moveFocus(-1);
+                    break;
+                case 'ArrowRight':
+                    this.moveFocus(1);
+                    break;
+                case 'ArrowUp':
+                    this.moveFocus(-columns);
+                    break;
+                case 'ArrowDown':
+                    this.moveFocus(columns);
+                    break;
+                case 'Home':
+                    this.setFocusedDate(this.edgeOfRow('start'), 1);
+                    break;
+                case 'End':
+                    this.setFocusedDate(this.edgeOfRow('end'), -1);
+                    break;
+                case 'PageUp':
+                    this.stepFocus(-1);
+                    break;
+                case 'PageDown':
+                    this.stepFocus(1);
+                    break;
+                default: return;
+            }
+            event.preventDefault();
+        };
+        this.handleTimeChange = (event, endpoint) => {
+            const [hours, minutes] = event.target.value.split(':').map(Number);
+            if (!Number.isFinite(hours) || !Number.isFinite(minutes))
+                return;
+            const index = endpoint === 'end' ? 1 : 0;
+            const current = this.dates[index];
+            if (!current)
+                return;
+            const updated = new Date(current);
+            updated.setHours(hours, minutes, 0, 0);
+            const next = [this.dates[0], this.dates[1]];
+            next[index] = updated;
+            // a time edit must not invert the range — pull the other endpoint along
+            if (next[0] && next[1] && next[0].getTime() > next[1].getTime()) {
+                next[index === 0 ? 1 : 0] = new Date(updated);
+            }
+            this.commit(next);
+        };
+        this.handleClear = (event) => {
+            event.stopPropagation();
+            this.commit([undefined, undefined]);
+            this.active = 'start';
+        };
+    }
+    get dateLocale() {
+        var _a;
+        const tag = this.locale || ((_a = this.el.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.getAttribute('lang')) || 'de';
+        return LOCALES[tag] || LOCALES[tag.split('-')[0]] || de;
+    }
+    get isInteractive() {
+        return !this.disabled && !this.readonly && !this.loading;
+    }
+    componentWillLoad() {
+        this.syncValue();
+        this.view = this.precision;
+        this.anchor = this.dates[0] || new Date();
+        this.rebuildWeekdays();
+        this.rebuild();
+    }
+    componentDidRender() {
+        if (!this.pendingCellFocus)
+            return;
+        this.pendingCellFocus = false;
+        this.focusCell();
+    }
+    disconnectedCallback() {
+        this.destroyPopper();
+        this.unbindDismiss();
+    }
+    syncValue() {
+        const next = toValue(this.value);
+        const [start, end] = next;
+        const [prevStart, prevEnd] = this.dates;
+        if ((start === null || start === void 0 ? void 0 : start.getTime()) === (prevStart === null || prevStart === void 0 ? void 0 : prevStart.getTime()) && (end === null || end === void 0 ? void 0 : end.getTime()) === (prevEnd === null || prevEnd === void 0 ? void 0 : prevEnd.getTime()))
+            return;
+        this.dates = next;
+        this.syncFormValue();
+        // the tuple keeps its slots — consumers read detail[0] / detail[1] positionally
+        this.valueChange.emit(next);
+    }
+    rebuildWeekdays() {
+        const first = startOfWeek(new Date(), { weekStartsOn: this.weekStartsOn });
+        this.weekdays = Array.from({ length: 7 }, (_, index) => format(addDays(first, index), 'EEEEEE', { locale: this.dateLocale }));
+    }
+    resetView() {
+        this.view = this.precision;
+    }
+    rebuild() {
+        this.bounds = toBounds({
+            precision: this.view,
+            min: this.min,
+            max: this.max,
+            disabledDates: this.disabledDates,
+            disabledWeekdays: this.disabledWeekdays,
+        });
+        if (this.view === 'day') {
+            this.dayRows = buildDayRows(this.anchor, this.weekStartsOn, this.bounds);
+            this.unitCells = [];
+            return;
+        }
+        this.dayRows = [];
+        this.unitCells = this.view === 'month'
+            ? buildMonthCells(this.anchor, this.bounds)
+            : buildYearCells(this.anchor, this.bounds);
+    }
+    openWatcher() {
+        this.openChange.emit(this.open);
+        if (this.open) {
+            this.view = this.precision;
+            this.anchor = this.dates[this.active === 'end' ? 1 : 0] || this.dates[0] || new Date();
+            this.focusedDate = this.anchor;
+            requestAnimationFrame(() => this.createPopper());
+            this.bindDismiss();
+            return;
+        }
+        this.destroyPopper();
+        this.unbindDismiss();
+        this.xvBlur.emit(this.dates);
+    }
+    syncFormValue() {
+        var _a;
+        // form association is optional — the element also works outside a form
+        if (typeof ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) !== 'function')
+            return;
+        const [start, end] = this.dates;
+        if (!start && !end) {
+            this.internals.setFormValue(null);
+            return;
+        }
+        if (this.selection === 'single') {
+            this.internals.setFormValue((start !== null && start !== void 0 ? start : end).toISOString());
+            return;
+        }
+        const data = new FormData();
+        start && data.append('start', start.toISOString());
+        end && data.append('end', end.toISOString());
+        this.internals.setFormValue(data);
+    }
+    commit(next) {
+        this.value = next;
+    }
+    handleCellClick(cell) {
+        if (cell.disabled)
+            return;
+        if (this.view !== this.precision) {
+            this.anchor = cell.date;
+            this.view = DRILL_DOWN[this.view];
+            return;
+        }
+        const result = selectUnit({
+            value: this.dates,
+            picked: cell.date,
+            active: this.active,
+            selection: this.selection,
+            precision: this.precision,
+            withTime: this.withTime,
+        });
+        if (cell.outside)
+            this.anchor = cell.date;
+        this.commit(result.value);
+        this.active = result.active;
+        // with a time section the panel stays open so the time can still be set
+        if (result.complete && !(this.withTime && this.precision === 'day')) {
+            this.open = false;
+            // the picked cell is gone with the panel — never leave focus on the body
+            this.focusEndpoint(this.active);
+            return;
+        }
+        if (!result.complete)
+            this.focusEndpoint(result.active);
+    }
+    addUnits(date, amount) {
+        if (this.view === 'day')
+            return addDays(date, amount);
+        if (this.view === 'month')
+            return addMonths(date, amount);
+        return addYears(date, amount);
+    }
+    moveFocus(amount) {
+        this.setFocusedDate(this.addUnits(this.focusedDate, amount), amount > 0 ? 1 : -1);
+    }
+    stepFocus(direction) {
+        if (direction < 0 ? !this.canStepBack : !this.canStepForward)
+            return;
+        const next = this.view === 'day'
+            ? addMonths(this.focusedDate, direction)
+            : this.view === 'month'
+                ? addYears(this.focusedDate, direction)
+                : addYears(this.focusedDate, direction * YEAR_PAGE);
+        this.step(direction);
+        this.focusedDate = next;
+        this.pendingCellFocus = true;
+    }
+    edgeOfRow(edge) {
+        if (this.view === 'day') {
+            return edge === 'start'
+                ? startOfWeek(this.focusedDate, { weekStartsOn: this.weekStartsOn })
+                : endOfWeek(this.focusedDate, { weekStartsOn: this.weekStartsOn });
+        }
+        const cells = this.unitCells;
+        const cell = edge === 'start' ? cells[0] : cells[cells.length - 1];
+        return cell ? cell.date : this.focusedDate;
+    }
+    // skipDirection steps over unavailable units so a move never lands on something unselectable
+    setFocusedDate(date, skipDirection) {
+        let next = date;
+        if (skipDirection) {
+            for (let guard = 0; guard < 60 && isUnitDisabled(next, this.view, this.bounds); guard++) {
+                next = this.addUnits(next, skipDirection);
+            }
+            if (isUnitDisabled(next, this.view, this.bounds))
+                return;
+        }
+        this.focusedDate = next;
+        this.pendingCellFocus = true;
+        if (!this.hasCell(next))
+            this.anchor = next;
+    }
+    hasCell(date) {
+        const key = toKey(date, this.view);
+        return this.view === 'day'
+            ? this.dayRows.some(row => row.cells.some(cell => cell.key === key))
+            : this.unitCells.some(cell => cell.key === key);
+    }
+    focusCell() {
+        var _a;
+        const key = toKey(this.focusedDate, this.view);
+        const cell = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-key="${key}"]`);
+        if (typeof (cell === null || cell === void 0 ? void 0 : cell.focus) === 'function')
+            cell.focus();
+    }
+    endpointOf(target) {
+        if (this.inputs.start && target === this.inputs.start)
+            return 'start';
+        if (this.inputs.end && target === this.inputs.end)
+            return 'end';
+        return undefined;
+    }
+    focusEndpoint(endpoint) {
+        this.active = this.selection === 'range' ? endpoint : 'start';
+        const input = this.inputs[this.active];
+        if (typeof (input === null || input === void 0 ? void 0 : input.focus) === 'function')
+            input.focus();
+    }
+    step(direction) {
+        if (this.view === 'day')
+            this.anchor = addMonths(this.anchor, direction);
+        else if (this.view === 'month')
+            this.anchor = addYears(this.anchor, direction);
+        else
+            this.anchor = addYears(this.anchor, direction * YEAR_PAGE);
+    }
+    get canStepBack() {
+        if (this.bounds.minKey === undefined)
+            return true;
+        if (this.view === 'day')
+            return toKey(endOfMonth(addMonths(this.anchor, -1)), 'day') >= this.bounds.minKey;
+        if (this.view === 'month')
+            return toKey(endOfYear(addYears(this.anchor, -1)), 'month') >= this.bounds.minKey;
+        return yearPageStart(this.anchor) - 1 >= this.bounds.minKey;
+    }
+    get canStepForward() {
+        if (this.bounds.maxKey === undefined)
+            return true;
+        if (this.view === 'day')
+            return toKey(addMonths(this.anchor, 1), 'day') <= this.bounds.maxKey;
+        if (this.view === 'month')
+            return toKey(addYears(this.anchor, 1), 'month') <= this.bounds.maxKey;
+        return yearPageStart(this.anchor) + YEAR_PAGE <= this.bounds.maxKey;
+    }
+    bindDismiss() {
+        if (this.dismiss)
+            return;
+        this.dismiss = (event) => {
+            // composedPath is the only check that survives shadow-DOM retargeting
+            if (!this.containsTarget(event))
+                this.open = false;
+        };
+        document.addEventListener('click', this.dismiss, true);
+    }
+    containsTarget(event) {
+        var _a;
+        if (typeof event.composedPath === 'function' && event.composedPath().includes(this.el))
+            return true;
+        const target = event.target;
+        return !!target && (this.el.contains(target) || !!((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(target)));
+    }
+    unbindDismiss() {
+        if (!this.dismiss)
+            return;
+        document.removeEventListener('click', this.dismiss, true);
+        this.dismiss = undefined;
+    }
+    createPopper() {
+        if (!this.fieldEl || !this.panelEl)
+            return;
+        this.popper = createPopper(this.fieldEl, this.panelEl, {
+            strategy: 'fixed',
+            placement: this.placement,
+            modifiers: [{ name: 'offset', options: { offset: [0, this.offset] } }],
+        });
+    }
+    destroyPopper() {
+        var _a;
+        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.popper = undefined;
+    }
+    formatValue(date) {
+        if (!date)
+            return '';
+        const locale = this.dateLocale;
+        if (this.precision === 'year')
+            return format(date, 'yyyy', { locale });
+        if (this.precision === 'month')
+            return format(date, 'LLLL yyyy', { locale });
+        return this.withTime ? format(date, 'P p', { locale }) : format(date, 'P', { locale });
+    }
+    headerLabel() {
+        const locale = this.dateLocale;
+        if (this.view === 'day')
+            return format(this.anchor, 'LLLL yyyy', { locale });
+        if (this.view === 'month')
+            return format(this.anchor, 'yyyy', { locale });
+        const first = yearPageStart(this.anchor);
+        return `${first} – ${first + YEAR_PAGE - 1}`;
+    }
+    cellLabel(cell) {
+        if (this.view === 'day')
+            return `${cell.date.getDate()}`;
+        if (this.view === 'month')
+            return format(cell.date, 'LLL', { locale: this.dateLocale });
+        return `${cell.date.getFullYear()}`;
+    }
+    cellState(cell) {
+        const [start, end] = this.dates;
+        const startKey = start && toKey(start, this.view);
+        const endKey = end && toKey(end, this.view);
+        const selected = cell.key === startKey || cell.key === endKey;
+        return {
+            selected,
+            inRange: !selected &&
+                this.selection === 'range' &&
+                startKey !== undefined &&
+                endKey !== undefined &&
+                cell.key > startKey &&
+                cell.key < endKey,
+        };
+    }
+    renderField(endpoint) {
+        const isEnd = endpoint === 'end';
+        const label = isEnd ? this.labelEnd : this.labelStart || this.label;
+        const date = this.dates[isEnd ? 1 : 0];
+        const isLast = isEnd || this.selection === 'single';
+        const showClear = this.clearable && isLast && !!(this.dates[0] || this.dates[1]);
+        return (h("label", { class: "field_item", part: "field-item" }, label && (h("span", { class: "field_label", part: "label" }, label, this.required && ' *')), h("span", { class: {
+                field_control: true,
+                active: this.open && this.selection === 'range' && this.active === endpoint,
+            }, part: "input-wrapper" }, h("input", { type: "text", readonly: true, part: "input", class: "field_input", role: "combobox", "aria-expanded": `${this.open}`, "aria-haspopup": "dialog", disabled: this.disabled || this.loading, placeholder: this.placeholder, value: this.formatValue(date), ref: el => (this.inputs[endpoint] = el) }), showClear ? (h("button", { type: "button", class: "field_clear", part: "clear", tabindex: "-1", onClick: this.handleClear }, "\u00D7")) : (h("span", { class: "field_icon", part: "icon", "aria-hidden": "true" })))));
+    }
+    renderHeader() {
+        return (h("div", { class: "panel_header", part: "header" }, h("xv-button-v2", { variant: "ghost", size: SIZE_VAR.SM, disabled: !this.canStepBack, onClick: () => this.step(-1) }, h("span", { slot: "icon-left", class: "panel_chevron prev" })), h("button", { type: "button", class: "panel_title", part: "header-title", disabled: this.view === 'year', onClick: () => (this.view = DRILL_UP[this.view]) }, this.headerLabel()), h("xv-button-v2", { variant: "ghost", size: SIZE_VAR.SM, disabled: !this.canStepForward, onClick: () => this.step(1) }, h("span", { slot: "icon-left", class: "panel_chevron next" }))));
+    }
+    renderCell(cell, focusedKey) {
+        const state = this.cellState(cell);
+        return (h("button", { type: "button", part: "cell", role: "gridcell", "data-key": cell.key, "aria-selected": `${state.selected}`, "aria-label": this.cellAriaLabel(cell), tabindex: this.open && cell.key === focusedKey ? '0' : '-1', disabled: cell.disabled, class: {
+                panel_cell: true,
+                selected: state.selected,
+                inRange: state.inRange,
+                today: cell.today,
+                outside: cell.outside,
+            }, onClick: () => this.handleCellClick(cell) }, this.cellLabel(cell)));
+    }
+    cellAriaLabel(cell) {
+        const locale = this.dateLocale;
+        if (this.view === 'year')
+            return format(cell.date, 'yyyy', { locale });
+        if (this.view === 'month')
+            return format(cell.date, 'LLLL yyyy', { locale });
+        return format(cell.date, 'PPPP', { locale });
+    }
+    renderDayGrid(focusedKey) {
+        return (h(Fragment, null, h("div", { class: { panel_row: true, weekdays: true, numbered: this.showWeekNumbers }, part: "weekdays", role: "row" }, this.showWeekNumbers && h("span", { class: "panel_week", role: "columnheader" }), this.weekdays.map(day => (h("span", { class: "panel_weekday", role: "columnheader" }, day)))), this.dayRows.map(row => (h("div", { class: { panel_row: true, numbered: this.showWeekNumbers }, role: "row" }, this.showWeekNumbers && (h("span", { class: "panel_week", role: "rowheader" }, row.number)), row.cells.map(cell => this.renderCell(cell, focusedKey)))))));
+    }
+    renderTime() {
+        const endpoints = this.selection === 'range' ? ['start', 'end'] : ['start'];
+        return (h("div", { class: "panel_time", part: "time" }, endpoints.map(endpoint => {
+            const label = endpoint === 'end' ? this.labelEnd : this.labelStart || this.label;
+            const date = this.dates[endpoint === 'end' ? 1 : 0];
+            return (h("label", { class: "panel_time-item" }, label && h("span", { class: "panel_time-label" }, label), h("input", { type: "time", part: "time-input", step: this.minuteStep * 60, disabled: !date, value: date ? format(date, 'HH:mm') : '', onChange: event => this.handleTimeChange(event, endpoint) })));
+        })));
+    }
+    render() {
+        const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
+        const showTime = this.withTime && this.precision === 'day';
+        const focusedKey = toKey(this.focusedDate, this.view);
+        return (h(Host, { key: '37bccd82d64c236ee180bffe73fafc243dd8aad8', class: { disabled: this.disabled, loading: this.loading, readonly: this.readonly } }, h("div", { key: 'a9b1ab7fa33a81bcbf691e8ee1f835b23c930f2a', class: "control", part: "control" }, h("div", { key: '41a0e21d63569785e1c482619d1ed6d63118a2d5', class: {
+                field: true,
+                range: this.selection === 'range',
+                error: !!this.error,
+                warning: !!this.warning,
+            }, part: "field", ref: el => (this.fieldEl = el), onClick: this.handleFieldClick, onKeyDown: this.handleFieldKeydown }, this.renderField('start'), this.selection === 'range' && this.renderField('end')), message && (h("p", { key: '2c85920edc6707b2fba8be39b89f6ed0191de481', class: { control_message: true, [message.level]: true }, part: "message" }, message.text))), h("div", { key: 'e7e807b22608683cc48c97c493000bc1fcf65559', class: { panel: true, open: this.open }, part: "panel", role: "dialog", ref: el => (this.panelEl = el), onKeyDown: this.handlePanelKeydown }, this.renderHeader(), h("div", { key: '6d467a8b1ec52981b71e69942f1d6a6b4928c930', class: { panel_grid: true, [this.view]: true }, part: "grid", role: "grid", onKeyDown: this.handleGridKeydown }, this.view === 'day'
+            ? this.renderDayGrid(focusedKey)
+            : this.unitCells.map(cell => this.renderCell(cell, focusedKey))), showTime && this.renderTime(), h("slot", { key: '83818b65fff9f51ef3dd559c3d7b97e7511ecc03', name: "footer" }))));
+    }
+    static get is() { return "xv-date-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-date-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "[XvDateInput?, XvDateInput?] | null",
+                    "resolved": "[XvDateInput?, XvDateInput?]",
+                    "references": {
+                        "XvDateInput": {
+                            "location": "import",
+                            "path": "./xv-date-picker.model",
+                            "id": "src/components/xv-date-picker/xv-date-picker.model.ts::XvDateInput"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[undefined, undefined]"
+            },
+            "selection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XvDateSelection",
+                    "resolved": "\"range\" | \"single\"",
+                    "references": {
+                        "XvDateSelection": {
+                            "location": "import",
+                            "path": "./xv-date-picker.model",
+                            "id": "src/components/xv-date-picker/xv-date-picker.model.ts::XvDateSelection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selection",
+                "defaultValue": "'single'"
+            },
+            "precision": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XvDatePrecision",
+                    "resolved": "\"day\" | \"month\" | \"year\"",
+                    "references": {
+                        "XvDatePrecision": {
+                            "location": "import",
+                            "path": "./xv-date-picker.model",
+                            "id": "src/components/xv-date-picker/xv-date-picker.model.ts::XvDatePrecision"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "precision",
+                "defaultValue": "'day'"
+            },
+            "withTime": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "with-time",
+                "defaultValue": "false"
+            },
+            "minuteStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minute-step",
+                "defaultValue": "5"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XvDateInput | null",
+                    "resolved": "Date | string",
+                    "references": {
+                        "XvDateInput": {
+                            "location": "import",
+                            "path": "./xv-date-picker.model",
+                            "id": "src/components/xv-date-picker/xv-date-picker.model.ts::XvDateInput"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XvDateInput | null",
+                    "resolved": "Date | string",
+                    "references": {
+                        "XvDateInput": {
+                            "location": "import",
+                            "path": "./xv-date-picker.model",
+                            "id": "src/components/xv-date-picker/xv-date-picker.model.ts::XvDateInput"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "disabledDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(XvDateInput | null)[] | null",
+                    "resolved": "XvDateInput[]",
+                    "references": {
+                        "XvDateInput": {
+                            "location": "import",
+                            "path": "./xv-date-picker.model",
+                            "id": "src/components/xv-date-picker/xv-date-picker.model.ts::XvDateInput"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "disabledWeekdays": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[] | null",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "weekStartsOn": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "XvWeekStart",
+                    "resolved": "0 | 1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {
+                        "XvWeekStart": {
+                            "location": "import",
+                            "path": "./xv-date-picker.model",
+                            "id": "src/components/xv-date-picker/xv-date-picker.model.ts::XvWeekStart"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "week-starts-on",
+                "defaultValue": "1"
+            },
+            "showWeekNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-week-numbers",
+                "defaultValue": "true"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "labelStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-start"
+            },
+            "labelEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-end"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "helper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper"
+            },
+            "error": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "warning": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "warning"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SIZE_VAR_STR",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "SIZE_VAR_STR": {
+                            "location": "import",
+                            "path": "../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR_STR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "SIZE_VAR.MD"
+            },
+            "block": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "block",
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'",
+                    "resolved": "\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            },
+            "offset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset",
+                "defaultValue": "8"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dates": {},
+            "open": {},
+            "view": {},
+            "anchor": {},
+            "active": {},
+            "dayRows": {},
+            "unitCells": {},
+            "weekdays": {},
+            "focusedDate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Date[]",
+                    "resolved": "Date[]",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "xvBlur",
+                "name": "xvBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Date[]",
+                    "resolved": "Date[]",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "openChange",
+                "name": "openChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncValue"
+            }, {
+                "propName": "locale",
+                "methodName": "rebuildWeekdays"
+            }, {
+                "propName": "weekStartsOn",
+                "methodName": "rebuildWeekdays"
+            }, {
+                "propName": "precision",
+                "methodName": "resetView"
+            }, {
+                "propName": "anchor",
+                "methodName": "rebuild"
+            }, {
+                "propName": "view",
+                "methodName": "rebuild"
+            }, {
+                "propName": "min",
+                "methodName": "rebuild"
+            }, {
+                "propName": "max",
+                "methodName": "rebuild"
+            }, {
+                "propName": "disabledDates",
+                "methodName": "rebuild"
+            }, {
+                "propName": "disabledWeekdays",
+                "methodName": "rebuild"
+            }, {
+                "propName": "weekStartsOn",
+                "methodName": "rebuild"
+            }, {
+                "propName": "open",
+                "methodName": "openWatcher"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}