@api-client/ui 0.5.5 → 0.5.6

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

@@ -0,0 +1,371 @@
+import { LitElement, html, TemplateResult } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { modalStyles } from './internals/DatePicker.styles.js'
+import { DateRange, 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'
+
+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.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ui-date-picker-modal-input
+ *   .open=${true}
+ *   .selectedRange=${{ start: new Date(), end: null }}
+ *   @date-input-change=${this.handleRangeChange}
+ *   @close=${this.handleClose}
+ * ></ui-date-picker-modal-input>
+ * ```
+ *
+ * ### Single date mode
+ * ```html
+ * <ui-date-picker-modal-input
+ *   .rangeMode=${false}
+ *   .selectedDate=${new Date()}
+ * ></ui-date-picker-modal-input>
+ * ```
+ */
+@customElement('ui-date-picker-modal-input')
+export class UiDatePickerModalInput extends LitElement {
+  static override styles = modalStyles
+
+  /**
+   * Whether the modal is open
+   */
+  @property({ type: Boolean }) accessor open = false
+
+  /**
+   * The modal title
+   */
+  @property({ type: String }) override accessor title = 'Enter dates'
+
+  /**
+   * Whether to use range mode (two date inputs) or single date mode
+   */
+  @property({ type: Boolean }) accessor rangeMode = true
+
+  /**
+   * Label for the start date (or single date)
+   */
+  @property({ type: String }) accessor startLabel = 'Start date'
+
+  /**
+   * Label for the end date (only used in range mode)
+   */
+  @property({ type: String }) accessor endLabel = 'End date'
+
+  /**
+   * Placeholder for date inputs
+   */
+  @property({ type: String }) accessor placeholder = 'MM/DD/YYYY'
+
+  /**
+   * The selected date (single mode)
+   */
+  @property({ type: Object }) accessor selectedDate: Date | null = null
+
+  /**
+   * The selected date range (range mode)
+   */
+  @property({ type: Object }) accessor selectedRange: DateRange | null = null
+
+  /**
+   * Minimum selectable date
+   */
+  @property({ type: Object }) accessor minDate: Date | undefined = undefined
+
+  /**
+   * Maximum selectable date
+   */
+  @property({ type: Object }) accessor maxDate: Date | undefined = undefined
+
+  /**
+   * Locale for date formatting
+   */
+  @property({ type: String }) accessor locale: string | undefined = undefined
+
+  @state() private accessor _startInput = ''
+
+  @state() private accessor _endInput = ''
+
+  @state() private accessor _startError = ''
+
+  @state() private accessor _endError = ''
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    this._updateInputValues()
+  }
+
+  override willUpdate(changedProperties: Map<string | number | symbol, unknown>): void {
+    if (changedProperties.has('selectedDate') || changedProperties.has('selectedRange')) {
+      this._updateInputValues()
+    }
+  }
+
+  private _updateInputValues(): void {
+    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)
+    }
+  }
+
+  private _validateDate(dateString: string, isEndDate = false): Date | null {
+    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
+  }
+
+  private _handleStartInput(event: Event): void {
+    const target = event.target as HTMLInputElement
+    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()
+    }
+  }
+
+  private _handleEndInput(event: Event): void {
+    const target = event.target as HTMLInputElement
+    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()
+    }
+  }
+
+  private _handleCancel(): void {
+    this._dispatchCloseEvent(false)
+  }
+
+  private _handleConfirm(): void {
+    // 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)
+    }
+  }
+
+  private _dispatchChangeEvent(): void {
+    if (this.rangeMode && this.selectedRange) {
+      const event: ModalInputDatePickerChangeEvent = {
+        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,
+        })
+      )
+    }
+  }
+
+  private _dispatchCloseEvent(confirmed: boolean): void {
+    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,
+      })
+    )
+  }
+
+  private _renderHeader(): TemplateResult {
+    return html`
+      <div class="modal-header">
+        <h2 class="modal-title">${this.title}</h2>
+        <ui-icon-button @click=${this._handleCancel} aria-label="Close" title="Close">
+          <ui-icon icon="close"></ui-icon>
+        </ui-icon-button>
+      </div>
+    `
+  }
+
+  private _renderInputs(): TemplateResult {
+    return html`
+      <div class="modal-content">
+        <div style="display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 400px;">
+          <ui-outlined-text-field
+            .label=${this.rangeMode ? this.startLabel : 'Date'}
+            .placeholder=${this.placeholder}
+            .value=${this._startInput}
+            .errorMessage=${this._startError}
+            .error=${!!this._startError}
+            @input=${this._handleStartInput}
+          >
+            <ui-icon slot="trailing-icon" icon="calendarToday"></ui-icon>
+          </ui-outlined-text-field>
+
+          ${this.rangeMode
+            ? html`
+                <ui-outlined-text-field
+                  .label=${this.endLabel}
+                  .placeholder=${this.placeholder}
+                  .value=${this._endInput}
+                  .errorMessage=${this._endError}
+                  .error=${!!this._endError}
+                  @input=${this._handleEndInput}
+                >
+                  <ui-icon slot="trailing-icon" icon="calendarToday"></ui-icon>
+                </ui-outlined-text-field>
+              `
+            : ''}
+
+          <div
+            style="margin-top: 16px; padding: 16px; background: var(--ui-color-surface-variant, #e7e0ec); border-radius: 12px;"
+          >
+            <p style="margin: 0; font-size: 14px; color: var(--ui-color-on-surface-variant, #49454f);">
+              <strong>Supported formats:</strong><br />
+              MM/DD/YYYY, MM-DD-YYYY, YYYY-MM-DD
+            </p>
+            <p style="margin: 8px 0 0; font-size: 14px; color: var(--ui-color-on-surface-variant, #49454f);">
+              <strong>Examples:</strong> 12/25/2024, 12-25-2024, 2024-12-25
+            </p>
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  private _renderActions(): TemplateResult {
+    const hasValidInput = this.rangeMode
+      ? this._startInput.trim() && this._endInput.trim() && !this._startError && !this._endError
+      : this._startInput.trim() && !this._startError
+
+    return html`
+      <div class="modal-actions">
+        <ui-button color="text" @click=${this._handleCancel}>Cancel</ui-button>
+        <ui-button color="filled" @click=${this._handleConfirm} .disabled=${!hasValidInput}> Confirm </ui-button>
+      </div>
+    `
+  }
+
+  override render(): TemplateResult {
+    return html`
+      <ui-dialog .open=${this.open} @close=${this._handleCancel}>
+        ${this._renderHeader()} ${this._renderInputs()} ${this._renderActions()}
+      </ui-dialog>
+    `
+  }
+}
+
+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
+    }>
+  }
+}

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

