@api-client/ui 0.5.5 → 0.5.7

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

@@ -0,0 +1,464 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { inputStyles } from './internals/DatePicker.styles.js';
+import { formatDate, parseDate } from './internals/DatePickerUtils.js';
+import './internals/DatePickerCalendar.js';
+import '../../md/text-field/ui-outlined-text-field.js';
+import '../../md/icons/ui-icon.js';
+/**
+ * A docked date picker that opens from a text field input.
+ * Ideal for forms and date selection in medium to large layouts.
+ *
+ * ## Features
+ * - Text field input with calendar dropdown
+ * - Keyboard navigation support (Arrow Down, Enter, Escape)
+ * - Custom date formatting
+ * - Input validation and error handling
+ * - Min/max date constraints
+ * - Disabled dates support
+ * - Accessible design with proper ARIA attributes
+ * - CSS Anchor Positioning API for dropdown placement
+ *
+ * ## Events
+ *
+ * ### `change`
+ * Fired when the selected date changes.
+ *
+ * **Detail:**
+ * ```typescript
+ * {
+ *   value: Date | null,
+ *   formattedValue: string
+ * }
+ * ```
+ *
+ * ## Usage
+ *
+ * ### Basic usage
+ * ```html
+ * <ui-date-picker-input
+ *   label="Select date"
+ *   name="birthDate"
+ *   placeholder="MM/DD/YYYY"
+ *   .value=${new Date()}
+ *   @change=${this.handleDateChange}
+ * ></ui-date-picker-input>
+ * ```
+ *
+ * ### With validation
+ * ```html
+ * <ui-date-picker-input
+ *   label="Birth date"
+ *   name="birthDate"
+ *   required
+ *   .error=${this.hasError}
+ *   .errorMessage=${"Please select a valid date"}
+ *   .minDate=${new Date('1900-01-01')}
+ *   .maxDate=${new Date()}
+ * ></ui-date-picker-input>
+ * ```
+ *
+ * ### Custom date format
+ * ```html
+ * <ui-date-picker-input
+ *   label="Birth date"
+ *   .dateFormat=${date => date.toLocaleDateString('en-GB')}
+ * ></ui-date-picker-input>
+ * ```
+ *
+ * ### With disabled dates
+ * ```html
+ * <ui-date-picker-input
+ *   label="Appointment date"
+ *   .disabledDates=${[new Date('2024-12-25'), new Date('2024-01-01')]}
+ * ></ui-date-picker-input>
+ * ```
+ */
+let UiDatePickerInput = (() => {
+    let _classDecorators = [customElement('ui-date-picker-input')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LitElement;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _errorMessage_decorators;
+    let _errorMessage_initializers = [];
+    let _errorMessage_extraInitializers = [];
+    let _error_decorators;
+    let _error_initializers = [];
+    let _error_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 _dateFormat_decorators;
+    let _dateFormat_initializers = [];
+    let _dateFormat_extraInitializers = [];
+    let _isOpen_decorators;
+    let _isOpen_initializers = [];
+    let _isOpen_extraInitializers = [];
+    let _inputValue_decorators;
+    let _inputValue_initializers = [];
+    let _inputValue_extraInitializers = [];
+    let _textField_decorators;
+    let _textField_initializers = [];
+    let _textField_extraInitializers = [];
+    var UiDatePickerInput = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [property({ type: String })];
+            _name_decorators = [property({ type: String })];
+            _placeholder_decorators = [property({ type: String })];
+            _value_decorators = [property({ type: Object })];
+            _disabled_decorators = [property({ type: Boolean })];
+            _required_decorators = [property({ type: Boolean })];
+            _errorMessage_decorators = [property({ type: String })];
+            _error_decorators = [property({ type: Boolean })];
+            _minDate_decorators = [property({ type: Object })];
+            _maxDate_decorators = [property({ type: Object })];
+            _disabledDates_decorators = [property({ type: Array })];
+            _locale_decorators = [property({ type: String })];
+            _dateFormat_decorators = [property({ type: Object })];
+            _isOpen_decorators = [state()];
+            _inputValue_decorators = [state()];
+            _textField_decorators = [query('ui-outlined-text-field')];
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_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, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(this, null, _errorMessage_decorators, { kind: "accessor", name: "errorMessage", static: false, private: false, access: { has: obj => "errorMessage" in obj, get: obj => obj.errorMessage, set: (obj, value) => { obj.errorMessage = value; } }, metadata: _metadata }, _errorMessage_initializers, _errorMessage_extraInitializers);
+            __esDecorate(this, null, _error_decorators, { kind: "accessor", name: "error", static: false, private: false, access: { has: obj => "error" in obj, get: obj => obj.error, set: (obj, value) => { obj.error = value; } }, metadata: _metadata }, _error_initializers, _error_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, _dateFormat_decorators, { kind: "accessor", name: "dateFormat", static: false, private: false, access: { has: obj => "dateFormat" in obj, get: obj => obj.dateFormat, set: (obj, value) => { obj.dateFormat = value; } }, metadata: _metadata }, _dateFormat_initializers, _dateFormat_extraInitializers);
+            __esDecorate(this, null, _isOpen_decorators, { kind: "accessor", name: "isOpen", static: false, private: false, access: { has: obj => "isOpen" in obj, get: obj => obj.isOpen, set: (obj, value) => { obj.isOpen = value; } }, metadata: _metadata }, _isOpen_initializers, _isOpen_extraInitializers);
+            __esDecorate(this, null, _inputValue_decorators, { kind: "accessor", name: "inputValue", static: false, private: false, access: { has: obj => "inputValue" in obj, get: obj => obj.inputValue, set: (obj, value) => { obj.inputValue = value; } }, metadata: _metadata }, _inputValue_initializers, _inputValue_extraInitializers);
+            __esDecorate(this, null, _textField_decorators, { kind: "accessor", name: "textField", static: false, private: false, access: { has: obj => "textField" in obj, get: obj => obj.textField, set: (obj, value) => { obj.textField = value; } }, metadata: _metadata }, _textField_initializers, _textField_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiDatePickerInput = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = inputStyles;
+        static shadowRootOptions = {
+            mode: 'open',
+            delegatesFocus: true,
+        };
+        #label_accessor_storage = __runInitializers(this, _label_initializers, ''
+        /**
+         * The name attribute for the input field (for form handling)
+         */
+        );
+        /**
+         * The label for the input field
+         */
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #name_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _name_initializers, ''
+        /**
+         * Placeholder text for the input
+         */
+        ));
+        /**
+         * The name attribute for the input field (for form handling)
+         */
+        get name() { return this.#name_accessor_storage; }
+        set name(value) { this.#name_accessor_storage = value; }
+        #placeholder_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _placeholder_initializers, 'MM/DD/YYYY'
+        /**
+         * The currently selected date
+         */
+        ));
+        /**
+         * Placeholder text for the input
+         */
+        get placeholder() { return this.#placeholder_accessor_storage; }
+        set placeholder(value) { this.#placeholder_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _value_initializers, null
+        /**
+         * Whether the date picker is disabled
+         */
+        ));
+        /**
+         * The currently selected date
+         */
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #disabled_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _disabled_initializers, false
+        /**
+         * Whether the input is required
+         */
+        ));
+        /**
+         * Whether the date picker is disabled
+         */
+        get disabled() { return this.#disabled_accessor_storage; }
+        set disabled(value) { this.#disabled_accessor_storage = value; }
+        #required_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _required_initializers, false
+        /**
+         * Error message to display
+         */
+        ));
+        /**
+         * Whether the input is required
+         */
+        get required() { return this.#required_accessor_storage; }
+        set required(value) { this.#required_accessor_storage = value; }
+        #errorMessage_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _errorMessage_initializers, ''
+        /**
+         * Whether the input has an error state
+         */
+        ));
+        /**
+         * Error message to display
+         */
+        get errorMessage() { return this.#errorMessage_accessor_storage; }
+        set errorMessage(value) { this.#errorMessage_accessor_storage = value; }
+        #error_accessor_storage = (__runInitializers(this, _errorMessage_extraInitializers), __runInitializers(this, _error_initializers, false
+        /**
+         * Minimum selectable date
+         */
+        ));
+        /**
+         * Whether the input has an error state
+         */
+        get error() { return this.#error_accessor_storage; }
+        set error(value) { this.#error_accessor_storage = value; }
+        #minDate_accessor_storage = (__runInitializers(this, _error_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
+         */
+        ));
+        /**
+         * 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
+        /**
+         * Custom date format function
+         */
+        ));
+        /**
+         * Locale for date formatting
+         */
+        get locale() { return this.#locale_accessor_storage; }
+        set locale(value) { this.#locale_accessor_storage = value; }
+        #dateFormat_accessor_storage = (__runInitializers(this, _locale_extraInitializers), __runInitializers(this, _dateFormat_initializers, undefined));
+        /**
+         * Custom date format function
+         */
+        get dateFormat() { return this.#dateFormat_accessor_storage; }
+        set dateFormat(value) { this.#dateFormat_accessor_storage = value; }
+        #isOpen_accessor_storage = (__runInitializers(this, _dateFormat_extraInitializers), __runInitializers(this, _isOpen_initializers, false));
+        get isOpen() { return this.#isOpen_accessor_storage; }
+        set isOpen(value) { this.#isOpen_accessor_storage = value; }
+        #inputValue_accessor_storage = (__runInitializers(this, _isOpen_extraInitializers), __runInitializers(this, _inputValue_initializers, ''));
+        get inputValue() { return this.#inputValue_accessor_storage; }
+        set inputValue(value) { this.#inputValue_accessor_storage = value; }
+        #textField_accessor_storage = (__runInitializers(this, _inputValue_extraInitializers), __runInitializers(this, _textField_initializers, void 0));
+        get textField() { return this.#textField_accessor_storage; }
+        set textField(value) { this.#textField_accessor_storage = value; }
+        constructor() {
+            super();
+            __runInitializers(this, _textField_extraInitializers);
+            // Initialize boolean properties to false as per Lit best practices
+            this.disabled = false;
+            this.required = false;
+            this.error = false;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.updateInputValue();
+            document.addEventListener('click', this.handleDocumentClick.bind(this));
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            document.removeEventListener('click', this.handleDocumentClick.bind(this));
+        }
+        willUpdate(changedProperties) {
+            if (changedProperties.has('value')) {
+                this.updateInputValue();
+            }
+        }
+        updated(changedProperties) {
+            if (changedProperties.has('isOpen') && this.isOpen) {
+                // Set anchor name on text field for CSS Anchor Positioning API
+                if (this.textField) {
+                    // Using setProperty since anchorName is not in TypeScript types yet
+                    this.textField.style.setProperty('anchor-name', '--ui-date-picker-anchor');
+                }
+            }
+        }
+        updateInputValue() {
+            if (this.value) {
+                this.inputValue = this.dateFormat ? this.dateFormat(this.value) : formatDate(this.value, this.locale);
+            }
+            else {
+                this.inputValue = '';
+            }
+        }
+        handleDocumentClick(event) {
+            if (!this.contains(event.target)) {
+                this.isOpen = false;
+            }
+        }
+        handleInputClick() {
+            if (!this.disabled) {
+                this.isOpen = !this.isOpen;
+            }
+        }
+        handleInputChange(event) {
+            const target = event.target;
+            this.inputValue = target.value;
+            const parsedDate = parseDate(this.inputValue);
+            if (parsedDate) {
+                this.value = parsedDate;
+                this.dispatchChangeEvent();
+            }
+        }
+        handleCalendarDateSelect(event) {
+            this.value = event.detail.date;
+            this.isOpen = false;
+            this.dispatchChangeEvent();
+        }
+        handleCalendarDateCancel() {
+            this.isOpen = false;
+        }
+        handleKeyDown(event) {
+            switch (event.key) {
+                case 'Escape':
+                    this.isOpen = false;
+                    break;
+                case 'ArrowDown':
+                    if (!this.isOpen) {
+                        event.preventDefault();
+                        this.isOpen = true;
+                    }
+                    break;
+                case 'Enter':
+                    if (this.isOpen) {
+                        event.preventDefault();
+                        this.isOpen = false;
+                    }
+                    break;
+            }
+        }
+        dispatchChangeEvent() {
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: {
+                    value: this.value,
+                    formattedValue: this.inputValue,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        renderCalendarIcon() {
+            return html `
+      <ui-icon slot="suffix" icon="calendarToday" @click=${this.handleInputClick} class="calendar-icon"></ui-icon>
+    `;
+        }
+        renderDropdown() {
+            if (!this.isOpen)
+                return null;
+            const currentDate = this.value || new Date();
+            return html `
+      <div class="dropdown-container">
+        <ui-date-picker-calendar
+          .year=${currentDate.getFullYear()}
+          .month=${currentDate.getMonth()}
+          .selectedDate=${this.value}
+          .minDate=${this.minDate}
+          .maxDate=${this.maxDate}
+          .disabledDates=${this.disabledDates}
+          .locale=${this.locale}
+          showActions
+          @date-select=${this.handleCalendarDateSelect}
+          @date-cancel=${this.handleCalendarDateCancel}
+        ></ui-date-picker-calendar>
+      </div>
+    `;
+        }
+        render() {
+            return html `
+      <div class="input-container">
+        ${this.isOpen ? html `<div class="backdrop" @click=${() => (this.isOpen = false)}></div>` : ''}
+        <ui-outlined-text-field
+          .label=${this.label}
+          .name=${this.name}
+          .placeholder=${this.placeholder}
+          .value=${this.inputValue}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          ?invalid=${this.error}
+          .invalidText=${this.errorMessage}
+          readonly
+          @click=${this.handleInputClick}
+          @input=${this.handleInputChange}
+          @keydown=${this.handleKeyDown}
+        >
+          ${this.renderCalendarIcon()}
+        </ui-outlined-text-field>
+        ${this.renderDropdown()}
+      </div>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiDatePickerInput = _classThis;
+})();
+export { UiDatePickerInput };
+//# sourceMappingURL=ui-date-picker-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ui-date-picker-input.js","sourceRoot":"","sources":["../../../../src/md/date-picker/ui-date-picker-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, TemplateResult } from 'lit'\nimport { customElement, property, state, query } from 'lit/decorators.js'\nimport { inputStyles } from './internals/DatePicker.styles.js'\nimport { formatDate, parseDate } from './internals/DatePickerUtils.js'\nimport type { DateSelectEvent } from './internals/DatePickerCalendar.js'\nimport './internals/DatePickerCalendar.js'\nimport '../../md/text-field/ui-outlined-text-field.js'\nimport '../../md/icons/ui-icon.js'\n\n/**\n * A docked date picker that opens from a text field input.\n * Ideal for forms and date selection in medium to large layouts.\n *\n * ## Features\n * - Text field input with calendar dropdown\n * - Keyboard navigation support (Arrow Down, Enter, Escape)\n * - Custom date formatting\n * - Input validation and error handling\n * - Min/max date constraints\n * - Disabled dates support\n * - Accessible design with proper ARIA attributes\n * - CSS Anchor Positioning API for dropdown placement\n *\n * ## Events\n *\n * ### `change`\n * Fired when the selected date changes.\n *\n * **Detail:**\n * ```typescript\n * {\n *   value: Date | null,\n *   formattedValue: string\n * }\n * ```\n *\n * ## Usage\n *\n * ### Basic usage\n * ```html\n * <ui-date-picker-input\n *   label=\"Select date\"\n *   name=\"birthDate\"\n *   placeholder=\"MM/DD/YYYY\"\n *   .value=${new Date()}\n *   @change=${this.handleDateChange}\n * ></ui-date-picker-input>\n * ```\n *\n * ### With validation\n * ```html\n * <ui-date-picker-input\n *   label=\"Birth date\"\n *   name=\"birthDate\"\n *   required\n *   .error=${this.hasError}\n *   .errorMessage=${\"Please select a valid date\"}\n *   .minDate=${new Date('1900-01-01')}\n *   .maxDate=${new Date()}\n * ></ui-date-picker-input>\n * ```\n *\n * ### Custom date format\n * ```html\n * <ui-date-picker-input\n *   label=\"Birth date\"\n *   .dateFormat=${date => date.toLocaleDateString('en-GB')}\n * ></ui-date-picker-input>\n * ```\n *\n * ### With disabled dates\n * ```html\n * <ui-date-picker-input\n *   label=\"Appointment date\"\n *   .disabledDates=${[new Date('2024-12-25'), new Date('2024-01-01')]}\n * ></ui-date-picker-input>\n * ```\n */\n@customElement('ui-date-picker-input')\nexport class UiDatePickerInput extends LitElement {\n  static override styles = inputStyles\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  }\n\n  /**\n   * The label for the input field\n   */\n  @property({ type: String }) accessor label = ''\n\n  /**\n   * The name attribute for the input field (for form handling)\n   */\n  @property({ type: String }) accessor name = ''\n\n  /**\n   * Placeholder text for the input\n   */\n  @property({ type: String }) accessor placeholder = 'MM/DD/YYYY'\n\n  /**\n   * The currently selected date\n   */\n  @property({ type: Object }) accessor value: Date | null = null\n\n  /**\n   * Whether the date picker is disabled\n   */\n  @property({ type: Boolean }) accessor disabled = false\n\n  /**\n   * Whether the input is required\n   */\n  @property({ type: Boolean }) accessor required = false\n\n  /**\n   * Error message to display\n   */\n  @property({ type: String }) accessor errorMessage = ''\n\n  /**\n   * Whether the input has an error state\n   */\n  @property({ type: Boolean }) accessor error = false\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   * Array of disabled dates\n   */\n  @property({ type: Array }) accessor disabledDates: Date[] | undefined = undefined\n\n  /**\n   * Locale for date formatting\n   */\n  @property({ type: String }) accessor locale: string | undefined = undefined\n\n  /**\n   * Custom date format function\n   */\n  @property({ type: Object }) accessor dateFormat: ((date: Date) => string) | undefined = undefined\n\n  @state() private accessor isOpen = false\n\n  @state() private accessor inputValue = ''\n\n  @query('ui-outlined-text-field') private accessor textField!: HTMLElement\n\n  constructor() {\n    super()\n    // Initialize boolean properties to false as per Lit best practices\n    this.disabled = false\n    this.required = false\n    this.error = false\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.updateInputValue()\n    document.addEventListener('click', this.handleDocumentClick.bind(this))\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this.handleDocumentClick.bind(this))\n  }\n\n  override willUpdate(changedProperties: Map<string | number | symbol, unknown>): void {\n    if (changedProperties.has('value')) {\n      this.updateInputValue()\n    }\n  }\n\n  override updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    if (changedProperties.has('isOpen') && this.isOpen) {\n      // Set anchor name on text field for CSS Anchor Positioning API\n      if (this.textField) {\n        // Using setProperty since anchorName is not in TypeScript types yet\n        this.textField.style.setProperty('anchor-name', '--ui-date-picker-anchor')\n      }\n    }\n  }\n\n  private updateInputValue(): void {\n    if (this.value) {\n      this.inputValue = this.dateFormat ? this.dateFormat(this.value) : formatDate(this.value, this.locale)\n    } else {\n      this.inputValue = ''\n    }\n  }\n\n  private handleDocumentClick(event: Event): void {\n    if (!this.contains(event.target as Node)) {\n      this.isOpen = false\n    }\n  }\n\n  private handleInputClick(): void {\n    if (!this.disabled) {\n      this.isOpen = !this.isOpen\n    }\n  }\n\n  private handleInputChange(event: Event): void {\n    const target = event.target as HTMLInputElement\n    this.inputValue = target.value\n\n    const parsedDate = parseDate(this.inputValue)\n    if (parsedDate) {\n      this.value = parsedDate\n      this.dispatchChangeEvent()\n    }\n  }\n\n  private handleCalendarDateSelect(event: CustomEvent<DateSelectEvent>): void {\n    this.value = event.detail.date\n    this.isOpen = false\n    this.dispatchChangeEvent()\n  }\n\n  private handleCalendarDateCancel(): void {\n    this.isOpen = false\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'Escape':\n        this.isOpen = false\n        break\n      case 'ArrowDown':\n        if (!this.isOpen) {\n          event.preventDefault()\n          this.isOpen = true\n        }\n        break\n      case 'Enter':\n        if (this.isOpen) {\n          event.preventDefault()\n          this.isOpen = false\n        }\n        break\n    }\n  }\n\n  private dispatchChangeEvent(): void {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          value: this.value,\n          formattedValue: this.inputValue,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    )\n  }\n\n  private renderCalendarIcon(): TemplateResult {\n    return html`\n      <ui-icon slot=\"suffix\" icon=\"calendarToday\" @click=${this.handleInputClick} class=\"calendar-icon\"></ui-icon>\n    `\n  }\n\n  private renderDropdown(): TemplateResult | null {\n    if (!this.isOpen) return null\n\n    const currentDate = this.value || new Date()\n\n    return html`\n      <div class=\"dropdown-container\">\n        <ui-date-picker-calendar\n          .year=${currentDate.getFullYear()}\n          .month=${currentDate.getMonth()}\n          .selectedDate=${this.value}\n          .minDate=${this.minDate}\n          .maxDate=${this.maxDate}\n          .disabledDates=${this.disabledDates}\n          .locale=${this.locale}\n          showActions\n          @date-select=${this.handleCalendarDateSelect}\n          @date-cancel=${this.handleCalendarDateCancel}\n        ></ui-date-picker-calendar>\n      </div>\n    `\n  }\n\n  override render(): TemplateResult {\n    return html`\n      <div class=\"input-container\">\n        ${this.isOpen ? html`<div class=\"backdrop\" @click=${() => (this.isOpen = false)}></div>` : ''}\n        <ui-outlined-text-field\n          .label=${this.label}\n          .name=${this.name}\n          .placeholder=${this.placeholder}\n          .value=${this.inputValue}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          ?invalid=${this.error}\n          .invalidText=${this.errorMessage}\n          readonly\n          @click=${this.handleInputClick}\n          @input=${this.handleInputChange}\n          @keydown=${this.handleKeyDown}\n        >\n          ${this.renderCalendarIcon()}\n        </ui-outlined-text-field>\n        ${this.renderDropdown()}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-date-picker-input': UiDatePickerInput\n  }\n\n  interface HTMLElementEventMap {\n    change: CustomEvent<{\n      value: Date | null\n      formattedValue: string\n    }>\n  }\n}\n"]}

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

@@ -0,0 +1,178 @@
+import { LitElement, TemplateResult } from 'lit';
+import { DateRange } 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';
+export interface ModalInputDatePickerChangeEvent {
+    range: DateRange;
+    formattedRange: {
+        start: string | null;
+        end: string | null;
+    };
+}
+/**
+ * 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>
+ * ```
+ */
+export declare class UiDatePickerModalInput extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Whether the modal is open
+     */
+    accessor open: boolean;
+    /**
+     * The modal title
+     */
+    accessor title: string;
+    /**
+     * Whether to use range mode (two date inputs) or single date mode
+     */
+    accessor rangeMode: boolean;
+    /**
+     * Label for the start date (or single date)
+     */
+    accessor startLabel: string;
+    /**
+     * Label for the end date (only used in range mode)
+     */
+    accessor endLabel: string;
+    /**
+     * Placeholder for date inputs
+     */
+    accessor placeholder: string;
+    /**
+     * The selected date (single mode)
+     */
+    accessor selectedDate: Date | null;
+    /**
+     * The selected date range (range mode)
+     */
+    accessor selectedRange: DateRange | null;
+    /**
+     * Minimum selectable date
+     */
+    accessor minDate: Date | undefined;
+    /**
+     * Maximum selectable date
+     */
+    accessor maxDate: Date | undefined;
+    /**
+     * Locale for date formatting
+     */
+    accessor locale: string | undefined;
+    private accessor startInput;
+    private accessor endInput;
+    private accessor startError;
+    private accessor endError;
+    constructor();
+    connectedCallback(): void;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    private updateInputValues;
+    private validateDate;
+    private handleStartInput;
+    private handleEndInput;
+    private handleCancel;
+    private handleConfirm;
+    private dispatchChangeEvent;
+    private dispatchCloseEvent;
+    private renderHeader;
+    private renderInputs;
+    private renderActions;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-date-picker-modal-input': UiDatePickerModalInput;
+    }
+    interface HTMLElementEventMap {
+        'date-input-change': CustomEvent<ModalInputDatePickerChangeEvent | {
+            date: Date;
+            formattedDate: string;
+        }>;
+        'modal-input-close': CustomEvent<{
+            confirmed: boolean;
+            date?: Date | null;
+            range?: DateRange | null;
+        }>;
+    }
+}
+//# sourceMappingURL=ui-date-picker-modal-input.d.ts.map