@api-client/ui 0.5.38 → 0.5.40

package/demo/md/dropdown-list/index.ts

@@ -1,158 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { reactive } from '../../../src/decorators/index.js'
-import { HorizontalAlignment, VerticalAlignment } from '../../../src/lib/ElementPositioning.js'
-import '../../../src/md/dropdown-list/ui-dropdown-list.js'
-import '../../../src/md/list/ui-list.js'
-import '../../../src/md/list/ui-list-item.js'
-import '../../../src/md/icon-button/ui-icon-button.js'
-import '../../../src/md/icons/ui-icon.js'
-import '../../../src/md/button/ui-button.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI dropdown list'
-
-  @reactive() accessor list1Selected: string | undefined
-
-  @reactive() accessor list2Selected: string | undefined
-
-  @reactive() accessor list3Selected: string | undefined
-
-  @reactive() accessor verticalAlign: VerticalAlignment | undefined
-
-  @reactive() accessor horizontalAlign: HorizontalAlignment | undefined
-
-  @reactive() accessor noOverlap: boolean | undefined
-
-  list1SelectHandler(e: CustomEvent): void {
-    const target = e.detail.item as HTMLElement | undefined
-    if (!target) {
-      return
-    }
-    this.list1Selected = target.dataset.item as string
-  }
-
-  list2SelectHandler(e: CustomEvent): void {
-    const target = e.detail.item as HTMLElement | undefined
-    if (!target) {
-      return
-    }
-    this.list2Selected = target.dataset.item
-  }
-
-  list3SelectHandler(e: CustomEvent): void {
-    const target = e.detail.item as HTMLElement | undefined
-    if (!target) {
-      return
-    }
-    this.list3Selected = target.dataset.item
-  }
-
-  noOverlapHandler(e: Event): void {
-    const input = e.target as HTMLInputElement
-    this.noOverlap = input.checked
-  }
-
-  verticalHandler(e: Event): void {
-    const target = e.target as HTMLSelectElement
-    if (target.value) {
-      this.verticalAlign = target.value as VerticalAlignment
-    } else {
-      this.verticalAlign = undefined
-    }
-  }
-
-  horizontalHandler(e: Event): void {
-    const target = e.target as HTMLSelectElement
-    if (target.value) {
-      this.horizontalAlign = target.value as HorizontalAlignment
-    } else {
-      this.horizontalAlign = undefined
-    }
-  }
-
-  contentTemplate(): TemplateResult {
-    const { list1Selected, list2Selected, list3Selected, verticalAlign, horizontalAlign, noOverlap } = this
-    return html`
-      <a href="../">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">Icon button list</h2>
-
-        <div class="demo-row">
-          <ui-dropdown-list @select="${this.list1SelectHandler}">
-            <ui-icon-button aria-label="Trigger the menu"><ui-icon icon="moreVert"></ui-icon></ui-icon-button>
-            <ui-list slot="dropdown" role="menu">
-              <ui-list-item role="menuitem" data-item="item 1">Item 1</ui-list-item>
-              <ui-list-item role="menuitem" data-item="item 2">Item 2</ui-list-item>
-              <ui-list-item role="menuitem" data-item="item 3">Item 3</ui-list-item>
-              <ui-list-item role="menuitem" data-item="item 4">Item 4</ui-list-item>
-            </ui-list>
-          </ui-dropdown-list>
-          <p>Last selected: ${list1Selected || 'none'}</p>
-        </div>
-
-        <h2 class="title-large">Button list</h2>
-
-        <div class="demo-row">
-          <ui-dropdown-list @select="${this.list2SelectHandler}">
-            <ui-button color="outlined">Click me</ui-button>
-            <ui-list slot="dropdown" role="menu">
-              <ui-list-item role="menuitem" data-item="item 1">Item 1</ui-list-item>
-              <ui-list-item role="menuitem" data-item="item 2">Item 2</ui-list-item>
-              <ui-list-item role="menuitem" data-item="item 3">Item 3</ui-list-item>
-              <ui-list-item role="menuitem" data-item="item 4">Item 4</ui-list-item>
-            </ui-list>
-          </ui-dropdown-list>
-          <p>Last selected: ${list2Selected || 'none'}</p>
-        </div>
-
-        <h2 class="title-large">A list in an <code>overflow: hidden</code> element</h2>
-
-        <div class="demo-row">
-          <div class="button-in-lists">
-            <ui-dropdown-list
-              @select="${this.list3SelectHandler}"
-              .verticalAlign="${verticalAlign}"
-              .horizontalAlign="${horizontalAlign}"
-              ?noOverlap="${noOverlap}"
-            >
-              <ui-icon-button aria-label="Trigger the menu"><ui-icon icon="moreVert"></ui-icon></ui-icon-button>
-              <ui-list slot="dropdown" role="menu">
-                <ui-list-item role="menuitem" data-item="item 1">Item 1</ui-list-item>
-                <ui-list-item role="menuitem" data-item="item 2">Item 2</ui-list-item>
-                <ui-list-item role="menuitem" data-item="item 3">Item 3</ui-list-item>
-                <ui-list-item role="menuitem" data-item="item 4">Item 4</ui-list-item>
-              </ui-list>
-            </ui-dropdown-list>
-          </div>
-          <label for="verticalAlign">Vertical align</label>
-          <select id="verticalAlign" @change="${this.verticalHandler}">
-            <option value="">None</option>
-            <option value="top">Top</option>
-            <option value="bottom">Bottom</option>
-            <option value="middle">Middle</option>
-            <option value="auto">Auto</option>
-          </select>
-          <label for="horizontalAlign">Horizontal align</label>
-          <select id="horizontalAlign" @change="${this.horizontalHandler}">
-            <option value="">None</option>
-            <option value="left">Left</option>
-            <option value="right">Right</option>
-            <option value="middle">Middle</option>
-            <option value="auto">Auto</option>
-          </select>
-
-          <label>
-            <input type="checkbox" name="noOverlap" @change="${this.noOverlapHandler}" />
-            No overlap
-          </label>
-
-          <p>Last selected: ${list3Selected || 'none'}</p>
-        </div>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/md/icon-button/index.html

@@ -1,122 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
-  <title>UI icon button</title>
-  <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" 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);
-    }
-
-    .color-grid,
-    .state-grid {
-      display: grid;
-      gap: 0 0;
-      justify-items: center; 
-      align-items: center; 
-
-      padding: 40px;
-      border-radius: 20px;
-      border: 1px var(--md-sys-color-outline) solid;
-    }
-
-    .color-grid {
-      grid-template-columns: 80px 1fr 1fr 1fr; 
-      grid-template-rows: var(--_row-height) var(--_row-height) var(--_row-height) var(--_row-height) var(--_row-height); 
-      
-    }
-
-    .state-grid {
-      grid-template-columns: 80px 1fr 1fr 1fr; 
-      grid-template-rows: var(--_row-height) var(--_row-height);
-    }
-
-    .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;
-    }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/md/icon-button/index.js"></script>
-</body>
-</html>

package/demo/md/icon-button/index.ts

@@ -1,132 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import IconButtonElement, { type MdIconButtonWidth } from '../../../src/md/icon-button/internals/IconButton.js'
-import reactive from '../../../src/decorators/reactive.js'
-import type { MdButtonSize, MdButtonShape } from '../../../src/md/button/internals/base.js'
-
-import '../../../src/md/icon-button/ui-icon-button.js'
-import '../../../src/md/icons/ui-icon.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI icon button'
-
-  @reactive() accessor size: MdButtonSize = 's'
-
-  @reactive() accessor shape: MdButtonShape = 'round'
-
-  @reactive() accessor width: MdIconButtonWidth = 'default'
-
-  _clickHandler(e: Event): void {
-    const button = e.target as IconButtonElement
-    console.log(`A ${button.localName} button was clicked.`)
-  }
-
-  _activeHandler(e: Event): void {
-    const button = e.target as IconButtonElement
-    console.log(`A ${button.localName} button was ${button.selected ? 'activated' : 'deactivated'}`)
-  }
-
-  handleSizeChange(e: Event): void {
-    const select = e.target as HTMLSelectElement
-    this.size = select.value as MdButtonSize
-  }
-
-  handleShapeChange(e: Event): void {
-    const select = e.target as HTMLSelectElement
-    this.shape = select.value as MdButtonShape
-  }
-
-  handleWidthChange(e: Event): void {
-    const select = e.target as HTMLSelectElement
-    this.width = select.value as MdIconButtonWidth
-  }
-
-  readonly icon = html`<ui-icon>settings</ui-icon>`
-
-  contentTemplate(): TemplateResult {
-    const { size: s, shape: h, icon: i, width: w } = this
-    return html`
-      <a href="../">Back</a>
-      ${this.renderConfigurationSection()}
-      <section class="demo-section ${s}">
-        <h2 class="display-large">Color</h2>
-        <div class="color-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-icon-button color="filled" .size="${s}" .shape="${h}" .width="${w}">${i}</ui-icon-button>
-          <ui-icon-button color="filled" .size="${s}" .shape="${h}" .width="${w}" toggle>${i}</ui-icon-button>
-          <ui-icon-button color="filled" .size="${s}" .shape="${h}" .width="${w}" toggle selected>${i}</ui-icon-button>
-          <span class="legend-marker">B</span>
-          <ui-icon-button color="tonal" .size="${s}" .shape="${h}" .width="${w}">${i}</ui-icon-button>
-          <ui-icon-button color="tonal" .size="${s}" .shape="${h}" .width="${w}" toggle>${i}</ui-icon-button>
-          <ui-icon-button color="tonal" .size="${s}" .shape="${h}" .width="${w}" toggle selected>${i}</ui-icon-button>
-          <span class="legend-marker">C</span>
-          <ui-icon-button color="outlined" .size="${s}" .shape="${h}" .width="${w}">${i}</ui-icon-button>
-          <ui-icon-button color="outlined" .size="${s}" .shape="${h}" .width="${w}" toggle>${i}</ui-icon-button>
-          <ui-icon-button color="outlined" .size="${s}" .shape="${h}" .width="${w}" toggle selected
-            >${i}</ui-icon-button
-          >
-          <span class="legend-marker">D</span>
-          <ui-icon-button .size="${s}" .shape="${h}" .width="${w}">${i}</ui-icon-button>
-          <ui-icon-button .size="${s}" .shape="${h}" .width="${w}" toggle>${i}</ui-icon-button>
-          <ui-icon-button .size="${s}" .shape="${h}" .width="${w}" toggle selected>${i}</ui-icon-button>
-        </div>
-        <p class="body-medium">A. Filled, B. Tonal, C. Outlined, D. Standard</p>
-        <ol class="decimal body-medium">
-          <li>Default</li>
-          <li>Toggle: unselected</li>
-          <li>Toggle: selected</li>
-        </ol>
-      </section>
-    `
-  }
-
-  renderConfigurationSection(): TemplateResult {
-    const { size: s, shape: h, width: w } = this
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Configuration</h2>
-        <div class="md-select outlined">
-          <label for="size">Size</label>
-          <select class="md-select" id="size" @change="${this.handleSizeChange}" name="size" .value="${s}">
-            <button>
-              <selectedcontent></selectedcontent>
-            </button>
-            <option value="xs">Extra small</option>
-            <option value="s">Small</option>
-            <option value="m">Medium</option>
-            <option value="l">Large</option>
-            <option value="xl">Extra large</option>
-          </select>
-        </div>
-        <div class="md-select outlined">
-          <label for="shape">Shape</label>
-          <select id="shape" @change="${this.handleShapeChange}" name="shape" .value="${h}">
-            <button>
-              <selectedcontent></selectedcontent>
-            </button>
-            <option value="round">Round</option>
-            <option value="square">Square</option>
-          </select>
-        </div>
-        <div class="md-select outlined">
-          <label for="width">Width</label>
-          <select id="width" @change="${this.handleWidthChange}" name="width" .value="${w}">
-            <button>
-              <selectedcontent></selectedcontent>
-            </button>
-            <option value="default">Default</option>
-            <option value="narrow">Narrow</option>
-            <option value="wide">Wide</option>
-          </select>
-        </div>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/md/index.html

@@ -1,73 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <title>API Client UI</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" />
-  <link href="../page.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-  <main>
-    <h1>The base UI components library</h1>
-    <a href="../">Back</a>
-    <nav>
-      <h2>Elements</h2>
-      <dl>
-        <dt><a href="buttons/button.html">button</a></dt>
-        <dd>A Material 3 button.</dd>
-        <dt><a href="buttons/group.html">button group</a></dt>
-        <dd>A Material 3 button group.</dd>
-        <dt><a href="checkbox/index.html">checkbox</a></dt>
-        <dd>A Material 3 checkbox.</dd>
-        <dt><a href="chip/chip.html">chip</a></dt>
-        <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>
-        <dd>A Material 3 confirm-dialog element.</dd>
-        <dt><a href="dropdown-list/index.html">dropdown-list</a></dt>
-        <dd>A Material 3 dropdown-list.</dd>
-        <dt><a href="icon-button/index.html">icon-button</a></dt>
-        <dd>A Material 3 icon button.</dd>
-        <dt><a href="list/list.html">list</a></dt>
-        <dd>A Material 3 list and list item.</dd>
-        <dt><a href="dropdown-list/index.html">dropdown-list</a></dt>
-        <dd>A Material 3 dropdown-list.</dd>
-        <dt><a href="listbox/listbox.html">listbox</a></dt>
-        <dd>A Material 3 listbox.</dd>
-        <dt><a href="menu/index.html">menu</a></dt>
-        <dd>A Material 3 menu.</dd>
-        <dt><a href="select/index.html">select</a></dt>
-        <dd>A Material 3 select.</dd>
-        <dt><a href="inputs/switch.html">switch</a></dt>
-        <dd>A Material 3 switch.</dd>
-
-        <dt><a href="progress/progress.html">progress</a></dt>
-        <dd>A Material 3 progress element.</dd>
-        
-        
-        <dt><a href="inputs/input.html">Text field</a></dt>
-        <dd>A Material 3 text field and text area.</dd>
-        <dt><a href="notification/snack.html">snackbar</a></dt>
-        <dd>A Material 3 snackbar notification.</dd>
-        <dt><a href="segmented-button/index.html">segmented-button</a></dt>
-        <dd>A Material 3 segmented buttons.</dd>
-        <dt><a href="inputs/radio.html">radio</a></dt>
-        <dd>A Material 3 radio input.</dd>
-        <dt><a href="tabs/tabs.html">tabs</a></dt>
-        <dd>A Material 3 tabs.</dd>
-      </dl>
-    </nav>
-  </main>
-</body>
-</html>

package/demo/md/inputs/input.html

@@ -1,73 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>UI text field</title>
-  <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 {
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-    }
-
-    .input-compare {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(1, 1fr);
-      gap: 8px;;
-    }
-
-    .demo-row {
-      margin: 20px 0;
-    }
-
-    .demo .demo-section {
-      max-width: 858px;
-      margin: 0 auto 80px auto;
-    }
-
-    .demo h2, .demo h3 {
-      margin-bottom: 36px;
-    }
-
-    .frame {
-      padding: 40px;
-      border-radius: 20px;
-      border: 1px var(--md-sys-color-outline) solid;
-    }
-
-    .demo-grid {
-      grid-template-columns: 160px 1fr 1fr;
-      display: grid;
-      gap: 0 0;
-      justify-items: center; 
-      align-items: center;
-      grid-template-rows: 40px repeat(auto-fit, minmax(80px, 1fr));
-      grid-auto-rows: 80px;
-
-      padding: 40px;
-      border-radius: 20px;
-      border: 1px var(--md-sys-color-outline) solid;
-    }
-
-    .row-name {
-      justify-self: end;
-      text-align: right;
-    }
-
-    ui-filled-text-field,
-    ui-outlined-text-field {
-      max-width: 240px;
-    }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/md/inputs/input.js"></script>
-</body>
-</html>