@api-client/ui 0.5.39 → 0.5.41

package/demo/md/collapse/collapse.ts

@@ -1,78 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import './CustomDetail.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI collapse'
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-
-      <section class="demo-section">
-        <h2 class="title-large">Basic</h2>
-        <custom-detail>
-          <div class="content">
-            Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis
-            incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est.
-            Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos
-            reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem ipsum dolor
-            sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo.
-            Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum
-            petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique
-            neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
-          </div>
-        </custom-detail>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Nested, horizontal expand</h2>
-        <custom-detail>
-          <div class="content">
-            <div>
-              Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis
-              incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est.
-              Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu
-              torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem
-              ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis
-              incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est.
-              Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu
-              torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
-            </div>
-            <custom-detail horizontal>
-              <div class="content">
-                Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis
-                incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani
-                est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu
-                torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem
-                ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis
-                incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani
-                est. Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu
-                torquatos reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
-              </div>
-            </custom-detail>
-          </div>
-        </custom-detail>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">No animation</h2>
-        <custom-detail noanimation>
-          <div class="content">
-            Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis
-            incorrupte duo. Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est.
-            Vix ad ponderum petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos
-            reprimique neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus. Lorem ipsum dolor
-            sit amet, per in nusquam nominavi periculis, sit elit oportere ea, id minim maiestatis incorrupte duo.
-            Dolorum verterem ad ius, his et nullam verterem. Eu alia debet usu, an doming tritani est. Vix ad ponderum
-            petentium suavitate, eum eu tempor populo, graece sententiae constituam vim ex. Cu torquatos reprimique
-            neglegentur nec, voluptua periculis has ut, at eos discere deleniti sensibus.
-          </div>
-        </custom-detail>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

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

@@ -1,336 +0,0 @@
-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

@@ -1,171 +0,0 @@
-<!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/dialog/confirm-dialog.html

@@ -1,49 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <title>UI Confirm Dialog 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="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <style>
-    .demo-section {
-      margin: 40px 0;
-      padding: 24px;
-      border: 1px solid var(--md-sys-color-outline);
-      border-radius: 8px;
-    }
-    
-    .demo-section h2 {
-      margin-top: 0;
-      color: var(--md-sys-color-on-surface);
-    }
-    
-    .demo-section p {
-      margin-bottom: 20px;
-      color: var(--md-sys-color-on-surface-variant);
-    }
-    
-    .button-group {
-      display: flex;
-      gap: 12px;
-      flex-wrap: wrap;
-    }
-    
-    .result {
-      margin-top: 20px;
-      padding: 12px;
-      background: var(--md-sys-color-surface-variant);
-      border-radius: 4px;
-      font-family: monospace;
-      color: var(--md-sys-color-on-surface-variant);
-    }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-  
-  <script type="module" src="/.tmp/demo/md/dialog/confirm-dialog.js"></script>
-</body>
-</html>