@api-client/ui 0.5.5 → 0.5.7

package/demo/md/date-picker/date-picker.ts

@@ -0,0 +1,336 @@
+import { html, TemplateResult } from 'lit'
+import { reactive } from '../../../src/decorators/index.js'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+
+import '../../../src/md/date-picker/index.js'
+import '../../../src/md/button/ui-button.js'
+
+class DatePickerDemoPage extends DemoPage {
+  override accessor componentName = 'Date Picker'
+
+  @reactive() accessor selectedDate: Date | null = null
+  @reactive() accessor selectedRange: { start: Date | null; end: Date | null } = { start: null, end: null }
+  @reactive() accessor modalOpen = false
+  @reactive() accessor modalInputOpen = false
+  @reactive() accessor modalInputRangeOpen = false
+  @reactive() accessor formValues: string | undefined
+
+  private get today(): Date {
+    return new Date()
+  }
+
+  private get oneMonthFromNow(): Date {
+    const date = new Date()
+    date.setMonth(date.getMonth() + 1)
+    return date
+  }
+
+  private get oneYearFromNow(): Date {
+    const date = new Date()
+    date.setFullYear(date.getFullYear() + 1)
+    return date
+  }
+
+  handleDateChange(e: CustomEvent): void {
+    this.selectedDate = e.detail.value
+  }
+
+  handleRangeChange(e: CustomEvent): void {
+    this.selectedRange = e.detail.range || { start: null, end: null }
+  }
+
+  handleDateConfirm(e: CustomEvent): void {
+    this.selectedDate = e.detail.date
+  }
+
+  handleRangeConfirm(e: CustomEvent): void {
+    this.selectedRange = e.detail.range || { start: null, end: null }
+  }
+
+  handleDateCancel(e: CustomEvent): void {
+    console.log('Date selection cancelled:', e.detail.reason)
+  }
+
+  openModal(): void {
+    this.modalOpen = true
+  }
+
+  openModalInput(): void {
+    this.modalInputOpen = true
+  }
+
+  openModalInputRange(): void {
+    this.modalInputRangeOpen = true
+  }
+
+  handleModalClose(e: CustomEvent): void {
+    this.modalOpen = false
+    if (e.detail.confirmed && e.detail.range) {
+      this.selectedRange = e.detail.range
+    }
+  }
+
+  handleModalInputClose(e: CustomEvent): void {
+    this.modalInputOpen = false
+    if (e.detail.confirmed && e.detail.date) {
+      this.selectedDate = e.detail.date
+    }
+  }
+
+  handleModalInputRangeClose(e: CustomEvent): void {
+    this.modalInputRangeOpen = false
+    if (e.detail.confirmed && e.detail.range) {
+      this.selectedRange = e.detail.range
+    }
+  }
+
+  private formatDateRange(start: Date | null, end: Date | null, defaultMessage = 'No range selected'): string {
+    if (!start || !end) return defaultMessage
+    return `${start.toDateString()} - ${end.toDateString()}`
+  }
+
+  private formatSingleDate(date: Date | null, defaultMessage = 'No date selected'): string {
+    return date ? date.toDateString() : defaultMessage
+  }
+
+  handleFormSubmit(e: SubmitEvent): void {
+    e.preventDefault()
+    const form = e.target as HTMLFormElement
+    const formData = new FormData(form)
+    const values = Array.from(formData.entries())
+    this.formValues = new URLSearchParams(values as string[][]).toString()
+  }
+
+  contentTemplate(): TemplateResult {
+    return html`
+      <nav>
+        <a href="../" class="back-link">← Back to Components</a>
+      </nav>
+      ${this.renderInputs()} ${this.renderCalendars()} ${this.renderModalDatePickers()} ${this.renderFormIntegration()}
+      ${this.renderModalComponents()}
+      ${this.formValues
+        ? html`
+            <section class="demo-section">
+              <h3 class="headline-medium">Form Output</h3>
+              <output role="status" aria-live="polite" aria-label="Form submission result">
+                <code><pre>${this.formValues}</pre></code>
+              </output>
+            </section>
+          `
+        : ''}
+    `
+  }
+
+  renderInputs(): TemplateResult {
+    return html`<section class="demo-section">
+      <h2 class="display-large">Date Picker Input</h2>
+      <div class="variant-grid" role="group" aria-labelledby="input-variants-heading">
+        <span>&nbsp;</span>
+        <span class="legend-marker">1</span>
+        <span class="legend-marker">2</span>
+        <span class="legend-marker">3</span>
+
+        <span class="legend-marker">A</span>
+        <ui-date-picker-input
+          label="Basic input"
+          placeholder="Select date"
+          name="basic-date-picker"
+          .value="${this.selectedDate}"
+          @change="${this.handleDateChange}"
+          aria-describedby="basic-input-help"
+        ></ui-date-picker-input>
+        <ui-date-picker-input
+          label="With constraints"
+          placeholder="Select date"
+          name="constrained-date-picker"
+          .minDate="${this.today}"
+          .maxDate="${this.oneMonthFromNow}"
+          .value="${this.selectedDate}"
+          @change="${this.handleDateChange}"
+          aria-describedby="constrained-input-help"
+        ></ui-date-picker-input>
+        <ui-date-picker-input
+          label="Disabled input"
+          placeholder="Select date"
+          disabled
+          name="disabled-date-picker"
+          aria-describedby="disabled-input-help"
+        ></ui-date-picker-input>
+      </div>
+      <div id="input-variants-heading" class="visually-hidden">Date input variants demonstration</div>
+      <div id="basic-input-help" class="visually-hidden">Basic date picker with no restrictions</div>
+      <div id="constrained-input-help" class="visually-hidden">
+        Date picker with date constraints applied (today to one month from now)
+      </div>
+      <div id="disabled-input-help" class="visually-hidden">Disabled date picker for demonstration</div>
+      <p class="body-medium">A. Input variants</p>
+      <ol class="decimal body-medium">
+        <li>Basic input</li>
+        <li>With date constraints</li>
+        <li>Disabled state</li>
+      </ol>
+    </section>`
+  }
+
+  renderCalendars(): TemplateResult {
+    return html`<section class="demo-section xl">
+      <h2 class="display-large">Date Picker Calendar</h2>
+      <div class="variant-grid" role="group" aria-labelledby="calendar-variants-heading">
+        <span>&nbsp;</span>
+        <span class="legend-marker">1</span>
+        <span class="legend-marker">2</span>
+        <span class="legend-marker">3</span>
+
+        <span class="legend-marker">B</span>
+        <ui-date-picker-calendar
+          showActions
+          .selectedDate="${this.selectedDate}"
+          @date-select="${this.handleDateConfirm}"
+          @date-cancel="${this.handleDateCancel}"
+          aria-describedby="basic-calendar-help"
+        ></ui-date-picker-calendar>
+        <ui-date-picker-calendar
+          showActions
+          rangeSelection
+          .rangeStart="${this.selectedRange.start}"
+          .rangeEnd="${this.selectedRange.end}"
+          @date-range-confirm="${this.handleRangeConfirm}"
+          @date-cancel="${this.handleDateCancel}"
+          aria-describedby="range-calendar-help"
+        ></ui-date-picker-calendar>
+        <ui-date-picker-calendar
+          showActions
+          .minDate="${this.today}"
+          .maxDate="${this.oneMonthFromNow}"
+          .selectedDate="${this.selectedDate}"
+          @date-select="${this.handleDateConfirm}"
+          @date-cancel="${this.handleDateCancel}"
+          aria-describedby="constrained-calendar-help"
+        ></ui-date-picker-calendar>
+      </div>
+      <div id="calendar-variants-heading" class="visually-hidden">Calendar variants demonstration</div>
+      <div id="basic-calendar-help" class="visually-hidden">Basic calendar for single date selection</div>
+      <div id="range-calendar-help" class="visually-hidden">Calendar configured for date range selection</div>
+      <div id="constrained-calendar-help" class="visually-hidden">
+        Calendar with date constraints limiting selectable dates
+      </div>
+      <p class="body-medium">B. Calendar variants</p>
+      <ol class="decimal body-medium">
+        <li>Single date selection</li>
+        <li>Range selection</li>
+        <li>With date constraints</li>
+      </ol>
+    </section>`
+  }
+
+  renderModalDatePickers(): TemplateResult {
+    return html`
+      <section class="demo-section">
+        <h2 class="display-large">Modal Date Pickers</h2>
+        <div class="modal-demo-grid">
+          <article class="modal-demo-item">
+            <h3 class="headline-small">Range Selection Modal</h3>
+            <p class="body-medium">Full-screen modal for selecting date ranges</p>
+            <ui-button @click="${this.openModal}" color="filled" aria-describedby="range-modal-output">
+              Open Date Range Picker
+            </ui-button>
+            <div id="range-modal-output" class="demo-output" role="status" aria-live="polite">
+              Selected range: ${this.formatDateRange(this.selectedRange.start, this.selectedRange.end)}
+            </div>
+          </article>
+
+          <article class="modal-demo-item">
+            <h3 class="headline-small">Single Date Input Modal</h3>
+            <p class="body-medium">Modal with single date input field</p>
+            <ui-button @click="${this.openModalInput}" color="filled" aria-describedby="input-modal-output">
+              Open Single Date Input
+            </ui-button>
+            <div id="input-modal-output" class="demo-output" role="status" aria-live="polite">
+              Selected date: ${this.formatSingleDate(this.selectedDate, 'No date entered')}
+            </div>
+          </article>
+
+          <article class="modal-demo-item">
+            <h3 class="headline-small">Range Input Modal</h3>
+            <p class="body-medium">Modal with date range input fields</p>
+            <ui-button @click="${this.openModalInputRange}" color="filled" aria-describedby="input-range-modal-output">
+              Open Range Date Input
+            </ui-button>
+            <div id="input-range-modal-output" class="demo-output" role="status" aria-live="polite">
+              Selected range:
+              ${this.formatDateRange(this.selectedRange.start, this.selectedRange.end, 'No range entered')}
+            </div>
+          </article>
+        </div>
+      </section>
+    `
+  }
+
+  renderFormIntegration(): TemplateResult {
+    return html`<section class="demo-section">
+      <h2 class="display-large">Form Integration</h2>
+      <div class="frame">
+        <form @submit="${this.handleFormSubmit}" novalidate>
+          <fieldset>
+            <legend class="visually-hidden">Event scheduling form</legend>
+            <div class="form-row">
+              <ui-date-picker-input
+                required
+                label="Event date"
+                placeholder="Select event date"
+                name="event-date"
+                aria-describedby="event-date-help"
+              ></ui-date-picker-input>
+              <div id="event-date-help" class="form-help">Choose the date when the event will take place</div>
+            </div>
+            <div class="form-row">
+              <ui-date-picker-input
+                label="Deadline (optional)"
+                placeholder="Select deadline"
+                name="deadline"
+                .minDate="${this.today}"
+                aria-describedby="deadline-help"
+              ></ui-date-picker-input>
+              <div id="deadline-help" class="form-help">Optional deadline for event preparation</div>
+            </div>
+          </fieldset>
+          <div class="form-actions" role="group" aria-label="Form actions">
+            <ui-button type="submit" color="filled">Submit Form</ui-button>
+            <ui-button type="reset" color="outlined">Reset</ui-button>
+          </div>
+        </form>
+      </div>
+    </section>`
+  }
+
+  renderModalComponents(): TemplateResult {
+    return html`<!-- Modal Components -->
+      <ui-date-picker-modal
+        ?open="${this.modalOpen}"
+        title="Select travel dates"
+        startLabel="Check-in"
+        endLabel="Check-out"
+        @close="${this.handleModalClose}"
+      ></ui-date-picker-modal>
+
+      <ui-date-picker-modal-input
+        ?open="${this.modalInputOpen}"
+        title="Enter date"
+        .rangeMode="${false}"
+        startLabel="Date"
+        @modal-input-close="${this.handleModalInputClose}"
+      ></ui-date-picker-modal-input>
+
+      <ui-date-picker-modal-input
+        ?open="${this.modalInputRangeOpen}"
+        title="Enter date range"
+        .rangeMode="${true}"
+        startLabel="Start date"
+        endLabel="End date"
+        @modal-input-close="${this.handleModalInputRangeClose}"
+      ></ui-date-picker-modal-input>`
+  }
+}
+
+const instance = new DatePickerDemoPage()
+instance.render()

