@api-client/ui 0.5.5 → 0.5.6

package/build/src/md/date-picker/ui-date-picker-modal-input.js

@@ -0,0 +1,473 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { modalStyles } from './internals/DatePicker.styles.js';
+import { formatDate, parseDate } from './internals/DatePickerUtils.js';
+import '../../md/dialog/ui-dialog.js';
+import '../../md/button/ui-button.js';
+import '../../md/icon-button/ui-icon-button.js';
+import '../../md/text-field/ui-outlined-text-field.js';
+import '../../md/icons/ui-icon.js';
+/**
+ * A modal date input picker for manual date entry using keyboard.
+ * Ideal for compact layouts and precise date entry.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ui-date-picker-modal-input
+ *   .open=${true}
+ *   .selectedRange=${{ start: new Date(), end: null }}
+ *   @date-input-change=${this.handleRangeChange}
+ *   @close=${this.handleClose}
+ * ></ui-date-picker-modal-input>
+ * ```
+ *
+ * ### Single date mode
+ * ```html
+ * <ui-date-picker-modal-input
+ *   .rangeMode=${false}
+ *   .selectedDate=${new Date()}
+ * ></ui-date-picker-modal-input>
+ * ```
+ */
+let UiDatePickerModalInput = (() => {
+    let _classDecorators = [customElement('ui-date-picker-modal-input')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LitElement;
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _rangeMode_decorators;
+    let _rangeMode_initializers = [];
+    let _rangeMode_extraInitializers = [];
+    let _startLabel_decorators;
+    let _startLabel_initializers = [];
+    let _startLabel_extraInitializers = [];
+    let _endLabel_decorators;
+    let _endLabel_initializers = [];
+    let _endLabel_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _selectedDate_decorators;
+    let _selectedDate_initializers = [];
+    let _selectedDate_extraInitializers = [];
+    let _selectedRange_decorators;
+    let _selectedRange_initializers = [];
+    let _selectedRange_extraInitializers = [];
+    let _minDate_decorators;
+    let _minDate_initializers = [];
+    let _minDate_extraInitializers = [];
+    let _maxDate_decorators;
+    let _maxDate_initializers = [];
+    let _maxDate_extraInitializers = [];
+    let _locale_decorators;
+    let _locale_initializers = [];
+    let _locale_extraInitializers = [];
+    let __startInput_decorators;
+    let __startInput_initializers = [];
+    let __startInput_extraInitializers = [];
+    let __endInput_decorators;
+    let __endInput_initializers = [];
+    let __endInput_extraInitializers = [];
+    let __startError_decorators;
+    let __startError_initializers = [];
+    let __startError_extraInitializers = [];
+    let __endError_decorators;
+    let __endError_initializers = [];
+    let __endError_extraInitializers = [];
+    var UiDatePickerModalInput = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _open_decorators = [property({ type: Boolean })];
+            _title_decorators = [property({ type: String })];
+            _rangeMode_decorators = [property({ type: Boolean })];
+            _startLabel_decorators = [property({ type: String })];
+            _endLabel_decorators = [property({ type: String })];
+            _placeholder_decorators = [property({ type: String })];
+            _selectedDate_decorators = [property({ type: Object })];
+            _selectedRange_decorators = [property({ type: Object })];
+            _minDate_decorators = [property({ type: Object })];
+            _maxDate_decorators = [property({ type: Object })];
+            _locale_decorators = [property({ type: String })];
+            __startInput_decorators = [state()];
+            __endInput_decorators = [state()];
+            __startError_decorators = [state()];
+            __endError_decorators = [state()];
+            __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(this, null, _title_decorators, { kind: "accessor", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
+            __esDecorate(this, null, _rangeMode_decorators, { kind: "accessor", name: "rangeMode", static: false, private: false, access: { has: obj => "rangeMode" in obj, get: obj => obj.rangeMode, set: (obj, value) => { obj.rangeMode = value; } }, metadata: _metadata }, _rangeMode_initializers, _rangeMode_extraInitializers);
+            __esDecorate(this, null, _startLabel_decorators, { kind: "accessor", name: "startLabel", static: false, private: false, access: { has: obj => "startLabel" in obj, get: obj => obj.startLabel, set: (obj, value) => { obj.startLabel = value; } }, metadata: _metadata }, _startLabel_initializers, _startLabel_extraInitializers);
+            __esDecorate(this, null, _endLabel_decorators, { kind: "accessor", name: "endLabel", static: false, private: false, access: { has: obj => "endLabel" in obj, get: obj => obj.endLabel, set: (obj, value) => { obj.endLabel = value; } }, metadata: _metadata }, _endLabel_initializers, _endLabel_extraInitializers);
+            __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_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, _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, _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, __startInput_decorators, { kind: "accessor", name: "_startInput", static: false, private: false, access: { has: obj => "_startInput" in obj, get: obj => obj._startInput, set: (obj, value) => { obj._startInput = value; } }, metadata: _metadata }, __startInput_initializers, __startInput_extraInitializers);
+            __esDecorate(this, null, __endInput_decorators, { kind: "accessor", name: "_endInput", static: false, private: false, access: { has: obj => "_endInput" in obj, get: obj => obj._endInput, set: (obj, value) => { obj._endInput = value; } }, metadata: _metadata }, __endInput_initializers, __endInput_extraInitializers);
+            __esDecorate(this, null, __startError_decorators, { kind: "accessor", name: "_startError", static: false, private: false, access: { has: obj => "_startError" in obj, get: obj => obj._startError, set: (obj, value) => { obj._startError = value; } }, metadata: _metadata }, __startError_initializers, __startError_extraInitializers);
+            __esDecorate(this, null, __endError_decorators, { kind: "accessor", name: "_endError", static: false, private: false, access: { has: obj => "_endError" in obj, get: obj => obj._endError, set: (obj, value) => { obj._endError = value; } }, metadata: _metadata }, __endError_initializers, __endError_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiDatePickerModalInput = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = modalStyles;
+        #open_accessor_storage = __runInitializers(this, _open_initializers, false
+        /**
+         * The modal title
+         */
+        );
+        /**
+         * Whether the modal is open
+         */
+        get open() { return this.#open_accessor_storage; }
+        set open(value) { this.#open_accessor_storage = value; }
+        #title_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _title_initializers, 'Enter dates'
+        /**
+         * Whether to use range mode (two date inputs) or single date mode
+         */
+        ));
+        /**
+         * The modal title
+         */
+        get title() { return this.#title_accessor_storage; }
+        set title(value) { this.#title_accessor_storage = value; }
+        #rangeMode_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _rangeMode_initializers, true
+        /**
+         * Label for the start date (or single date)
+         */
+        ));
+        /**
+         * Whether to use range mode (two date inputs) or single date mode
+         */
+        get rangeMode() { return this.#rangeMode_accessor_storage; }
+        set rangeMode(value) { this.#rangeMode_accessor_storage = value; }
+        #startLabel_accessor_storage = (__runInitializers(this, _rangeMode_extraInitializers), __runInitializers(this, _startLabel_initializers, 'Start date'
+        /**
+         * Label for the end date (only used in range mode)
+         */
+        ));
+        /**
+         * Label for the start date (or single date)
+         */
+        get startLabel() { return this.#startLabel_accessor_storage; }
+        set startLabel(value) { this.#startLabel_accessor_storage = value; }
+        #endLabel_accessor_storage = (__runInitializers(this, _startLabel_extraInitializers), __runInitializers(this, _endLabel_initializers, 'End date'
+        /**
+         * Placeholder for date inputs
+         */
+        ));
+        /**
+         * Label for the end date (only used in range mode)
+         */
+        get endLabel() { return this.#endLabel_accessor_storage; }
+        set endLabel(value) { this.#endLabel_accessor_storage = value; }
+        #placeholder_accessor_storage = (__runInitializers(this, _endLabel_extraInitializers), __runInitializers(this, _placeholder_initializers, 'MM/DD/YYYY'
+        /**
+         * The selected date (single mode)
+         */
+        ));
+        /**
+         * Placeholder for date inputs
+         */
+        get placeholder() { return this.#placeholder_accessor_storage; }
+        set placeholder(value) { this.#placeholder_accessor_storage = value; }
+        #selectedDate_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _selectedDate_initializers, null
+        /**
+         * The selected date range (range mode)
+         */
+        ));
+        /**
+         * The selected date (single 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
+        /**
+         * Minimum selectable date
+         */
+        ));
+        /**
+         * The selected date range (range mode)
+         */
+        get selectedRange() { return this.#selectedRange_accessor_storage; }
+        set selectedRange(value) { this.#selectedRange_accessor_storage = value; }
+        #minDate_accessor_storage = (__runInitializers(this, _selectedRange_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
+        /**
+         * Locale for date formatting
+         */
+        ));
+        /**
+         * Maximum selectable date
+         */
+        get maxDate() { return this.#maxDate_accessor_storage; }
+        set maxDate(value) { this.#maxDate_accessor_storage = value; }
+        #locale_accessor_storage = (__runInitializers(this, _maxDate_extraInitializers), __runInitializers(this, _locale_initializers, undefined));
+        /**
+         * Locale for date formatting
+         */
+        get locale() { return this.#locale_accessor_storage; }
+        set locale(value) { this.#locale_accessor_storage = value; }
+        #_startInput_accessor_storage = (__runInitializers(this, _locale_extraInitializers), __runInitializers(this, __startInput_initializers, ''));
+        get _startInput() { return this.#_startInput_accessor_storage; }
+        set _startInput(value) { this.#_startInput_accessor_storage = value; }
+        #_endInput_accessor_storage = (__runInitializers(this, __startInput_extraInitializers), __runInitializers(this, __endInput_initializers, ''));
+        get _endInput() { return this.#_endInput_accessor_storage; }
+        set _endInput(value) { this.#_endInput_accessor_storage = value; }
+        #_startError_accessor_storage = (__runInitializers(this, __endInput_extraInitializers), __runInitializers(this, __startError_initializers, ''));
+        get _startError() { return this.#_startError_accessor_storage; }
+        set _startError(value) { this.#_startError_accessor_storage = value; }
+        #_endError_accessor_storage = (__runInitializers(this, __startError_extraInitializers), __runInitializers(this, __endError_initializers, ''));
+        get _endError() { return this.#_endError_accessor_storage; }
+        set _endError(value) { this.#_endError_accessor_storage = value; }
+        connectedCallback() {
+            super.connectedCallback();
+            this._updateInputValues();
+        }
+        willUpdate(changedProperties) {
+            if (changedProperties.has('selectedDate') || changedProperties.has('selectedRange')) {
+                this._updateInputValues();
+            }
+        }
+        _updateInputValues() {
+            if (this.rangeMode && this.selectedRange) {
+                this._startInput = this.selectedRange.start ? formatDate(this.selectedRange.start, this.locale) : '';
+                this._endInput = this.selectedRange.end ? formatDate(this.selectedRange.end, this.locale) : '';
+            }
+            else if (!this.rangeMode && this.selectedDate) {
+                this._startInput = formatDate(this.selectedDate, this.locale);
+            }
+        }
+        _validateDate(dateString, isEndDate = false) {
+            if (!dateString.trim())
+                return null;
+            const parsedDate = parseDate(dateString);
+            if (!parsedDate)
+                return null;
+            // Check min/max constraints
+            if (this.minDate && parsedDate < this.minDate)
+                return null;
+            if (this.maxDate && parsedDate > this.maxDate)
+                return null;
+            // For range mode, validate end date is after start date
+            if (this.rangeMode && isEndDate) {
+                const startDate = parseDate(this._startInput);
+                if (startDate && parsedDate < startDate)
+                    return null;
+            }
+            return parsedDate;
+        }
+        _handleStartInput(event) {
+            const target = event.target;
+            this._startInput = target.value;
+            this._startError = '';
+            if (this._startInput.trim()) {
+                const date = this._validateDate(this._startInput);
+                if (!date) {
+                    this._startError = 'Invalid date format or out of range';
+                    return;
+                }
+                if (this.rangeMode) {
+                    const currentRange = this.selectedRange || { start: null, end: null };
+                    this.selectedRange = { ...currentRange, start: date };
+                }
+                else {
+                    this.selectedDate = date;
+                }
+                this._dispatchChangeEvent();
+            }
+        }
+        _handleEndInput(event) {
+            const target = event.target;
+            this._endInput = target.value;
+            this._endError = '';
+            if (this._endInput.trim()) {
+                const date = this._validateDate(this._endInput, true);
+                if (!date) {
+                    this._endError = 'Invalid date format, out of range, or before start date';
+                    return;
+                }
+                const currentRange = this.selectedRange || { start: null, end: null };
+                this.selectedRange = { ...currentRange, end: date };
+                this._dispatchChangeEvent();
+            }
+        }
+        _handleCancel() {
+            this._dispatchCloseEvent(false);
+        }
+        _handleConfirm() {
+            // Validate all inputs before confirming
+            let hasErrors = false;
+            if (this.rangeMode) {
+                if (!this._startInput.trim()) {
+                    this._startError = 'Start date is required';
+                    hasErrors = true;
+                }
+                else if (!this._validateDate(this._startInput)) {
+                    this._startError = 'Invalid start date';
+                    hasErrors = true;
+                }
+                if (!this._endInput.trim()) {
+                    this._endError = 'End date is required';
+                    hasErrors = true;
+                }
+                else if (!this._validateDate(this._endInput, true)) {
+                    this._endError = 'Invalid end date';
+                    hasErrors = true;
+                }
+            }
+            else {
+                if (!this._startInput.trim()) {
+                    this._startError = 'Date is required';
+                    hasErrors = true;
+                }
+                else if (!this._validateDate(this._startInput)) {
+                    this._startError = 'Invalid date';
+                    hasErrors = true;
+                }
+            }
+            if (!hasErrors) {
+                this._dispatchCloseEvent(true);
+            }
+        }
+        _dispatchChangeEvent() {
+            if (this.rangeMode && this.selectedRange) {
+                const event = {
+                    range: this.selectedRange,
+                    formattedRange: {
+                        start: this.selectedRange.start ? formatDate(this.selectedRange.start, this.locale) : null,
+                        end: this.selectedRange.end ? formatDate(this.selectedRange.end, this.locale) : null,
+                    },
+                };
+                this.dispatchEvent(new CustomEvent('date-input-change', {
+                    detail: event,
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+            else if (!this.rangeMode && this.selectedDate) {
+                this.dispatchEvent(new CustomEvent('date-input-change', {
+                    detail: {
+                        date: this.selectedDate,
+                        formattedDate: formatDate(this.selectedDate, this.locale),
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        _dispatchCloseEvent(confirmed) {
+            this.dispatchEvent(new CustomEvent('modal-input-close', {
+                detail: {
+                    confirmed,
+                    date: confirmed && !this.rangeMode ? this.selectedDate : null,
+                    range: confirmed && this.rangeMode ? this.selectedRange : null,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        _renderHeader() {
+            return html `
+      <div class="modal-header">
+        <h2 class="modal-title">${this.title}</h2>
+        <ui-icon-button @click=${this._handleCancel} aria-label="Close" title="Close">
+          <ui-icon icon="close"></ui-icon>
+        </ui-icon-button>
+      </div>
+    `;
+        }
+        _renderInputs() {
+            return html `
+      <div class="modal-content">
+        <div style="display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 400px;">
+          <ui-outlined-text-field
+            .label=${this.rangeMode ? this.startLabel : 'Date'}
+            .placeholder=${this.placeholder}
+            .value=${this._startInput}
+            .errorMessage=${this._startError}
+            .error=${!!this._startError}
+            @input=${this._handleStartInput}
+          >
+            <ui-icon slot="trailing-icon" icon="calendarToday"></ui-icon>
+          </ui-outlined-text-field>
+
+          ${this.rangeMode
+                ? html `
+                <ui-outlined-text-field
+                  .label=${this.endLabel}
+                  .placeholder=${this.placeholder}
+                  .value=${this._endInput}
+                  .errorMessage=${this._endError}
+                  .error=${!!this._endError}
+                  @input=${this._handleEndInput}
+                >
+                  <ui-icon slot="trailing-icon" icon="calendarToday"></ui-icon>
+                </ui-outlined-text-field>
+              `
+                : ''}
+
+          <div
+            style="margin-top: 16px; padding: 16px; background: var(--ui-color-surface-variant, #e7e0ec); border-radius: 12px;"
+          >
+            <p style="margin: 0; font-size: 14px; color: var(--ui-color-on-surface-variant, #49454f);">
+              <strong>Supported formats:</strong><br />
+              MM/DD/YYYY, MM-DD-YYYY, YYYY-MM-DD
+            </p>
+            <p style="margin: 8px 0 0; font-size: 14px; color: var(--ui-color-on-surface-variant, #49454f);">
+              <strong>Examples:</strong> 12/25/2024, 12-25-2024, 2024-12-25
+            </p>
+          </div>
+        </div>
+      </div>
+    `;
+        }
+        _renderActions() {
+            const hasValidInput = this.rangeMode
+                ? this._startInput.trim() && this._endInput.trim() && !this._startError && !this._endError
+                : this._startInput.trim() && !this._startError;
+            return html `
+      <div class="modal-actions">
+        <ui-button color="text" @click=${this._handleCancel}>Cancel</ui-button>
+        <ui-button color="filled" @click=${this._handleConfirm} .disabled=${!hasValidInput}> Confirm </ui-button>
+      </div>
+    `;
+        }
+        render() {
+            return html `
+      <ui-dialog .open=${this.open} @close=${this._handleCancel}>
+        ${this._renderHeader()} ${this._renderInputs()} ${this._renderActions()}
+      </ui-dialog>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, __endError_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiDatePickerModalInput = _classThis;
+})();
+export { UiDatePickerModalInput };
+//# sourceMappingURL=ui-date-picker-modal-input.js.map

package/build/src/md/date-picker/ui-date-picker-modal-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-date-picker-modal-input.js","sourceRoot":"","sources":["../../../../src/md/date-picker/ui-date-picker-modal-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { modalStyles } from './internals/DatePicker.styles.js'\nimport { DateRange, formatDate, parseDate } from './internals/DatePickerUtils.js'\nimport '../../md/dialog/ui-dialog.js'\nimport '../../md/button/ui-button.js'\nimport '../../md/icon-button/ui-icon-button.js'\nimport '../../md/text-field/ui-outlined-text-field.js'\nimport '../../md/icons/ui-icon.js'\n\nexport interface ModalInputDatePickerChangeEvent {\n  range: DateRange\n  formattedRange: {\n    start: string | null\n    end: string | null\n  }\n}\n\n/**\n * A modal date input picker for manual date entry using keyboard.\n * Ideal for compact layouts and precise date entry.\n *\n * ## Usage\n *\n * ```html\n * <ui-date-picker-modal-input\n *   .open=${true}\n *   .selectedRange=${{ start: new Date(), end: null }}\n *   @date-input-change=${this.handleRangeChange}\n *   @close=${this.handleClose}\n * ></ui-date-picker-modal-input>\n * ```\n *\n * ### Single date mode\n * ```html\n * <ui-date-picker-modal-input\n *   .rangeMode=${false}\n *   .selectedDate=${new Date()}\n * ></ui-date-picker-modal-input>\n * ```\n */\n@customElement('ui-date-picker-modal-input')\nexport class UiDatePickerModalInput extends LitElement {\n  static override styles = modalStyles\n\n  /**\n   * Whether the modal is open\n   */\n  @property({ type: Boolean }) accessor open = false\n\n  /**\n   * The modal title\n   */\n  @property({ type: String }) override accessor title = 'Enter dates'\n\n  /**\n   * Whether to use range mode (two date inputs) or single date mode\n   */\n  @property({ type: Boolean }) accessor rangeMode = true\n\n  /**\n   * Label for the start date (or single date)\n   */\n  @property({ type: String }) accessor startLabel = 'Start date'\n\n  /**\n   * Label for the end date (only used in range mode)\n   */\n  @property({ type: String }) accessor endLabel = 'End date'\n\n  /**\n   * Placeholder for date inputs\n   */\n  @property({ type: String }) accessor placeholder = 'MM/DD/YYYY'\n\n  /**\n   * The selected date (single mode)\n   */\n  @property({ type: Object }) accessor selectedDate: Date | null = null\n\n  /**\n   * The selected date range (range mode)\n   */\n  @property({ type: Object }) accessor selectedRange: DateRange | null = null\n\n  /**\n   * Minimum selectable date\n   */\n  @property({ type: Object }) accessor minDate: Date | undefined = undefined\n\n  /**\n   * Maximum selectable date\n   */\n  @property({ type: Object }) accessor maxDate: Date | undefined = undefined\n\n  /**\n   * Locale for date formatting\n   */\n  @property({ type: String }) accessor locale: string | undefined = undefined\n\n  @state() private accessor _startInput = ''\n\n  @state() private accessor _endInput = ''\n\n  @state() private accessor _startError = ''\n\n  @state() private accessor _endError = ''\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this._updateInputValues()\n  }\n\n  override willUpdate(changedProperties: Map<string | number | symbol, unknown>): void {\n    if (changedProperties.has('selectedDate') || changedProperties.has('selectedRange')) {\n      this._updateInputValues()\n    }\n  }\n\n  private _updateInputValues(): void {\n    if (this.rangeMode && this.selectedRange) {\n      this._startInput = this.selectedRange.start ? formatDate(this.selectedRange.start, this.locale) : ''\n      this._endInput = this.selectedRange.end ? formatDate(this.selectedRange.end, this.locale) : ''\n    } else if (!this.rangeMode && this.selectedDate) {\n      this._startInput = formatDate(this.selectedDate, this.locale)\n    }\n  }\n\n  private _validateDate(dateString: string, isEndDate = false): Date | null {\n    if (!dateString.trim()) return null\n\n    const parsedDate = parseDate(dateString)\n    if (!parsedDate) return null\n\n    // Check min/max constraints\n    if (this.minDate && parsedDate < this.minDate) return null\n    if (this.maxDate && parsedDate > this.maxDate) return null\n\n    // For range mode, validate end date is after start date\n    if (this.rangeMode && isEndDate) {\n      const startDate = parseDate(this._startInput)\n      if (startDate && parsedDate < startDate) return null\n    }\n\n    return parsedDate\n  }\n\n  private _handleStartInput(event: Event): void {\n    const target = event.target as HTMLInputElement\n    this._startInput = target.value\n    this._startError = ''\n\n    if (this._startInput.trim()) {\n      const date = this._validateDate(this._startInput)\n      if (!date) {\n        this._startError = 'Invalid date format or out of range'\n        return\n      }\n\n      if (this.rangeMode) {\n        const currentRange = this.selectedRange || { start: null, end: null }\n        this.selectedRange = { ...currentRange, start: date }\n      } else {\n        this.selectedDate = date\n      }\n\n      this._dispatchChangeEvent()\n    }\n  }\n\n  private _handleEndInput(event: Event): void {\n    const target = event.target as HTMLInputElement\n    this._endInput = target.value\n    this._endError = ''\n\n    if (this._endInput.trim()) {\n      const date = this._validateDate(this._endInput, true)\n      if (!date) {\n        this._endError = 'Invalid date format, out of range, or before start date'\n        return\n      }\n\n      const currentRange = this.selectedRange || { start: null, end: null }\n      this.selectedRange = { ...currentRange, end: date }\n      this._dispatchChangeEvent()\n    }\n  }\n\n  private _handleCancel(): void {\n    this._dispatchCloseEvent(false)\n  }\n\n  private _handleConfirm(): void {\n    // Validate all inputs before confirming\n    let hasErrors = false\n\n    if (this.rangeMode) {\n      if (!this._startInput.trim()) {\n        this._startError = 'Start date is required'\n        hasErrors = true\n      } else if (!this._validateDate(this._startInput)) {\n        this._startError = 'Invalid start date'\n        hasErrors = true\n      }\n\n      if (!this._endInput.trim()) {\n        this._endError = 'End date is required'\n        hasErrors = true\n      } else if (!this._validateDate(this._endInput, true)) {\n        this._endError = 'Invalid end date'\n        hasErrors = true\n      }\n    } else {\n      if (!this._startInput.trim()) {\n        this._startError = 'Date is required'\n        hasErrors = true\n      } else if (!this._validateDate(this._startInput)) {\n        this._startError = 'Invalid date'\n        hasErrors = true\n      }\n    }\n\n    if (!hasErrors) {\n      this._dispatchCloseEvent(true)\n    }\n  }\n\n  private _dispatchChangeEvent(): void {\n    if (this.rangeMode && this.selectedRange) {\n      const event: ModalInputDatePickerChangeEvent = {\n        range: this.selectedRange,\n        formattedRange: {\n          start: this.selectedRange.start ? formatDate(this.selectedRange.start, this.locale) : null,\n          end: this.selectedRange.end ? formatDate(this.selectedRange.end, this.locale) : null,\n        },\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('date-input-change', {\n          detail: event,\n          bubbles: true,\n          composed: true,\n        })\n      )\n    } else if (!this.rangeMode && this.selectedDate) {\n      this.dispatchEvent(\n        new CustomEvent('date-input-change', {\n          detail: {\n            date: this.selectedDate,\n            formattedDate: formatDate(this.selectedDate, this.locale),\n          },\n          bubbles: true,\n          composed: true,\n        })\n      )\n    }\n  }\n\n  private _dispatchCloseEvent(confirmed: boolean): void {\n    this.dispatchEvent(\n      new CustomEvent('modal-input-close', {\n        detail: {\n          confirmed,\n          date: confirmed && !this.rangeMode ? this.selectedDate : null,\n          range: confirmed && this.rangeMode ? this.selectedRange : null,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  private _renderHeader(): TemplateResult {\n    return html`\n      <div class=\"modal-header\">\n        <h2 class=\"modal-title\">${this.title}</h2>\n        <ui-icon-button @click=${this._handleCancel} aria-label=\"Close\" title=\"Close\">\n          <ui-icon icon=\"close\"></ui-icon>\n        </ui-icon-button>\n      </div>\n    `\n  }\n\n  private _renderInputs(): TemplateResult {\n    return html`\n      <div class=\"modal-content\">\n        <div style=\"display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 400px;\">\n          <ui-outlined-text-field\n            .label=${this.rangeMode ? this.startLabel : 'Date'}\n            .placeholder=${this.placeholder}\n            .value=${this._startInput}\n            .errorMessage=${this._startError}\n            .error=${!!this._startError}\n            @input=${this._handleStartInput}\n          >\n            <ui-icon slot=\"trailing-icon\" icon=\"calendarToday\"></ui-icon>\n          </ui-outlined-text-field>\n\n          ${this.rangeMode\n            ? html`\n                <ui-outlined-text-field\n                  .label=${this.endLabel}\n                  .placeholder=${this.placeholder}\n                  .value=${this._endInput}\n                  .errorMessage=${this._endError}\n                  .error=${!!this._endError}\n                  @input=${this._handleEndInput}\n                >\n                  <ui-icon slot=\"trailing-icon\" icon=\"calendarToday\"></ui-icon>\n                </ui-outlined-text-field>\n              `\n            : ''}\n\n          <div\n            style=\"margin-top: 16px; padding: 16px; background: var(--ui-color-surface-variant, #e7e0ec); border-radius: 12px;\"\n          >\n            <p style=\"margin: 0; font-size: 14px; color: var(--ui-color-on-surface-variant, #49454f);\">\n              <strong>Supported formats:</strong><br />\n              MM/DD/YYYY, MM-DD-YYYY, YYYY-MM-DD\n            </p>\n            <p style=\"margin: 8px 0 0; font-size: 14px; color: var(--ui-color-on-surface-variant, #49454f);\">\n              <strong>Examples:</strong> 12/25/2024, 12-25-2024, 2024-12-25\n            </p>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private _renderActions(): TemplateResult {\n    const hasValidInput = this.rangeMode\n      ? this._startInput.trim() && this._endInput.trim() && !this._startError && !this._endError\n      : this._startInput.trim() && !this._startError\n\n    return html`\n      <div class=\"modal-actions\">\n        <ui-button color=\"text\" @click=${this._handleCancel}>Cancel</ui-button>\n        <ui-button color=\"filled\" @click=${this._handleConfirm} .disabled=${!hasValidInput}> Confirm </ui-button>\n      </div>\n    `\n  }\n\n  override render(): TemplateResult {\n    return html`\n      <ui-dialog .open=${this.open} @close=${this._handleCancel}>\n        ${this._renderHeader()} ${this._renderInputs()} ${this._renderActions()}\n      </ui-dialog>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-date-picker-modal-input': UiDatePickerModalInput\n  }\n\n  interface HTMLElementEventMap {\n    'date-input-change': CustomEvent<\n      | ModalInputDatePickerChangeEvent\n      | {\n          date: Date\n          formattedDate: string\n        }\n    >\n    'modal-input-close': CustomEvent<{\n      confirmed: boolean\n      date?: Date | null\n      range?: DateRange | null\n    }>\n  }\n}\n"]}

package/build/src/md/date-picker/ui-date-picker-modal.d.ts

@@ -0,0 +1,108 @@
+import { LitElement, TemplateResult } from 'lit';
+import { DateRange } from './internals/DatePickerUtils.js';
+import './internals/DatePickerCalendar.js';
+import '../../md/dialog/ui-dialog.js';
+import '../../md/button/ui-button.js';
+import '../../md/icon-button/ui-icon-button.js';
+import '../../md/icons/ui-icon.js';
+export interface ModalDatePickerChangeEvent {
+    range: DateRange;
+    formattedRange: {
+        start: string | null;
+        end: string | null;
+    };
+}
+/**
+ * A modal date picker for selecting date ranges.
+ * Extends full-screen and is ideal for date range selection like flight bookings.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ui-date-picker-modal
+ *   .open=${true}
+ *   .selectedRange=${{ start: new Date(), end: null }}
+ *   @change=${this.handleRangeChange}
+ *   @close=${this.handleClose}
+ * ></ui-date-picker-modal>
+ * ```
+ *
+ * ### Custom labels
+ * ```html
+ * <ui-date-picker-modal
+ *   title="Select travel dates"
+ *   startLabel="Check-in"
+ *   endLabel="Check-out"
+ * ></ui-date-picker-modal>
+ * ```
+ */
+export declare class UiDatePickerModal extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Whether the modal is open
+     */
+    accessor open: boolean;
+    /**
+     * The modal title
+     */
+    accessor title: string;
+    /**
+     * Label for the start date
+     */
+    accessor startLabel: string;
+    /**
+     * Label for the end date
+     */
+    accessor endLabel: string;
+    /**
+     * The selected date range
+     */
+    accessor selectedRange: DateRange | null;
+    /**
+     * Minimum selectable date
+     */
+    accessor minDate: Date | undefined;
+    /**
+     * Maximum selectable date
+     */
+    accessor maxDate: Date | undefined;
+    /**
+     * Array of disabled dates
+     */
+    accessor disabledDates: Date[] | undefined;
+    /**
+     * Locale for date formatting
+     */
+    accessor locale: string | undefined;
+    /**
+     * Whether to show edit/calendar toggle button
+     */
+    accessor showModeToggle: boolean;
+    private accessor _isInputMode;
+    private _handleRangeSelect;
+    private _handleCancel;
+    private _handleConfirm;
+    private _handleModeToggle;
+    private _dispatchChangeEvent;
+    private _dispatchCloseEvent;
+    private _renderHeader;
+    private _renderDateDisplay;
+    private _renderCalendar;
+    private _renderInputMode;
+    private _renderContent;
+    private _renderActions;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-date-picker-modal': UiDatePickerModal;
+    }
+    interface HTMLElementEventMap {
+        'date-range-change': CustomEvent<ModalDatePickerChangeEvent>;
+        'close': CustomEvent<{
+            confirmed: boolean;
+            range: DateRange | null;
+        }>;
+    }
+}
+//# sourceMappingURL=ui-date-picker-modal.d.ts.map

package/build/src/md/date-picker/ui-date-picker-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-date-picker-modal.d.ts","sourceRoot":"","sources":["../../../../src/md/date-picker/ui-date-picker-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAGtD,OAAO,EAAE,SAAS,EAAc,MAAM,gCAAgC,CAAA;AAEtE,OAAO,mCAAmC,CAAA;AAC1C,OAAO,8BAA8B,CAAA;AACrC,OAAO,8BAA8B,CAAA;AACrC,OAAO,wCAAwC,CAAA;AAC/C,OAAO,2BAA2B,CAAA;AAElC,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,SAAS,CAAA;IAChB,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;QACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;KACnB,CAAA;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAc;IAEpC;;OAEG;IAC0B,QAAQ,CAAC,IAAI,UAAQ;IAElD;;OAEG;IACH,SAA8C,KAAK,SAAiB;IAEpE;;OAEG;IACyB,QAAQ,CAAC,UAAU,SAAe;IAE9D;;OAEG;IACyB,QAAQ,CAAC,QAAQ,SAAa;IAE1D;;OAEG;IACyB,QAAQ,CAAC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAO;IAE3E;;OAEG;IACyB,QAAQ,CAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAY;IAE1E;;OAEG;IACyB,QAAQ,CAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAY;IAE1E;;OAEG;IACwB,QAAQ,CAAC,aAAa,EAAE,IAAI,EAAE,GAAG,SAAS,CAAY;IAEjF;;OAEG;IACyB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAE3E;;OAEG;IAC0B,QAAQ,CAAC,cAAc,UAAO;IAElD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAQ;IAE9C,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,oBAAoB;IAoB5B,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,kBAAkB;IAmB1B,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAWb,MAAM,IAAI,cAAc;CAOlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAA;KAC1C;IAED,UAAU,mBAAmB;QAC3B,mBAAmB,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAA;QAC5D,OAAO,EAAE,WAAW,CAAC;YACnB,SAAS,EAAE,OAAO,CAAA;YAClB,KAAK,EAAE,SAAS,GAAG,IAAI,CAAA;SACxB,CAAC,CAAA;KACH;CACF"}