@api-client/ui 0.5.5 → 0.5.6

package/build/src/md/date-picker/internals/DatePickerCalendar.js

@@ -0,0 +1,770 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { calendarStyles } from './DatePicker.styles.js';
+import { generateCalendarMonth, addMonths, getMonthNames, isSameDay, formatDate, } from './DatePickerUtils.js';
+import '../../../md/icons/ui-icon.js';
+import '../../../md/button/ui-button.js';
+import '../../../md/icon-button/ui-icon-button.js';
+/**
+ * A calendar grid component for date selection.
+ * Supports single date selection and date range selection.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ui-date-picker-calendar></ui-date-picker-calendar>
+ * ```
+ *
+ * ### Single date selection
+ * ```html
+ * <ui-date-picker-calendar
+ *   .selectedDate=${new Date()}
+ *   @date-select=${this.handleDateSelect}
+ * ></ui-date-picker-calendar>
+ * ```
+ *
+ * ### Date range selection
+ * ```html
+ * <ui-date-picker-calendar
+ *   .rangeSelection=${true}
+ *   .selectedRange=${{ start: new Date(), end: null }}
+ *   @date-range-select=${this.handleRangeSelect}
+ * ></ui-date-picker-calendar>
+ * ```
+ */
+let UiDatePickerCalendar = (() => {
+    let _classDecorators = [customElement('ui-date-picker-calendar')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LitElement;
+    let _year_decorators;
+    let _year_initializers = [];
+    let _year_extraInitializers = [];
+    let _month_decorators;
+    let _month_initializers = [];
+    let _month_extraInitializers = [];
+    let _selectedDate_decorators;
+    let _selectedDate_initializers = [];
+    let _selectedDate_extraInitializers = [];
+    let _selectedRange_decorators;
+    let _selectedRange_initializers = [];
+    let _selectedRange_extraInitializers = [];
+    let _rangeSelection_decorators;
+    let _rangeSelection_initializers = [];
+    let _rangeSelection_extraInitializers = [];
+    let _minDate_decorators;
+    let _minDate_initializers = [];
+    let _minDate_extraInitializers = [];
+    let _maxDate_decorators;
+    let _maxDate_initializers = [];
+    let _maxDate_extraInitializers = [];
+    let _disabledDates_decorators;
+    let _disabledDates_initializers = [];
+    let _disabledDates_extraInitializers = [];
+    let _locale_decorators;
+    let _locale_initializers = [];
+    let _locale_extraInitializers = [];
+    let _showNavigation_decorators;
+    let _showNavigation_initializers = [];
+    let _showNavigation_extraInitializers = [];
+    let _showActions_decorators;
+    let _showActions_initializers = [];
+    let _showActions_extraInitializers = [];
+    let _okButtonText_decorators;
+    let _okButtonText_initializers = [];
+    let _okButtonText_extraInitializers = [];
+    let _cancelButtonText_decorators;
+    let _cancelButtonText_initializers = [];
+    let _cancelButtonText_extraInitializers = [];
+    let __calendarData_decorators;
+    let __calendarData_initializers = [];
+    let __calendarData_extraInitializers = [];
+    let __rangeStart_decorators;
+    let __rangeStart_initializers = [];
+    let __rangeStart_extraInitializers = [];
+    let __monthNames_decorators;
+    let __monthNames_initializers = [];
+    let __monthNames_extraInitializers = [];
+    let __showMonthDropdown_decorators;
+    let __showMonthDropdown_initializers = [];
+    let __showMonthDropdown_extraInitializers = [];
+    let __showYearDropdown_decorators;
+    let __showYearDropdown_initializers = [];
+    let __showYearDropdown_extraInitializers = [];
+    let __pendingDate_decorators;
+    let __pendingDate_initializers = [];
+    let __pendingDate_extraInitializers = [];
+    let __pendingRange_decorators;
+    let __pendingRange_initializers = [];
+    let __pendingRange_extraInitializers = [];
+    var UiDatePickerCalendar = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _year_decorators = [property({ type: Number })];
+            _month_decorators = [property({ type: Number })];
+            _selectedDate_decorators = [property({ type: Object })];
+            _selectedRange_decorators = [property({ type: Object })];
+            _rangeSelection_decorators = [property({ type: Boolean })];
+            _minDate_decorators = [property({ type: Object })];
+            _maxDate_decorators = [property({ type: Object })];
+            _disabledDates_decorators = [property({ type: Array })];
+            _locale_decorators = [property({ type: String })];
+            _showNavigation_decorators = [property({ type: Boolean })];
+            _showActions_decorators = [property({ type: Boolean })];
+            _okButtonText_decorators = [property({ type: String })];
+            _cancelButtonText_decorators = [property({ type: String })];
+            __calendarData_decorators = [state()];
+            __rangeStart_decorators = [state()];
+            __monthNames_decorators = [state()];
+            __showMonthDropdown_decorators = [state()];
+            __showYearDropdown_decorators = [state()];
+            __pendingDate_decorators = [state()];
+            __pendingRange_decorators = [state()];
+            __esDecorate(this, null, _year_decorators, { kind: "accessor", name: "year", static: false, private: false, access: { has: obj => "year" in obj, get: obj => obj.year, set: (obj, value) => { obj.year = value; } }, metadata: _metadata }, _year_initializers, _year_extraInitializers);
+            __esDecorate(this, null, _month_decorators, { kind: "accessor", name: "month", static: false, private: false, access: { has: obj => "month" in obj, get: obj => obj.month, set: (obj, value) => { obj.month = value; } }, metadata: _metadata }, _month_initializers, _month_extraInitializers);
+            __esDecorate(this, null, _selectedDate_decorators, { kind: "accessor", name: "selectedDate", static: false, private: false, access: { has: obj => "selectedDate" in obj, get: obj => obj.selectedDate, set: (obj, value) => { obj.selectedDate = value; } }, metadata: _metadata }, _selectedDate_initializers, _selectedDate_extraInitializers);
+            __esDecorate(this, null, _selectedRange_decorators, { kind: "accessor", name: "selectedRange", static: false, private: false, access: { has: obj => "selectedRange" in obj, get: obj => obj.selectedRange, set: (obj, value) => { obj.selectedRange = value; } }, metadata: _metadata }, _selectedRange_initializers, _selectedRange_extraInitializers);
+            __esDecorate(this, null, _rangeSelection_decorators, { kind: "accessor", name: "rangeSelection", static: false, private: false, access: { has: obj => "rangeSelection" in obj, get: obj => obj.rangeSelection, set: (obj, value) => { obj.rangeSelection = value; } }, metadata: _metadata }, _rangeSelection_initializers, _rangeSelection_extraInitializers);
+            __esDecorate(this, null, _minDate_decorators, { kind: "accessor", name: "minDate", static: false, private: false, access: { has: obj => "minDate" in obj, get: obj => obj.minDate, set: (obj, value) => { obj.minDate = value; } }, metadata: _metadata }, _minDate_initializers, _minDate_extraInitializers);
+            __esDecorate(this, null, _maxDate_decorators, { kind: "accessor", name: "maxDate", static: false, private: false, access: { has: obj => "maxDate" in obj, get: obj => obj.maxDate, set: (obj, value) => { obj.maxDate = value; } }, metadata: _metadata }, _maxDate_initializers, _maxDate_extraInitializers);
+            __esDecorate(this, null, _disabledDates_decorators, { kind: "accessor", name: "disabledDates", static: false, private: false, access: { has: obj => "disabledDates" in obj, get: obj => obj.disabledDates, set: (obj, value) => { obj.disabledDates = value; } }, metadata: _metadata }, _disabledDates_initializers, _disabledDates_extraInitializers);
+            __esDecorate(this, null, _locale_decorators, { kind: "accessor", name: "locale", static: false, private: false, access: { has: obj => "locale" in obj, get: obj => obj.locale, set: (obj, value) => { obj.locale = value; } }, metadata: _metadata }, _locale_initializers, _locale_extraInitializers);
+            __esDecorate(this, null, _showNavigation_decorators, { kind: "accessor", name: "showNavigation", static: false, private: false, access: { has: obj => "showNavigation" in obj, get: obj => obj.showNavigation, set: (obj, value) => { obj.showNavigation = value; } }, metadata: _metadata }, _showNavigation_initializers, _showNavigation_extraInitializers);
+            __esDecorate(this, null, _showActions_decorators, { kind: "accessor", name: "showActions", static: false, private: false, access: { has: obj => "showActions" in obj, get: obj => obj.showActions, set: (obj, value) => { obj.showActions = value; } }, metadata: _metadata }, _showActions_initializers, _showActions_extraInitializers);
+            __esDecorate(this, null, _okButtonText_decorators, { kind: "accessor", name: "okButtonText", static: false, private: false, access: { has: obj => "okButtonText" in obj, get: obj => obj.okButtonText, set: (obj, value) => { obj.okButtonText = value; } }, metadata: _metadata }, _okButtonText_initializers, _okButtonText_extraInitializers);
+            __esDecorate(this, null, _cancelButtonText_decorators, { kind: "accessor", name: "cancelButtonText", static: false, private: false, access: { has: obj => "cancelButtonText" in obj, get: obj => obj.cancelButtonText, set: (obj, value) => { obj.cancelButtonText = value; } }, metadata: _metadata }, _cancelButtonText_initializers, _cancelButtonText_extraInitializers);
+            __esDecorate(this, null, __calendarData_decorators, { kind: "accessor", name: "_calendarData", static: false, private: false, access: { has: obj => "_calendarData" in obj, get: obj => obj._calendarData, set: (obj, value) => { obj._calendarData = value; } }, metadata: _metadata }, __calendarData_initializers, __calendarData_extraInitializers);
+            __esDecorate(this, null, __rangeStart_decorators, { kind: "accessor", name: "_rangeStart", static: false, private: false, access: { has: obj => "_rangeStart" in obj, get: obj => obj._rangeStart, set: (obj, value) => { obj._rangeStart = value; } }, metadata: _metadata }, __rangeStart_initializers, __rangeStart_extraInitializers);
+            __esDecorate(this, null, __monthNames_decorators, { kind: "accessor", name: "_monthNames", static: false, private: false, access: { has: obj => "_monthNames" in obj, get: obj => obj._monthNames, set: (obj, value) => { obj._monthNames = value; } }, metadata: _metadata }, __monthNames_initializers, __monthNames_extraInitializers);
+            __esDecorate(this, null, __showMonthDropdown_decorators, { kind: "accessor", name: "_showMonthDropdown", static: false, private: false, access: { has: obj => "_showMonthDropdown" in obj, get: obj => obj._showMonthDropdown, set: (obj, value) => { obj._showMonthDropdown = value; } }, metadata: _metadata }, __showMonthDropdown_initializers, __showMonthDropdown_extraInitializers);
+            __esDecorate(this, null, __showYearDropdown_decorators, { kind: "accessor", name: "_showYearDropdown", static: false, private: false, access: { has: obj => "_showYearDropdown" in obj, get: obj => obj._showYearDropdown, set: (obj, value) => { obj._showYearDropdown = value; } }, metadata: _metadata }, __showYearDropdown_initializers, __showYearDropdown_extraInitializers);
+            __esDecorate(this, null, __pendingDate_decorators, { kind: "accessor", name: "_pendingDate", static: false, private: false, access: { has: obj => "_pendingDate" in obj, get: obj => obj._pendingDate, set: (obj, value) => { obj._pendingDate = value; } }, metadata: _metadata }, __pendingDate_initializers, __pendingDate_extraInitializers);
+            __esDecorate(this, null, __pendingRange_decorators, { kind: "accessor", name: "_pendingRange", static: false, private: false, access: { has: obj => "_pendingRange" in obj, get: obj => obj._pendingRange, set: (obj, value) => { obj._pendingRange = value; } }, metadata: _metadata }, __pendingRange_initializers, __pendingRange_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiDatePickerCalendar = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = calendarStyles;
+        #year_accessor_storage = __runInitializers(this, _year_initializers, new Date().getFullYear()
+        /**
+         * The currently displayed month (0-indexed)
+         */
+        );
+        /**
+         * The currently displayed year
+         */
+        get year() { return this.#year_accessor_storage; }
+        set year(value) { this.#year_accessor_storage = value; }
+        #month_accessor_storage = (__runInitializers(this, _year_extraInitializers), __runInitializers(this, _month_initializers, new Date().getMonth()
+        /**
+         * The currently selected date for single selection mode
+         */
+        ));
+        /**
+         * The currently displayed month (0-indexed)
+         */
+        get month() { return this.#month_accessor_storage; }
+        set month(value) { this.#month_accessor_storage = value; }
+        #selectedDate_accessor_storage = (__runInitializers(this, _month_extraInitializers), __runInitializers(this, _selectedDate_initializers, null
+        /**
+         * The selected date range for range selection mode
+         */
+        ));
+        /**
+         * The currently selected date for single selection mode
+         */
+        get selectedDate() { return this.#selectedDate_accessor_storage; }
+        set selectedDate(value) { this.#selectedDate_accessor_storage = value; }
+        #selectedRange_accessor_storage = (__runInitializers(this, _selectedDate_extraInitializers), __runInitializers(this, _selectedRange_initializers, null
+        /**
+         * Enable range selection mode
+         */
+        ));
+        /**
+         * The selected date range for range selection mode
+         */
+        get selectedRange() { return this.#selectedRange_accessor_storage; }
+        set selectedRange(value) { this.#selectedRange_accessor_storage = value; }
+        #rangeSelection_accessor_storage = (__runInitializers(this, _selectedRange_extraInitializers), __runInitializers(this, _rangeSelection_initializers, false
+        /**
+         * Minimum selectable date
+         */
+        ));
+        /**
+         * Enable range selection mode
+         */
+        get rangeSelection() { return this.#rangeSelection_accessor_storage; }
+        set rangeSelection(value) { this.#rangeSelection_accessor_storage = value; }
+        #minDate_accessor_storage = (__runInitializers(this, _rangeSelection_extraInitializers), __runInitializers(this, _minDate_initializers, undefined
+        /**
+         * Maximum selectable date
+         */
+        ));
+        /**
+         * Minimum selectable date
+         */
+        get minDate() { return this.#minDate_accessor_storage; }
+        set minDate(value) { this.#minDate_accessor_storage = value; }
+        #maxDate_accessor_storage = (__runInitializers(this, _minDate_extraInitializers), __runInitializers(this, _maxDate_initializers, undefined
+        /**
+         * Array of disabled dates
+         */
+        ));
+        /**
+         * Maximum selectable date
+         */
+        get maxDate() { return this.#maxDate_accessor_storage; }
+        set maxDate(value) { this.#maxDate_accessor_storage = value; }
+        #disabledDates_accessor_storage = (__runInitializers(this, _maxDate_extraInitializers), __runInitializers(this, _disabledDates_initializers, undefined
+        /**
+         * Locale for date formatting and month/day names
+         */
+        ));
+        /**
+         * Array of disabled dates
+         */
+        get disabledDates() { return this.#disabledDates_accessor_storage; }
+        set disabledDates(value) { this.#disabledDates_accessor_storage = value; }
+        #locale_accessor_storage = (__runInitializers(this, _disabledDates_extraInitializers), __runInitializers(this, _locale_initializers, undefined
+        /**
+         * Whether to show navigation controls
+         */
+        ));
+        /**
+         * Locale for date formatting and month/day names
+         */
+        get locale() { return this.#locale_accessor_storage; }
+        set locale(value) { this.#locale_accessor_storage = value; }
+        #showNavigation_accessor_storage = (__runInitializers(this, _locale_extraInitializers), __runInitializers(this, _showNavigation_initializers, true
+        /**
+         * Whether to show action buttons (OK/Cancel)
+         */
+        ));
+        /**
+         * Whether to show navigation controls
+         */
+        get showNavigation() { return this.#showNavigation_accessor_storage; }
+        set showNavigation(value) { this.#showNavigation_accessor_storage = value; }
+        #showActions_accessor_storage = (__runInitializers(this, _showNavigation_extraInitializers), __runInitializers(this, _showActions_initializers, false
+        /**
+         * Text for the OK button
+         */
+        ));
+        /**
+         * Whether to show action buttons (OK/Cancel)
+         */
+        get showActions() { return this.#showActions_accessor_storage; }
+        set showActions(value) { this.#showActions_accessor_storage = value; }
+        #okButtonText_accessor_storage = (__runInitializers(this, _showActions_extraInitializers), __runInitializers(this, _okButtonText_initializers, 'OK'
+        /**
+         * Text for the Cancel button
+         */
+        ));
+        /**
+         * Text for the OK button
+         */
+        get okButtonText() { return this.#okButtonText_accessor_storage; }
+        set okButtonText(value) { this.#okButtonText_accessor_storage = value; }
+        #cancelButtonText_accessor_storage = (__runInitializers(this, _okButtonText_extraInitializers), __runInitializers(this, _cancelButtonText_initializers, 'Cancel'));
+        /**
+         * Text for the Cancel button
+         */
+        get cancelButtonText() { return this.#cancelButtonText_accessor_storage; }
+        set cancelButtonText(value) { this.#cancelButtonText_accessor_storage = value; }
+        #_calendarData_accessor_storage = (__runInitializers(this, _cancelButtonText_extraInitializers), __runInitializers(this, __calendarData_initializers, undefined));
+        get _calendarData() { return this.#_calendarData_accessor_storage; }
+        set _calendarData(value) { this.#_calendarData_accessor_storage = value; }
+        #_rangeStart_accessor_storage = (__runInitializers(this, __calendarData_extraInitializers), __runInitializers(this, __rangeStart_initializers, undefined));
+        get _rangeStart() { return this.#_rangeStart_accessor_storage; }
+        set _rangeStart(value) { this.#_rangeStart_accessor_storage = value; }
+        #_monthNames_accessor_storage = (__runInitializers(this, __rangeStart_extraInitializers), __runInitializers(this, __monthNames_initializers, []));
+        get _monthNames() { return this.#_monthNames_accessor_storage; }
+        set _monthNames(value) { this.#_monthNames_accessor_storage = value; }
+        #_showMonthDropdown_accessor_storage = (__runInitializers(this, __monthNames_extraInitializers), __runInitializers(this, __showMonthDropdown_initializers, false));
+        get _showMonthDropdown() { return this.#_showMonthDropdown_accessor_storage; }
+        set _showMonthDropdown(value) { this.#_showMonthDropdown_accessor_storage = value; }
+        #_showYearDropdown_accessor_storage = (__runInitializers(this, __showMonthDropdown_extraInitializers), __runInitializers(this, __showYearDropdown_initializers, false));
+        get _showYearDropdown() { return this.#_showYearDropdown_accessor_storage; }
+        set _showYearDropdown(value) { this.#_showYearDropdown_accessor_storage = value; }
+        #_pendingDate_accessor_storage = (__runInitializers(this, __showYearDropdown_extraInitializers), __runInitializers(this, __pendingDate_initializers, null));
+        get _pendingDate() { return this.#_pendingDate_accessor_storage; }
+        set _pendingDate(value) { this.#_pendingDate_accessor_storage = value; }
+        #_pendingRange_accessor_storage = (__runInitializers(this, __pendingDate_extraInitializers), __runInitializers(this, __pendingRange_initializers, null));
+        get _pendingRange() { return this.#_pendingRange_accessor_storage; }
+        set _pendingRange(value) { this.#_pendingRange_accessor_storage = value; }
+        connectedCallback() {
+            super.connectedCallback();
+            this._updateCalendar();
+            this._updateMonthNames();
+            document.addEventListener('keydown', this._handleDocumentKeyDown.bind(this));
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            document.removeEventListener('keydown', this._handleDocumentKeyDown.bind(this));
+        }
+        updated(changedProperties) {
+            if (changedProperties.has('_showYearDropdown') && this._showYearDropdown) {
+                // Scroll selected year into view
+                this._scrollSelectedYearIntoView();
+            }
+        }
+        _scrollSelectedYearIntoView() {
+            // Wait for next frame to ensure DOM is updated
+            requestAnimationFrame(() => {
+                const selectedYearButton = this.shadowRoot?.querySelector('.year-option.selected');
+                if (selectedYearButton) {
+                    selectedYearButton.scrollIntoView({
+                        behavior: 'auto',
+                        block: 'center',
+                    });
+                }
+            });
+        }
+        willUpdate(changedProperties) {
+            if (changedProperties.has('year') ||
+                changedProperties.has('month') ||
+                changedProperties.has('selectedDate') ||
+                changedProperties.has('selectedRange') ||
+                changedProperties.has('disabledDates') ||
+                changedProperties.has('locale')) {
+                this._updateCalendar();
+            }
+            if (changedProperties.has('locale')) {
+                this._updateMonthNames();
+            }
+        }
+        _updateCalendar() {
+            this._calendarData = generateCalendarMonth(this.year, this.month, this.selectedDate, this.selectedRange, this.disabledDates, this.locale);
+        }
+        _updateMonthNames() {
+            this._monthNames = getMonthNames(this.locale);
+        }
+        _navigateMonth(delta) {
+            const newDate = addMonths(new Date(this.year, this.month), delta);
+            this.year = newDate.getFullYear();
+            this.month = newDate.getMonth();
+        }
+        _handlePrevMonth() {
+            this._navigateMonth(-1);
+        }
+        _handleNextMonth() {
+            this._navigateMonth(1);
+        }
+        _handlePrevYear() {
+            this.year = this.year - 1;
+        }
+        _handleNextYear() {
+            this.year = this.year + 1;
+        }
+        _handleMonthClick() {
+            this._showMonthDropdown = !this._showMonthDropdown;
+            this._showYearDropdown = false;
+        }
+        _handleYearClick() {
+            this._showYearDropdown = !this._showYearDropdown;
+            this._showMonthDropdown = false;
+        }
+        _handleMonthSelect(selectedMonth) {
+            this.month = selectedMonth;
+            this._showMonthDropdown = false;
+        }
+        _handleYearSelect(selectedYear) {
+            this.year = selectedYear;
+            this._showYearDropdown = false;
+        }
+        _closeDropdowns() {
+            this._showMonthDropdown = false;
+            this._showYearDropdown = false;
+        }
+        _handleDocumentKeyDown(event) {
+            if (event.key === 'Escape') {
+                this._closeDropdowns();
+            }
+        }
+        _handleDayClick(day) {
+            if (day.isDisabled)
+                return;
+            if (this.rangeSelection) {
+                this._handleRangeSelection(day.date);
+            }
+            else {
+                this._handleSingleSelection(day.date);
+            }
+        }
+        _handleSingleSelection(date) {
+            if (this.showActions) {
+                // Use pending state when actions are enabled
+                this._pendingDate = date;
+            }
+            else {
+                // Immediate selection when no actions
+                this.selectedDate = date;
+                const event = {
+                    date,
+                    formattedDate: formatDate(date, this.locale),
+                };
+                this.dispatchEvent(new CustomEvent('date-select', {
+                    detail: event,
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        _handleRangeSelection(date) {
+            if (!this._rangeStart || (this.selectedRange?.start && this.selectedRange?.end)) {
+                // Start new range
+                this._rangeStart = date;
+                const newRange = { start: date, end: null };
+                if (this.showActions) {
+                    // Use pending state when actions are enabled
+                    this._pendingRange = newRange;
+                }
+                else {
+                    this.selectedRange = newRange;
+                }
+            }
+            else {
+                // Complete range
+                const start = this._rangeStart;
+                const end = date;
+                // Ensure start is before end
+                const sortedRange = start <= end ? { start, end } : { start: end, end: start };
+                this._rangeStart = undefined;
+                if (this.showActions) {
+                    // Use pending state when actions are enabled
+                    this._pendingRange = sortedRange;
+                }
+                else {
+                    // Immediate selection when no actions
+                    this.selectedRange = sortedRange;
+                    const event = {
+                        range: sortedRange,
+                        formattedRange: {
+                            start: sortedRange.start ? formatDate(sortedRange.start, this.locale) : null,
+                            end: sortedRange.end ? formatDate(sortedRange.end, this.locale) : null,
+                        },
+                    };
+                    this.dispatchEvent(new CustomEvent('date-range-select', {
+                        detail: event,
+                        bubbles: true,
+                        composed: true,
+                    }));
+                }
+            }
+        }
+        _isDateDisabled(date) {
+            if (this.minDate && date < this.minDate)
+                return true;
+            if (this.maxDate && date > this.maxDate)
+                return true;
+            if (this.disabledDates?.some((disabledDate) => isSameDay(date, disabledDate)))
+                return true;
+            return false;
+        }
+        _handleConfirm() {
+            if (this.rangeSelection) {
+                if (this._pendingRange) {
+                    this.selectedRange = this._pendingRange;
+                    const event = {
+                        range: this._pendingRange,
+                        formattedRange: {
+                            start: this._pendingRange.start ? formatDate(this._pendingRange.start, this.locale) : null,
+                            end: this._pendingRange.end ? formatDate(this._pendingRange.end, this.locale) : null,
+                        },
+                    };
+                    this.dispatchEvent(new CustomEvent('date-range-confirm', {
+                        detail: event,
+                        bubbles: true,
+                        composed: true,
+                    }));
+                }
+            }
+            else {
+                if (this._pendingDate) {
+                    this.selectedDate = this._pendingDate;
+                    const event = {
+                        date: this._pendingDate,
+                        formattedDate: formatDate(this._pendingDate, this.locale),
+                    };
+                    this.dispatchEvent(new CustomEvent('date-select', {
+                        detail: event,
+                        bubbles: true,
+                        composed: true,
+                    }));
+                }
+            }
+        }
+        _handleCancel() {
+            // Reset pending state
+            this._pendingDate = null;
+            this._pendingRange = null;
+            this._rangeStart = undefined;
+            const event = {
+                reason: 'user_cancelled',
+            };
+            this.dispatchEvent(new CustomEvent('date-cancel', {
+                detail: event,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        _renderNavigation() {
+            const monthName = this._monthNames[this.month] || '';
+            return html `
+      <div class="header">
+        <div class="month-year">
+          <div class="month-selector">
+            ${this.showNavigation && !this._showMonthDropdown && !this._showYearDropdown
+                ? html `
+                  <ui-icon-button
+                    class="nav-button month-nav"
+                    size="xs"
+                    @click=${this._handlePrevMonth}
+                    aria-label="Previous month"
+                    title="Previous month"
+                  >
+                    <ui-icon icon="chevronLeft"></ui-icon>
+                  </ui-icon-button>
+                `
+                : ''}
+            <ui-button
+              class="month-button"
+              color="text"
+              size="xs"
+              @click=${this._handleMonthClick}
+              aria-label="Select month"
+              aria-expanded=${this._showMonthDropdown}
+              trailingIcon
+            >
+              ${monthName}
+              <ui-icon icon="arrowDropDown" slot="icon"></ui-icon>
+            </ui-button>
+            ${this.showNavigation && !this._showMonthDropdown && !this._showYearDropdown
+                ? html `
+                  <ui-icon-button
+                    class="nav-button month-nav"
+                    size="xs"
+                    @click=${this._handleNextMonth}
+                    aria-label="Next month"
+                    title="Next month"
+                  >
+                    <ui-icon icon="chevronRight"></ui-icon>
+                  </ui-icon-button>
+                `
+                : ''}
+          </div>
+          <div class="year-selector">
+            ${this.showNavigation && !this._showMonthDropdown && !this._showYearDropdown
+                ? html `
+                  <ui-icon-button
+                    class="nav-button year-nav"
+                    size="xs"
+                    @click=${this._handlePrevYear}
+                    aria-label="Previous year"
+                    title="Previous year"
+                  >
+                    <ui-icon icon="chevronLeft"></ui-icon>
+                  </ui-icon-button>
+                `
+                : ''}
+            <ui-button
+              class="year-button"
+              color="text"
+              size="xs"
+              @click=${this._handleYearClick}
+              aria-label="Select year"
+              aria-expanded=${this._showYearDropdown}
+              trailingIcon
+            >
+              ${this.year}
+              <ui-icon icon="arrowDropDown" slot="icon"></ui-icon>
+            </ui-button>
+            ${this.showNavigation && !this._showMonthDropdown && !this._showYearDropdown
+                ? html `
+                  <ui-icon-button
+                    class="nav-button year-nav"
+                    size="xs"
+                    @click=${this._handleNextYear}
+                    aria-label="Next year"
+                    title="Next year"
+                  >
+                    <ui-icon icon="chevronRight"></ui-icon>
+                  </ui-icon-button>
+                `
+                : ''}
+          </div>
+        </div>
+      </div>
+    `;
+        }
+        _renderWeekdays() {
+            if (!this._calendarData)
+                return html ``;
+            return html `
+      <div class="weekdays">
+        ${this._calendarData.weekdays.map((weekday) => html `<div class="weekday">${weekday}</div>`)}
+      </div>
+    `;
+        }
+        _renderDay(day) {
+            const isPendingSelected = this.showActions && this._pendingDate && isSameDay(day.date, this._pendingDate);
+            const isPendingRangeStart = this.showActions && this._pendingRange?.start && isSameDay(day.date, this._pendingRange.start);
+            const isPendingRangeEnd = this.showActions && this._pendingRange?.end && isSameDay(day.date, this._pendingRange.end);
+            const isPendingInRange = this.showActions &&
+                this._pendingRange?.start &&
+                this._pendingRange?.end &&
+                day.date >= this._pendingRange.start &&
+                day.date <= this._pendingRange.end &&
+                !isPendingRangeStart &&
+                !isPendingRangeEnd;
+            // Determine button color based on selection state
+            let color = 'text';
+            if (this.showActions) {
+                if (isPendingRangeStart || isPendingRangeEnd || isPendingSelected) {
+                    color = 'filled';
+                }
+                else if (isPendingInRange) {
+                    color = 'text';
+                }
+            }
+            else {
+                if (day.isRangeStart || day.isRangeEnd || day.isSelected) {
+                    color = 'filled';
+                }
+                else if (day.isInRange) {
+                    color = 'text';
+                }
+            }
+            if (day.isToday && color === 'text') {
+                color = 'outlined';
+            }
+            const classes = {
+                'day-cell': true,
+                'other-month': !day.isCurrentMonth,
+                'today': day.isToday,
+                'in-range': this.showActions ? !!isPendingInRange : day.isInRange,
+                'range-start': this.showActions ? !!isPendingRangeStart : day.isRangeStart,
+                'range-end': this.showActions ? !!isPendingRangeEnd : day.isRangeEnd,
+                'has-complete-range': this.showActions
+                    ? !!(this._pendingRange?.start && this._pendingRange?.end)
+                    : !!(this.selectedRange?.start && this.selectedRange?.end),
+            };
+            return html `
+      <div class=${classMap(classes)}>
+        <ui-button
+          class="day-button"
+          color=${color}
+          size="s"
+          data-date=${day.date.toISOString().split('T')[0]}
+          tabindex=${day.isToday && !(day.isDisabled || this._isDateDisabled(day.date)) ? '0' : '-1'}
+          aria-label=${formatDate(day.date, this.locale)}
+          @click=${() => this._handleDayClick(day)}
+          ?disabled=${day.isDisabled || this._isDateDisabled(day.date)}
+        >
+          ${day.date.getDate()}
+        </ui-button>
+      </div>
+    `;
+        }
+        _renderDays() {
+            if (!this._calendarData)
+                return html ``;
+            return html `<div class="days">${this._calendarData.days.map((day) => this._renderDay(day))}</div>`;
+        }
+        _renderActions() {
+            if (!this.showActions)
+                return nothing;
+            const hasSelection = this.rangeSelection ? this._pendingRange?.start : this._pendingDate;
+            return html `
+      <div class="actions">
+        <ui-button size="s" color="text" @click=${this._handleCancel}>${this.cancelButtonText}</ui-button>
+        <ui-button size="s" color="text" @click=${this._handleConfirm} ?disabled=${!hasSelection}>
+          ${this.okButtonText}
+        </ui-button>
+      </div>
+    `;
+        }
+        _renderMonthDropdown() {
+            return html `
+      <div class="dropdown-view">
+        <div class="month-list">
+          ${this._monthNames.map((monthName, index) => html `
+              <ui-button
+                class="month-option ${index === this.month ? 'selected' : ''}"
+                color=${index === this.month ? 'filled' : 'text'}
+                size="s"
+                @click=${() => this._handleMonthSelect(index)}
+                aria-label=${monthName}
+              >
+                ${monthName}
+              </ui-button>
+            `)}
+        </div>
+      </div>
+    `;
+        }
+        _renderYearDropdown() {
+            const currentYear = this.year;
+            const startYear = currentYear - 50;
+            const endYear = currentYear + 50;
+            const years = [];
+            for (let year = startYear; year <= endYear; year++) {
+                years.push(year);
+            }
+            return html `
+      <div class="dropdown-view">
+        <div class="year-grid">
+          ${years.map((year) => html `
+              <ui-button
+                class="year-option ${year === this.year ? 'selected' : ''}"
+                color=${year === this.year ? 'filled' : 'text'}
+                size="s"
+                @click=${() => this._handleYearSelect(year)}
+                aria-label=${year.toString()}
+              >
+                ${year}
+              </ui-button>
+            `)}
+        </div>
+      </div>
+    `;
+        }
+        render() {
+            // Show dropdown views instead of calendar when dropdowns are open
+            if (this._showMonthDropdown) {
+                return html `
+        <div class="calendar" role="grid" aria-label="Calendar">
+          ${this._renderNavigation()} ${this._renderMonthDropdown()}
+        </div>
+      `;
+            }
+            if (this._showYearDropdown) {
+                return html `
+        <div class="calendar" role="grid" aria-label="Calendar">
+          ${this._renderNavigation()} ${this._renderYearDropdown()}
+        </div>
+      `;
+            }
+            // Default calendar view
+            return html `
+      <div class="calendar" role="grid" aria-label="Calendar">
+        ${this._renderNavigation()} ${this._renderWeekdays()} ${this._renderDays()} ${this._renderActions()}
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, __pendingRange_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiDatePickerCalendar = _classThis;
+})();
+export { UiDatePickerCalendar };
+//# sourceMappingURL=DatePickerCalendar.js.map