@api-client/ui 0.5.6 → 0.5.7

package/demo/elements/currency/index.ts

@@ -0,0 +1,272 @@
+import { html, TemplateResult } from 'lit'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import reactive from '../../../src/decorators/reactive.js'
+import type { Currency, CurrencyPickerError } from '../../../src/elements/currency/internals/Picker.js'
+
+import '../../../src/elements/currency/currency-picker.js'
+import '../../../src/md/button/ui-button.js'
+import '../../../src/md/checkbox/ui-checkbox.js'
+
+class CurrencyPickerDemoPage extends DemoPage {
+  override accessor componentName = 'Currency Picker'
+
+  @reactive() accessor singleSelected: string[] = []
+  @reactive() accessor multiSelected: string[] = ['USD', 'EUR']
+  @reactive() accessor limitedSelected: string[] = []
+  @reactive() accessor formSelected: string[] = []
+  @reactive() accessor disabledSelected: string[] = ['GBP']
+
+  @reactive() accessor lastChangeEvent = 'No changes yet'
+  @reactive() accessor lastErrorEvent = 'No errors yet'
+
+  private readonly allowedCurrencies = ['USD', 'EUR', 'GBP', 'JPY', 'CAD']
+
+  handleSingleChange(event: CustomEvent<{ currencies: Currency[]; codes: string[] }>): void {
+    this.singleSelected = event.detail.codes
+    this.lastChangeEvent = `Single Select: ${JSON.stringify(event.detail, null, 2)}`
+  }
+
+  handleMultiChange(event: CustomEvent<{ currencies: Currency[]; codes: string[] }>): void {
+    this.multiSelected = event.detail.codes
+    this.lastChangeEvent = `Multi Select: ${JSON.stringify(event.detail, null, 2)}`
+  }
+
+  handleLimitedChange(event: CustomEvent<{ currencies: Currency[]; codes: string[] }>): void {
+    this.limitedSelected = event.detail.codes
+    this.lastChangeEvent = `Limited Currencies: ${JSON.stringify(event.detail, null, 2)}`
+  }
+
+  handleFormChange(event: CustomEvent<{ currencies: Currency[]; codes: string[] }>): void {
+    this.formSelected = event.detail.codes
+    this.lastChangeEvent = `Form Element: ${JSON.stringify(event.detail, null, 2)}`
+  }
+
+  handleError(event: CustomEvent<{ error: CurrencyPickerError }>): void {
+    this.lastErrorEvent = `Error: ${JSON.stringify(event.detail, null, 2)}`
+  }
+
+  handleClearSingle(): void {
+    const picker = document.querySelector('#single-picker') as HTMLElement & { clearSelection(): void }
+    picker?.clearSelection()
+  }
+
+  handleClearMulti(): void {
+    const picker = document.querySelector('#multi-picker') as HTMLElement & { clearSelection(): void }
+    picker?.clearSelection()
+  }
+
+  handleClearLimited(): void {
+    const picker = document.querySelector('#limited-picker') as HTMLElement & { clearSelection(): void }
+    picker?.clearSelection()
+  }
+
+  handleTriggerValidationError(): void {
+    const picker = document.querySelector('#error-demo-picker') as HTMLElement & { selected: string[] }
+    if (picker) {
+      // Try to set invalid currency codes
+      picker.selected = ['INVALID', 'FAKE', 'USD']
+    }
+  }
+
+  handleTriggerSelectionError(): void {
+    const picker = document.querySelector('#single-error-picker') as HTMLElement & { selected: string[] }
+    if (picker) {
+      // Try to set multiple currencies on single-select picker
+      picker.selected = ['USD', 'EUR', 'GBP']
+    }
+  }
+
+  override contentTemplate(): TemplateResult {
+    return html`
+      <section class="demo-section">
+        <h3>Single Currency Selection</h3>
+        <p>Select one currency at a time. When a new currency is selected, it replaces the previous selection.</p>
+
+        <div class="demo-controls">
+          <currency-picker
+            id="single-picker"
+            label="Select Currency"
+            .selected="${this.singleSelected}"
+            @change="${this.handleSingleChange}"
+            @error="${this.handleError}"
+          ></currency-picker>
+        </div>
+
+        <ui-button @click="${this.handleClearSingle}">Clear Selection</ui-button>
+
+        <div class="output-section">
+          <h4>Selected Currency</h4>
+          <div class="output-content">${this.singleSelected.join(', ') || 'None'}</div>
+        </div>
+      </section>
+
+      <section class="demo-section">
+        <h3>Multiple Currency Selection</h3>
+        <p>Select multiple currencies. Selected currencies appear as chips that can be removed individually.</p>
+
+        <div class="demo-controls">
+          <currency-picker
+            id="multi-picker"
+            label="Add Currency"
+            multi
+            .selected="${this.multiSelected}"
+            @change="${this.handleMultiChange}"
+            @error="${this.handleError}"
+          ></currency-picker>
+        </div>
+
+        <ui-button @click="${this.handleClearMulti}">Clear All</ui-button>
+
+        <div class="output-section">
+          <h4>Selected Currencies</h4>
+          <div class="output-content">${this.multiSelected.join(', ') || 'None'}</div>
+        </div>
+      </section>
+
+      <section class="demo-section">
+        <h3>Limited Currency Options</h3>
+        <p>Restrict available currencies to a specific subset using the allowedCurrencies property.</p>
+
+        <div class="demo-controls">
+          <currency-picker
+            id="limited-picker"
+            label="Select from Limited Options"
+            multi
+            .selected="${this.limitedSelected}"
+            .allowedCurrencies="${this.allowedCurrencies}"
+            supportingText="Only major currencies available"
+            @change="${this.handleLimitedChange}"
+            @error="${this.handleError}"
+          ></currency-picker>
+        </div>
+
+        <ui-button @click="${this.handleClearLimited}">Clear Selection</ui-button>
+
+        <div class="output-section">
+          <h4>Available Currencies</h4>
+          <div class="output-content">${this.allowedCurrencies.join(', ')}</div>
+          <h4>Selected Currencies</h4>
+          <div class="output-content">${this.limitedSelected.join(', ') || 'None'}</div>
+        </div>
+      </section>
+
+      <section class="demo-section">
+        <h3>Form Integration</h3>
+        <p>Use the currency picker in forms with proper name and required attributes.</p>
+
+        <form @submit="${this.handleFormSubmit}">
+          <div class="demo-controls">
+            <currency-picker
+              label="Required Currency"
+              name="currency"
+              required
+              .selected="${this.formSelected}"
+              supportingText="This field is required"
+              @change="${this.handleFormChange}"
+              @error="${this.handleError}"
+            ></currency-picker>
+          </div>
+
+          <ui-button type="submit">Submit Form</ui-button>
+          <ui-button color="text" type="reset">Reset Form</ui-button>
+        </form>
+
+        <div class="output-section">
+          <h4>Form Value</h4>
+          <div class="output-content">${this.formSelected.join(', ') || 'None'}</div>
+        </div>
+      </section>
+
+      <section class="demo-section">
+        <h3>Disabled State</h3>
+        <p>Currency picker in disabled state with pre-selected currencies.</p>
+
+        <div class="demo-controls">
+          <currency-picker
+            label="Disabled Picker"
+            disabled
+            .selected="${this.disabledSelected}"
+            supportingText="This picker is disabled"
+          ></currency-picker>
+        </div>
+
+        <div class="output-section">
+          <h4>Disabled Selection</h4>
+          <div class="output-content">${this.disabledSelected.join(', ')}</div>
+        </div>
+      </section>
+
+      <section class="demo-section">
+        <h3>Error Handling Demonstration</h3>
+        <p>Test various error scenarios to see how the component handles and displays errors.</p>
+
+        <h4>Validation Errors</h4>
+        <p>This picker demonstrates validation errors when invalid currency codes are set programmatically.</p>
+
+        <div class="demo-controls">
+          <currency-picker
+            id="error-demo-picker"
+            label="Validation Error Demo"
+            multi
+            @error="${this.handleError}"
+          ></currency-picker>
+        </div>
+
+        <ui-button @click="${this.handleTriggerValidationError}">Trigger Validation Error</ui-button>
+
+        <h4>Selection Constraint Errors</h4>
+        <p>This single-select picker demonstrates selection constraint errors.</p>
+
+        <div class="demo-controls">
+          <currency-picker
+            id="single-error-picker"
+            label="Single Select Error Demo"
+            @error="${this.handleError}"
+          ></currency-picker>
+        </div>
+
+        <ui-button @click="${this.handleTriggerSelectionError}">Trigger Selection Error</ui-button>
+
+        <div class="output-section">
+          <h4>Error Event Output</h4>
+          <div class="output-content">${this.lastErrorEvent}</div>
+        </div>
+      </section>
+
+      <section class="demo-section">
+        <h3>Event Output</h3>
+        <p>View the latest change event data in real-time.</p>
+
+        <div class="output-section">
+          <h4>Last Change Event</h4>
+          <div class="output-content">${this.lastChangeEvent}</div>
+        </div>
+      </section>
+
+      <section class="demo-section">
+        <h3>Error Handling</h3>
+        <p>View the latest error event data in real-time.</p>
+
+        <div class="output-section">
+          <h4>Last Error Event</h4>
+          <div class="output-content">${this.lastErrorEvent}</div>
+        </div>
+      </section>
+    `
+  }
+
+  private handleFormSubmit(event: Event): void {
+    event.preventDefault()
+    const formData = new FormData(event.target as HTMLFormElement)
+    console.log('Form submitted:', Object.fromEntries(formData.entries()))
+
+    if (this.formSelected.length === 0) {
+      alert('Please select a currency before submitting the form.')
+    } else {
+      alert(`Form submitted with currency: ${this.formSelected.join(', ')}`)
+    }
+  }
+}
+
+const instance = new CurrencyPickerDemoPage()
+instance.render()

