@api-client/ui 0.5.5 → 0.5.6

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

@@ -0,0 +1,301 @@
+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 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 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
+  }
+
+  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
+  }
+
+  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
+  }
+
+  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) {
+      if (this.rangeMode && e.detail.range) {
+        this.selectedRange = e.detail.range
+      } else if (!this.rangeMode && e.detail.date) {
+        this.selectedDate = e.detail.date
+      }
+    }
+  }
+
+  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`
+      <a href="../">Back</a>
+      ${this.renderConfigurationSection()} ${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>
+                <code><pre>${this.formValues}</pre></code>
+              </output>
+            </section>
+          `
+        : ''}
+    `
+  }
+
+  renderInputs(): TemplateResult {
+    const { showConstraints: sc } = this
+    return html`<section class="demo-section">
+      <h2 class="display-large">Date Picker Input</h2>
+      <div class="variant-grid">
+        <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"
+          .value="${this.selectedDate}"
+          @change="${this.handleDateChange}"
+        ></ui-date-picker-input>
+        <ui-date-picker-input
+          label="Constrained input"
+          placeholder="Select date"
+          .minDate="${sc ? this.today : undefined}"
+          .maxDate="${sc ? this.oneMonthFromNow : undefined}"
+          .value="${this.selectedDate}"
+          @change="${this.handleDateChange}"
+        ></ui-date-picker-input>
+        <ui-date-picker-input label="Disabled input" placeholder="Select date" disabled></ui-date-picker-input>
+      </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>
+      </ol>
+    </section>`
+  }
+
+  renderCalendars(): TemplateResult {
+    return html`<section class="demo-section xl">
+      <h2 class="display-large">Date Picker Calendar</h2>
+      <div class="variant-grid">
+        <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-confirm="${this.handleDateConfirm}"
+          @date-cancel="${this.handleDateCancel}"
+        ></ui-date-picker-calendar>
+        <ui-date-picker-calendar
+          showActions
+          ?rangeSelection="${true}"
+          .selectedRange="${this.selectedRange}"
+          @date-range-confirm="${this.handleRangeConfirm}"
+          @date-cancel="${this.handleDateCancel}"
+        ></ui-date-picker-calendar>
+        <ui-date-picker-calendar
+          showActions
+          .minDate="${this.today}"
+          .maxDate="${this.oneMonthFromNow}"
+          .selectedDate="${this.selectedDate}"
+          @date-confirm="${this.handleDateConfirm}"
+          @date-cancel="${this.handleDateCancel}"
+        ></ui-date-picker-calendar>
+      </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>
+      </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">
+            <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'}
+            </div>
+          </div>
+
+          <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
+            </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>
+          </div>
+        </div>
+      </section>
+    `
+  }
+
+  renderFormIntegration(): TemplateResult {
+    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>
+          </div>
+        </form>
+      </div>
+    </section>`
+  }
+
+  renderModalComponents(): TemplateResult {
+    const { rangeMode: rm } = this
+    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="${rm ? 'Enter date range' : 'Enter date'}"
+        .rangeMode="${rm}"
+        startLabel="${rm ? 'Start date' : 'Date'}"
+        endLabel="${rm ? 'End date' : ''}"
+        @modal-input-close="${this.handleModalInputClose}"
+      ></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>
+    `
+  }
+}
+
+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.6",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/elements/highlight/MarkdownStyles.ts

@@ -1,17 +1,4 @@
 /**
-@license
-Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
-*/
-/**
 ## Styles for markdown viewer
 
 It should be included where the `marked-highlight` is used.

package/src/elements/http/BodyEditor.ts

@@ -1,16 +1,3 @@
-/**
-@license
-Copyright 2020 The Advanced REST client authors <arc@mulesoft.com>
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
-*/
 import { html, TemplateResult, PropertyValues, nothing } from 'lit'
 import { property, query } from 'lit/decorators.js'
 import type { IBodyMetaModel, IRawBody, IUrlEncodedBodyMeta } from '@api-client/core/models/RequestUiMeta.js'

package/src/elements/http/BodyTextEditor.ts

@@ -1,17 +1,4 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-/**
-@license
-Copyright 2018 The Advanced REST client authors <arc@mulesoft.com>
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
-*/
 import { html, nothing, TemplateResult } from 'lit'
 import { property, query } from 'lit/decorators.js'
 // import * as monaco from 'monaco-editor'; // /esm/vs/editor/editor.main.js

package/src/elements/http/BodyUrlEncodedEditor.ts

@@ -1,16 +1,3 @@
-/**
-@license
-Copyright 2020 The Advanced REST client authors <arc@mulesoft.com>
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
-*/
 import { html, TemplateResult, PropertyValues, nothing } from 'lit'
 import { property } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'

package/src/elements/http/UrlInput.ts

@@ -1,16 +1,3 @@
-/**
- @license
-Copyright 2018 The Advanced REST client authors <arc@mulesoft.com>
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
-*/
 import { html, TemplateResult } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
 import { StyleInfo, styleMap } from 'lit/directives/style-map.js'

package/src/index.ts

@@ -9,6 +9,23 @@ export { default as Menu } from './md/menu/internal/Menu.js'
 export { default as MenuItem } from './md/menu/internal/MenuItem.js'
 export { default as SubMenu } from './md/menu/internal/SubMenu.js'
 
+// Date Picker Components
+export {
+  UiDatePickerCalendar,
+  UiDatePickerInput,
+  UiDatePickerModal,
+  UiDatePickerModalInput,
+} from './md/date-picker/index.js'
+export type {
+  DateRange,
+  CalendarDay,
+  CalendarMonth,
+  DateSelectEvent,
+  DateRangeSelectEvent,
+  ModalDatePickerChangeEvent,
+  ModalInputDatePickerChangeEvent,
+} from './md/date-picker/index.js'
+
 // Demo
 export { DemoPage } from './demo/DemoPage.js'
 

package/src/md/button/internals/button.styles.ts

@@ -269,7 +269,7 @@ export default css`
 
   /* Outlined Button */
   :host([color='outlined']) {
-    border: 1px var(--md-sys-color-outline-variant) solid;
+    border: 1px var(--md-button-outline-color, var(--md-sys-color-outline-variant)) solid;
     --_color: var(--md-sys-color-on-surface-variant);
   }
 

package/src/md/date/internals/DateTime.ts

@@ -1,17 +1,3 @@
-/**
-@license
-Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
-*/
-
 export type DateTimeTextOptions = 'long' | 'short' | 'narrow'
 export type DateTimeNumberOptions = 'numeric' | '2-digit'
 export type DateTimeTimezoneOptions = 'long' | 'short'