package/demo/md/date-picker/index.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <title>Date Picker Demo</title>
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=calendar_month,arrow_drop_down,check" rel="stylesheet" />
+  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
+  <link href="../../../src/styles/m3/native.css" rel="stylesheet" type="text/css" />
+  <style>
+    .demo-row {
+      margin: 20px 0;
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+
+    .demo .demo-section {
+      max-width: 858px;
+      margin: 0 auto 80px auto;
+      --_row-height: 80px;
+    }
+
+    .demo .demo-section.l {
+      max-width: 1080px;
+      --_row-height: 120px;
+    }
+
+    .demo .demo-section.xl {
+      max-width: 1380px;
+      --_row-height: 180px;
+    }
+
+    .demo h2, .demo h3 {
+      margin-bottom: 36px;
+    }
+
+    ol {
+      padding-left: 0;
+      list-style: none;
+      counter-reset: item;
+    }
+
+    ol > li {
+      margin-top: 4px;
+      margin-bottom: 20px;
+      margin-left: 36px;
+      counter-increment: item;
+      vertical-align: baseline;
+    }
+
+    ol > li:before {
+      display: inline-block;
+      width: 24px;
+      height: 32px;
+      margin-top: -4px;
+      margin-right: 10px;
+      margin-left: -36px;
+      border-radius: 12px;
+      background: var(--md-sys-color-inverse-surface);
+      color: var(--md-sys-color-inverse-on-surface);
+      line-height: 32px;
+      text-align: center;
+    }
+
+    ol.decimal > li:before {
+      content: counter(item, decimal);
+    }
+
+    .variant-grid {
+      display: grid;
+      gap: 24px;
+      grid-template-columns: 80px 1fr 1fr 1fr; 
+      grid-template-rows: auto auto; 
+      justify-items: start; 
+      align-items: center; 
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
+    }
+
+    .modal-demo-grid {
+      display: grid;
+      gap: 24px;
+      grid-template-columns: 1fr 1fr;
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
+    }
+
+    .modal-demo-item {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .config-grid {
+      display: flex;
+      gap: 24px;
+      flex-wrap: wrap;
+    }
+
+    .config-item {
+      display: flex;
+      align-items: center;
+    }
+
+    .checkbox-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    .form-row {
+      margin-bottom: 16px;
+    }
+
+    .form-actions {
+      display: flex;
+      gap: 12px;
+      margin-top: 24px;
+    }
+
+    .demo-output {
+      padding: 12px;
+      background: var(--md-sys-color-surface-container);
+      border-radius: 8px;
+      font-family: monospace;
+      font-size: 12px;
+      color: var(--md-sys-color-on-surface);
+      white-space: pre-wrap;
+      min-height: 40px;
+    }
+
+    .legend-marker {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background-color: var(--md-sys-color-inverse-surface);
+      color: var(--md-sys-color-inverse-on-surface);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .frame {
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
+    }
+
+    @media (max-width: 768px) {
+      .variant-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .modal-demo-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+
+  <script type="module" src="/.tmp/demo/md/date-picker/date-picker.js"></script>
+</body>
+</html>

package/demo/md/index.html

@@ -29,6 +29,8 @@
         <dd>A Material 3 chip.</dd>
         <dt><a href="collapse/collapse.html">collapse</a></dt>
         <dd>An animated collapse element.</dd>
+        <dt><a href="date-picker/index.html">date-picker</a></dt>
+        <dd>A Material 3 date picker element.</dd>
         <dt><a href="dialog/dialog.html">dialog</a></dt>
         <dd>A Material 3 dialog element.</dd>
         <dt><a href="dialog/confirm-dialog.html">confirm-dialog</a></dt>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/elements/currency/currency-picker.ts

@@ -0,0 +1,14 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/Picker.js'
+import elementStyles from './internals/Picker.styles.js'
+
+@customElement('currency-picker')
+export class CurrencyPickerElement extends Element {
+  static override styles = [elementStyles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'currency-picker': CurrencyPickerElement
+  }
+}

package/src/elements/currency/internals/Picker.styles.ts

@@ -0,0 +1,58 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: block;
+    max-width: 600px;
+  }
+
+  .currency-picker {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  md-outlined-select {
+    flex: 1;
+    min-width: 200px;
+  }
+
+  .flag {
+    font-size: 20px;
+    width: 24px;
+    text-align: center;
+  }
+
+  .currency-symbol {
+    color: var(--md-sys-color-primary);
+    font-size: 1rem;
+  }
+
+  /* Error states using ElementInternals */
+  .error {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    margin-top: 4px;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    background: var(--md-sys-color-error-container);
+    color: var(--md-sys-color-on-error-container);
+    border: 1px solid var(--md-sys-color-error);
+  }
+
+  .error-message {
+    font-weight: 500;
+  }
+
+  /* Host error state using ElementInternals validity */
+  :host([data-error]) {
+    --md-outlined-select-outline-color: var(--md-sys-color-error);
+  }
+
+  :host([data-error]) md-outlined-select {
+    --md-outlined-select-focus-outline-color: var(--md-sys-color-error);
+  }
+`