@api-client/ui 0.5.5 → 0.5.7

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

@@ -0,0 +1 @@
+{"version":3,"file":"ui-date-picker-modal-input.d.ts","sourceRoot":"","sources":["../../../../src/md/date-picker/ui-date-picker-modal-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAGtD,OAAO,EAAE,SAAS,EAAyB,MAAM,gCAAgC,CAAA;AACjF,OAAO,8BAA8B,CAAA;AACrC,OAAO,8BAA8B,CAAA;AACrC,OAAO,wCAAwC,CAAA;AAC/C,OAAO,+CAA+C,CAAA;AACtD,OAAO,2BAA2B,CAAA;AAElC,MAAM,WAAW,+BAA+B;IAC9C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BAAc;IAEpC;;OAEG;IAC0B,QAAQ,CAAC,IAAI,UAAQ;IAElD;;OAEG;IACH,SAA8C,KAAK,SAAgB;IAEnE;;OAEG;IAC0B,QAAQ,CAAC,SAAS,UAAQ;IAEvD;;OAEG;IACyB,QAAQ,CAAC,UAAU,SAAe;IAE9D;;OAEG;IACyB,QAAQ,CAAC,QAAQ,SAAa;IAE1D;;OAEG;IACyB,QAAQ,CAAC,WAAW,SAAe;IAE/D;;OAEG;IACyB,QAAQ,CAAC,YAAY,EAAE,IAAI,GAAG,IAAI,CAAO;IAErE;;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;IACyB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAElE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAK;IAEhC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAK;IAE9B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAK;IAEhC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAK;;IAS9B,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMpF,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,gBAAgB;IAuBxB,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,aAAa;IAmCrB,OAAO,CAAC,mBAAmB;IA+B3B,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,YAAY;IAkDpB,OAAO,CAAC,aAAa;IAaZ,MAAM,IAAI,cAAc;CAOlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B,EAAE,sBAAsB,CAAA;KACrD;IAED,UAAU,mBAAmB;QAC3B,mBAAmB,EAAE,WAAW,CAC5B,+BAA+B,GAC/B;YACE,IAAI,EAAE,IAAI,CAAA;YACV,aAAa,EAAE,MAAM,CAAA;SACtB,CACJ,CAAA;QACD,mBAAmB,EAAE,WAAW,CAAC;YAC/B,SAAS,EAAE,OAAO,CAAA;YAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;YAClB,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;SACzB,CAAC,CAAA;KACH;CACF"}

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

@@ -0,0 +1,538 @@
+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. Supports both single
+ * date selection and date range selection modes.
+ *
+ * ## Features
+ * - Manual date entry with keyboard input
+ * - Single date and date range modes
+ * - Input validation with error messages
+ * - Min/max date constraints
+ * - Multiple date format support (MM/DD/YYYY, MM-DD-YYYY, YYYY-MM-DD)
+ * - Accessible design with proper ARIA labels and semantic HTML
+ * - Real-time validation feedback
+ *
+ * ## Events
+ *
+ * ### `date-input-change`
+ * Fired when a valid date is entered in the input fields.
+ *
+ * **Detail for range mode:**
+ * ```typescript
+ * {
+ *   range: DateRange,
+ *   formattedRange: {
+ *     start: string | null,
+ *     end: string | null
+ *   }
+ * }
+ * ```
+ *
+ * **Detail for single date mode:**
+ * ```typescript
+ * {
+ *   date: Date,
+ *   formattedDate: string
+ * }
+ * ```
+ *
+ * ### `modal-input-close`
+ * Fired when the modal is closed, either by confirmation or cancellation.
+ *
+ * **Detail:**
+ * ```typescript
+ * {
+ *   confirmed: boolean,
+ *   date?: Date | null,     // Available in single date mode
+ *   range?: DateRange | null // Available in range mode
+ * }
+ * ```
+ *
+ * ## Usage
+ *
+ * ### Range mode (default)
+ * ```html
+ * <ui-date-picker-modal-input
+ *   .open=${true}
+ *   .selectedRange=${{ start: new Date(), end: null }}
+ *   @date-input-change=${this.handleRangeChange}
+ *   @modal-input-close=${this.handleClose}
+ * ></ui-date-picker-modal-input>
+ * ```
+ *
+ * ### Single date mode
+ * ```html
+ * <ui-date-picker-modal-input
+ *   .rangeMode=${false}
+ *   .selectedDate=${new Date()}
+ *   @date-input-change=${this.handleDateChange}
+ *   @modal-input-close=${this.handleClose}
+ * ></ui-date-picker-modal-input>
+ * ```
+ *
+ * ### With constraints
+ * ```html
+ * <ui-date-picker-modal-input
+ *   .minDate=${new Date('2024-01-01')}
+ *   .maxDate=${new Date('2024-12-31')}
+ *   .locale=${'en-US'}
+ * ></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, false
+        /**
+         * 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; }
+        constructor() {
+            super();
+            __runInitializers(this, _endError_extraInitializers);
+            // Initialize boolean properties to false first, then set intended defaults
+            this.open = false;
+            this.rangeMode = true; // Default to range mode as documented
+        }
+        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 `
+      <header class="modal-header">
+        <h2 id="modal-title" 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>
+      </header>
+    `;
+        }
+        renderInputs() {
+            return html `
+      <main class="modal-content">
+        <div class="input-container" role="form" aria-labelledby="modal-title">
+          <fieldset>
+            <legend class="visually-hidden">${this.rangeMode ? 'Enter date range' : 'Enter date'}</legend>
+
+            <ui-outlined-text-field
+              .label=${this.rangeMode ? this.startLabel : 'Date'}
+              .placeholder=${this.placeholder}
+              .value=${this.startInput}
+              .invalidText=${this.startError}
+              ?invalid=${!!this.startError}
+              @input=${this.handleStartInput}
+              required
+              aria-describedby="format-help"
+            >
+              <ui-icon slot="suffix" icon="calendarToday"></ui-icon>
+            </ui-outlined-text-field>
+
+            ${this.rangeMode
+                ? html `
+                  <ui-outlined-text-field
+                    .label=${this.endLabel}
+                    .placeholder=${this.placeholder}
+                    .value=${this.endInput}
+                    .invalidText=${this.endError}
+                    ?invalid=${!!this.endError}
+                    @input=${this.handleEndInput}
+                    required
+                    aria-describedby="format-help"
+                  >
+                    <ui-icon slot="suffix" icon="calendarToday"></ui-icon>
+                  </ui-outlined-text-field>
+                `
+                : ''}
+          </fieldset>
+
+          <aside id="format-help" class="format-help" role="note" aria-label="Date format information">
+            <p class="help-title">
+              <strong>Supported formats:</strong><br />
+              MM/DD/YYYY, MM-DD-YYYY, YYYY-MM-DD
+            </p>
+            <p class="help-examples"><strong>Examples:</strong> 12/25/2024, 12-25-2024, 2024-12-25</p>
+          </aside>
+        </div>
+      </main>
+    `;
+        }
+        renderActions() {
+            const hasValidInput = this.rangeMode
+                ? this.startInput.trim() && this.endInput.trim() && !this.startError && !this.endError
+                : this.startInput.trim() && !this.startError;
+            return html `
+      <footer 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>
+      </footer>
+    `;
+        }
+        render() {
+            return html `
+      <ui-dialog .open=${this.open} @close=${this.handleCancel}>
+        ${this.renderHeader()} ${this.renderInputs()} ${this.renderActions()}
+      </ui-dialog>
+    `;
+        }
+        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. Supports both single\n * date selection and date range selection modes.\n *\n * ## Features\n * - Manual date entry with keyboard input\n * - Single date and date range modes\n * - Input validation with error messages\n * - Min/max date constraints\n * - Multiple date format support (MM/DD/YYYY, MM-DD-YYYY, YYYY-MM-DD)\n * - Accessible design with proper ARIA labels and semantic HTML\n * - Real-time validation feedback\n *\n * ## Events\n *\n * ### `date-input-change`\n * Fired when a valid date is entered in the input fields.\n *\n * **Detail for range mode:**\n * ```typescript\n * {\n *   range: DateRange,\n *   formattedRange: {\n *     start: string | null,\n *     end: string | null\n *   }\n * }\n * ```\n *\n * **Detail for single date mode:**\n * ```typescript\n * {\n *   date: Date,\n *   formattedDate: string\n * }\n * ```\n *\n * ### `modal-input-close`\n * Fired when the modal is closed, either by confirmation or cancellation.\n *\n * **Detail:**\n * ```typescript\n * {\n *   confirmed: boolean,\n *   date?: Date | null,     // Available in single date mode\n *   range?: DateRange | null // Available in range mode\n * }\n * ```\n *\n * ## Usage\n *\n * ### Range mode (default)\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 *   @modal-input-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 *   @date-input-change=${this.handleDateChange}\n *   @modal-input-close=${this.handleClose}\n * ></ui-date-picker-modal-input>\n * ```\n *\n * ### With constraints\n * ```html\n * <ui-date-picker-modal-input\n *   .minDate=${new Date('2024-01-01')}\n *   .maxDate=${new Date('2024-12-31')}\n *   .locale=${'en-US'}\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 = false\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  constructor() {\n    super()\n    // Initialize boolean properties to false first, then set intended defaults\n    this.open = false\n    this.rangeMode = true // Default to range mode as documented\n  }\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      <header class=\"modal-header\">\n        <h2 id=\"modal-title\" 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      </header>\n    `\n  }\n\n  private renderInputs(): TemplateResult {\n    return html`\n      <main class=\"modal-content\">\n        <div class=\"input-container\" role=\"form\" aria-labelledby=\"modal-title\">\n          <fieldset>\n            <legend class=\"visually-hidden\">${this.rangeMode ? 'Enter date range' : 'Enter date'}</legend>\n\n            <ui-outlined-text-field\n              .label=${this.rangeMode ? this.startLabel : 'Date'}\n              .placeholder=${this.placeholder}\n              .value=${this.startInput}\n              .invalidText=${this.startError}\n              ?invalid=${!!this.startError}\n              @input=${this.handleStartInput}\n              required\n              aria-describedby=\"format-help\"\n            >\n              <ui-icon slot=\"suffix\" 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                    .invalidText=${this.endError}\n                    ?invalid=${!!this.endError}\n                    @input=${this.handleEndInput}\n                    required\n                    aria-describedby=\"format-help\"\n                  >\n                    <ui-icon slot=\"suffix\" icon=\"calendarToday\"></ui-icon>\n                  </ui-outlined-text-field>\n                `\n              : ''}\n          </fieldset>\n\n          <aside id=\"format-help\" class=\"format-help\" role=\"note\" aria-label=\"Date format information\">\n            <p class=\"help-title\">\n              <strong>Supported formats:</strong><br />\n              MM/DD/YYYY, MM-DD-YYYY, YYYY-MM-DD\n            </p>\n            <p class=\"help-examples\"><strong>Examples:</strong> 12/25/2024, 12-25-2024, 2024-12-25</p>\n          </aside>\n        </div>\n      </main>\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      <footer 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      </footer>\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"]}