package/demo/elements/index.html

@@ -27,6 +27,9 @@
 
         <dt><a href="context-menu/index.html">Context menu</a></dt>
         <dd>An element that render a context menu.</dd>
+
+        <dt><a href="currency/index.html">Currency picker</a></dt>
+        <dd>A component for selecting currencies with chips display.</dd>
         
         <dt><a href="environment/index.html">Environment</a></dt>
         <dd>The environment elements library.</dd>

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

@@ -8,12 +8,11 @@ import '../../../src/md/button/ui-button.js'
 class DatePickerDemoPage extends DemoPage {
   override accessor componentName = 'Date Picker'
 
-  @reactive() accessor rangeMode = false
-  @reactive() accessor showConstraints = false
   @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 {
@@ -32,16 +31,6 @@ class DatePickerDemoPage extends DemoPage {
     return date
   }
 
-  handleRangeModeChange(e: Event): void {
-    const checkbox = e.target as HTMLInputElement
-    this.rangeMode = checkbox.checked
-  }
-
-  handleConstraintsChange(e: Event): void {
-    const checkbox = e.target as HTMLInputElement
-    this.showConstraints = checkbox.checked
-  }
-
   handleDateChange(e: CustomEvent): void {
     this.selectedDate = e.detail.value
   }
@@ -70,6 +59,10 @@ class DatePickerDemoPage extends DemoPage {
     this.modalInputOpen = true
   }
 
+  openModalInputRange(): void {
+    this.modalInputRangeOpen = true
+  }
+
   handleModalClose(e: CustomEvent): void {
     this.modalOpen = false
     if (e.detail.confirmed && e.detail.range) {
@@ -79,15 +72,27 @@ class DatePickerDemoPage extends DemoPage {
 
   handleModalInputClose(e: CustomEvent): void {
     this.modalInputOpen = false
-    if (e.detail.confirmed) {
-      if (this.rangeMode && e.detail.range) {
-        this.selectedRange = e.detail.range
-      } else if (!this.rangeMode && e.detail.date) {
-        this.selectedDate = e.detail.date
-      }
+    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
@@ -98,14 +103,16 @@ class DatePickerDemoPage extends DemoPage {
 
   contentTemplate(): TemplateResult {
     return html`
-      <a href="../">Back</a>
-      ${this.renderConfigurationSection()} ${this.renderInputs()} ${this.renderCalendars()}
-      ${this.renderModalDatePickers()} ${this.renderFormIntegration()} ${this.renderModalComponents()}
+      <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>
+              <output role="status" aria-live="polite" aria-label="Form submission result">
                 <code><pre>${this.formValues}</pre></code>
               </output>
             </section>
@@ -115,10 +122,9 @@ class DatePickerDemoPage extends DemoPage {
   }
 
   renderInputs(): TemplateResult {
-    const { showConstraints: sc } = this
     return html`<section class="demo-section">
       <h2 class="display-large">Date Picker Input</h2>
-      <div class="variant-grid">
+      <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>
@@ -128,24 +134,40 @@ class DatePickerDemoPage extends DemoPage {
         <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="Constrained input"
+          label="With constraints"
           placeholder="Select date"
-          .minDate="${sc ? this.today : undefined}"
-          .maxDate="${sc ? this.oneMonthFromNow : undefined}"
+          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>
-        <ui-date-picker-input label="Disabled input" placeholder="Select date" disabled></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</li>
-        <li>With constraints</li>
-        <li>Disabled / Range selection</li>
+        <li>Basic input</li>
+        <li>With date constraints</li>
+        <li>Disabled state</li>
       </ol>
     </section>`
   }
@@ -153,7 +175,7 @@ class DatePickerDemoPage extends DemoPage {
   renderCalendars(): TemplateResult {
     return html`<section class="demo-section xl">
       <h2 class="display-large">Date Picker Calendar</h2>
-      <div class="variant-grid">
+      <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>
@@ -163,65 +185,82 @@ class DatePickerDemoPage extends DemoPage {
         <ui-date-picker-calendar
           showActions
           .selectedDate="${this.selectedDate}"
-          @date-confirm="${this.handleDateConfirm}"
+          @date-select="${this.handleDateConfirm}"
           @date-cancel="${this.handleDateCancel}"
+          aria-describedby="basic-calendar-help"
         ></ui-date-picker-calendar>
         <ui-date-picker-calendar
           showActions
-          ?rangeSelection="${true}"
-          .selectedRange="${this.selectedRange}"
+          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-confirm="${this.handleDateConfirm}"
+          @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>Basic</li>
-        <li>With constraints</li>
-        <li>Disabled / Range selection</li>
+        <li>Single date selection</li>
+        <li>Range selection</li>
+        <li>With date constraints</li>
       </ol>
     </section>`
   }
 
   renderModalDatePickers(): TemplateResult {
-    const { rangeMode: rm } = this
     return html`
       <section class="demo-section">
         <h2 class="display-large">Modal Date Pickers</h2>
         <div class="modal-demo-grid">
-          <div class="modal-demo-item">
+          <article class="modal-demo-item">
             <h3 class="headline-small">Range Selection Modal</h3>
-            <ui-button @click="${this.openModal}" color="filled">Open Date Range Picker</ui-button>
-            <div class="demo-output">
-              ${this.selectedRange.start && this.selectedRange.end
-                ? html`Range: ${this.selectedRange.start.toDateString()} - ${this.selectedRange.end.toDateString()}`
-                : 'No range selected'}
+            <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>
-          </div>
+          </article>
 
-          <div class="modal-demo-item">
-            <h3 class="headline-small">Input Modal</h3>
-            <ui-button @click="${this.openModalInput}" color="filled">
-              Open ${rm ? 'Range' : 'Single'} Date Input
+          <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 class="demo-output">
-              ${rm
-                ? this.selectedRange.start && this.selectedRange.end
-                  ? html`Range: ${this.selectedRange.start.toDateString()} - ${this.selectedRange.end.toDateString()}`
-                  : 'No range entered'
-                : this.selectedDate
-                  ? html`Date: ${this.selectedDate.toDateString()}`
-                  : 'No date entered'}
+            <div id="input-modal-output" class="demo-output" role="status" aria-live="polite">
+              Selected date: ${this.formatSingleDate(this.selectedDate, 'No date entered')}
             </div>
-          </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>
     `
@@ -231,21 +270,33 @@ class DatePickerDemoPage extends DemoPage {
     return html`<section class="demo-section">
       <h2 class="display-large">Form Integration</h2>
       <div class="frame">
-        <form @submit="${this.handleFormSubmit}">
-          <div class="form-row">
-            <ui-date-picker-input required label="Event date" placeholder="Select event date"></ui-date-picker-input>
-          </div>
-          <div class="form-row">
-            <ui-date-picker-input
-              label="Deadline (optional)"
-              placeholder="Select deadline"
-              .minDate="${this.today}"
-              required
-            ></ui-date-picker-input>
-          </div>
-          <div class="form-actions">
-            <ui-button type="submit" color="filled" type="submit">Submit Form</ui-button>
-            <ui-button type="reset" color="outlined" type="reset">Reset</ui-button>
+        <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>
@@ -253,7 +304,6 @@ class DatePickerDemoPage extends DemoPage {
   }
 
   renderModalComponents(): TemplateResult {
-    const { rangeMode: rm } = this
     return html`<!-- Modal Components -->
       <ui-date-picker-modal
         ?open="${this.modalOpen}"
@@ -265,35 +315,20 @@ class DatePickerDemoPage extends DemoPage {
 
       <ui-date-picker-modal-input
         ?open="${this.modalInputOpen}"
-        title="${rm ? 'Enter date range' : 'Enter date'}"
-        .rangeMode="${rm}"
-        startLabel="${rm ? 'Start date' : 'Date'}"
-        endLabel="${rm ? 'End date' : ''}"
+        title="Enter date"
+        .rangeMode="${false}"
+        startLabel="Date"
         @modal-input-close="${this.handleModalInputClose}"
-      ></ui-date-picker-modal-input>`
-  }
+      ></ui-date-picker-modal-input>
 
-  renderConfigurationSection(): TemplateResult {
-    const { rangeMode: rm, showConstraints: sc } = this
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Configuration</h2>
-        <div class="config-grid">
-          <div class="config-item">
-            <label class="checkbox-label">
-              <input type="checkbox" .checked="${rm}" @change="${this.handleRangeModeChange}" />
-              Range selection mode
-            </label>
-          </div>
-          <div class="config-item">
-            <label class="checkbox-label">
-              <input type="checkbox" .checked="${sc}" @change="${this.handleConstraintsChange}" />
-              Show date constraints
-            </label>
-          </div>
-        </div>
-      </section>
-    `
+      <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>`
   }
 }
 

package/package.json

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