npm - @api-client/ui - Versions diffs - 0.5.6 → 0.5.8 - Mend

@api-client/ui 0.5.6 → 0.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

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

@@ -10,16 +10,63 @@ 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.
+ * 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}
- *   @close=${this.handleClose}
+ *   @modal-input-close=${this.handleClose}
  * ></ui-date-picker-modal-input>
  * ```
  *
@@ -28,6 +75,17 @@ import '../../md/icons/ui-icon.js';
  * <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>
  * ```
  */
@@ -70,18 +128,18 @@ let UiDatePickerModalInput = (() => {
     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 = [];
+    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 {
@@ -97,10 +155,10 @@ let UiDatePickerModalInput = (() => {
             _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()];
+            _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);
@@ -112,10 +170,10 @@ let UiDatePickerModalInput = (() => {
             __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(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 });
@@ -141,7 +199,7 @@ let UiDatePickerModalInput = (() => {
          */
         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
+        #rangeMode_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _rangeMode_initializers, false
         /**
          * Label for the start date (or single date)
          */
@@ -227,37 +285,44 @@ let UiDatePickerModalInput = (() => {
          */
         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; }
+        #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();
+            this.updateInputValues();
         }
         willUpdate(changedProperties) {
             if (changedProperties.has('selectedDate') || changedProperties.has('selectedRange')) {
-                this._updateInputValues();
+                this.updateInputValues();
             }
         }
-        _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) : '';
+                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);
+                this.startInput = formatDate(this.selectedDate, this.locale);
             }
         }
-        _validateDate(dateString, isEndDate = false) {
+        validateDate(dateString, isEndDate = false) {
             if (!dateString.trim())
                 return null;
             const parsedDate = parseDate(dateString);
@@ -270,20 +335,20 @@ let UiDatePickerModalInput = (() => {
                 return null;
             // For range mode, validate end date is after start date
             if (this.rangeMode && isEndDate) {
-                const startDate = parseDate(this._startInput);
+                const startDate = parseDate(this.startInput);
                 if (startDate && parsedDate < startDate)
                     return null;
             }
             return parsedDate;
         }
-        _handleStartInput(event) {
+        handleStartInput(event) {
             const target = event.target;
-            this._startInput = target.value;
-            this._startError = '';
-            if (this._startInput.trim()) {
-                const date = this._validateDate(this._startInput);
+            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';
+                    this.startError = 'Invalid date format or out of range';
                     return;
                 }
                 if (this.rangeMode) {
@@ -293,63 +358,63 @@ let UiDatePickerModalInput = (() => {
                 else {
                     this.selectedDate = date;
                 }
-                this._dispatchChangeEvent();
+                this.dispatchChangeEvent();
             }
         }
-        _handleEndInput(event) {
+        handleEndInput(event) {
             const target = event.target;
-            this._endInput = target.value;
-            this._endError = '';
-            if (this._endInput.trim()) {
-                const date = this._validateDate(this._endInput, true);
+            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';
+                    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();
+                this.dispatchChangeEvent();
             }
         }
-        _handleCancel() {
-            this._dispatchCloseEvent(false);
+        handleCancel() {
+            this.dispatchCloseEvent(false);
         }
-        _handleConfirm() {
+        handleConfirm() {
             // Validate all inputs before confirming
             let hasErrors = false;
             if (this.rangeMode) {
-                if (!this._startInput.trim()) {
-                    this._startError = 'Start date is required';
+                if (!this.startInput.trim()) {
+                    this.startError = 'Start date is required';
                     hasErrors = true;
                 }
-                else if (!this._validateDate(this._startInput)) {
-                    this._startError = 'Invalid start date';
+                else if (!this.validateDate(this.startInput)) {
+                    this.startError = 'Invalid start date';
                     hasErrors = true;
                 }
-                if (!this._endInput.trim()) {
-                    this._endError = 'End date is required';
+                if (!this.endInput.trim()) {
+                    this.endError = 'End date is required';
                     hasErrors = true;
                 }
-                else if (!this._validateDate(this._endInput, true)) {
-                    this._endError = 'Invalid end date';
+                else if (!this.validateDate(this.endInput, true)) {
+                    this.endError = 'Invalid end date';
                     hasErrors = true;
                 }
             }
             else {
-                if (!this._startInput.trim()) {
-                    this._startError = 'Date is required';
+                if (!this.startInput.trim()) {
+                    this.startError = 'Date is required';
                     hasErrors = true;
                 }
-                else if (!this._validateDate(this._startInput)) {
-                    this._startError = 'Invalid date';
+                else if (!this.validateDate(this.startInput)) {
+                    this.startError = 'Invalid date';
                     hasErrors = true;
                 }
             }
             if (!hasErrors) {
-                this._dispatchCloseEvent(true);
+                this.dispatchCloseEvent(true);
             }
         }
-        _dispatchChangeEvent() {
+        dispatchChangeEvent() {
             if (this.rangeMode && this.selectedRange) {
                 const event = {
                     range: this.selectedRange,
@@ -375,7 +440,7 @@ let UiDatePickerModalInput = (() => {
                 }));
             }
         }
-        _dispatchCloseEvent(confirmed) {
+        dispatchCloseEvent(confirmed) {
             this.dispatchEvent(new CustomEvent('modal-input-close', {
                 detail: {
                     confirmed,
@@ -386,83 +451,83 @@ let UiDatePickerModalInput = (() => {
                 composed: true,
             }));
         }
-        _renderHeader() {
+        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">
+      <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>
-      </div>
+      </header>
     `;
         }
-        _renderInputs() {
+        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>
+      <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
+            ${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>
-              `
+                  <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>
-          <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);">
+          <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 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>
+            <p class="help-examples"><strong>Examples:</strong> 12/25/2024, 12-25-2024, 2024-12-25</p>
+          </aside>
         </div>
-      </div>
+      </main>
     `;
         }
-        _renderActions() {
+        renderActions() {
             const hasValidInput = this.rangeMode
-                ? this._startInput.trim() && this._endInput.trim() && !this._startError && !this._endError
-                : this._startInput.trim() && !this._startError;
+                ? 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>
+      <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 .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);
         }

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

	@@ -1 +1 @@
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"]}
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"]}