@@ -0,0 +1,263 @@
+import { LitElement, html, TemplateResult } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { modalStyles } from './internals/DatePicker.styles.js'
+import { DateRange, formatDate } from './internals/DatePickerUtils.js'
+import type { DateRangeSelectEvent } from './internals/DatePickerCalendar.js'
+import './internals/DatePickerCalendar.js'
+import '../../md/dialog/ui-dialog.js'
+import '../../md/button/ui-button.js'
+import '../../md/icon-button/ui-icon-button.js'
+import '../../md/icons/ui-icon.js'
+
+export interface ModalDatePickerChangeEvent {
+  range: DateRange
+  formattedRange: {
+    start: string | null
+    end: string | null
+  }
+}
+
+/**
+ * A modal date picker for selecting date ranges.
+ * Extends full-screen and is ideal for date range selection like flight bookings.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ui-date-picker-modal
+ *   .open=${true}
+ *   .selectedRange=${{ start: new Date(), end: null }}
+ *   @change=${this.handleRangeChange}
+ *   @close=${this.handleClose}
+ * ></ui-date-picker-modal>
+ * ```
+ *
+ * ### Custom labels
+ * ```html
+ * <ui-date-picker-modal
+ *   title="Select travel dates"
+ *   startLabel="Check-in"
+ *   endLabel="Check-out"
+ * ></ui-date-picker-modal>
+ * ```
+ */
+@customElement('ui-date-picker-modal')
+export class UiDatePickerModal extends LitElement {
+  static override styles = modalStyles
+
+  /**
+   * Whether the modal is open
+   */
+  @property({ type: Boolean }) accessor open = false
+
+  /**
+   * The modal title
+   */
+  @property({ type: String }) override accessor title = 'Select dates'
+
+  /**
+   * Label for the start date
+   */
+  @property({ type: String }) accessor startLabel = 'Start date'
+
+  /**
+   * Label for the end date
+   */
+  @property({ type: String }) accessor endLabel = 'End date'
+
+  /**
+   * The selected date range
+   */
+  @property({ type: Object }) accessor selectedRange: DateRange | null = null
+
+  /**
+   * Minimum selectable date
+   */
+  @property({ type: Object }) accessor minDate: Date | undefined = undefined
+
+  /**
+   * Maximum selectable date
+   */
+  @property({ type: Object }) accessor maxDate: Date | undefined = undefined
+
+  /**
+   * Array of disabled dates
+   */
+  @property({ type: Array }) accessor disabledDates: Date[] | undefined = undefined
+
+  /**
+   * Locale for date formatting
+   */
+  @property({ type: String }) accessor locale: string | undefined = undefined
+
+  /**
+   * Whether to show edit/calendar toggle button
+   */
+  @property({ type: Boolean }) accessor showModeToggle = true
+
+  @state() private accessor _isInputMode = false
+
+  private _handleRangeSelect(event: CustomEvent<DateRangeSelectEvent>): void {
+    this.selectedRange = event.detail.range
+    this._dispatchChangeEvent()
+  }
+
+  private _handleCancel(): void {
+    this._dispatchCloseEvent(false)
+  }
+
+  private _handleConfirm(): void {
+    this._dispatchCloseEvent(true)
+  }
+
+  private _handleModeToggle(): void {
+    this._isInputMode = !this._isInputMode
+  }
+
+  private _dispatchChangeEvent(): void {
+    if (!this.selectedRange) return
+
+    const event: ModalDatePickerChangeEvent = {
+      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-range-change', {
+        detail: event,
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
+  private _dispatchCloseEvent(confirmed: boolean): void {
+    this.dispatchEvent(
+      new CustomEvent('close', {
+        detail: {
+          confirmed,
+          range: confirmed ? this.selectedRange : null,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
+  private _renderHeader(): TemplateResult {
+    return html`
+      <div class="modal-header">
+        <h2 class="modal-title">${this.title}</h2>
+        <div style="display: flex; gap: 8px;">
+          ${this.showModeToggle
+            ? html`
+                <ui-icon-button
+                  @click=${this._handleModeToggle}
+                  aria-label=${this._isInputMode ? 'Show calendar' : 'Show date input'}
+                  title=${this._isInputMode ? 'Show calendar' : 'Show date input'}
+                >
+                  <ui-icon icon=${this._isInputMode ? 'calendarToday' : 'edit'}></ui-icon>
+                </ui-icon-button>
+              `
+            : ''}
+          <ui-icon-button @click=${this._handleCancel} aria-label="Close" title="Close">
+            <ui-icon icon="close"></ui-icon>
+          </ui-icon-button>
+        </div>
+      </div>
+    `
+  }
+
+  private _renderDateDisplay(): TemplateResult {
+    const startDate = this.selectedRange?.start
+    const endDate = this.selectedRange?.end
+
+    return html`
+      <div class="date-range-display">
+        <div class="date-display">
+          <div class="date-label">${this.startLabel}</div>
+          <div class="date-value">${startDate ? formatDate(startDate, this.locale) : 'Select date'}</div>
+        </div>
+        <div class="date-separator">—</div>
+        <div class="date-display">
+          <div class="date-label">${this.endLabel}</div>
+          <div class="date-value">${endDate ? formatDate(endDate, this.locale) : 'Select date'}</div>
+        </div>
+      </div>
+    `
+  }
+
+  private _renderCalendar(): TemplateResult {
+    const currentDate = this.selectedRange?.start || new Date()
+
+    return html`
+      <ui-date-picker-calendar
+        .year=${currentDate.getFullYear()}
+        .month=${currentDate.getMonth()}
+        .selectedRange=${this.selectedRange}
+        .rangeSelection=${true}
+        .minDate=${this.minDate}
+        .maxDate=${this.maxDate}
+        .disabledDates=${this.disabledDates}
+        .locale=${this.locale}
+        @date-range-select=${this._handleRangeSelect}
+      ></ui-date-picker-calendar>
+    `
+  }
+
+  private _renderInputMode(): TemplateResult {
+    // For now, we'll show a placeholder for input mode
+    // This could be enhanced with actual date input fields
+    return html`
+      <div style="padding: 24px; text-align: center; color: var(--ui-color-on-surface-variant);">
+        <ui-icon icon="edit" style="font-size: 48px; margin-bottom: 16px;"></ui-icon>
+        <p>Manual date input mode</p>
+        <p>This feature can be enhanced with date input fields</p>
+      </div>
+    `
+  }
+
+  private _renderContent(): TemplateResult {
+    return html`
+      <div class="modal-content">
+        ${this._renderDateDisplay()} ${this._isInputMode ? this._renderInputMode() : this._renderCalendar()}
+      </div>
+    `
+  }
+
+  private _renderActions(): TemplateResult {
+    const hasValidRange = this.selectedRange?.start && this.selectedRange?.end
+
+    return html`
+      <div class="modal-actions">
+        <ui-button color="text" @click=${this._handleCancel}>Cancel</ui-button>
+        <ui-button color="filled" @click=${this._handleConfirm} .disabled=${!hasValidRange}> Confirm </ui-button>
+      </div>
+    `
+  }
+
+  override render(): TemplateResult {
+    return html`
+      <ui-dialog .open=${this.open} @close=${this._handleCancel}>
+        ${this._renderHeader()} ${this._renderContent()} ${this._renderActions()}
+      </ui-dialog>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-date-picker-modal': UiDatePickerModal
+  }
+
+  interface HTMLElementEventMap {
+    'date-range-change': CustomEvent<ModalDatePickerChangeEvent>
+    'close': CustomEvent<{
+      confirmed: boolean
+      range: DateRange | null
+    }>
+  }
+}

package/src/md/dialog/internals/Dialog.styles.ts

@@ -35,6 +35,7 @@ export default css`
     left: 50%;
     transform: translate(-50%, -50%);
     margin: 0;
+    z-index: 1000;
   }
 
   dialog.non-modal:open {